From ece95f87befac20e38ab7ab7458c5d0377fff157 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 23 Sep 2020 19:50:00 +0200
Subject: [PATCH] fix: list parameters should be trimmed

see https://github.com/Unleash/unleash/issues/629
---
 .../strategy-input-list-test.jsx.snap         | 28 +++++++++++++++----
 .../feature/form/strategy-input-list.jsx      | 13 ++++++---
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
index d6dac1cf83..8bea8dadf4 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
@@ -3,7 +3,13 @@
 exports[`renders correctly when disabled 1`] = `
 <div>
   <p>
-    featureName
+    <i>
+      Please specify the list of 
+      <code>
+        featureName
+      </code>
+      :
+    </i>
   </p>
   <div
     style={
@@ -39,7 +45,13 @@ exports[`renders correctly when disabled 1`] = `
 exports[`renders strategy with empty list as param 1`] = `
 <div>
   <p>
-    featureName
+    <i>
+      Please specify the list of 
+      <code>
+        featureName
+      </code>
+      :
+    </i>
   </p>
   <div
     style={
@@ -58,7 +70,7 @@ exports[`renders strategy with empty list as param 1`] = `
   >
     <react-mdl-Textfield
       floatingLabel={true}
-      label="Add list entry"
+      label="Enter value (val1, val2)"
       name="featureName_input"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -88,7 +100,13 @@ exports[`renders strategy with empty list as param 1`] = `
 exports[`renders strategy with list as param 1`] = `
 <div>
   <p>
-    featureName
+    <i>
+      Please specify the list of 
+      <code>
+        featureName
+      </code>
+      :
+    </i>
   </p>
   <div
     style={
@@ -128,7 +146,7 @@ exports[`renders strategy with list as param 1`] = `
   >
     <react-mdl-Textfield
       floatingLabel={true}
-      label="Add list entry"
+      label="Enter value (val1, val2)"
       name="featureName_input"
       onBlur={[Function]}
       onFocus={[Function]}
diff --git a/frontend/src/component/feature/form/strategy-input-list.jsx b/frontend/src/component/feature/form/strategy-input-list.jsx
index c6129609de..bf66283237 100644
--- a/frontend/src/component/feature/form/strategy-input-list.jsx
+++ b/frontend/src/component/feature/form/strategy-input-list.jsx
@@ -37,9 +37,10 @@ export default class InputList extends Component {
 
         const { name, list, setConfig } = this.props;
         if (this.textInput && this.textInput.inputRef && this.textInput.inputRef.value) {
-            list.push(this.textInput.inputRef.value);
+            const newValues = this.textInput.inputRef.value.split(/,\s*/);
+            const newList = list.concat(newValues).filter(a => a);
             this.textInput.inputRef.value = '';
-            setConfig(name, list.join(','));
+            setConfig(name, newList.join(','));
         }
     };
 
@@ -53,7 +54,11 @@ export default class InputList extends Component {
         const { name, list, disabled } = this.props;
         return (
             <div>
-                <p>{name}</p>
+                <p>
+                    <i>
+                        Please specify the list of <code>{name}</code>:
+                    </i>
+                </p>
 
                 <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                     {list.map((entryValue, index) => (
@@ -75,7 +80,7 @@ export default class InputList extends Component {
                             name={`${name}_input`}
                             style={{ width: '100%', flex: 1 }}
                             floatingLabel
-                            label="Add list entry"
+                            label="Enter value (val1, val2)"
                             onFocus={this.onFocus.bind(this)}
                             onBlur={this.onBlur.bind(this)}
                             ref={input => {