From fd44844f156b71253edffbf547ad7e78cbed8d8d Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 29 Apr 2022 15:06:36 +0200
Subject: [PATCH] fix: truncate long parameter values (#928)

* refactor: improve parameter variable names

* fix: truncate long parameter values

* refactor: remove extra spacing

Co-authored-by: sighphyre <liquidwicked64@gmail.com>
---
 .../FeatureOverviewExecution.styles.ts        | 12 +++++++
 .../FeatureOverviewExecution.tsx              | 36 +++++++++++++------
 .../FeatureOverviewExecutionChips.tsx         | 13 +++++--
 .../StrategyInputList/StrategyInputList.tsx   |  9 ++++-
 4 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts
new file mode 100644
index 0000000000..e8cd9b1c93
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts
@@ -0,0 +1,12 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    valueContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1ch',
+    },
+    valueSeparator: {
+        color: theme.palette.grey[700],
+    },
+}));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
index 224032e135..aa777845ad 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
@@ -9,6 +9,7 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { FeatureOverviewSegment } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment';
 import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
+import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles';
 
 interface IFeatureOverviewExecutionProps {
     parameters: IParameter;
@@ -22,6 +23,7 @@ const FeatureOverviewExecution = ({
     constraints = [],
     strategy,
 }: IFeatureOverviewExecutionProps) => {
+    const styles = useStyles();
     const { strategies } = useStrategies();
     const { uiConfig } = useUiConfig();
 
@@ -165,20 +167,27 @@ const FeatureOverviewExecution = ({
                         </Fragment>
                     );
                 case 'string':
-                    const numValue = strategy.parameters[param.name];
+                    const value = strategy.parameters[param.name];
                     return (
                         <ConditionallyRender
-                            condition={numValue !== undefined}
+                            condition={value !== undefined}
                             key={param.name}
                             show={
                                 <>
-                                    <p>
+                                    <p className={styles.valueContainer}>
                                         <StringTruncator
                                             maxWidth="150"
                                             maxLength={15}
                                             text={param.name}
-                                        />{' '}
-                                        is set to {numValue}
+                                        />
+                                        <span className={styles.valueSeparator}>
+                                            is set to
+                                        </span>
+                                        <StringTruncator
+                                            maxWidth="300"
+                                            text={value}
+                                            maxLength={50}
+                                        />
                                     </p>
                                     <ConditionallyRender
                                         condition={notLastItem}
@@ -189,20 +198,27 @@ const FeatureOverviewExecution = ({
                         />
                     );
                 case 'number':
-                    const value = strategy.parameters[param.name];
+                    const number = strategy.parameters[param.name];
                     return (
                         <ConditionallyRender
-                            condition={value}
+                            condition={number !== undefined}
                             key={param.name}
                             show={
                                 <>
-                                    <p>
+                                    <p className={styles.valueContainer}>
                                         <StringTruncator
                                             maxLength={15}
                                             maxWidth="150"
                                             text={param.name}
-                                        />{' '}
-                                        is set to {value}
+                                        />
+                                        <span className={styles.valueSeparator}>
+                                            is set to
+                                        </span>
+                                        <StringTruncator
+                                            maxWidth="300"
+                                            text={String(number)}
+                                            maxLength={50}
+                                        />
                                     </p>
                                     <ConditionallyRender
                                         condition={notLastItem}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
index c474624224..ce5443e87c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
@@ -1,6 +1,7 @@
 import { Chip } from '@material-ui/core';
 import ConditionallyRender from 'component/common/ConditionallyRender';
 import { useStyles } from './FeatureOverviewExecutionChips.styles';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 
 interface IFeatureOverviewExecutionChipsProps {
     value: string[];
@@ -24,10 +25,16 @@ const FeatureOverviewExecutionChips = ({
                             {value.length > 1 ? `${text}s` : text} will get
                             access.
                         </p>
-                        {value.map((userId: string) => (
+                        {value.map((v: string) => (
                             <Chip
-                                key={userId}
-                                label={userId}
+                                key={v}
+                                label={
+                                    <StringTruncator
+                                        maxWidth="300"
+                                        text={v}
+                                        maxLength={50}
+                                    />
+                                }
                                 className={styles.chip}
                             />
                         ))}
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
index 52fd2fc1d8..4c08472e6f 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
@@ -3,6 +3,7 @@ import { Button, Chip, TextField, Typography } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 import ConditionallyRender from 'component/common/ConditionallyRender';
 import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 
 interface IStrategyInputList {
     name: string;
@@ -80,7 +81,13 @@ const StrategyInputList = ({
                 {list.map((entryValue, index) => (
                     <Chip
                         key={index + entryValue}
-                        label={entryValue}
+                        label={
+                            <StringTruncator
+                                maxWidth="300"
+                                text={entryValue}
+                                maxLength={50}
+                            />
+                        }
                         style={{ marginRight: '3px' }}
                         onDelete={disabled ? undefined : () => onClose(index)}
                         title="Remove value"