refactor: improve constraint values form (#790)

* refactor: preserve white-space in constraint values

* refactor: deduplicate constraint values

frontend/src/component/common/Constraint/Constraint.styles.ts

@@ -30,5 +30,8 @@ export const useStyles = makeStyles(theme => ({
     column: {
         flexDirection: 'column',
     },
-    values: { marginLeft: '1.5rem' },
+    values: {
+        marginLeft: '1.5rem',
+        whiteSpace: 'pre-wrap',
+    },
 }));

frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts

@@ -127,6 +127,9 @@ export const useStyles = makeStyles(theme => ({
     chip: {
         margin: '0 0.5rem 0.5rem 0',
     },
+    chipValue: {
+        whiteSpace: 'pre',
+    },
     headerActions: {
         marginLeft: 'auto',
         [theme.breakpoints.down(660)]: {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx

@@ -14,7 +14,12 @@ interface IFreeTextInputProps {
 }
 
 const useStyles = makeStyles(theme => ({
-    valueChip: { margin: '0 0.5rem 0.5rem 0' },
+    valueChip: {
+        margin: '0 0.5rem 0.5rem 0',
+    },
+    chipValue: {
+        whiteSpace: 'pre',
+    },
     inputContainer: {
         display: 'flex',
         alignItems: 'center',
@@ -74,9 +79,9 @@ export const FreeTextInput = ({
                 .split(',')
                 .filter(values => values)
                 .map(value => value.trim());
-            setValues([...values, ...newValues]);
+            setValues(uniqueValues([...values, ...newValues]));
         } else {
-            setValues([...values, inputValues.trim()]);
+            setValues(uniqueValues([...values, inputValues.trim()]));
         }
 
         setInputValues('');
@@ -145,6 +150,7 @@ const ConstraintValueChips = ({
                                 text={value}
                                 maxLength={35}
                                 maxWidth="100"
+                                className={styles.chipValue}
                             />
                         }
                         key={`${value}-${index}`}
@@ -156,3 +162,7 @@ const ConstraintValueChips = ({
         </>
     );
 };
+
+const uniqueValues = <T,>(values: T[]): T[] => {
+    return Array.from(new Set(values));
+};

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx

@@ -106,6 +106,7 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => {
                                 maxWidth="200"
                                 text={value}
                                 maxLength={25}
+                                className={styles.chipValue}
                             />
                         }
                         className={styles.chip}