Chore(1-3520)/playground disabled badges (#9583)

Gives a small update in how we deal with unevaluated and disabled
strategies in the new playground design:

- "Unevaluated" badges go from yellow warning to blue info and their
text changed to "Not evaluated"
- Don't show "Not evaluated" badges on strategies that are disabled.

To avoid this change affecting the current playground setup, I
duplicated the old resultschip into a legacy file and changed the
existing impl. To avoid updating all other files that use that chip
(it's all over the playground) and checking flags or creating duplicates
there, I decided to do a quick check at the top of the legacy file and
use the new file if the flag is on.

In doing so, I've also simplified the actual chip file and have more or
less cut the total line count in it in two 😄


![image](https://github.com/user-attachments/assets/44e38a8e-4faa-440b-82ed-9ee377160922)

frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx

@@ -8,7 +8,7 @@ import {
     useTheme,
 } from '@mui/material';
 import { flexRow } from '../../../../../themes/themeStyles';
-import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import type React from 'react';
 import { useState } from 'react';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx

@@ -1,6 +1,6 @@
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
 import { Alert, Typography, useTheme, styled, IconButton } from '@mui/material';
-import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip';
 import CloseOutlined from '@mui/icons-material/CloseOutlined';
 import type React from 'react';
 import {

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/LegacyFeatureDetails.tsx

@@ -1,6 +1,6 @@
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
 import { Alert, IconButton, Typography, useTheme, styled } from '@mui/material';
-import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip';
 import CloseOutlined from '@mui/icons-material/CloseOutlined';
 import type React from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx

@@ -22,7 +22,7 @@ export const FeatureStrategyItem = ({
     const label =
         result.evaluationStatus === 'incomplete' ||
         result.evaluationStatus === 'unevaluated'
-            ? 'Unevaluated'
+            ? 'Not evaluated'
             : result.enabled
               ? 'True'
               : 'False';
@@ -33,12 +33,13 @@ export const FeatureStrategyItem = ({
             strategyHeaderLevel={4}
             className={className}
             headerItemsLeft={
-                <PlaygroundResultChip
-                    tabindex={-1}
-                    showIcon={false}
-                    enabled={result.enabled}
-                    label={label}
-                />
+                strategy.disabled ? null : (
+                    <PlaygroundResultChip
+                        showIcon={false}
+                        enabled={result.enabled}
+                        label={label}
+                    />
+                )
             }
         >
             <StrategyExecution strategyResult={strategy} input={input} />

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@mui/material';
-import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/LegacyPlaygroundResultChip';
 import type {
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx

@@ -1,5 +1,5 @@
 import { Box, styled } from '@mui/material';
-import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../PlaygroundResultChip/LegacyPlaygroundResultChip';
 import type { PlaygroundFeatureSchema } from 'openapi';
 
 interface IFeatureStatusCellProps {

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx

@@ -0,0 +1,96 @@
+// deprecated; remove with 'flagOverviewRedesign' flag
+import type { VFC } from 'react';
+import { useTheme } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg';
+import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg';
+import WarningOutlined from '@mui/icons-material/WarningOutlined';
+import { Badge } from 'component/common/Badge/Badge';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { PlaygroundResultChip as NewPlaygroundResultChip } from './PlaygroundResultChip';
+
+interface IResultChipProps {
+    enabled: boolean | 'unevaluated' | 'unknown';
+    label: string;
+    // Result icon - defaults to true
+    showIcon?: boolean;
+    tabindex?: number;
+}
+
+export const PlaygroundResultChip: VFC<IResultChipProps> = ({
+    enabled,
+    label,
+    showIcon = true,
+    tabindex,
+}) => {
+    const theme = useTheme();
+    const flagOverviewRedesign = useUiFlag('flagOverviewRedesign');
+    if (flagOverviewRedesign) {
+        return (
+            <NewPlaygroundResultChip
+                enabled={enabled}
+                label={label}
+                showIcon={showIcon}
+            />
+        );
+    }
+    const icon = (
+        <ConditionallyRender
+            condition={enabled === 'unknown' || enabled === 'unevaluated'}
+            show={<WarningOutlined color={'warning'} fontSize='inherit' />}
+            elseShow={
+                <ConditionallyRender
+                    condition={typeof enabled === 'boolean' && Boolean(enabled)}
+                    show={
+                        <FeatureEnabledIcon
+                            aria-hidden
+                            color={theme.palette.success.main}
+                            strokeWidth='0.25'
+                        />
+                    }
+                    elseShow={
+                        <FeatureDisabledIcon
+                            aria-hidden
+                            color={theme.palette.error.main}
+                            strokeWidth='0.25'
+                        />
+                    }
+                />
+            }
+        />
+    );
+
+    return (
+        <ConditionallyRender
+            condition={enabled === 'unknown' || enabled === 'unevaluated'}
+            show={
+                <Badge icon={showIcon ? icon : undefined} color='warning'>
+                    {label}
+                </Badge>
+            }
+            elseShow={
+                <ConditionallyRender
+                    condition={typeof enabled === 'boolean' && Boolean(enabled)}
+                    show={
+                        <Badge
+                            tabIndex={tabindex}
+                            color='success'
+                            icon={showIcon ? icon : undefined}
+                        >
+                            {label}
+                        </Badge>
+                    }
+                    elseShow={
+                        <Badge
+                            color='error'
+                            icon={showIcon ? icon : undefined}
+                            tabIndex={tabindex}
+                        >
+                            {label}
+                        </Badge>
+                    }
+                />
+            }
+        />
+    );
+};

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx

@@ -1,83 +1,46 @@
-import type { VFC } from 'react';
-import { useTheme } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg';
 import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg';
-import WarningOutlined from '@mui/icons-material/WarningOutlined';
 import { Badge } from 'component/common/Badge/Badge';
+import type { FC } from 'react';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
-interface IResultChipProps {
+interface ResultChipProps {
     enabled: boolean | 'unevaluated' | 'unknown';
     label: string;
     // Result icon - defaults to true
     showIcon?: boolean;
-    tabindex?: number;
 }
 
-export const PlaygroundResultChip: VFC<IResultChipProps> = ({
+const useIconAndColor = (
+    enabled: boolean | 'unevaluated' | 'unknown',
+): [any, any] => {
+    if (enabled === 'unknown' || enabled === 'unevaluated') {
+        return [InfoOutlined, 'info'];
+    } else if (enabled === true) {
+        return [FeatureEnabledIcon, 'success'];
+    } else {
+        return [FeatureDisabledIcon, 'error'];
+    }
+};
+
+export const PlaygroundResultChip: FC<ResultChipProps> = ({
     enabled,
     label,
     showIcon = true,
-    tabindex,
 }) => {
-    const theme = useTheme();
-    const icon = (
-        <ConditionallyRender
-            condition={enabled === 'unknown' || enabled === 'unevaluated'}
-            show={<WarningOutlined color={'warning'} fontSize='inherit' />}
-            elseShow={
-                <ConditionallyRender
-                    condition={typeof enabled === 'boolean' && Boolean(enabled)}
-                    show={
-                        <FeatureEnabledIcon
-                            aria-hidden
-                            color={theme.palette.success.main}
-                            strokeWidth='0.25'
-                        />
-                    }
-                    elseShow={
-                        <FeatureDisabledIcon
-                            aria-hidden
-                            color={theme.palette.error.main}
-                            strokeWidth='0.25'
-                        />
-                    }
-                />
-            }
-        />
-    );
+    const [Icon, color] = useIconAndColor(enabled);
 
     return (
-        <ConditionallyRender
-            condition={enabled === 'unknown' || enabled === 'unevaluated'}
-            show={
-                <Badge icon={showIcon ? icon : undefined} color='warning'>
-                    {label}
-                </Badge>
+        <Badge
+            tabIndex={-1}
+            color={color}
+            icon={
+                showIcon ? (
+                    <Icon aria-hidden color={color} strokeWidth='0.25' />
+                ) : undefined
             }
-            elseShow={
-                <ConditionallyRender
-                    condition={typeof enabled === 'boolean' && Boolean(enabled)}
-                    show={
-                        <Badge
-                            tabIndex={tabindex}
-                            color='success'
-                            icon={showIcon ? icon : undefined}
-                        >
-                            {label}
-                        </Badge>
-                    }
-                    elseShow={
-                        <Badge
-                            color='error'
-                            icon={showIcon ? icon : undefined}
-                            tabIndex={tabindex}
-                        >
-                            {label}
-                        </Badge>
-                    }
-                />
-            }
-        />
+        >
+            {label}
+        </Badge>
     );
 };