improvements

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -5,6 +5,7 @@ import {
     AccordionDetails,
     SxProps,
     Theme,
+    useTheme,
 } from '@mui/material';
 import { IConstraint } from 'interfaces/strategy';
 import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
@@ -17,12 +18,12 @@ import {
 } from 'constants/operators';
 import { useStyles } from '../ConstraintAccordion.styles';
 import {
-    PlaygroundFeatureStrategyConstraintResult,
+    PlaygroundConstraintSchema,
     PlaygroundRequestSchema,
 } from '../../../../hooks/api/actions/usePlayground/playground.model';
 
 interface IConstraintAccordionViewProps {
-    constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult;
+    constraint: IConstraint | PlaygroundConstraintSchema;
     onDelete?: () => void;
     onEdit?: () => void;
     playgroundInput?: PlaygroundRequestSchema;
@@ -41,6 +42,7 @@ export const ConstraintAccordionView = ({
     const { classes: styles } = useStyles();
     const [expandable, setExpandable] = useState(true);
     const [expanded, setExpanded] = useState(false);
+    const theme = useTheme();
 
     const singleValue = oneOf(
         [...semVerOperators, ...numOperators, ...dateOperators],
@@ -51,6 +53,11 @@ export const ConstraintAccordionView = ({
             setExpanded(!expanded);
         }
     };
+    const backgroundColor = Boolean(playgroundInput)
+        ? !Boolean((constraint as PlaygroundConstraintSchema).result)
+            ? theme.palette.neutral.light
+            : 'inherit'
+        : 'inherit';
 
     return (
         <Accordion
@@ -68,6 +75,7 @@ export const ConstraintAccordionView = ({
                     '&:hover': {
                         cursor: expandable ? 'pointer' : 'default!important',
                     },
+                    backgroundColor: backgroundColor,
                 }}
             >
                 <ConstraintAccordionViewHeader

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

@@ -23,17 +23,28 @@ export const PlaygroundResultFeatureDetails = ({
     const { classes: styles } = useStyles();
     const theme = useTheme();
 
-    const description = feature.isEnabled
+    console.log(feature);
+
+    const description =
+        feature.isEnabled === 'unevaluated'
+            ? `This feature toggle is Unevaluated in ${input?.environment} because `
+            : feature.isEnabled
             ? `This feature toggle is True in ${input?.environment} because `
             : `This feature toggle is False in ${input?.environment} because `;
 
-    const reason = feature.isEnabled
+    const reason =
+        feature.isEnabled === 'unevaluated'
+            ? 'custom strategies are not evaluated yet'
+            : feature.isEnabled
             ? 'at least one strategy is True'
             : feature?.isEnabledInCurrentEnvironment
             ? 'the environment is disabled'
             : 'all strategies are False';
 
-    const color = feature.isEnabled
+    const color =
+        feature.isEnabled === 'unevaluated'
+            ? theme.palette.warning.main
+            : feature.isEnabled
             ? theme.palette.success.main
             : theme.palette.error.main;
 
@@ -56,7 +67,19 @@ export const PlaygroundResultFeatureDetails = ({
                         {feature.name}
                     </Typography>
                     <span>
-                        <PlaygroundResultChip enabled={feature.isEnabled} />
+                        <PlaygroundResultChip
+                            enabled={
+                                feature.isEnabled === 'unevaluated'
+                                    ? 'unknown'
+                                    : feature.isEnabled
+                            }
+                            label={String(feature.isEnabled)}
+                            size={
+                                feature.isEnabled === 'unevaluated'
+                                    ? 'large'
+                                    : 'default'
+                            }
+                        />
                     </span>
                 </div>
                 <IconButton onClick={onCloseClick} className={styles.icon}>

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.styles.ts

@@ -12,6 +12,10 @@ export const useStyles = makeStyles()(theme => ({
         justifyContent: 'space-between',
         gap: theme.spacing(2),
     },
+    disabled: {
+        backgroundColor: theme.palette.neutral.light,
+        opacity: '90%',
+    },
     chip: {
         margin: '0.25rem',
     },

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundConstraintItem/PlaygroundConstraintItem.tsx

@@ -3,6 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useStyles } from './PlaygroundConstraintItem.styles';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { CancelOutlined } from '@mui/icons-material';
+import classnames from 'classnames';
 
 interface IConstraintItemProps {
     value: string[];
@@ -23,10 +24,13 @@ export const PlaygroundConstraintItem = ({
     const color = input === 'no value' ? 'error' : 'neutral';
     const reason = `value does not match any ${text}`;
 
-    console.log(value, text, input, showReason);
-
     return (
-        <div className={styles.container}>
+        <div
+            className={classnames(
+                styles.container,
+                showReason ? styles.disabled : ''
+            )}
+        >
             <Typography variant="subtitle1" color={theme.palette[color].main}>
                 {input}
             </Typography>
@@ -72,6 +76,7 @@ export const PlaygroundConstraintItem = ({
             <ConditionallyRender
                 condition={Boolean(showReason)}
                 show={<CancelOutlined color={'error'} />}
+                elseShow={<div />}
             />
         </div>
     );

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx

@@ -40,12 +40,13 @@ export const PlaygroundResultFeatureStrategyItem = ({
     const theme = useTheme();
     const Icon = getFeatureStrategyIcon(strategy.name);
     const label =
-        result.evaluationStatus !== 'complete'
+        result.evaluationStatus === 'incomplete'
-            ? 'Unevaluated'
+            ? 'Unknown'
             : result.enabled
             ? 'True'
             : 'False';
-    const border = result.enabled
+    const border =
+        result.enabled && result.evaluationStatus === 'complete'
             ? `1px solid ${theme.palette.success.main}`
             : `1px solid ${theme.palette.divider}`;
 
@@ -77,6 +78,11 @@ export const PlaygroundResultFeatureStrategyItem = ({
                             showIcon={false}
                             enabled={result.enabled}
                             label={label}
+                            size={
+                                result.evaluationStatus === 'incomplete'
+                                    ? 'medium'
+                                    : 'default'
+                            }
                         />
                     </div>
                     <div className={styles.body}>

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

@@ -6,14 +6,16 @@ import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icon
 import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg';
 
 interface IResultChipProps {
-    enabled: boolean | 'unevaluated';
+    enabled: boolean | 'unknown';
     // Result icon - defaults to true
     showIcon?: boolean;
     label?: string;
+    size?: 'default' | 'medium' | 'large';
 }
 
-export const StyledChip = styled(Chip)(({ theme }) => ({
+export const StyledChip = styled(Chip)<{ width?: number }>(
-    width: 60,
+    ({ theme, width }) => ({
+        width: width ?? 60,
         height: 24,
         borderRadius: theme.shape.borderRadius,
         fontWeight: theme.typography.fontWeightMedium,
@@ -21,7 +23,8 @@ export const StyledChip = styled(Chip)(({ theme }) => ({
             padding: 0,
             paddingLeft: theme.spacing(0.5),
         },
-}));
+    })
+);
 
 export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({
     border: `1px solid ${theme.palette.error.main}`,
@@ -45,15 +48,27 @@ export const StyledTrueChip = styled(StyledChip)(({ theme }) => ({
     },
 }));
 
+export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({
+    border: `1px solid ${theme.palette.warning.main}`,
+    backgroundColor: colors.orange['100'],
+    ['& .MuiChip-label']: {
+        color: theme.palette.warning.main,
+    },
+    ['& .MuiChip-icon']: {
+        color: theme.palette.warning.main,
+    },
+}));
+
 export const PlaygroundResultChip = ({
     enabled,
     showIcon = true,
     label,
+    size = 'default',
 }: IResultChipProps) => {
     const theme = useTheme();
     const icon = (
         <ConditionallyRender
-            condition={Boolean(enabled)}
+            condition={enabled !== 'unknown' && enabled}
             show={
                 <FeatureEnabledIcon
                     color={theme.palette.success.main}
@@ -71,19 +86,41 @@ export const PlaygroundResultChip = ({
 
     const defaultLabel = enabled ? 'True' : 'False';
 
+    let chipWidth = 60;
+    if (size === 'medium') {
+        chipWidth = 72;
+    }
+
+    if (size === 'large') {
+        chipWidth = 100;
+    }
+
     return (
         <ConditionallyRender
-            condition={Boolean(enabled)}
+            condition={enabled !== 'unknown' && enabled}
             show={
                 <StyledTrueChip
                     icon={showIcon ? icon : undefined}
                     label={label || defaultLabel}
+                    width={chipWidth}
+                />
+            }
+            elseShow={
+                <ConditionallyRender
+                    condition={enabled === 'unknown'}
+                    show={
+                        <StyledUnknownChip
+                            label={label || 'Unknown'}
+                            width={chipWidth}
                         />
                     }
                     elseShow={
                         <StyledFalseChip
                             icon={showIcon ? icon : undefined}
                             label={label || defaultLabel}
+                            width={chipWidth}
+                        />
+                    }
                 />
             }
         />