From 7efe5c53116e78a0da5a7a96e7aad0c0f5c332af Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 17 Mar 2025 15:30:08 +0100
Subject: [PATCH] chore: implement design for disabled environments in
 playground (#9544)

Adds the new design for strategy lists in disabled environments.


![image](https://github.com/user-attachments/assets/3d7c4e05-1a49-4a87-a6fa-b7491d86fab2)
---
 .../PlaygroundResultsFeatureStrategyList.tsx  | 58 +++++++++++-----
 .../PlaygroundResultStrategyLists.tsx         | 69 -------------------
 2 files changed, 40 insertions(+), 87 deletions(-)

diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx
index f9e2de12ee..665be5c228 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultsFeatureStrategyList.tsx
@@ -1,15 +1,49 @@
-import {
-    PlaygroundResultStrategyLists,
-    WrappedPlaygroundResultStrategyList,
-} from './StrategyList/PlaygroundResultStrategyLists';
+import { PlaygroundResultStrategyLists } from './StrategyList/PlaygroundResultStrategyLists';
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
-import { Alert } from '@mui/material';
+import { Alert, styled } from '@mui/material';
+import type { FC } from 'react';
 
 interface PlaygroundResultFeatureStrategyListProps {
     feature: PlaygroundFeatureSchema;
     input?: PlaygroundRequestSchema;
 }
 
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    marginInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
+}));
+
+const UnevaluatedUnsatisfiedInfo: FC<{ feature: PlaygroundFeatureSchema }> = ({
+    feature,
+}) => {
+    if (!feature?.strategies?.data) {
+        return null;
+    }
+
+    let text: string | undefined;
+
+    if (
+        feature.hasUnsatisfiedDependency &&
+        !feature.isEnabledInCurrentEnvironment
+    ) {
+        text =
+            'If the environment was enabled and parent dependencies were satisfied';
+    } else if (feature.hasUnsatisfiedDependency) {
+        text = 'If parent dependencies were satisfied';
+    } else if (!feature.isEnabledInCurrentEnvironment) {
+        text = 'If the environment was enabled';
+    } else {
+        return;
+    }
+
+    return (
+        <StyledAlert severity={'info'} color={'info'}>
+            {text}, then this feature flag would be{' '}
+            {feature.strategies?.result ? 'TRUE' : 'FALSE'} with strategies
+            evaluated like this:
+        </StyledAlert>
+    );
+};
+
 export const PlaygroundResultFeatureStrategyList = ({
     feature,
     input,
@@ -32,21 +66,9 @@ export const PlaygroundResultFeatureStrategyList = ({
         );
     }
 
-    if (
-        (feature.hasUnsatisfiedDependency ||
-            !feature.isEnabledInCurrentEnvironment) &&
-        Boolean(feature?.strategies?.data)
-    ) {
-        return (
-            <WrappedPlaygroundResultStrategyList
-                feature={feature}
-                input={input}
-            />
-        );
-    }
-
     return (
         <>
+            <UnevaluatedUnsatisfiedInfo feature={feature} />
             <PlaygroundResultStrategyLists
                 strategies={enabledStrategies || []}
                 input={input}
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx
index d56d8af0ab..f25e374f00 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx
@@ -2,9 +2,7 @@ import { Alert, styled } from '@mui/material';
 import type {
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,
-    PlaygroundFeatureSchema,
 } from 'openapi';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     StyledContentList,
     StyledListItem,
@@ -96,70 +94,3 @@ export const PlaygroundResultStrategyLists = ({
         </div>
     );
 };
-
-interface IWrappedPlaygroundResultStrategyListProps {
-    feature: PlaygroundFeatureSchema;
-    input?: PlaygroundRequestSchema;
-}
-
-const resolveHintText = (feature: PlaygroundFeatureSchema) => {
-    if (
-        feature.hasUnsatisfiedDependency &&
-        !feature.isEnabledInCurrentEnvironment
-    ) {
-        return 'If the environment was enabled and parent dependencies were satisfied';
-    }
-    if (feature.hasUnsatisfiedDependency) {
-        return 'If parent dependencies were satisfied';
-    }
-    if (!feature.isEnabledInCurrentEnvironment) {
-        return 'If the environment was enabled';
-    }
-    return '';
-};
-
-export const WrappedPlaygroundResultStrategyList = ({
-    feature,
-    input,
-}: IWrappedPlaygroundResultStrategyListProps) => {
-    const enabledStrategies = feature.strategies?.data?.filter(
-        (strategy) => !strategy.disabled,
-    );
-    const disabledStrategies = feature.strategies?.data?.filter(
-        (strategy) => strategy.disabled,
-    );
-
-    const showDisabledStrategies = disabledStrategies?.length > 0;
-
-    return (
-        <StyledAlertWrapper sx={{ pb: 1, mt: 2 }}>
-            <StyledAlert severity={'info'} color={'warning'}>
-                {resolveHintText(feature)}, then this feature flag would be{' '}
-                {feature.strategies?.result ? 'TRUE' : 'FALSE'} with strategies
-                evaluated like this:{' '}
-            </StyledAlert>
-            <StyledListWrapper>
-                <PlaygroundResultStrategyLists
-                    strategies={enabledStrategies || []}
-                    input={input}
-                    titlePrefix={showDisabledStrategies ? 'Enabled' : undefined}
-                />
-            </StyledListWrapper>
-            <ConditionallyRender
-                condition={showDisabledStrategies}
-                show={
-                    <StyledListWrapper>
-                        <PlaygroundResultStrategyLists
-                            strategies={disabledStrategies}
-                            input={input}
-                            titlePrefix={'Disabled'}
-                            infoText={
-                                'Disabled strategies are not evaluated for the overall result.'
-                            }
-                        />
-                    </StyledListWrapper>
-                }
-            />
-        </StyledAlertWrapper>
-    );
-};