fix playground custom strategy parameters debugging (#1213)

* fix playground custom strategy parameters debugging

* fix playground strategy parameters and chips consistency

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx

@@ -7,7 +7,7 @@ import {
     StyledToggleButtonOn,
 } from '../StyledToggleButton';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { IConstraint } from '../../../../../../interfaces/strategy';
+import { IConstraint } from 'interfaces/strategy';
 
 interface CaseSensitiveButtonProps {
     localConstraint: IConstraint;

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.styles.ts

@@ -8,8 +8,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     titleRow: {
         display: 'inline-flex',
-        alignItems: 'flex-start',
+        alignItems: 'center',
-        justifyContent: 'center',
         gap: theme.spacing(1.5),
         marginTop: theme.spacing(1.5),
     },

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

@@ -69,12 +69,22 @@ export const FeatureDetails = ({
                     <Typography variant={'subtitle1'} className={styles.name}>
                         {feature.name}
                     </Typography>
-                    <span>
+                    <ConditionallyRender
-                        <PlaygroundResultChip
+                        condition={feature?.strategies?.result !== 'unknown'}
-                            enabled={feature.isEnabled}
+                        show={() => (
-                            label={feature.isEnabled ? 'True' : 'False'}
+                            <PlaygroundResultChip
-                        />
+                                enabled={feature.isEnabled}
-                    </span>
+                                label={feature.isEnabled ? 'True' : 'False'}
+                            />
+                        )}
+                        elseShow={() => (
+                            <PlaygroundResultChip
+                                enabled="unknown"
+                                label={'Unknown'}
+                                showIcon={false}
+                            />
+                        )}
+                    />
                 </div>
                 <IconButton onClick={onCloseClick} className={styles.icon}>
                     <CloseOutlined />

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

@@ -44,11 +44,6 @@ export const FeatureStrategyItem = ({
                     showIcon={false}
                     enabled={result.enabled}
                     label={label}
-                    size={
-                        result.evaluationStatus === 'incomplete'
-                            ? 'large'
-                            : 'default'
-                    }
                 />
             }
         >

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx

@@ -1,7 +1,7 @@
 import { styled, Tooltip, Typography, useTheme } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PlaygroundSingleValue } from './PlaygroundSingleValue/PlaygroundSingleValue';
-import { PLaygroundMultipleValues } from './PlaygroundMultipleValues/PLaygroundMultipleValues';
+import { PLaygroundMultipleValues } from './PlaygroundMultipleValues/PlaygroundMultipleValues';
 import React from 'react';
 import { useStyles } from '../../ConstraintAccordion.styles';
 import { CancelOutlined } from '@mui/icons-material';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PlaygroundMultipleValues.tsx

@@ -59,7 +59,7 @@ export const PLaygroundMultipleValues = ({
                             noWrap={true}
                             sx={{ mr: 1 }}
                         >
-                            does not match any values{' '}
+                            does not match values{' '}
                         </Typography>
                     }
                 />

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundSingleValue/PlaygroundSingleValue.tsx

@@ -35,7 +35,7 @@ export const PlaygroundSingleValue = ({
                 condition={!Boolean(constraint.result)}
                 show={
                     <Typography variant={'body1'} color={'error'}>
-                        does not match any values{' '}
+                        does not match values{' '}
                     </Typography>
                 }
             />

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx

@@ -0,0 +1,97 @@
+import { Box, styled, Typography, useTheme } from '@mui/material';
+import { CancelOutlined } from '@mui/icons-material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+
+interface ICustomParameterItem {
+    text: string;
+    input?: string | null;
+    isRequired?: boolean;
+}
+
+const StyledWrapper = styled(Box)(({ theme }) => ({
+    width: '100%',
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.dividerAlternative}`,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+}));
+
+export const CustomParameterItem = ({
+    text,
+    input = null,
+    isRequired = false,
+}: ICustomParameterItem) => {
+    const theme = useTheme();
+
+    const color = input === null ? 'error' : 'neutral';
+    const requiredError = isRequired && input === null;
+
+    return (
+        <StyledWrapper>
+            <Typography
+                variant="subtitle1"
+                color={theme.palette[color].main}
+                sx={{ minWidth: 118 }}
+            >
+                {`${input === null ? 'no value' : input}`}
+            </Typography>
+            <Box
+                sx={{
+                    flexGrow: 1,
+                    flexDirection: 'column',
+                }}
+            >
+                <Box sx={{ flexGrow: 1 }}>
+                    <ConditionallyRender
+                        condition={Boolean(requiredError)}
+                        show={
+                            <>
+                                <Typography
+                                    component="span"
+                                    color={theme.palette.error.main}
+                                >
+                                    {' required parameter '}
+                                </Typography>
+                                <StringTruncator
+                                    maxWidth="300"
+                                    text={text}
+                                    maxLength={50}
+                                />
+                                <Typography
+                                    component="span"
+                                    color={theme.palette.error.main}
+                                >
+                                    {' is not set '}
+                                </Typography>
+                            </>
+                        }
+                        elseShow={
+                            <>
+                                <Typography
+                                    component="span"
+                                    color="text.disabled"
+                                >
+                                    {' set on parameter '}
+                                </Typography>
+                                <StringTruncator
+                                    maxWidth="300"
+                                    text={text}
+                                    maxLength={50}
+                                />
+                            </>
+                        }
+                    />
+                </Box>
+            </Box>
+            <ConditionallyRender
+                condition={Boolean(requiredError)}
+                show={<CancelOutlined color={'error'} />}
+                elseShow={<div />}
+            />
+        </StyledWrapper>
+    );
+};

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

@@ -4,23 +4,18 @@ import {
     parseParameterString,
     parseParameterStrings,
 } from 'utils/parseParameter';
-import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Chip } from '@mui/material';
-import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
-import { PlaygroundConstraintSchema } from 'component/playground/Playground/interfaces/playground.model';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
+import { CustomParameterItem } from './CustomParameterItem/CustomParameterItem';
 
 interface ICustomStrategyProps {
     parameters: { [key: string]: string };
     strategyName: string;
-    constraints: PlaygroundConstraintSchema[];
 }
 
 export const CustomStrategyParams: VFC<ICustomStrategyProps> = ({
     strategyName,
-    constraints,
     parameters,
 }) => {
     const { strategies } = useStrategies();
@@ -32,109 +27,84 @@ export const CustomStrategyParams: VFC<ICustomStrategyProps> = ({
         return null;
     }
 
-    const renderCustomStrategyParameters = () => {
+    const items = definition?.parameters.map(param => {
-        return definition?.parameters.map((param: any, index: number) => {
+        const paramValue = parameters[param.name];
-            const notLastItem = index !== definition?.parameters?.length - 1;
+        const isRequired = param.required;
-            switch (param?.type) {
-                case 'list':
-                    const values = parseParameterStrings(
-                        parameters[param.name]
-                    );
-                    return (
-                        <Fragment key={param?.name}>
-                            <PlaygroundParameterItem
-                                value={values}
-                                text={param.name}
-                            />
-                            <ConditionallyRender
-                                condition={notLastItem}
-                                show={<StrategySeparator text="AND" />}
-                            />
-                        </Fragment>
-                    );
-                case 'percentage':
-                    return (
-                        <Fragment key={param?.name}>
-                            <div>
-                                <Chip
-                                    size="small"
-                                    variant="outlined"
-                                    color="success"
-                                    label={`${parameters[param.name]}%`}
-                                />{' '}
-                                of your base{' '}
-                                {constraints?.length > 0
-                                    ? 'who match constraints'
-                                    : ''}{' '}
-                                is included.
-                            </div>
-                            <PercentageCircle
-                                percentage={parseParameterNumber(
-                                    parameters[param.name]
-                                )}
-                            />
-                            <ConditionallyRender
-                                condition={notLastItem}
-                                show={<StrategySeparator text="AND" />}
-                            />
-                        </Fragment>
-                    );
-                case 'boolean':
-                    const bool = Boolean(parameters[param?.name]);
-                    return (
-                        <Fragment key={param?.name}>
-                            <PlaygroundParameterItem
-                                value={bool ? ['True'] : []}
-                                text={param.name}
-                                showReason={!bool}
-                                input={bool ? bool : 'no value'}
-                            />
-                            <ConditionallyRender
-                                condition={notLastItem}
-                                show={<StrategySeparator text="AND" />}
-                            />
-                        </Fragment>
-                    );
-                case 'string':
-                    const value =
-                        parseParameterString(parameters[param.name]) ??
-                        'no value';
-                    return (
-                        <Fragment key={param?.name}>
-                            <PlaygroundParameterItem
-                                value={value !== '' ? [value] : []}
-                                text={param.name}
-                                showReason={value === ''}
-                                input={value !== '' ? value : 'no value'}
-                            />
-                            <ConditionallyRender
-                                condition={notLastItem}
-                                show={<StrategySeparator text="AND" />}
-                            />
-                        </Fragment>
-                    );
-                case 'number':
-                    const number = parseParameterNumber(parameters[param.name]);
-                    return (
-                        <Fragment key={param?.name}>
-                            <PlaygroundParameterItem
-                                value={Boolean(number) ? [number] : []}
-                                text={param.name}
-                                showReason={Boolean(number)}
-                                input={Boolean(number) ? number : 'no value'}
-                            />
-                            <ConditionallyRender
-                                condition={notLastItem}
-                                show={<StrategySeparator text="AND" />}
-                            />
-                        </Fragment>
-                    );
-                case 'default':
-                    return null;
-            }
-            return null;
-        });
-    };
 
-    return <>{renderCustomStrategyParameters()}</>;
+        switch (param?.type) {
+            case 'list':
+                const values = parseParameterStrings(paramValue);
+                return (
+                    <CustomParameterItem
+                        isRequired={isRequired}
+                        text={param.name}
+                        input={values?.length > 0 ? values.join(', ') : null}
+                    />
+                );
+            case 'percentage':
+                const percentage = parseParameterNumber(paramValue);
+                const correctPercentage = !(
+                    paramValue === undefined ||
+                    paramValue === '' ||
+                    percentage < 0 ||
+                    percentage > 100
+                );
+                return (
+                    <CustomParameterItem
+                        text={param.name}
+                        isRequired={isRequired}
+                        input={correctPercentage ? `${percentage}%` : undefined}
+                    />
+                );
+            case 'boolean':
+                const bool = ['true', 'false'].includes(paramValue)
+                    ? paramValue
+                    : undefined;
+                return (
+                    <CustomParameterItem
+                        isRequired={isRequired}
+                        text={param.name}
+                        input={paramValue !== undefined ? bool : undefined}
+                    />
+                );
+            case 'string':
+                const value = parseParameterString(paramValue);
+                return (
+                    <CustomParameterItem
+                        text={param.name}
+                        isRequired={isRequired}
+                        input={value !== undefined ? value : undefined}
+                    />
+                );
+            case 'number':
+                const isCorrect = !(
+                    paramValue === undefined || paramValue === ''
+                );
+                const number = parseParameterNumber(paramValue);
+                return (
+                    <CustomParameterItem
+                        text={param.name}
+                        isRequired={isRequired}
+                        input={isCorrect ? `${number}` : undefined}
+                    />
+                );
+            case 'default':
+                return null;
+        }
+        return null;
+    });
+
+    return (
+        <>
+            {items.map((item, index) => (
+                <Fragment key={index}>
+                    <ConditionallyRender
+                        condition={index > 0}
+                        show={<StrategySeparator text="AND" />}
+                    />
+                    {item}
+                </Fragment>
+            ))}
+        </>
+    );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParametertem.styles.ts

@@ -4,8 +4,8 @@ export const useStyles = makeStyles()(theme => ({
     container: {
         width: '100%',
         padding: theme.spacing(2, 3),
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: theme.shape.borderRadiusMedium,
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${theme.palette.dividerAlternative}`,
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.ts

@@ -13,7 +13,7 @@ export const useStyles = makeStyles()(theme => ({
         width: 'auto',
         height: 'auto',
         padding: theme.spacing(2, 3),
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: theme.shape.borderRadiusMedium,
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${theme.palette.dividerAlternative}`,
     },
 }));

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

@@ -23,10 +23,6 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({
     padding: theme.spacing(0),
 }));
 
-const StyledParamWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0, 0),
-}));
-
 export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
     strategyResult,
     input,
@@ -93,20 +89,15 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                     </Box>
                 }
             />
-            <StyledParamWrapper>
+            <PlaygroundResultStrategyExecutionParameters
-                <PlaygroundResultStrategyExecutionParameters
+                parameters={parameters}
-                    parameters={parameters}
+                constraints={constraints}
-                    constraints={constraints}
+                input={input}
-                    input={input}
+            />
-                />
+            <CustomStrategyParams
-                <StyledParamWrapper sx={{ pt: 2 }}>
+                strategyName={strategyResult.name}
-                    <CustomStrategyParams
+                parameters={parameters}
-                        strategyName={strategyResult.name}
+            />
-                        parameters={parameters}
-                        constraints={constraints}
-                    />
-                </StyledParamWrapper>
-            </StyledParamWrapper>
         </StyledStrategyExecutionWrapper>
     );
 };

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

@@ -18,16 +18,16 @@ const StyledChipWrapper = styled(Box)(() => ({
 }));
 
 export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => {
-    const enabled = feature.isEnabled
+    const [enabled, label]: [boolean | 'unknown', string] = (() => {
-        ? true
+        if (feature?.isEnabled) {
-        : feature.strategies?.result === false
+            return [true, 'True'];
-        ? false
+        }
-        : 'unknown';
+        if (feature?.strategies?.result === false) {
-    const label = feature.isEnabled
+            return [false, 'False'];
-        ? 'True'
+        }
-        : feature.strategies?.result === false
+        return ['unknown', 'Unknown'];
-        ? 'False'
+    })();
-        : 'Unknown';
+
     return (
         <StyledCellBox>
             <StyledChipWrapper data-loading>
@@ -35,7 +35,6 @@ export const FeatureStatusCell = ({ feature }: IFeatureStatusCellProps) => {
                     enabled={enabled}
                     label={label}
                     showIcon={enabled !== 'unknown'}
-                    size={'medium'}
                 />
             </StyledChipWrapper>
         </StyledCellBox>

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

@@ -1,9 +1,9 @@
+import { VFC } from 'react';
 import { Chip, styled, useTheme } from '@mui/material';
-import { colors } from '../../../../../themes/colors';
+import { colors } from 'themes/colors';
-import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import React from 'react';
+import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg';
-import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg';
+import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg';
-import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg';
 import { WarningOutlined } from '@mui/icons-material';
 
 interface IResultChipProps {
@@ -11,21 +11,18 @@ interface IResultChipProps {
     label: string;
     // Result icon - defaults to true
     showIcon?: boolean;
-    size?: 'default' | 'medium' | 'large';
 }
 
-export const StyledChip = styled(Chip)<{ width?: number }>(
+export const StyledChip = styled(Chip)(({ theme, icon }) => ({
-    ({ theme, width }) => ({
+    padding: theme.spacing(0, 1),
-        width: width ?? 60,
+    height: 24,
-        height: 24,
+    borderRadius: theme.shape.borderRadius,
-        borderRadius: theme.shape.borderRadius,
+    fontWeight: theme.typography.fontWeightMedium,
-        fontWeight: theme.typography.fontWeightMedium,
+    ['& .MuiChip-label']: {
-        ['& .MuiChip-label']: {
+        padding: 0,
-            padding: 0,
+        paddingLeft: Boolean(icon) ? theme.spacing(0.5) : 0,
-            paddingLeft: theme.spacing(0.5),
+    },
-        },
+}));
-    })
-);
 
 export const StyledFalseChip = styled(StyledChip)(({ theme }) => ({
     border: `1px solid ${theme.palette.error.main}`,
@@ -60,12 +57,11 @@ export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({
     },
 }));
 
-export const PlaygroundResultChip = ({
+export const PlaygroundResultChip: VFC<IResultChipProps> = ({
     enabled,
     label,
     showIcon = true,
-    size = 'default',
+}) => {
-}: IResultChipProps) => {
     const theme = useTheme();
     const icon = (
         <ConditionallyRender
@@ -91,10 +87,6 @@ export const PlaygroundResultChip = ({
         />
     );
 
-    let chipWidth = 60;
-    if (size === 'medium') chipWidth = 72;
-    if (size === 'large') chipWidth = 100;
-
     return (
         <ConditionallyRender
             condition={enabled === 'unknown' || enabled === 'unevaluated'}
@@ -102,7 +94,6 @@ export const PlaygroundResultChip = ({
                 <StyledUnknownChip
                     icon={showIcon ? icon : undefined}
                     label={label}
-                    width={chipWidth}
                 />
             }
             elseShow={
@@ -112,14 +103,12 @@ export const PlaygroundResultChip = ({
                         <StyledTrueChip
                             icon={showIcon ? icon : undefined}
                             label={label}
-                            width={chipWidth}
                         />
                     }
                     elseShow={
                         <StyledFalseChip
                             icon={showIcon ? icon : undefined}
                             label={label}
-                            width={chipWidth}
                         />
                     }
                 />

frontend/src/themes/theme.ts

@@ -47,10 +47,10 @@ export default createTheme({
         bold: 700,
     },
     shape: {
-        borderRadius: '4px',
+        borderRadius: 4,
-        borderRadiusMedium: '8px',
+        borderRadiusMedium: 8,
-        borderRadiusLarge: '12px',
+        borderRadiusLarge: 12,
-        borderRadiusExtraLarge: '20px',
+        borderRadiusExtraLarge: 20,
         tableRowHeight: 64,
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,

frontend/src/themes/themeTypes.ts

@@ -120,9 +120,9 @@ declare module '@mui/material/styles' {
 
 declare module '@mui/system/createTheme/shape' {
     interface Shape {
-        borderRadiusMedium: string;
+        borderRadiusMedium: number;
-        borderRadiusLarge: string;
+        borderRadiusLarge: number;
-        borderRadiusExtraLarge: string;
+        borderRadiusExtraLarge: number;
         tableRowHeight: number;
         tableRowHeightCompact: number;
         tableRowHeightDense: number;