feat(experiments): Add a button to generate the feature flag (#26074)

PostHog · Nov 11, 2024 · 5adf41e · 5adf41e
1 parent a238b7d
commit 5adf41e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx
@@ -1,6 +1,6 @@
 import './Experiment.scss'
 
-import { IconPlusSmall, IconTrash } from '@posthog/icons'
+import { IconMagicWand, IconPlusSmall, IconTrash } from '@posthog/icons'
 import { LemonDivider, LemonInput, LemonTextArea, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
@@ -16,7 +16,7 @@ import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
 import { experimentLogic } from './experimentLogic'
 
 const ExperimentFormFields = (): JSX.Element => {
-    const { experiment, featureFlags, groupTypes, aggregationLabel } = useValues(experimentLogic)
+    const { experiment, featureFlags, groupTypes, aggregationLabel, dynamicFeatureFlagKey } = useValues(experimentLogic)
     const {
         addExperimentGroup,
         removeExperimentGroup,
@@ -37,7 +37,27 @@ const ExperimentFormFields = (): JSX.Element => {
                     <LemonField
                         name="feature_flag_key"
                         label="Feature flag key"
-                        help="Each experiment is backed by a feature flag. You'll use this key in your code."
+                        help={
+                            <div className="flex items-center space-x-2">
+                                <span>
+                                    Each experiment is backed by a feature flag. You'll use this key in your&nbsp;code.
+                                </span>
+                                <LemonButton
+                                    type="secondary"
+                                    size="xsmall"
+                                    tooltip={
+                                        dynamicFeatureFlagKey
+                                            ? "Use '" + dynamicFeatureFlagKey + "' as the feature flag key."
+                                            : 'Fill out the experiment name first.'
+                                    }
+                                    onClick={() => {
+                                        setExperiment({ feature_flag_key: dynamicFeatureFlagKey })
+                                    }}
+                                >
+                                    <IconMagicWand className="mr-1" /> Generate
+                                </LemonButton>
+                            </div>
+                        }
                     >
                         <LemonInput placeholder="pricing-page-conversion" data-attr="experiment-feature-flag-key" />
                     </LemonField>

diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -159,6 +159,7 @@ export const experimentLogic = kea<experimentLogicType>([
         setExperimentMissing: true,
         setExperiment: (experiment: Partial<Experiment>) => ({ experiment }),
         createExperiment: (draft?: boolean) => ({ draft }),
+        setExperimentFeatureFlagKeyFromName: true,
         setNewExperimentInsight: (filters?: Partial<FilterType>) => ({ filters }),
         setExperimentType: (type?: string) => ({ type }),
         setExperimentExposureInsight: (filters?: Partial<FilterType>) => ({ filters }),
@@ -943,6 +944,16 @@ export const experimentLogic = kea<experimentLogicType>([
     })),
     selectors({
         props: [() => [(_, props) => props], (props) => props],
+        dynamicFeatureFlagKey: [
+            (s) => [s.experiment],
+            (experiment: Experiment): string => {
+                return experiment.name
+                    .toLowerCase()
+                    .replace(/[^A-Za-z0-9-_]+/g, '-')
+                    .replace(/-+$/, '')
+                    .replace(/^-+/, '')
+            },
+        ],
         experimentId: [
             () => [(_, props) => props.experimentId ?? 'new'],
             (experimentId): Experiment['id'] => experimentId,