chore(1-3422): playground strategies list (#9504)

Initial rough work on adapting the playground strategies to the new
designs. This PR primarily splits components into Legacy files and adds
new replacements. There are *some* updates (including spacing and text
color), but nothing juicy yet. However, I wanted to get this in now,
before this PR grows even bigger.

Author: thomasheartman

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

@@ -1,7 +1,8 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
-import { FeatureDetails } from './FeatureDetails';
+import { FeatureDetails as LegacyFeatureDetails } from './LegacyFeatureDetails';
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
+import { FeatureDetails } from './FeatureDetails';
 
 const testCases = [
     {
@@ -10,7 +11,7 @@ const testCases = [
             hasUnsatisfiedDependency: true,
             isEnabledInCurrentEnvironment: false,
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is False in development because',
+        expectedText1: /This feature flag is False in development because/,
         expectedText2:
             'parent dependency is not satisfied and the environment is disabled',
     },
@@ -20,7 +21,7 @@ const testCases = [
             hasUnsatisfiedDependency: true,
             isEnabledInCurrentEnvironment: true,
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is False in development because',
+        expectedText1: /This feature flag is False in development because/,
         expectedText2: 'parent dependency is not satisfied',
     },
     {
@@ -29,15 +30,15 @@ const testCases = [
             hasUnsatisfiedDependency: false,
             isEnabledInCurrentEnvironment: false,
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is False in development because',
+        expectedText1: /This feature flag is False in development because/,
         expectedText2: 'the environment is disabled',
     },
     {
         name: 'Feature environment is enabled',
         feature: {
             isEnabled: true,
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is True in development because',
+        expectedText1: /This feature flag is True in development because/,
         expectedText2: 'at least one strategy is True',
     },
     {
@@ -48,7 +49,7 @@ const testCases = [
                 data: [{ name: 'custom' }],
             },
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is Unknown in development because',
+        expectedText1: /This feature flag is Unknown in development because/,
         expectedText2: 'no strategies could be fully evaluated',
     },
     {
@@ -59,7 +60,7 @@ const testCases = [
                 data: [{ name: 'custom' }, { name: 'default' }],
             },
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is Unknown in development because',
+        expectedText1: /This feature flag is Unknown in development because/,
         expectedText2: 'not all strategies could be fully evaluated',
     },
     {
@@ -70,12 +71,29 @@ const testCases = [
                 data: [{ name: 'default' }],
             },
         } as PlaygroundFeatureSchema,
-        expectedText1: 'This feature flag is False in development because',
+        expectedText1: /This feature flag is False in development because/,
         expectedText2:
             'all strategies are either False or could not be fully evaluated',
     },
 ];
 
+testCases.forEach(({ name, feature, expectedText1, expectedText2 }) => {
+    test(`${name} (legacy)`, async () => {
+        render(
+            <LegacyFeatureDetails
+                feature={feature}
+                input={
+                    { environment: 'development' } as PlaygroundRequestSchema
+                }
+                onClose={() => {}}
+            />,
+        );
+
+        await screen.findByText(expectedText1);
+        await screen.findByText(expectedText2);
+    });
+});
+
 testCases.forEach(({ name, feature, expectedText1, expectedText2 }) => {
     test(name, async () => {
         render(

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

@@ -1,45 +1,32 @@
 import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
-import { Alert, IconButton, Typography, useTheme, styled } from '@mui/material';
+import { Alert, Typography, useTheme, styled, IconButton } from '@mui/material';
 import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
 import CloseOutlined from '@mui/icons-material/CloseOutlined';
 import type React from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     checkForEmptyValues,
     hasCustomStrategies,
     hasOnlyCustomStrategies,
 } from './helpers';
 
-const StyledDivWrapper = styled('div')({
+const HeaderRow = styled('div')({
     display: 'flex',
     justifyContent: 'space-between',
     width: '100%',
 });
 
-const StyledDivTitleRow = styled('div')(({ theme }) => ({
+const HeaderGroup = styled('hgroup')(({ theme }) => ({
     display: 'inline-flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
-    marginTop: theme.spacing(1.5),
 }));
 
-const StyledDivAlertRow = styled('div')(({ theme }) => ({
-    margin: theme.spacing(1, 0),
+const StyledTypographyName = styled('h3')(({ theme }) => ({
+    fontWeight: 'bold',
+    fontSize: theme.typography.subtitle1.fontSize,
+    margin: 0,
 }));
 
-const StyledDivDescriptionRow = styled('div')(({ theme }) => ({
-    margin: theme.spacing(1, 0.5),
-}));
-
-const StyledTypographyName = styled(Typography)(({ theme }) => ({
-    fontWeight: 600,
-    padding: theme.spacing(0.5),
-}));
-
-const StyledIconButton = styled(IconButton)({
-    textAlign: 'right',
-});
-
 interface PlaygroundFeatureResultDetailsProps {
     feature: PlaygroundFeatureSchema;
     input?: PlaygroundRequestSchema;
@@ -57,7 +44,7 @@ export const FeatureDetails = ({
             return [
                 `This feature flag is True in ${input?.environment} because `,
                 'at least one strategy is True',
-                theme.palette.success.main,
+                theme.palette.success.contrastText,
             ];
 
         if (
@@ -67,43 +54,43 @@ export const FeatureDetails = ({
             return [
                 `This feature flag is False in ${input?.environment} because `,
                 'parent dependency is not satisfied and the environment is disabled',
-                theme.palette.error.main,
+                theme.palette.error.contrastText,
             ];
         }
 
         if (!feature.isEnabledInCurrentEnvironment)
             return [
                 `This feature flag is False in ${input?.environment} because `,
                 'the environment is disabled',
-                theme.palette.error.main,
+                theme.palette.error.contrastText,
             ];
 
         if (hasOnlyCustomStrategies(feature))
             return [
                 `This feature flag is Unknown in ${input?.environment} because `,
                 'no strategies could be fully evaluated',
-                theme.palette.warning.main,
+                theme.palette.warning.contrastText,
             ];
 
         if (hasCustomStrategies(feature))
             return [
                 `This feature flag is Unknown in ${input?.environment} because `,
                 'not all strategies could be fully evaluated',
-                theme.palette.warning.main,
+                theme.palette.warning.contrastText,
             ];
 
         if (feature.hasUnsatisfiedDependency) {
             return [
                 `This feature flag is False in ${input?.environment} because `,
                 'parent dependency is not satisfied',
-                theme.palette.error.main,
+                theme.palette.error.contrastText,
             ];
         }
 
         return [
             `This feature flag is False in ${input?.environment} because `,
             'all strategies are either False or could not be fully evaluated',
-            theme.palette.error.main,
+            theme.palette.error.contrastText,
         ];
     })();
 
@@ -124,61 +111,43 @@ export const FeatureDetails = ({
 
     return (
         <>
-            <StyledDivWrapper>
-                <StyledDivTitleRow>
-                    <StyledTypographyName variant={'subtitle1'}>
-                        {feature.name}
-                    </StyledTypographyName>
-                    <ConditionallyRender
-                        condition={feature?.strategies?.result !== 'unknown'}
-                        show={() => (
+            <HeaderRow>
+                <HeaderGroup>
+                    <StyledTypographyName>{feature.name}</StyledTypographyName>
+                    <p>
+                        {feature?.strategies?.result !== 'unknown' ? (
                             <PlaygroundResultChip
+                                tabindex={-1}
                                 enabled={feature.isEnabled}
                                 label={feature.isEnabled ? 'True' : 'False'}
                             />
-                        )}
-                        elseShow={() => (
+                        ) : (
                             <PlaygroundResultChip
+                                tabindex={-1}
                                 enabled='unknown'
                                 label={'Unknown'}
                                 showIcon={false}
                             />
                         )}
-                    />
-                </StyledDivTitleRow>
-                <StyledIconButton onClick={onCloseClick}>
+                    </p>
+                </HeaderGroup>
+                <IconButton aria-label='Close' onClick={onCloseClick}>
                     <CloseOutlined />
-                </StyledIconButton>
-            </StyledDivWrapper>
-            <StyledDivDescriptionRow>
-                <Typography variant='body1' component='span'>
-                    {description}
-                </Typography>
-                <Typography variant='subtitle1' color={color} component='span'>
+                </IconButton>
+            </HeaderRow>
+            <p>
+                {description}
+                <Typography color={color} component='span'>
                     {reason}
                 </Typography>
-                <Typography variant='body1' component='span'>
-                    .
-                </Typography>
-            </StyledDivDescriptionRow>
-            <ConditionallyRender
-                condition={Boolean(noValueTxt)}
-                show={
-                    <StyledDivAlertRow>
-                        <Alert color={'info'}>{noValueTxt}</Alert>
-                    </StyledDivAlertRow>
-                }
-            />
-            <ConditionallyRender
-                condition={Boolean(customStrategiesTxt)}
-                show={
-                    <StyledDivAlertRow>
-                        <Alert severity='warning' color='info'>
-                            {customStrategiesTxt}
-                        </Alert>
-                    </StyledDivAlertRow>
-                }
-            />
+                .
+            </p>
+            {noValueTxt ? <Alert color={'info'}>{noValueTxt}</Alert> : null}
+            {customStrategiesTxt ? (
+                <Alert severity='warning' color='info'>
+                    {customStrategiesTxt}
+                </Alert>
+            ) : null}
         </>
     );
 };