fix: add common component input-list-field

frontend/src/component/common/input-list-field.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Textfield } from 'react-mdl';
+
+function InputListField({ label, values = [], error, name, updateValues, placeholder = '', onBlur = () => {} }) {
+    const handleChange = evt => {
+        const values = evt.target.value.split(/,\s?/);
+        const trimmedValues = values.map(v => v.trim());
+        updateValues(trimmedValues);
+    };
+
+    const handleKeyDown = evt => {
+        if (evt.key === 'Backspace') {
+            const currentValue = evt.target.value;
+            if (currentValue.endsWith(', ')) {
+                evt.preventDefault();
+                const value = currentValue.slice(0, -2);
+                updateValues(value.split(/,\s*/));
+            }
+        }
+    };
+
+    return (
+        <Textfield
+            name={name}
+            floatingLabel
+            error={error}
+            placeholder={placeholder}
+            value={values ? values.join(', ') : ''}
+            onKeyDown={handleKeyDown}
+            onChange={handleChange}
+            onBlur={onBlur}
+            label={label}
+            style={{ width: '100%' }}
+        />
+    );
+}
+
+InputListField.propTypes = {
+    label: PropTypes.string.isRequired,
+    values: PropTypes.array,
+    error: PropTypes.string,
+    placeholder: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    updateValues: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+};
+
+export default InputListField;

frontend/src/component/feature/form/flexible-rollout-strategy-input.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Textfield } from 'react-mdl';
-import Select from './select';
+import Select from '../../common/select';
 
 import StrategyInputPercentage from './strategy-input-percentage';
 

frontend/src/component/feature/variant/add-variant.jsx

@@ -12,7 +12,7 @@ import {
     Tooltip,
     Icon,
 } from 'react-mdl';
-import MySelect from '../form/select';
+import MySelect from '../../common/select';
 import { trim } from '../form/util';
 import styles from './variant.scss';
 import OverrideConfig from './override-config';
@@ -38,9 +38,7 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
                 setPayload(editVariant.payload);
             }
             if (editVariant.overrides) {
-                setOverrides(
-                    editVariant.overrides.map(o => ({ contextName: o.contextName, values: o.values.join(', ') }))
-                );
+                setOverrides(editVariant.overrides);
             } else {
                 setOverrides([]);
             }
@@ -80,10 +78,7 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
                 overrides: overrides
                     .map(o => ({
                         contextName: o.contextName,
-                        values: o.values
-                            .split(',')
-                            .map(v => v.trim())
-                            .filter(v => v),
+                        values: o.values,
                     }))
                     .filter(o => o.values && o.values.length > 0),
             };
@@ -110,7 +105,7 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
         closeDialog();
     };
 
-    const updateOverrideOption = index => e => {
+    const updateOverrideType = index => e => {
         e.preventDefault();
         setOverrides(
             overrides.map((o, i) => {
@@ -122,14 +117,25 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
         );
     };
 
-    const removeOverrideOption = index => e => {
+    const updateOverrideValues = (index, values) => {
+        setOverrides(
+            overrides.map((o, i) => {
+                if (i === index) {
+                    o.values = values;
+                }
+                return o;
+            })
+        );
+    };
+
+    const removeOverride = index => e => {
         e.preventDefault();
         setOverrides(overrides.filter((o, i) => i !== index));
     };
 
     const onAddOverride = e => {
         e.preventDefault();
-        setOverrides([...overrides, ...[{ contextName: 'userId', values: '' }]]);
+        setOverrides([...overrides, ...[{ contextName: 'userId', values: [] }]]);
     };
 
     return (
@@ -210,8 +216,10 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
 
                     <OverrideConfig
                         overrides={overrides}
-                        removeOverrideOption={removeOverrideOption}
-                        updateOverrideOption={updateOverrideOption}
+                        removeOverride={removeOverride}
+                        updateOverrideType={updateOverrideType}
+                        updateOverrideValues={updateOverrideValues}
+                        updateValues={updateOverrideValues}
                     />
                     <a href="#add-override" onClick={onAddOverride}>
                         <small>Add override</small>

frontend/src/component/feature/variant/override-config.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Textfield, Grid, Cell, IconButton } from 'react-mdl';
-import MySelect from '../form/select';
+import { Grid, Cell, IconButton } from 'react-mdl';
+import MySelect from '../../common/select';
+import InputListField from '../../common/input-list-field';
 
 const overrideOptions = [
     { key: 'userId', label: 'userId' },
     { key: 'appName', label: 'appName' },
 ];
 
-function OverrideConfig({ overrides, updateOverrideOption, removeOverrideOption }) {
+function OverrideConfig({ overrides, updateOverrideType, updateOverrideValues, removeOverride }) {
+    const updateValues = i => values => {
+        updateOverrideValues(i, values);
+    };
+
     return overrides.map((o, i) => (
         <Grid noSpacing key={`override=${i}`}>
             <Cell col={3}>
@@ -17,22 +22,21 @@ function OverrideConfig({ overrides, updateOverrideOption, removeOverrideOption
                     label="Context Field"
                     value={o.contextName}
                     options={overrideOptions}
-                    onChange={updateOverrideOption(i)}
+                    onChange={updateOverrideType(i)}
                 />
             </Cell>
             <Cell col={8}>
-                <Textfield
-                    floatingLabel
-                    label="Values"
+                <InputListField
+                    label="Values (v1, v2, ...)"
                     name="values"
-                    placeholder="val1, val2, ..."
+                    placeholder=""
                     style={{ width: '100%' }}
-                    value={o.values}
-                    onChange={updateOverrideOption(i)}
+                    values={o.values}
+                    updateValues={updateValues(i)}
                 />
             </Cell>
             <Cell col={1} style={{ textAlign: 'right' }}>
-                <IconButton name="delete" onClick={removeOverrideOption(i)} />
+                <IconButton name="delete" onClick={removeOverride(i)} />
             </Cell>
         </Grid>
     ));
@@ -40,8 +44,9 @@ function OverrideConfig({ overrides, updateOverrideOption, removeOverrideOption
 
 OverrideConfig.propTypes = {
     overrides: PropTypes.array.isRequired,
-    updateOverrideOption: PropTypes.func.isRequired,
-    removeOverrideOption: PropTypes.func.isRequired,
+    updateOverrideType: PropTypes.func.isRequired,
+    updateOverrideValues: PropTypes.func.isRequired,
+    removeOverride: PropTypes.func.isRequired,
 };
 
 export default OverrideConfig;