Parameters Bug fix

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

@@ -1,18 +1,18 @@
 import { Chip, Typography, useTheme } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useStyles } from './PlaygroundConstraintItem.styles';
+import { useStyles } from './PlaygroundParametertem.styles';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { CancelOutlined } from '@mui/icons-material';
 import classnames from 'classnames';
 
 interface IConstraintItemProps {
-    value: string[];
+    value: Array<string | number>;
     text: string;
     input?: string | number | boolean | 'no value';
     showReason?: boolean;
 }
 
-export const PlaygroundConstraintItem = ({
+export const PlaygroundParameterItem = ({
     value,
     text,
     input,
@@ -56,13 +56,13 @@ export const PlaygroundConstraintItem = ({
                                 {value.length > 1 ? `${text}s` : text} will get
                                 access.
                             </p>
-                            {value.map((v: string) => (
+                            {value.map((v: string | number) => (
                                 <Chip
                                     key={v}
                                     label={
                                         <StringTruncator
                                             maxWidth="300"
-                                            text={v}
+                                            text={v.toString()}
                                             maxLength={50}
                                         />
                                     }

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

@@ -33,7 +33,7 @@ export const PlaygroundResultConstraintExecution = ({
             {constraints?.map((constraint, index) => (
                 <Fragment key={objectId(constraint)}>
                     <ConditionallyRender
-                        condition={index > 0}
+                        condition={index > 0 && constraints?.length > 1}
                         show={<StrategySeparator text="AND" />}
                     />
                     <PlaygroundResultConstraintAccordionView

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

@@ -37,6 +37,7 @@ export const PlaygroundResultStrategyExecution = ({
     const { classes: styles } = useStyles();
 
     const hasConstraints = Boolean(constraints && constraints.length > 0);
+    const hasParameters = Object.keys(parameters).length === 0;
 
     if (!parameters) {
         return null;
@@ -68,7 +69,7 @@ export const PlaygroundResultStrategyExecution = ({
                         />
                         <ConditionallyRender
                             condition={Boolean(
-                                constraints && constraints.length > 0
+                                constraints && constraints.length > 0 && !hasParameters
                             )}
                             show={<StrategySeparator text="AND" />}
                         />

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

@@ -4,14 +4,12 @@ import {
     parseParameterStrings,
 } from 'utils/parseParameter';
 import React, { Fragment } from 'react';
-import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem';
+import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Chip } from '@mui/material';
+import {Chip} from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
-import { useStyles } from '../PlaygroundResultStrategyExecution.styles';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 
 interface PlaygroundResultStrategyExecutionCustomStrategyProps {
@@ -25,15 +23,16 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({
     constraints,
     parameters,
 }: PlaygroundResultStrategyExecutionCustomStrategyProps) => {
-    const { classes: styles } = useStyles();
     const { strategies } = useStrategies();
-
     const definition = strategies.find(strategyDefinition => {
         return strategyDefinition.name === strategyName;
     });
 
+    if (!definition?.editable) {
+        return null;
+    }
+
     const renderCustomStrategyParameters = () => {
-        if (!definition?.editable) return null;
         return definition?.parameters.map((param: any, index: number) => {
             const notLastItem = index !== definition?.parameters?.length - 1;
             switch (param?.type) {
@@ -43,7 +42,7 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({
                     );
                     return (
                         <Fragment key={param?.name}>
-                            <PlaygroundConstraintItem
+                            <PlaygroundParameterItem
                                 value={values}
                                 text={param.name}
                             />
@@ -81,93 +80,52 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({
                         </Fragment>
                     );
                 case 'boolean':
+                    const bool = Boolean(parameters[param?.name]);
                     return (
-                        <Fragment key={param.name}>
+                        <Fragment key={param?.name}>
-                            <p key={param.name}>
+                            <PlaygroundParameterItem
-                                <StringTruncator
+                                value={bool ? ['True'] : []}
-                                    maxLength={15}
+                                text={param.name}
-                                    maxWidth="150"
+                                showReason={!bool}
-                                    text={param.name}
+                                input={bool ? bool : 'no value'}
-                                />{' '}
+                            />
-                                {parameters[param.name]}
-                            </p>
                             <ConditionallyRender
-                                condition={
+                                condition={notLastItem}
-                                    typeof parameters[param.name] !==
+                                show={<StrategySeparator text="AND" />}
-                                    'undefined'
-                                }
-                                show={
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                }
                             />
                         </Fragment>
                     );
                 case 'string':
-                    const value = parseParameterString(parameters[param.name]);
+                    const value = parseParameterString(parameters[param.name]) ?? 'no value';
                     return (
-                        <ConditionallyRender
+                        <Fragment key={param?.name}>
-                            condition={
+                            <PlaygroundParameterItem
-                                typeof parameters[param.name] !== 'undefined'
+                                value={value !== '' ? [value] : []}
-                            }
+                                text={param.name}
-                            key={param.name}
+                                showReason={value === ''}
-                            show={
+                                input={value !== '' ? value : 'no value'}
-                                <>
+                            />
-                                    <p className={styles.valueContainer}>
+                            <ConditionallyRender
-                                        <StringTruncator
+                                condition={notLastItem}
-                                            maxWidth="150"
+                                show={<StrategySeparator text="AND" />}
-                                            maxLength={15}
+                            />
-                                            text={param.name}
+                        </Fragment>
-                                        />
-                                        <span className={styles.valueSeparator}>
-                                            is set to
-                                        </span>
-                                        <StringTruncator
-                                            maxWidth="300"
-                                            text={value}
-                                            maxLength={50}
-                                        />
-                                    </p>
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                </>
-                            }
-                        />
                     );
                 case 'number':
                     const number = parseParameterNumber(parameters[param.name]);
                     return (
-                        <ConditionallyRender
+                        <Fragment key={param?.name}>
-                            condition={number !== undefined}
+                            <PlaygroundParameterItem
-                            key={param.name}
+                                value={Boolean(number) ? [number] : []}
-                            show={
+                                text={param.name}
-                                <>
+                                showReason={Boolean(number)}
-                                    <p className={styles.valueContainer}>
+                                input={Boolean(number) ? number : 'no value'}
-                                        <StringTruncator
+                            />
-                                            maxLength={15}
+                            <ConditionallyRender
-                                            maxWidth="150"
+                                condition={notLastItem}
-                                            text={param.name}
+                                show={<StrategySeparator text="AND" />}
-                                        />
+                            />
-                                        <span className={styles.valueSeparator}>
+                        </Fragment>
-                                            is set to
-                                        </span>
-                                        <StringTruncator
-                                            maxWidth="300"
-                                            text={String(number)}
-                                            maxLength={50}
-                                        />
-                                    </p>
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                </>
-                            }
-                        />
                     );
                 case 'default':
                     return null;

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

@@ -4,14 +4,14 @@ import {
 } from 'utils/parseParameter';
 import { Box, Chip } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
-import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem';
+import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem';
 import React from 'react';
 import { useStyles } from '../PlaygroundResultStrategyExecution.styles';
 import {
     PlaygroundConstraintSchema,
     PlaygroundRequestSchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
-import { getMappedParam } from '../helepers';
+import { getMappedParam } from '../helpers';
 
 export interface PlaygroundResultStrategyExecutionParametersProps {
     parameters: { [key: string]: string };
@@ -62,7 +62,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                 case 'UserIds':
                     const users = parseParameterStrings(parameters[key]);
                     return (
-                        <PlaygroundConstraintItem
+                        <PlaygroundParameterItem
                             key={key}
                             value={users}
                             text="user"
@@ -84,7 +84,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                 case 'HostNames':
                     const hosts = parseParameterStrings(parameters[key]);
                     return (
-                        <PlaygroundConstraintItem
+                        <PlaygroundParameterItem
                             key={key}
                             value={hosts}
                             text={'host'}
@@ -105,7 +105,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                 case 'IPs':
                     const IPs = parseParameterStrings(parameters[key]);
                     return (
-                        <PlaygroundConstraintItem
+                        <PlaygroundParameterItem
                             key={key}
                             value={IPs}
                             text={'IP'}