Merge branch 'master' into less-less

client/app/assets/less/inc/ant-variables.less

@@ -19,6 +19,12 @@
 @font-size-base:                       13px;
 
 
+/* --------------------------------------------------------
+    Borders
+-----------------------------------------------------------*/
+@border-color-split:                   #f0f0f0;
+
+
 /* --------------------------------------------------------
     Typograpgy
 -----------------------------------------------------------*/
@@ -77,4 +83,4 @@
     Notification
 -----------------------------------------------------------*/
 @notification-padding: @notification-padding-vertical 48px @notification-padding-vertical 17px;
-@notification-width: auto;
+@notification-width: auto;

client/app/components/DateInput.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 import { clientConfig } from '@/services/auth';
 import { Moment } from '@/components/proptypes';
 
-export function DateInput({
+const DateInput = React.forwardRef(({
   defaultValue,
   value,
   onSelect,
   className,
   ...props
-}) {
+}, ref) => {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
   if (defaultValue && defaultValue.isValid()) {
@@ -22,6 +21,7 @@ export function DateInput({
   }
   return (
     <DatePicker
+      ref={ref}
       className={className}
       {...additionalAttributes}
       format={format}
@@ -30,7 +30,7 @@ export function DateInput({
       {...props}
     />
   );
-}
+});
 
 DateInput.propTypes = {
   defaultValue: Moment,
@@ -46,8 +46,4 @@ DateInput.defaultProps = {
   className: '',
 };
 
-export default function init(ngModule) {
-  ngModule.component('dateInput', react2angular(DateInput));
-}
-
-init.init = true;
+export default DateInput;

client/app/components/DateRangeInput.jsx

@@ -1,20 +1,19 @@
 import { isArray } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 import { clientConfig } from '@/services/auth';
 import { Moment } from '@/components/proptypes';
 
 const { RangePicker } = DatePicker;
 
-export function DateRangeInput({
+const DateRangeInput = React.forwardRef(({
   defaultValue,
   value,
   onSelect,
   className,
   ...props
-}) {
+}, ref) => {
   const format = clientConfig.dateFormat || 'YYYY-MM-DD';
   const additionalAttributes = {};
   if (isArray(defaultValue) && defaultValue[0].isValid() && defaultValue[1].isValid()) {
@@ -25,14 +24,15 @@ export function DateRangeInput({
   }
   return (
     <RangePicker
+      ref={ref}
       className={className}
       {...additionalAttributes}
       format={format}
       onChange={onSelect}
       {...props}
     />
   );
-}
+});
 
 DateRangeInput.propTypes = {
   defaultValue: PropTypes.arrayOf(Moment),
@@ -48,8 +48,4 @@ DateRangeInput.defaultProps = {
   className: '',
 };
 
-export default function init(ngModule) {
-  ngModule.component('dateRangeInput', react2angular(DateRangeInput));
-}
-
-init.init = true;
+export default DateRangeInput;

client/app/components/DateTimeInput.jsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 import { clientConfig } from '@/services/auth';
 import { Moment } from '@/components/proptypes';
 
-export function DateTimeInput({
+const DateTimeInput = React.forwardRef(({
   defaultValue,
   value,
   withSeconds,
   onSelect,
   className,
   ...props
-}) {
+}, ref) => {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
   const additionalAttributes = {};
@@ -24,6 +23,7 @@ export function DateTimeInput({
   }
   return (
     <DatePicker
+      ref={ref}
       className={className}
       showTime
       {...additionalAttributes}
@@ -33,7 +33,7 @@ export function DateTimeInput({
       {...props}
     />
   );
-}
+});
 
 DateTimeInput.propTypes = {
   defaultValue: Moment,
@@ -51,8 +51,4 @@ DateTimeInput.defaultProps = {
   className: '',
 };
 
-export default function init(ngModule) {
-  ngModule.component('dateTimeInput', react2angular(DateTimeInput));
-}
-
-init.init = true;
+export default DateTimeInput;

client/app/components/DateTimeRangeInput.jsx

@@ -1,21 +1,20 @@
 import { isArray } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import DatePicker from 'antd/lib/date-picker';
 import { clientConfig } from '@/services/auth';
 import { Moment } from '@/components/proptypes';
 
 const { RangePicker } = DatePicker;
 
-export function DateTimeRangeInput({
+const DateTimeRangeInput = React.forwardRef(({
   defaultValue,
   value,
   withSeconds,
   onSelect,
   className,
   ...props
-}) {
+}, ref) => {
   const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
     (withSeconds ? ' HH:mm:ss' : ' HH:mm');
   const additionalAttributes = {};
@@ -27,6 +26,7 @@ export function DateTimeRangeInput({
   }
   return (
     <RangePicker
+      ref={ref}
       className={className}
       showTime
       {...additionalAttributes}
@@ -35,7 +35,7 @@ export function DateTimeRangeInput({
       {...props}
     />
   );
-}
+});
 
 DateTimeRangeInput.propTypes = {
   defaultValue: PropTypes.arrayOf(Moment),
@@ -53,8 +53,4 @@ DateTimeRangeInput.defaultProps = {
   className: '',
 };
 
-export default function init(ngModule) {
-  ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput));
-}
-
-init.init = true;
+export default DateTimeRangeInput;

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/HtmlContent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { $sanitize } from '@/services/ng';
+
+export default function HtmlContent({ children, ...props }) {
+  return (
+    <div
+      {...props}
+      dangerouslySetInnerHTML={{ __html: $sanitize(children) }} // eslint-disable-line react/no-danger
+    />
+  );
+}
+
+HtmlContent.propTypes = {
+  children: PropTypes.string,
+};
+
+HtmlContent.defaultProps = {
+  children: '',
+};

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>
     `,