Support multi-select in parameters

client/app/components/EditParameterSettingsDialog.jsx

@@ -2,6 +2,7 @@
 import { includes, words, capitalize, clone, isNull } from 'lodash';
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import Checkbox from 'antd/lib/checkbox';
 import Modal from 'antd/lib/modal';
 import Form from 'antd/lib/form';
 import Button from 'antd/lib/button';
@@ -23,6 +24,13 @@ function isTypeDateRange(type) {
   return /-range/.test(type);
 }
 
+function joinExampleList(multiValuesOptions) {
+  const { prefix, suffix } = multiValuesOptions;
+  return ['value1', 'value2', 'value3']
+    .map(value => `${prefix}${value}${suffix}`)
+    .join(',');
+}
+
 function NameInput({ name, type, onChange, existingNames, setValidation }) {
   let helpText = '';
   let validateStatus = '';
@@ -185,6 +193,48 @@ function EditParameterSettingsDialog(props) {
             />
           </Form.Item>
         )}
+        {(param.type === 'enum' || param.type === 'query') && (
+          <Form.Item className="m-b-0" label=" " colon={false} {...formItemProps}>
+            <Checkbox
+              defaultChecked={!!param.multiValuesOptions}
+              onChange={e => setParam({ ...param,
+                multiValuesOptions: e.target.checked ? {
+                  prefix: '',
+                  suffix: '',
+                  separator: ',',
+                } : null })}
+              data-test="AllowMultipleValuesCheckbox"
+            >
+            Allow multiple values
+            </Checkbox>
+          </Form.Item>
+        )}
+        {(param.type === 'enum' || param.type === 'query') && param.multiValuesOptions && (
+          <Form.Item
+            label="Quotation"
+            help={(
+              <React.Fragment>
+                Placed in query as: <code>{joinExampleList(param.multiValuesOptions)}</code>
+              </React.Fragment>
+            )}
+            {...formItemProps}
+          >
+            <Select
+              value={param.multiValuesOptions.prefix}
+              onChange={quoteOption => setParam({ ...param,
+                multiValuesOptions: {
+                  ...param.multiValuesOptions,
+                  prefix: quoteOption,
+                  suffix: quoteOption,
+                } })}
+              data-test="QuotationSelect"
+            >
+              <Option value="">None (default)</Option>
+              <Option value="'">Single Quotation Mark</Option>
+              <Option value={'"'} data-test="DoubleQuotationMarkOption">Double Quotation Mark</Option>
+            </Select>
+          </Form.Item>
+        )}
       </Form>
     </Modal>
   );

client/app/components/ParameterValueInput.jsx

@@ -13,13 +13,20 @@ import './ParameterValueInput.less';
 
 const { Option } = Select;
 
