Add button to duplicate feature flag

Rather than actually duplicating the feature flag, it navigates to the new feature flag page and pre-populates the fields with the values from the source flag. This way, the user is required to pick a unique feature flag key. Fixes #21788
PostHog · Mar 1, 2025 · 1a33a98 · 1a33a98
1 parent cbf88b2
commit 1a33a98
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 0 deletions.
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -546,6 +546,13 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                                         </>
                                                     )}
 
+                                                    <LemonButton
+                                                        to={urls.featureFlagDuplicate(featureFlag.id)}
+                                                        fullWidth
+                                                    >
+                                                        <span>Duplicate feature flag</span>
+                                                    </LemonButton>
+                                                    <LemonDivider />
                                                     <AccessControlledLemonButton
                                                         userAccessLevel={featureFlag.user_access_level}
                                                         minAccessLevel="editor"

diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -260,6 +260,10 @@ export function OverViewTab({
                                     </AccessControlledLemonButton>
                                 )}
 
+                                <LemonButton to={urls.featureFlagDuplicate(featureFlag.id)} data-attr="usage" fullWidth>
+                                    Duplicate feature flag
+                                </LemonButton>
+
                                 <LemonButton to={tryInInsightsUrl(featureFlag)} data-attr="usage" fullWidth>
                                     Try out in Insights
                                 </LemonButton>

diff --git a/frontend/src/scenes/feature-flags/featureFlagLogic.ts b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
@@ -574,6 +574,31 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
     loaders(({ values, props, actions }) => ({
         featureFlag: {
             loadFeatureFlag: async () => {
+                const sourceId = router.values.searchParams.sourceId
+                if (props.id === 'new' && sourceId) {
+                    // Used when "duplicating a feature flag". This populates the form with the source flag's data.
+                    const sourceFlag = await api.featureFlags.get(sourceId)
+                    const {
+                        id,
+                        created_at,
+                        created_by,
+                        is_simple_flag,
+                        experiment_set,
+                        features,
+                        surveys,
+                        ...flagToKeep
+                    } = sourceFlag
+
+                    // Remove sourceId from URL
+                    router.actions.replace(router.values.location.pathname)
+
+                    return {
+                        ...NEW_FLAG,
+                        ...flagToKeep,
+                        key: '',
+                    } as FeatureFlagType
+                }
+
                 if (props.id && props.id !== 'new' && props.id !== 'link') {
                     try {
                         const retrievedFlag: FeatureFlagType = await api.featureFlags.get(props.id)
@@ -1205,6 +1230,11 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
         },
     })),
     afterMount(({ props, actions }) => {
+        if (props.id === 'new' && router.values.searchParams.sourceId) {
+            actions.loadFeatureFlag()
+            return
+        }
+
         const foundFlag = featureFlagsLogic
             .findMounted()
             ?.values.featureFlags.results.find((flag) => flag.id === props.id)

diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts
@@ -178,6 +178,7 @@ export const urls = {
     experimentsSharedMetric: (id: string | number): string => `/experiments/shared-metrics/${id}`,
     featureFlags: (tab?: string): string => `/feature_flags${tab ? `?tab=${tab}` : ''}`,
     featureFlag: (id: string | number): string => `/feature_flags/${id}`,
+    featureFlagDuplicate: (sourceId: number | string | null): string => `/feature_flags/new?sourceId=${sourceId}`,
     featureManagement: (id?: string | number): string => `/features${id ? `/${id}` : ''}`,
     errorTracking: (): string => '/error_tracking',
     errorTrackingConfiguration: (): string => '/error_tracking/configuration',