[6.x] Remove react-select from kibana (#18876)

package.json

@@ -177,7 +177,6 @@
     "react-markdown": "^3.1.4",
     "react-redux": "^5.0.6",
     "react-router-dom": "4.2.2",
-    "react-select": "^1.2.0",
     "react-sizeme": "^2.3.6",
     "react-toggle": "4.0.2",
     "reactcss": "1.2.3",

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -247,7 +247,6 @@ dashboard-viewport-provider {
 /**
  * 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
  * not have enough room.
- * 2. react-select used in input control vis needs `visible` overflow to avoid clipping selection list
  */
 .dashboard-panel {
   z-index: auto;
@@ -259,7 +258,7 @@ dashboard-viewport-provider {
   background: @dashboard-panel-bg;
   color: @dashboard-panel-color;
   padding: 0;
-  overflow: visible; /* 1, 2 */
+  overflow: visible; /* 1 */
 
   position: relative;
 

src/core_plugins/metrics/public/components/aggs/agg_select.js

@@ -18,8 +18,10 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Select from 'react-select';
+import React from 'react';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 
 const metricAggs = [
   { label: 'Average', value: 'avg' },
@@ -63,89 +65,12 @@ const specialAggs = [
   { label: 'Math', value: 'math' },
 ];
 
-class AggSelectOption extends Component {
-  constructor(props) {
-    super(props);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
-  handleMouseDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.props.onSelect(this.props.option, event);
-  }
-
-  handleMouseEnter(event) {
-    this.props.onFocus(this.props.option, event);
-  }
-
-  handleMouseMove(event) {
-    if (this.props.isFocused) return;
-    this.props.onFocus(this.props.option, event);
-  }
-
-  render() {
-    const { label, heading, pipeline } = this.props.option;
-    const style = {
-      paddingLeft: heading ? 0 : 10,
-    };
-    // We can ignore that the <div> does not have keyboard handlers even though
-    // it has mouse handlers, since react-select still takes care, that this works
-    // well with keyboard.
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    if (heading) {
-      let note;
-      if (pipeline) {
-        note = (
-          <span className="vis_editor__agg_select-note">
-            (requires child aggregation)
-          </span>
-        );
-      }
-      return (
-        <div
-          className="Select-option vis_editor__agg_select-heading"
-          onMouseEnter={this.handleMouseEnter}
-          onMouseDown={this.handleMouseDown}
-          onMouseMove={this.handleMouseMove}
-          aria-label={label}
-        >
-          <span className="Select-value-label" style={style}>
-            <strong>{label}</strong>
-            {note}
-          </span>
-        </div>
-      );
-    }
-    return (
-      <div
-        className={this.props.className}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseDown={this.handleMouseDown}
-        onMouseMove={this.handleMouseMove}
-        aria-label={label}
-      >
-        <span className="Select-value-label" style={style}>
-          {this.props.children}
-        </span>
-      </div>
-    );
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
-  }
-}
-
-AggSelectOption.props = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onSelect: PropTypes.func,
-  option: PropTypes.object.isRequired,
-};
+const allAggOptions = [
+  ...metricAggs,
+  ...pipelineAggs,
+  ...siblingAggs,
+  ...specialAggs
+];
 
 function filterByPanelType(panelType) {
   return agg => {
@@ -155,7 +80,12 @@ function filterByPanelType(panelType) {
 }
 
 function AggSelect(props) {
-  const { siblings, panelType } = props;
+  const { siblings, panelType, value } = props;
+
+  const selectedOption = allAggOptions.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
 
   let enablePipelines = siblings.some(
     s => !!metricAggs.find(m => m.value === s.type)
@@ -169,55 +99,39 @@ function AggSelect(props) {
     options = [
       {
         label: 'Metric Aggregations',
-        value: null,
-        heading: true,
-        disabled: true,
+        options: metricAggs,
       },
-      ...metricAggs,
       {
         label: 'Parent Pipeline Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: pipelineAggs
+          .filter(filterByPanelType(panelType))
+          .map(agg => ({ ...agg, disabled: !enablePipelines }))
       },
-      ...pipelineAggs
-        .filter(filterByPanelType(panelType))
-        .map(agg => ({ ...agg, disabled: !enablePipelines })),
       {
         label: 'Sibling Pipeline Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       },
-      ...siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       {
         label: 'Special Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       },
-      ...specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
     ];
   }
 
-  const handleChange = value => {
-    if (!value) return;
-    if (value.disabled) return;
-    if (value.value) props.onChange(value);
+  const handleChange = selectedOptions => {
+    if (!selectedOptions || selectedOptions.length <= 0) return;
+    props.onChange(selectedOptions);
   };
 
   return (
     <div data-test-subj="aggSelector" className="vis_editor__row_item">
-      <Select
-        aria-label="Select aggregation"
-        clearable={false}
+      <EuiComboBox
+        isClearable={false}
+        placeholder="Select aggregation"
         options={options}
-        value={props.value}
-        optionComponent={AggSelectOption}
+        selectedOptions={selectedOptions}
         onChange={handleChange}
+        singleSelection={true}
       />
     </div>
   );

src/core_plugins/metrics/public/components/aggs/field_select.js

@@ -19,11 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 
 function FieldSelect(props) {
-  const { type, fields, indexPattern } = props;
+  const { type, fields, indexPattern, value, onChange, disabled } = props;
   if (type === 'count') {
     return null;
   }
@@ -33,14 +35,19 @@ function FieldSelect(props) {
       return { label: field.name, value: field.name };
     });
 
+  const selectedOption = options.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
+
   return (
-    <Select
-      inputProps={{ id: props.id }}
+    <EuiComboBox
       placeholder="Select field..."
-      disabled={props.disabled}
+      isDisabled={disabled}
       options={options}
-      value={props.value}
-      onChange={props.onChange}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      singleSelection={true}
     />
   );
 }

src/core_plugins/metrics/public/components/aggs/metric_select.js

@@ -20,7 +20,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 import calculateSiblings from '../lib/calculate_siblings';
 import calculateLabel from '../../../common/calculate_label';
 import basicAggs from '../../../common/basic_aggs';
@@ -86,14 +88,20 @@ function MetricSelect(props) {
     const label = calculateLabel(row, metrics);
     return { value: row.id, label };
   });
+  const allOptions = [...options, ...props.additionalOptions, ...percentileOptions];
+
+  const selectedOption = allOptions.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
 
   return (
-    <Select
-      aria-label="Select metric"
+    <EuiComboBox
       placeholder="Select metric..."
-      options={[...options, ...props.additionalOptions, ...percentileOptions]}
-      value={value}
+      options={allOptions}
+      selectedOptions={selectedOptions}
       onChange={onChange}
+      singleSelection={true}
     />
   );
 }

src/core_plugins/metrics/public/components/aggs/moving_average.js

@@ -22,12 +22,14 @@ import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
-import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import createNumberHandler from '../lib/create_number_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const MovingAverageAgg = props => {
   const { siblings } = props;
@@ -54,6 +56,13 @@ export const MovingAverageAgg = props => {
     { label: 'False', value: 0 }
   ];
   const htmlId = htmlIdGenerator();
+  const selectedModelOption = modelOptions.find(option => {
+    return model.model === option.value;
+  });
+  const selectedMinimizeOption = minimizeOptions.find(option => {
+    return model.minimize === option.value;
+  });
+
   return (
     <AggRow
       disableDelete={props.disableDelete}
@@ -86,13 +95,14 @@ export const MovingAverageAgg = props => {
         <div className="vis_editor__agg_row-item">
           <div className="vis_editor__row_item">
             <label className="vis_editor__label" htmlFor={htmlId('model')}>Model</label>
-            <Select
-              inputProps={{ id: htmlId('model') }}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('model')}
               placeholder="Select..."
-              onChange={handleSelectChange('model')}
-              value={props.model.model}
               options={modelOptions}
+              selectedOptions={selectedModelOption ? [selectedModelOption] : []}
+              onChange={handleSelectChange('model')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__row_item">
@@ -109,12 +119,13 @@ export const MovingAverageAgg = props => {
           </div>
           <div className="vis_editor__row_item">
             <label className="vis_editor__label" htmlFor={htmlId('minimize')}>Minimize</label>
-            <Select
-              inputProps={{ id: htmlId('minimize') }}
+            <EuiComboBox
+              id={htmlId('minimize')}
               placeholder="Select..."
-              onChange={handleSelectChange('minimize')}
-              value={model.minimize}
               options={minimizeOptions}
+              selectedOptions={selectedMinimizeOption ? [selectedMinimizeOption] : []}
+              onChange={handleSelectChange('minimize')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__row_item">