feat(flags): Add FeatureFlagStatusIndicator to detail view for flags (#…

…26412)

Co-authored-by: Dylan Martin <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/api.ts

@@ -54,6 +54,7 @@ import {
     ExternalDataSourceSyncSchema,
     ExternalDataSourceType,
     FeatureFlagAssociatedRoleType,
+    FeatureFlagStatusResponse,
     FeatureFlagType,
     Group,
     GroupListParams,
@@ -663,6 +664,13 @@ class ApiRequest {
             )
     }
 
+    public featureFlagStatus(teamId: TeamType['id'], featureFlagId: FeatureFlagType['id']): ApiRequest {
+        return this.projectsDetail(teamId)
+            .addPathComponent('feature_flags')
+            .addPathComponent(String(featureFlagId))
+            .addPathComponent('status')
+    }
+
     public featureFlagCreateScheduledChange(teamId: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('scheduled_changes')
     }
@@ -1042,6 +1050,12 @@ const api = {
         ): Promise<{ scheduled_change: ScheduledChangeType }> {
             return await new ApiRequest().featureFlagDeleteScheduledChange(teamId, scheduledChangeId).delete()
         },
+        async getStatus(
+            teamId: TeamType['id'],
+            featureFlagId: FeatureFlagType['id']
+        ): Promise<FeatureFlagStatusResponse> {
+            return await new ApiRequest().featureFlagStatus(teamId, featureFlagId).get()
+        },
     },
 
     organizationFeatureFlags: {

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

@@ -70,6 +70,7 @@ import FeatureFlagProjects from './FeatureFlagProjects'
 import { FeatureFlagReleaseConditions } from './FeatureFlagReleaseConditions'
 import FeatureFlagSchedule from './FeatureFlagSchedule'
 import { featureFlagsLogic, FeatureFlagsTab } from './featureFlagsLogic'
+import { FeatureFlagStatusIndicator } from './FeatureFlagStatusIndicator'
 import { RecentFeatureFlagInsights } from './RecentFeatureFlagInsightsCard'
 
 export const scene: SceneExport = {
@@ -734,6 +735,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
         aggregationTargetName,
         featureFlag,
         recordingFilterForFlag,
+        flagStatus,
     } = useValues(featureFlagLogic)
     const {
         distributeVariantsEqually,
@@ -788,38 +790,41 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                         Deleted
                                     </LemonTag>
                                 ) : (
-                                    <LemonSwitch
-                                        onChange={(newValue) => {
-                                            LemonDialog.open({
-                                                title: `${newValue === true ? 'Enable' : 'Disable'} this flag?`,
-                                                description: `This flag will be immediately ${
-                                                    newValue === true ? 'rolled out to' : 'rolled back from'
-                                                } the users matching the release conditions.`,
-                                                primaryButton: {
-                                                    children: 'Confirm',
-                                                    type: 'primary',
-                                                    onClick: () => {
-                                                        const updatedFlag = { ...featureFlag, active: newValue }
-                                                        setFeatureFlag(updatedFlag)
-                                                        saveFeatureFlag(updatedFlag)
+                                    <div className="flex gap-2">
+                                        <LemonSwitch
+                                            onChange={(newValue) => {
+                                                LemonDialog.open({
+                                                    title: `${newValue === true ? 'Enable' : 'Disable'} this flag?`,
+                                                    description: `This flag will be immediately ${
+                                                        newValue === true ? 'rolled out to' : 'rolled back from'
+                                                    } the users matching the release conditions.`,
+                                                    primaryButton: {
+                                                        children: 'Confirm',
+                                                        type: 'primary',
+                                                        onClick: () => {
+                                                            const updatedFlag = { ...featureFlag, active: newValue }
+                                                            setFeatureFlag(updatedFlag)
+                                                            saveFeatureFlag(updatedFlag)
+                                                        },
+                                                        size: 'small',
                                                     },
-                                                    size: 'small',
-                                                },
-                                                secondaryButton: {
-                                                    children: 'Cancel',
-                                                    type: 'tertiary',
-                                                    size: 'small',
-                                                },
-                                            })
-                                        }}
-                                        label="Enabled"
-                                        disabledReason={
-                                            !featureFlag.can_edit
-                                                ? "You only have view access to this feature flag. To make changes, contact the flag's creator."
-                                                : null
-                                        }
-                                        checked={featureFlag.active}
-                                    />
+                                                    secondaryButton: {
+                                                        children: 'Cancel',
+                                                        type: 'tertiary',
+                                                        size: 'small',
+                                                    },
+                                                })
+                                            }}
+                                            label="Enabled"
+                                            disabledReason={
+                                                !featureFlag.can_edit
+                                                    ? "You only have view access to this feature flag. To make changes, contact the flag's creator."
+                                                    : null
+                                            }
+                                            checked={featureFlag.active}
+                                        />
+                                        <FeatureFlagStatusIndicator flagStatus={flagStatus} />
+                                    </div>
                                 )}
                             </div>
                             <div className="col-span-6">

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

@@ -0,0 +1,40 @@
+import { LemonTag } from 'lib/lemon-ui/LemonTag'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
+import { FeatureFlagStatus, FeatureFlagStatusResponse } from '~/types'
+
+export function FeatureFlagStatusIndicator({
+    flagStatus,
+}: {
+    flagStatus: FeatureFlagStatusResponse | null
+}): JSX.Element | null {
+    if (
+        !flagStatus ||
+        [FeatureFlagStatus.ACTIVE, FeatureFlagStatus.DELETED, FeatureFlagStatus.UNKNOWN].includes(flagStatus.status)
+    ) {
+        return null
+    }
+
+    return (
+        <Tooltip
+            title={
+                <>
+                    <div className="text-sm">{flagStatus.reason}</div>
+                    <div className="text-xs">
+                        {flagStatus.status === FeatureFlagStatus.STALE &&
+                            'Make sure to remove any references to this flag in your code before deleting it.'}
+                        {flagStatus.status === FeatureFlagStatus.INACTIVE &&
+                            'It is probably not being used in your code, but be sure to remove any references to this flag before deleting it.'}
+                    </div>
+                </>
+            }
+            placement="right"
+        >
+            <span>
+                <LemonTag type="warning" className="uppercase cursor-default">
+                    {flagStatus.status}
+                </LemonTag>
+            </span>
+        </Tooltip>
+    )
+}

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

@@ -9,6 +9,7 @@ import { mswDecorator } from '~/mocks/browser'
 import featureFlags from './__mocks__/feature_flags.json'
 
 const meta: Meta = {
+    tags: ['ff'],
     title: 'Scenes-App/Feature Flags',
     parameters: {
         layout: 'fullscreen',
@@ -33,6 +34,13 @@ const meta: Meta = {
                     200,
                     featureFlags.results.find((r) => r.id === Number(req.params['flagId'])),
                 ],
+                '/api/projects/:team_id/feature_flags/:flagId/status': () => [
+                    200,
+                    {
+                        status: 'active',
+                        reason: 'Feature flag is active',
+                    },
+                ],
             },
             post: {
                 '/api/environments/:team_id/query': {},

frontend/src/scenes/feature-flags/featureFlagLogic.ts

@@ -33,6 +33,7 @@ import {
     EarlyAccessFeatureType,
     FeatureFlagGroupType,
     FeatureFlagRollbackConditions,
+    FeatureFlagStatusResponse,
     FeatureFlagType,
     FilterLogicalOperator,
     FilterType,
@@ -755,6 +756,18 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
                 }
             },
         },
+        flagStatus: [
+            null as FeatureFlagStatusResponse | null,
+            {
+                loadFeatureFlagStatus: () => {
+                    const { currentTeamId } = values
+                    if (currentTeamId && props.id && props.id !== 'new' && props.id !== 'link') {
+                        return api.featureFlags.getStatus(currentTeamId, props.id)
+                    }
+                    return null
+                },
+            },
+        ],
     })),
     listeners(({ actions, values, props }) => ({
         submitNewDashboardSuccessWithResult: async ({ result }) => {
@@ -1040,8 +1053,10 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
             actions.setFeatureFlag(formatPayloadsWithFlag)
             actions.loadRelatedInsights()
             actions.loadAllInsightsForFlag()
+            actions.loadFeatureFlagStatus()
         } else if (props.id !== 'new') {
             actions.loadFeatureFlag()
+            actions.loadFeatureFlagStatus()
         }
     }),
 ])

