feat(flags-hackathon): Encrypted payloads on remote config feature flags

frontend/src/scenes/feature-flags/FeatureFlag.tsx

@@ -745,6 +745,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
         recordingFilterForFlag,
         flagStatus,
         flagType,
+        flagTypeString,
+        hasEncryptedPayloadBeenSaved,
     } = useValues(featureFlagLogic)
     const {
         distributeVariantsEqually,
@@ -754,6 +756,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
         setFeatureFlag,
         saveFeatureFlag,
         setRemoteConfigEnabled,
+        resetEncryptedPayload,
     } = useActions(featureFlagLogic)
 
     const filterGroups: FeatureFlagGroupType[] = featureFlag.filters.groups || []
@@ -776,6 +779,24 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
         })
     }
 
+    const confirmEncryptedPayloadReset = (): void => {
+        LemonDialog.open({
+            title: 'Reset payload?',
+            description: 'The existing payload will not be deleted until the feature flag is saved.',
+            primaryButton: {
+                children: 'Confirm',
+                onClick: resetEncryptedPayload,
+                size: 'small',
+                status: 'danger',
+            },
+            secondaryButton: {
+                children: 'Cancel',
+                type: 'tertiary',
+                size: 'small',
+            },
+        })
+    }
+
     const reportViewRecordingsClicked = (variantKey?: string): void => {
         const properties: Record<string, string> = {
             multivariate: multivariateEnabled.toString(),
@@ -858,11 +879,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                 )}
                             </div>
                             <div className="col-span-6">
-                                <span className="mt-1">
-                                    {featureFlag.filters.multivariate
-                                        ? 'Multiple variants with rollout percentages (A/B/n test)'
-                                        : 'Release toggle (boolean)'}
-                                </span>
+                                <span className="mt-1">{flagTypeString}</span>
                             </div>
                         </div>
 
@@ -1040,19 +1057,60 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                         </>
                                     )}
                                 </div>
