Playground UI bugs and improvements (#1219)

* fix status cell logic

* Add back disabled env wrapper

* Add back disabled env wrapper

* fmt

* Wording improvements, refactor for readability

* improvement

* fmt

* Fixes after merge

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

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

@@ -27,26 +27,42 @@ export const FeatureDetails = ({
     const { classes: styles } = useStyles();
     const theme = useTheme();
 
-    const description = feature.isEnabled
+    const [description, reason, color] = (() => {
-        ? `This feature toggle is True in ${input?.environment} because `
+        if (feature.isEnabled)
-        : `This feature toggle is False in ${input?.environment} because `;
+            return [
-
+                `This feature toggle is True in ${input?.environment} because `,
-    const reason = (() => {
+                'at least one strategy is True',
-        if (feature.isEnabled) return 'at least one strategy is True';
+                theme.palette.success.main,
+            ];
 
         if (!feature.isEnabledInCurrentEnvironment)
-            return 'the environment is disabled';
+            return [
+                `This feature toggle is False in ${input?.environment} because `,
+                'the environment is disabled',
+                theme.palette.error.main,
+            ];
 
         if (hasOnlyCustomStrategies(feature))
-            return 'no strategies could be fully evaluated';
+            return [
+                `This feature toggle is Unknown in ${input?.environment} because `,
+                'no strategies could be fully evaluated',
+                theme.palette.warning.main,
+            ];
 
-        return 'all strategies are either False or could not be fully evaluated';
+        if (hasCustomStrategies(feature))
+            return [
+                `This feature toggle is Unknown in ${input?.environment} because `,
+                'not all strategies could be fully evaluated',
+                theme.palette.warning.main,
+            ];
+
+        return [
+            `This feature toggle is False in ${input?.environment} because `,
+            'all strategies are either False or could not be fully evaluated',
+            theme.palette.error.main,
+        ];
     })();
 
-    const color = feature.isEnabled
-        ? theme.palette.success.main
-        : theme.palette.error.main;
-
     const noValueTxt = checkForEmptyValues(input?.context)
         ? 'You did not provide a value for your context field in step 2 of the configuration'
         : undefined;

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx

@@ -1,4 +1,7 @@
-import { PlaygroundResultStrategyLists } from './StrategyList/playgroundResultStrategyLists';
+import {
+    PlaygroundResultStrategyLists,
+    WrappedPlaygroundResultStrategyList,
+} from './StrategyList/playgroundResultStrategyLists';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     PlaygroundFeatureSchema,
@@ -29,19 +32,20 @@ export const PlaygroundResultFeatureStrategyList = ({
             <ConditionallyRender
                 condition={
                     !feature.isEnabledInCurrentEnvironment &&
-                    (feature?.strategies?.data?.length || 0) > 0
+                    Boolean(feature?.strategies?.data)
                 }
                 show={
-                    <Alert severity="info" color="warning">
+                    <WrappedPlaygroundResultStrategyList
-                        If environment was enabled, then this feature toggle
+                        strategies={feature?.strategies}
-                        would be {feature.strategies?.result ? 'TRUE' : 'FALSE'}{' '}
+                        input={input}
-                        with strategies evaluated like so:{' '}
+                    />
-                    </Alert>
+                }
+                elseShow={
+                    <PlaygroundResultStrategyLists
+                        strategies={feature?.strategies?.data || []}
+                        input={input}
+                    />
                 }
-            />
-            <PlaygroundResultStrategyLists
-                strategies={feature?.strategies?.data || []}
-                input={input}
             />
         </>
     );

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

@@ -1,9 +1,9 @@
 import { Fragment } from 'react';
 import { Alert, Box, styled, Typography } from '@mui/material';
 import {
-    PlaygroundFeatureSchema,
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,
+    PlaygroundStrategyResultSchema,
 } from 'component/playground/Playground/interfaces/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem';
@@ -14,16 +14,18 @@ const StyledAlertWrapper = styled('div')(({ theme }) => ({
     padding: `0, 4px`,
     flexDirection: 'column',
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.info.border}`,
+    border: `1px solid ${theme.palette.warning.border}`,
 }));
 
 const StyledListWrapper = styled('div')(({ theme }) => ({
     padding: theme.spacing(1, 0.5),
 }));
 
-const StyledAlert = styled(Alert)(() => ({
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    border: '0!important',
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
+    borderBottom: `1px solid ${theme.palette.warning.border}!important`,
 }));
 
 interface PlaygroundResultStrategyListProps {
@@ -42,9 +44,9 @@ export const PlaygroundResultStrategyLists = ({
                 <Typography
                     variant={'subtitle1'}
                     sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
-                >{`Strategies (${strategies.length})`}</Typography>
+                >{`Strategies (${strategies?.length})`}</Typography>
                 <Box sx={{ width: '100%' }}>
-                    {strategies.map((strategy, index) => (
+                    {strategies?.map((strategy, index) => (
                         <Fragment key={strategy.id}>
                             <ConditionallyRender
                                 condition={index > 0}
@@ -64,26 +66,25 @@ export const PlaygroundResultStrategyLists = ({
     />
 );
 
-interface WrappedPlaygroundResultStrategyListProps
+interface IWrappedPlaygroundResultStrategyListProps {
-    extends PlaygroundResultStrategyListProps {
+    strategies: PlaygroundStrategyResultSchema;
-    feature: PlaygroundFeatureSchema;
+    input?: PlaygroundRequestSchema;
 }
 
 export const WrappedPlaygroundResultStrategyList = ({
     strategies,
-    feature,
     input,
-}: WrappedPlaygroundResultStrategyListProps) => {
+}: IWrappedPlaygroundResultStrategyListProps) => {
     return (
-        <StyledAlertWrapper sx={{ pb: 1 }}>
+        <StyledAlertWrapper sx={{ pb: 1, mt: 2 }}>
-            <StyledAlert severity={'info'} color={'info'}>
+            <StyledAlert severity={'info'} color={'warning'}>
-                If environment would be enabled then this feature would be{' '}
+                If environment was enabled, then this feature toggle would be{' '}
-                {feature.strategies.result ? 'TRUE' : 'FALSE'} and the
+                {strategies?.result ? 'TRUE' : 'FALSE'} with strategies
-                strategies would evaluate like this:{' '}
+                evaluated like so:{' '}
             </StyledAlert>
-            <StyledListWrapper>
+            <StyledListWrapper sx={{ p: 2.5 }}>
                 <PlaygroundResultStrategyLists
-                    strategies={strategies}
+                    strategies={strategies?.data || []}
                     input={input}
                 />
             </StyledListWrapper>