frontend/src/types.ts

@@ -2995,6 +2995,19 @@ export interface FeatureFlagRollbackConditions {
     operator?: string
 }
 
+export enum FeatureFlagStatus {
+    ACTIVE = 'active',
+    INACTIVE = 'inactive',
+    STALE = 'stale',
+    DELETED = 'deleted',
+    UNKNOWN = 'unknown',
+}
+
+export interface FeatureFlagStatusResponse {
+    status: FeatureFlagStatus
+    reason: string
+}
+
 export interface CombinedFeatureFlagAndValueType {
     feature_flag: FeatureFlagType
     value: boolean | string

posthog/api/test/test_feature_flag.py

@@ -6287,6 +6287,30 @@ def test_flag_status_reasons(self):
             FeatureFlagStatus.ACTIVE,
         )
 
+        # Request status for multivariate flag with a variant set to 100% but no release condition set to 100%
+        multivariate_flag_rolled_out_release_condition_half_variant = FeatureFlag.objects.create(
+            name="Multivariate flag with release condition set to 100%, but variants still 50%",
+            key="multivariate-rolled-out-release-half-variant-flag",
+            team=self.team,
+            active=True,
+            filters={
+                "multivariate": {
+                    "variants": [
+                        {"key": "var1key", "name": "test", "rollout_percentage": 50},
+                        {"key": "var2key", "name": "control", "rollout_percentage": 50},
+                    ],
+                },
+                "groups": [
+                    {"variant": None, "properties": [], "rollout_percentage": 100},
+                ],
+            },
+        )
+        self.create_feature_flag_called_event(multivariate_flag_rolled_out_release_condition_half_variant.key)
+        self.assert_expected_response(
+            multivariate_flag_rolled_out_release_condition_half_variant.id,
+            FeatureFlagStatus.ACTIVE,
+        )
+
         # Request status for multivariate flag with variants set to 100% and a filtered release condition
         multivariate_flag_rolled_out_variant_rolled_out_filtered_release = FeatureFlag.objects.create(
             name="Multivariate flag with variant and release condition set to 100%",

posthog/models/feature_flag/flag_status.py

@@ -85,7 +85,7 @@ def is_flag_fully_rolled_out(self, flag: FeatureFlag) -> tuple[bool, FeatureFlag
             )
         if multivariate and is_multivariate_flag_fully_rolled_out:
             return True, f'This flag will always use the variant "{fully_rolled_out_variant_name}"'
-        elif self.is_boolean_flag_fully_rolled_out(flag):
+        elif not multivariate and self.is_boolean_flag_fully_rolled_out(flag):
             return True, 'This boolean flag will always evaluate to "true"'
 
         return False, ""