From b32b751f2cf14cb62c688241a1bcfd051f5c12ae Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Mon, 8 Aug 2022 11:41:35 +0200
Subject: [PATCH] update custom strategy params from feature branch

---
 .../CustomStrategyParams.tsx                  | 122 ++++++------------
 1 file changed, 41 insertions(+), 81 deletions(-)

diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
index f39f164725..b2cf842ad7 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
@@ -9,9 +9,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 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 '../StrategyExecution.styles';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 
 interface ICustomStrategyProps {
@@ -25,15 +23,16 @@ export const CustomStrategyParams: VFC<ICustomStrategyProps> = ({
     constraints,
     parameters,
 }) => {
-    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) {
@@ -81,93 +80,54 @@ export const CustomStrategyParams: VFC<ICustomStrategyProps> = ({
                         </Fragment>
                     );
                 case 'boolean':
+                    const bool = Boolean(parameters[param?.name]);
                     return (
-                        <Fragment key={param.name}>
-                            <p key={param.name}>
-                                <StringTruncator
-                                    maxLength={15}
-                                    maxWidth="150"
-                                    text={param.name}
-                                />{' '}
-                                {parameters[param.name]}
-                            </p>
+                        <Fragment key={param?.name}>
+                            <PlaygroundParameterItem
+                                value={bool ? ['True'] : []}
+                                text={param.name}
+                                showReason={!bool}
+                                input={bool ? bool : 'no value'}
+                            />
                             <ConditionallyRender
-                                condition={
-                                    typeof parameters[param.name] !==
-                                    'undefined'
-                                }
-                                show={
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                }
+                                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
-                            condition={
-                                typeof parameters[param.name] !== 'undefined'
-                            }
-                            key={param.name}
-                            show={
-                                <>
-                                    <p className={styles.valueContainer}>
-                                        <StringTruncator
-                                            maxWidth="150"
-                                            maxLength={15}
-                                            text={param.name}
-                                        />
-                                        <span className={styles.valueSeparator}>
-                                            is set to
-                                        </span>
-                                        <StringTruncator
-                                            maxWidth="300"
-                                            text={value}
-                                            maxLength={50}
-                                        />
-                                    </p>
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                </>
-                            }
-                        />
+                        <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 (
-                        <ConditionallyRender
-                            condition={number !== undefined}
-                            key={param.name}
-                            show={
-                                <>
-                                    <p className={styles.valueContainer}>
-                                        <StringTruncator
-                                            maxLength={15}
-                                            maxWidth="150"
-                                            text={param.name}
-                                        />
-                                        <span className={styles.valueSeparator}>
-                                            is set to
-                                        </span>
-                                        <StringTruncator
-                                            maxWidth="300"
-                                            text={String(number)}
-                                            maxLength={50}
-                                        />
-                                    </p>
-                                    <ConditionallyRender
-                                        condition={notLastItem}
-                                        show={<StrategySeparator text="AND" />}
-                                    />
-                                </>
-                            }
-                        />
+                        <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;