-                                <Group name={['filters', 'payloads']}>
-                                    <LemonField name="true">
-                                        <JSONEditorInput
-                                            readOnly={readOnly}
-                                            placeholder={'Examples: "A string", 2500, {"key": "value"}'}
-                                        />
+                                {featureFlag.is_remote_configuration && (
+                                    <LemonField name="has_encrypted_payloads">
+                                        {({ value, onChange }) => (
+                                            <div className="border rounded mb-4 p-4">
+                                                <LemonCheckbox
+                                                    id="flag-payload-encrypted-checkbox"
+                                                    label="Encrypt remote configuration payload"
+                                                    onChange={() => onChange(!value)}
+                                                    checked={value}
+                                                    dataAttr="feature-flag-payload-encrypted-checkbox"
+                                                    disabledReason={
+                                                        hasEncryptedPayloadBeenSaved &&
+                                                        'An encrypted payload has already been saved for this flag. Reset the payload or create a new flag to create an unencrypted configuration payload.'
+                                                    }
+                                                />
+                                            </div>
+                                        )}
                                     </LemonField>
-                                </Group>
+                                )}
+                                <div className="flex gap-2">
+                                    <Group name={['filters', 'payloads']}>
+                                        <LemonField name="true" className="grow">
+                                            <JSONEditorInput
+                                                readOnly={
+                                                    readOnly ||
+                                                    (featureFlag.has_encrypted_payloads &&
+                                                        Boolean(featureFlag.filters?.payloads?.['true']))
+                                                }
+                                                placeholder={'Examples: "A string", 2500, {"key": "value"}'}
+                                            />
+                                        </LemonField>
+                                    </Group>
+                                    {featureFlag.has_encrypted_payloads && (
+                                        <LemonButton
+                                            className="grow-0"
+                                            icon={<IconTrash />}
+                                            type="secondary"
+                                            size="small"
+                                            status="danger"
+                                            onClick={confirmEncryptedPayloadReset}
+                                        >
+                                            Reset
+                                        </LemonButton>
+                                    )}
+                                </div>
                                 {featureFlag.is_remote_configuration && (
                                     <div className="text-sm text-muted mt-4">
                                         Note: remote config flags must be accessed through payloads, e.g.{' '}
-                                        <span className="font-mono font-bold">getFeatureFlagPayload</span>. Using
-                                        standard SDK methods such as{' '}
+                                        <span className="font-mono font-bold">
+                                            {featureFlag.has_encrypted_payloads
+                                                ? 'getDecryptedFeatureFlagPayload'
+                                                : 'getFeatureFlagPayload'}
+                                        </span>
+                                        . Using standard SDK methods such as{' '}
                                         <span className="font-mono font-bold">getFeatureFlag</span> or{' '}
                                         <span className="font-mono font-bold">isFeatureEnabled</span> will always return{' '}
                                         <span className="font-mono font-bold">true</span>

frontend/src/scenes/feature-flags/FeatureFlagCodeInstructions.stories.tsx

@@ -33,6 +33,7 @@ const REGULAR_FEATURE_FLAG: FeatureFlagType = {
     tags: [],
     surveys: [],
     is_remote_configuration: false,
+    has_encrypted_payloads: false,
 }
 
 const GROUP_FEATURE_FLAG: FeatureFlagType = {

frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx

@@ -154,6 +154,7 @@ export const OPTIONS: InstructionOption[] = [
 export const LOCAL_EVALUATION_LIBRARIES: string[] = [SDKKey.NODE_JS, SDKKey.PYTHON, SDKKey.RUBY, SDKKey.PHP, SDKKey.GO]
 
 export const PAYLOAD_LIBRARIES: string[] = [
+    SDKKey.API,
     SDKKey.JS_WEB,
     SDKKey.NODE_JS,
     SDKKey.PYTHON,
@@ -163,8 +164,12 @@ export const PAYLOAD_LIBRARIES: string[] = [
     SDKKey.REACT_NATIVE,
     SDKKey.IOS,
     SDKKey.FLUTTER,
+    SDKKey.GO,
 ]
 
+// TODO(havenbarnes): Add SDKKey.NODE_JS, SDKKey.PYTHON, SDKKey.GO, SDKKey.RUBY after new methods are published
+export const ENCRYPTED_PAYLOAD_LIBRARIES: string[] = [SDKKey.API]
+
 export const BOOTSTRAPPING_OPTIONS: InstructionOption[] = [
     {
         value: 'JavaScript',

frontend/src/scenes/feature-flags/FeatureFlagInstructions.tsx

@@ -9,10 +9,11 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { useEffect, useState } from 'react'
 
 import { groupsModel } from '~/models/groupsModel'
-import { FeatureFlagType, GroupTypeIndex } from '~/types'
+import { FeatureFlagType, GroupTypeIndex, SDKKey } from '~/types'
 
 import {
     BOOTSTRAPPING_OPTIONS,
+    ENCRYPTED_PAYLOAD_LIBRARIES,
     FF_ANCHOR,
     InstructionOption,
     LibraryType,
@@ -56,7 +57,10 @@ export function CodeInstructions({
     showAdvancedOptions = true,
     showFooter = true,
 }: CodeInstructionsProps): JSX.Element {
-    const [defaultSelectedOption] = options
+    const encryptedPayload = featureFlag?.has_encrypted_payloads
+
+    const [defaultSelectedOption] = encryptedPayload ? options.filter((option) => option.key === SDKKey.API) : options
+
     const [selectedOption, setSelectedOption] = useState(defaultSelectedOption)
     const [bootstrapOption, setBootstrapOption] = useState(BOOTSTRAPPING_OPTIONS[0])
     const [showPayloadCode, setShowPayloadCode] = useState(
@@ -120,12 +124,13 @@ export function CodeInstructions({
             setShowBootstrapCode(false)
         }
     }
+
     useEffect(() => {
         if (selectedLanguage) {
             selectOption(selectedLanguage)
         } else {
             // When flag definition changes, de-select any options that can't be selected anymore
-            selectOption(selectedOption.key)
+            selectOption(defaultSelectedOption.key)
         }
 
         if (
@@ -155,47 +160,62 @@ export function CodeInstructions({
 
     const randomProperty = groups.find((group) => group.properties?.length)?.properties?.[0]?.key
 
+    const allFlagLibraries = [
+        {
+            title: 'Client libraries',
+            options: OPTIONS.filter((option) => option.type == LibraryType.Client).map((option) => ({
+                value: option.key,
+                label: option.value,
+                'data-attr': `feature-flag-instructions-select-option-${option.key}`,
+                labelInMenu: (
+                    <div className="flex items-center space-x-2">
+                        <option.Icon />
+                        <span>{option.value}</span>
+                    </div>
+                ),
+            })),
+        },
+        {
+            title: 'Server libraries',
+            options: OPTIONS.filter((option) => option.type == LibraryType.Server).map((option) => ({
+                value: option.key,
+                label: option.value,
+                'data-attr': `feature-flag-instructions-select-option-${option.key}`,
+                labelInMenu: (
+                    <div className="flex items-center space-x-2">
+                        <option.Icon />
+                        <span>{option.value}</span>
+                    </div>
+                ),
+            })),
+        },
+    ]
+    const encryptedPayloadLibraries = [
+        {
+            title: 'Server libraries',
+            options: OPTIONS.filter((option) => ENCRYPTED_PAYLOAD_LIBRARIES.includes(option.key)).map((option) => ({
+                value: option.key,
+                label: option.value,
+                'data-attr': `feature-flag-instructions-select-option-${option.key}`,
+                labelInMenu: (
+                    <div className="flex items-center space-x-2">
+                        <option.Icon />
+                        <span>{option.value}</span>
+                    </div>
+                ),
+            })),
+        },
+    ]
+    const supportedLibraries = encryptedPayload ? encryptedPayloadLibraries : allFlagLibraries
+
     return (
         <div>
             {showAdvancedOptions && (
                 <div className="flex items-center gap-6">
                     <div>
                         <LemonSelect
                             data-attr={'feature-flag-instructions-select' + (dataAttr ? `-${dataAttr}` : '')}
-                            options={[
-                                {
-                                    title: 'Client libraries',
-                                    options: OPTIONS.filter((option) => option.type == LibraryType.Client).map(
-                                        (option) => ({
-                                            value: option.key,
-                                            label: option.value,
-                                            'data-attr': `feature-flag-instructions-select-option-${option.key}`,
-                                            labelInMenu: (
-                                                <div className="flex items-center space-x-2">
-                                                    <option.Icon />
-                                                    <span>{option.value}</span>
-                                                </div>
-                                            ),
-                                        })
-                                    ),
-                                },
-                                {
-                                    title: 'Server libraries',
-                                    options: OPTIONS.filter((option) => option.type == LibraryType.Server).map(
-                                        (option) => ({
-                                            value: option.key,
-                                            label: option.value,
-                                            'data-attr': `feature-flag-instructions-select-option-${option.key}`,
-                                            labelInMenu: (
-                                                <div className="flex items-center space-x-2">
-                                                    <option.Icon />
-                                                    <span>{option.value}</span>
-                                                </div>
-                                            ),
-                                        })
-                                    ),
-                                },
-                            ]}
+                            options={supportedLibraries}
                             onChange={(val) => {
                                 if (val) {
                                     selectOption(val)
@@ -260,6 +280,7 @@ export function CodeInstructions({
                                         reportFlagsCodeExampleInteraction('local evaluation')
                                     }}
                                     disabled={
+                                        encryptedPayload ||
                                         !LOCAL_EVALUATION_LIBRARIES.includes(selectedOption.key) ||
                                         !!featureFlag?.ensure_experience_continuity
                                     }
@@ -297,6 +318,7 @@ export function CodeInstructions({
                             groupType={groupType}
                             localEvaluation={showLocalEvalCode}
                             payload={true}
+                            encryptedPayload={encryptedPayload}
                         />
                     </>
                 )}