Support multiple filter values using comma separation instead of multiple input fields

frontend/src/metabase/css/core/text.css

@@ -90,6 +90,10 @@
   line-height: 1.5em;
 }
 
+.text-small {
+    font-size: 0.875em;
+}
+
 .text-current {
     color: currentColor;
 }

frontend/src/metabase/query_builder/components/filters/pickers/TextPicker.jsx

 /* @flow */
 
-import React, { Component, PropTypes } from "react";
+import React, {Component, PropTypes} from "react";
 
-import Icon from "metabase/components/Icon.jsx";
 import cx from "classnames";
+import _ from "underscore";
 
 type Props = {
     values: Array<string|null>,
@@ -29,63 +29,41 @@ export default class TextPicker extends Component<*, Props, *> {
         placeholder: "Enter desired text"
     }
 
-    addValue() {
-        let values = this.props.values.slice();
-        values.push(null);
-        this.props.onValuesChange(values);
-    }
-
-    removeValue(index: number) {
-        let values = this.props.values.slice();
-        values.splice(index, 1);
-        this.props.onValuesChange(values);
-    }
-
-    setValue(index: number, value: string|null) {
-        let values = this.props.values.slice();
-        values[index] = value;
+    setValue(fieldString: string|null) {
+        const fieldIsNonEmpty = fieldString !== null && fieldString !== "";
+        const values = fieldIsNonEmpty ? fieldString.split(',') : [null];
         this.props.onValuesChange(values);
     }
 
     render() {
-        let { values, validations, multi, onCommit } = this.props;
+        let {values, validations, multi, onCommit} = this.props;
+        const hasInvalidValues = _.some(validations, (v) => v === false);
+
+        const commitOnEnter = (e) => {
+            if (e.key === "Enter" && onCommit) {
+                onCommit();
+            }
+        };
 
         return (
             <div>
-                <ul>
-                    {values.map((value, index) =>
-                        <li
-                            className="FilterInput px1 pt1 relative"
-                            key={index}
-                        >
-                            <input
-                                className={cx("input block full border-purple", { "border-error": validations[index] === false })}
-                                type="text"
-                                value={value}
-                                onChange={(e) => this.setValue(index, e.target.value)}
-                                onKeyPress={(e) => {
-                                    if (e.key === "Enter" && onCommit) {
-                                        onCommit();
-                                    }
-                                }}
-                                placeholder={this.props.placeholder}
-                                autoFocus={true}
-                            />
-                            { index > 0 ?
-                                <span className="FilterRemove-field absolute top right">
-                                    <Icon name="close" className="cursor-pointer text-white" size={12} onClick={() => this.removeValue(index)}/>
-                                </span>
-                            : null }
-                        </li>
-                    )}
-                </ul>
+                <div className="FilterInput px1 pt1 relative">
+                    <input
+                        className={cx("input block full border-purple", { "border-error": hasInvalidValues })}
+                        type="text"
+                        value={values.join(',')}
+                        onChange={(e) => this.setValue(e.target.value)}
+                        onKeyPress={commitOnEnter}
+                        placeholder={this.props.placeholder}
+                        autoFocus={true}
+                    />
+                </div>
+
                 { multi ?
-                    <div className="p1">
-                        { values[values.length - 1] != null ?
-                            <a className="text-underline cursor-pointer" onClick={() => this.addValue()}>Add another value</a>
-                        : null }
+                    <div className="p1 text-small">
+                        You can enter multiple values separated by commas
                     </div>
-                : null }
+                    : null }
             </div>
         );
     }