From fa72952098c225c131ef3fcc4cf3df17a14c581a Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Tue, 15 Mar 2022 15:06:19 +0100
Subject: [PATCH] refactor: improve constraint values form (#790)

* refactor: preserve white-space in constraint values

* refactor: deduplicate constraint values
---
 .../common/Constraint/Constraint.styles.ts       |  5 ++++-
 .../ConstraintAccordion.styles.ts                |  3 +++
 .../FreeTextInput/FreeTextInput.tsx              | 16 +++++++++++++---
 .../ConstraintAccordionViewBody.tsx              |  1 +
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/common/Constraint/Constraint.styles.ts b/frontend/src/component/common/Constraint/Constraint.styles.ts
index 2541965ff9..879dc64e67 100644
--- a/frontend/src/component/common/Constraint/Constraint.styles.ts
+++ b/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',
+    },
 }));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
index fd272386b6..ae7694ac50 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/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)]: {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
index 79e5d07989..1ebf6cfa0b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
+++ b/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));
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
index c4ad74d846..ad0cfab863 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/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}