Extract SearchSelect component into ui/public. (#23204)

Author: cjcenizal

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.js

@@ -9,18 +9,16 @@ import PropTypes from 'prop-types';
 
 import {
   EuiButton,
-  EuiPopover,
-  EuiBasicTable,
-  EuiFieldSearch,
-  EuiSpacer,
 } from '@elastic/eui';
 
-import './field_chooser.less';
+import {
+  SearchSelect,
+} from 'ui/search_select';
 
 export class FieldChooser extends Component {
   static propTypes = {
+    buttonLabel: PropTypes.node.isRequired,
     columns: PropTypes.array.isRequired,
-    label: PropTypes.node.isRequired,
     fields: PropTypes.array.isRequired,
     onSelectField: PropTypes.func.isRequired,
   }
@@ -29,7 +27,6 @@ export class FieldChooser extends Component {
     super(props);
 
     this.state = {
-      searchValue: '',
       isOpen: false,
     };
   }
@@ -46,75 +43,41 @@ export class FieldChooser extends Component {
     });
   };
 
-  onSearch = (e) => {
-    this.setState({
-      searchValue: e.target.value,
-    });
-  };
+  onSelect = (field) => {
+    this.props.onSelectField(field);
+    this.close();
+  }
 
   render() {
     const {
+      buttonLabel,
       columns,
-      label,
       fields,
-      onSelectField,
     } = this.props;
 
-    const {
-      searchValue,
-    } = this.state;
-
-    const getRowProps = (field) => {
-      return {
-        className: 'rollupFieldChooserTableRow',
-        onClick: () => {
-          onSelectField(field);
-          this.close();
-        },
-      };
-    };
+    const { isOpen } = this.state;
 
     const button = (
       <EuiButton
         iconType="arrowDown"
         iconSide="right"
         onClick={this.onButtonClick}
       >
-        {label}
+        {buttonLabel}
       </EuiButton>
     );
 
-    const items = searchValue ? fields.filter(({ name }) => (
-      name.toLowerCase().includes(searchValue.trim().toLowerCase())
-    )) : fields;
-
     return (
-      <EuiPopover
-        ownFocus
+      <SearchSelect
         button={button}
-        isOpen={this.state.isOpen}
-        closePopover={this.close}
-        anchorPosition="rightDown"
-      >
-        <EuiFieldSearch
-          placeholder="Search fields"
-          value={searchValue}
-          onChange={this.onSearch}
-          aria-label="Search fields"
-          fullWidth
-        />
-
-        <EuiSpacer size="s" />
-
-        <div className="rollupFieldChooserContainer">
-          <EuiBasicTable
-            items={items}
-            columns={columns}
-            rowProps={getRowProps}
-            responsive={false}
-          />
-        </div>
-      </EuiPopover>
+        columns={columns}
+        items={fields}
+        isOpen={isOpen}
+        close={this.close}
+        onSelectItem={this.onSelect}
+        searchField="name"
+        prompt="Search fields"
+      />
     );
   }
 }

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.less

@@ -12,8 +12,6 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import './field_chooser.less';
-
 export const FieldList = ({
   columns,
   fields,

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js

@@ -125,13 +125,13 @@ export class StepHistogramUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={columns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepHistogram.fieldsChooser.label"
               defaultMessage="Select histogram fields"
             />
           )}
+          columns={columns}
           fields={unselectedHistogramFields}
           onSelectField={this.onSelectField}
         />

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js

@@ -218,13 +218,13 @@ export class StepMetricsUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={this.chooserColumns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepMetrics.fieldsChooser.label"
               defaultMessage="Select metrics fields"
             />
           )}
+          columns={this.chooserColumns}
           fields={unselectedMetricsFields}
           onSelectField={this.onSelectField}
         />

x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js

@@ -130,13 +130,13 @@ export class StepTermsUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={columns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepTerms.fieldsChooser.label"
               defaultMessage="Select terms fields"
             />
           )}
+          columns={columns}
           fields={unselectedTermsFields}
           onSelectField={this.onSelectField}
         />