feat: pre-live should include disabled prod (#7031)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx

@@ -13,6 +13,7 @@ export interface LifecycleFeature {
         type: string;
         name: string;
         lastSeenAt?: string | null;
+        enabled: boolean;
     }>;
 }
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.test.tsx

@@ -53,7 +53,7 @@ test('render initial stage', async () => {
     await screen.findByText('initial');
     await screen.findByText('2 minutes');
     await screen.findByText(
-        "This feature toggle is currently in the initial phase of it's life cycle.",
+        'This feature flag is currently in the initial phase of its lifecycle.',
     );
 });
 

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx

@@ -136,7 +136,7 @@ const InitialStageDescription: FC = () => {
     return (
         <>
             <InfoText>
-                This feature toggle is currently in the initial phase of it's
+                This feature flag is currently in the initial phase of its
                 lifecycle.
             </InfoText>
             <InfoText>
@@ -250,8 +250,7 @@ const PreLiveStageDescription: FC = ({ children }) => {
     return (
         <>
             <InfoText>
-                We've seen the feature flag in the following non-production
+                We've seen the feature flag in the following environments:
-                environments:
             </InfoText>
 
             {children}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/populateCurrentStage.test.ts

@@ -24,13 +24,27 @@ describe('populateCurrentStage', () => {
             lifecycle: { stage: 'pre-live', enteredStageAt },
             environments: [
                 { name: 'test', type: 'development', lastSeenAt: null },
-                { name: 'test1', type: 'production', lastSeenAt: '2022-08-01' },
+                {
+                    name: 'test1',
+                    type: 'production',
+                    lastSeenAt: '2022-08-01',
+                    enabled: true,
+                },
                 { name: 'dev', type: 'development', lastSeenAt: '2022-08-01' },
+                {
+                    name: 'prod_disabled',
+                    type: 'production',
+                    lastSeenAt: '2022-08-02',
+                    enabled: false,
+                },
             ],
         } as IFeatureToggle;
         const expected = {
             name: 'pre-live',
-            environments: [{ name: 'dev', lastSeenAt: '2022-08-01' }],
+            environments: [
+                { name: 'dev', lastSeenAt: '2022-08-01' },
+                { name: 'prod_disabled', lastSeenAt: '2022-08-02' },
+            ],
             enteredStageAt,
         };
         const result = populateCurrentStage(feature);
@@ -41,7 +55,18 @@ describe('populateCurrentStage', () => {
         const feature = {
             lifecycle: { stage: 'live', enteredStageAt },
             environments: [
-                { name: 'prod', type: 'production', lastSeenAt: '2022-08-01' },
+                {
+                    name: 'prod',
+                    type: 'production',
+                    lastSeenAt: '2022-08-01',
+                    enabled: true,
+                },
+                {
+                    name: 'prod_ignore',
+                    type: 'production',
+                    lastSeenAt: '2022-08-01',
+                    enabled: false,
+                },
             ],
         } as IFeatureToggle;
         const expected = {

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/populateCurrentStage.ts

@@ -6,9 +6,11 @@ export const populateCurrentStage = (
 ): LifecycleStage | undefined => {
     if (!feature.lifecycle) return undefined;
 
-    const getFilteredEnvironments = (condition: (type: string) => boolean) => {
+    const getFilteredEnvironments = (
+        condition: (env: { type: string; enabled: boolean }) => boolean,
+    ) => {
         return (feature.environments || [])
-            .filter((env) => condition(env.type) && Boolean(env.lastSeenAt))
+            .filter((env) => condition(env) && Boolean(env.lastSeenAt))
             .map((env) => ({
                 name: env.name,
                 lastSeenAt: env.lastSeenAt!,
@@ -24,7 +26,9 @@ export const populateCurrentStage = (
             return {
                 name: 'pre-live',
                 environments: getFilteredEnvironments(
-                    (type) => type !== 'production',
+                    (env) =>
+                        env.type !== 'production' ||
+                        (env.type === 'production' && !env.enabled),
                 ),
                 enteredStageAt,
             };
@@ -32,7 +36,7 @@ export const populateCurrentStage = (
             return {
                 name: 'live',
                 environments: getFilteredEnvironments(
-                    (type) => type === 'production',
+                    (env) => env.type === 'production' && env.enabled,
                 ),
                 enteredStageAt,
             };