fix playground custom strategy parameters debugging (#1213)

* fix playground custom strategy parameters debugging

* fix playground strategy parameters and chips consistency

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;

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',
-        justifyContent: 'center',
+        alignItems: 'center',
         gap: theme.spacing(1.5),
         marginTop: theme.spacing(1.5),
     },

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>
-                        <PlaygroundResultChip
-                            enabled={feature.isEnabled}
-                            label={feature.isEnabled ? 'True' : 'False'}
-                        />
-                    </span>
+                    <ConditionallyRender
+                        condition={feature?.strategies?.result !== 'unknown'}
+                        show={() => (
+                            <PlaygroundResultChip
+                                enabled={feature.isEnabled}
+                                label={feature.isEnabled ? 'True' : 'False'}
+                            />
+                        )}
+                        elseShow={() => (
+                            <PlaygroundResultChip
+                                enabled="unknown"
+                                label={'Unknown'}
+                                showIcon={false}
+                            />
+                        )}
+                    />
                 </div>
                 <IconButton onClick={onCloseClick} className={styles.icon}>
                     <CloseOutlined />

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'
-                    }
                 />
             }
         >

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';

src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/PlaygroundMultipleValues/PLaygroundMultipleValues.tsx → 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>
                     }
                 />

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>
                 }
             />

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>
+    );
+};

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 = () => {
-        return definition?.parameters.map((param: any, index: number) => {
-            const notLastItem = index !== definition?.parameters?.length - 1;
-            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;
-        });
-    };
+    const items = definition?.parameters.map(param => {
+        const paramValue = parameters[param.name];
+        const isRequired = param.required;
 
-    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>
+            ))}
+        </>
+    );
 };