+const multipleValuesProps = {
+  maxTagCount: 3,
+  maxTagTextLength: 10,
+  maxTagPlaceholder: num => `+${num.length} more`,
+};
+
 export class ParameterValueInput extends React.Component {
   static propTypes = {
     type: PropTypes.string,
     value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     enumOptions: PropTypes.string,
     queryId: PropTypes.number,
     parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    allowMultipleValues: PropTypes.bool,
     onSelect: PropTypes.func,
     className: PropTypes.string,
   };
@@ -30,6 +37,7 @@ export class ParameterValueInput extends React.Component {
     enumOptions: '',
     queryId: null,
     parameter: null,
+    allowMultipleValues: false,
     onSelect: () => {},
     className: '',
   };
@@ -88,36 +96,43 @@ export class ParameterValueInput extends React.Component {
   }
 
   renderEnumInput() {
-    const { value, enumOptions } = this.props;
+    const { enumOptions, allowMultipleValues } = this.props;
+    const { value } = this.state;
     const enumOptionsArray = enumOptions.split('\n').filter(v => v !== '');
     return (
       <Select
         className={this.props.className}
+        mode={allowMultipleValues ? 'multiple' : 'default'}
+        optionFilterProp="children"
         disabled={enumOptionsArray.length === 0}
-        defaultValue={value}
+        value={value}
         onChange={this.onSelect}
         dropdownMatchSelectWidth={false}
         dropdownClassName="ant-dropdown-in-bootstrap-modal"
         showSearch
-        style={{ minWidth: 60 }}
-        optionFilterProp="children"
+        style={{ minWidth: allowMultipleValues ? 195 : 60 }}
         notFoundContent={null}
+        {...multipleValuesProps}
       >
         {enumOptionsArray.map(option => (<Option key={option} value={option}>{ option }</Option>))}
       </Select>
     );
   }
 
   renderQueryBasedInput() {
-    const { queryId, parameter } = this.props;
+    const { queryId, parameter, allowMultipleValues } = this.props;
     const { value } = this.state;
     return (
       <QueryBasedParameterInput
         className={this.props.className}
+        mode={allowMultipleValues ? 'multiple' : 'default'}
+        optionFilterProp="children"
         parameter={parameter}
         value={value}
         queryId={queryId}
         onSelect={this.onSelect}
+        style={{ minWidth: allowMultipleValues ? 195 : 60 }}
+        {...multipleValuesProps}
       />
     );
   }
@@ -187,6 +202,7 @@ export default function init(ngModule) {
         parameter="$ctrl.param"
         enum-options="$ctrl.param.enumOptions"
         query-id="$ctrl.param.queryId"
+        allow-multiple-values="!!$ctrl.param.multiValuesOptions"
         on-select="$ctrl.setValue"
       ></parameter-value-input-impl>
     `,

client/app/components/QueryBasedParameterInput.jsx

@@ -1,4 +1,4 @@
-import { find, isFunction, toString } from 'lodash';
+import { find, isFunction, isArray, isEqual, toString, map, intersection } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
@@ -10,13 +10,15 @@ export class QueryBasedParameterInput extends React.Component {
   static propTypes = {
     parameter: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    mode: PropTypes.oneOf(['default', 'multiple']),
     queryId: PropTypes.number,
     onSelect: PropTypes.func,
     className: PropTypes.string,
   };
 
   static defaultProps = {
     value: null,
+    mode: 'default',
     parameter: null,
     queryId: null,
     onSelect: () => {},
@@ -50,31 +52,40 @@ export class QueryBasedParameterInput extends React.Component {
       if (this.props.queryId === queryId) {
         this.setState({ options, loading: false });
 
-        const found = find(options, option => option.value === this.props.value) !== undefined;
-        if (!found && isFunction(this.props.onSelect)) {
-          this.props.onSelect(options[0].value);
+        if (this.props.mode === 'multiple' && isArray(this.props.value)) {
+          const optionValues = map(options, option => option.value);
+          const validValues = intersection(this.props.value, optionValues);
+          if (!isEqual(this.props.value, validValues)) {
+            this.props.onSelect(validValues);
+          }
+        } else {
+          const found = find(options, option => option.value === this.props.value) !== undefined;
+          if (!found && isFunction(this.props.onSelect)) {
+            this.props.onSelect(options[0].value);
+          }
         }
       }
     }
   }
 
   render() {
-    const { className, value, onSelect } = this.props;
+    const { className, value, mode, onSelect, ...otherProps } = this.props;
     const { loading, options } = this.state;
     return (
       <span>
         <Select
           className={className}
           disabled={loading || (options.length === 0)}
           loading={loading}
-          value={toString(value)}
+          mode={mode}
+          value={isArray(value) ? value : toString(value)}
           onChange={onSelect}
           dropdownMatchSelectWidth={false}
           dropdownClassName="ant-dropdown-in-bootstrap-modal"
-          showSearch
-          style={{ minWidth: 60 }}
           optionFilterProp="children"
+          showSearch
           notFoundContent={null}
+          {...otherProps}
         >
           {options.map(option => (<Option value={option.value} key={option.value}>{option.name}</Option>))}
         </Select>

client/app/components/parameters.js

@@ -58,7 +58,7 @@ function ParametersDirective($location, KeyboardShortcuts) {
         EditParameterSettingsDialog
           .showModal({ parameter })
           .result.then((updated) => {
-            scope.parameters[index] = extend(parameter, updated);
+            scope.parameters[index] = extend(parameter, updated).setValue(updated.value);
             scope.onUpdated();
           });
       };

client/app/services/query.js

@@ -2,9 +2,8 @@ import moment from 'moment';
 import debug from 'debug';
 import Mustache from 'mustache';
 import {
-  zipObject, isEmpty, map, filter, includes, union, uniq, has,
-  isNull, isUndefined, isArray, isObject, identity, extend, each,
-  startsWith, some,
+  zipObject, isEmpty, map, filter, includes, union, uniq, has, get, intersection,
+  isNull, isUndefined, isArray, isObject, identity, extend, each, join, some, startsWith,
 } from 'lodash';
 
 Mustache.escape = identity; // do not html-escape values
@@ -138,6 +137,7 @@ export class Parameter {
     this.useCurrentDateTime = parameter.useCurrentDateTime;
     this.global = parameter.global; // backward compatibility in Widget service
     this.enumOptions = parameter.enumOptions;
+    this.multiValuesOptions = parameter.multiValuesOptions;
     this.queryId = parameter.queryId;
     this.parentQueryId = parentQueryId;
 
@@ -164,6 +164,10 @@ export class Parameter {
     return isNull(this.getValue());
   }
 
+  getValue(extra = {}) {
+    return this.constructor.getValue(this, extra);
+  }
+
   get hasDynamicValue() {
     if (isDateParameter(this.type)) {
       return isDynamicDate(this.value);
@@ -184,13 +188,9 @@ export class Parameter {
     return false;
   }
 
-  getValue() {
-    return this.constructor.getValue(this);
-  }
-
-  static getValue(param) {
-    const { value, type, useCurrentDateTime } = param;
-    const isEmptyValue = isNull(value) || isUndefined(value) || (value === '');
+  static getValue(param, extra = {}) {
+    const { value, type, useCurrentDateTime, multiValuesOptions } = param;
+    const isEmptyValue = isNull(value) || isUndefined(value) || (value === '') || (isArray(value) && value.length === 0);
     if (isDateRangeParameter(type) && param.hasDynamicValue) {
       const { dynamicValue } = param;
       if (dynamicValue) {
@@ -224,10 +224,32 @@ export class Parameter {
     if (type === 'number') {
       return normalizeNumericValue(value, null); // normalize empty value
     }
+
+    // join array in frontend when query is executed as a text
+    const { joinListValues } = extra;
+    if (includes(['enum', 'query'], type) && multiValuesOptions && isArray(value) && joinListValues) {
+      const separator = get(multiValuesOptions, 'separator', ',');
+      const prefix = get(multiValuesOptions, 'prefix', '');
+      const suffix = get(multiValuesOptions, 'suffix', '');
+      const parameterValues = map(value, v => `${prefix}${v}${suffix}`);
+      return join(parameterValues, separator);
+    }
     return value;
   }
 
   setValue(value) {
+    if (this.type === 'enum') {
+      const enumOptionsArray = this.enumOptions && this.enumOptions.split('\n') || [];
+      if (this.multiValuesOptions) {
+        if (!isArray(value)) {
+          value = [value];
+        }
+        value = intersection(value, enumOptionsArray);
+      } else if (!value || isArray(value) || !includes(enumOptionsArray, value)) {
+        value = enumOptionsArray[0];
+      }
+    }
+
     if (isDateRangeParameter(this.type)) {
       this.value = null;
       this.$$value = null;
@@ -331,6 +353,9 @@ export class Parameter {
         [`${prefix}${this.name}`]: null,
       };
     }
+    if (this.multiValuesOptions && isArray(this.value)) {
+      return { [`${prefix}${this.name}`]: JSON.stringify(this.value) };
+    }
     return {
       [`${prefix}${this.name}`]: this.value,
       [`${prefix}${this.name}.start`]: null,
@@ -352,7 +377,15 @@ export class Parameter {
     } else {
       const key = `${prefix}${this.name}`;
       if (has(query, key)) {
-        this.setValue(query[key]);
+        if (this.multiValuesOptions) {
+          try {
+            this.setValue(JSON.parse(query[key]));
+          } catch (e) {
+            this.setValue(query[key]);
+          }
+        } else {
+          this.setValue(query[key]);
+        }
       }
     }
   }
@@ -460,9 +493,9 @@ class Parameters {
     return !isEmpty(this.get());
   }
 
-  getValues() {
+  getValues(extra = {}) {
     const params = this.get();
-    return zipObject(map(params, i => i.name), map(params, i => i.getValue()));
+    return zipObject(map(params, i => i.name), map(params, i => i.getValue(extra)));
   }
 
   hasPendingValues() {
@@ -710,7 +743,7 @@ function QueryResource(
       return new QueryResultError("Can't execute empty query.");
     }
 
-    const parameters = this.getParameters().getValues();
+    const parameters = this.getParameters().getValues({ joinListValues: true });
     const execute = () => QueryResult.get(this.data_source_id, queryText, parameters, maxAge, this.id);
     return this.prepareQueryResultExecution(execute, maxAge);
   };