[Canvas] EsIndexSelect refactored. (#107271)

* EsIndexSelect refactored.


Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/canvas/public/components/es_index_select/es_index_select.component.tsx

@@ -5,21 +5,35 @@
  * 2.0.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FocusEventHandler } from 'react';
 import { EuiComboBox } from '@elastic/eui';
-import { get } from 'lodash';
+
+export interface ESIndexSelectProps {
+  loading: boolean;
+  value: string;
+  indices: string[];
+  onChange: (index: string) => void;
+  onBlur: FocusEventHandler<HTMLDivElement> | undefined;
+  onFocus: FocusEventHandler<HTMLDivElement> | undefined;
+}
 
 const defaultIndex = '_all';
 
-export const ESIndexSelect = ({ value, loading, indices, onChange, onFocus, onBlur }) => {
+export const ESIndexSelect: React.FunctionComponent<ESIndexSelectProps> = ({
+  value = defaultIndex,
+  loading,
+  indices,
+  onChange,
+  onFocus,
+  onBlur,
+}) => {
   const selectedOption = value !== defaultIndex ? [{ label: value }] : [];
   const options = indices.map((index) => ({ label: index }));
 
   return (
     <EuiComboBox
       selectedOptions={selectedOption}
-      onChange={([index]) => onChange(get(index, 'label', defaultIndex))}
+      onChange={([index]) => onChange(index?.label ?? defaultIndex)}
       onSearchChange={(searchValue) => {
         // resets input when user starts typing
         if (searchValue) {
@@ -28,7 +42,7 @@ export const ESIndexSelect = ({ value, loading, indices, onChange, onFocus, onBl
       }}
       onBlur={onBlur}
       onFocus={onFocus}
-      disabled={loading}
+      isDisabled={loading}
       options={options}
       singleSelection={{ asPlainText: true }}
       isClearable={false}
@@ -37,16 +51,3 @@ export const ESIndexSelect = ({ value, loading, indices, onChange, onFocus, onBl
     />
   );
 };
-
-ESIndexSelect.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  indices: PropTypes.array.isRequired,
-  loading: PropTypes.bool.isRequired,
-};
-
-ESIndexSelect.defaultProps = {
-  value: defaultIndex,
-};

x-pack/plugins/canvas/public/components/es_index_select/es_index_select.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useRef, useState } from 'react';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import { getIndices } from '../../lib/es_service';
+import {
+  ESIndexSelect as Component,
+  ESIndexSelectProps as Props,
+} from './es_index_select.component';
+
+type ESIndexSelectProps = Omit<Props, 'indices' | 'loading'>;
+
+export const ESIndexSelect: React.FunctionComponent<ESIndexSelectProps> = (props) => {
+  const { value, onChange } = props;
+
+  const [indices, setIndices] = useState<string[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const mounted = useRef(true);
+
+  useEffectOnce(() => {
+    getIndices().then((newIndices) => {
+      if (!mounted.current) {
+        return;
+      }
+
+      if (!newIndices) {
+        newIndices = [];
+      }
+
+      setLoading(false);
+      setIndices(newIndices.sort());
+      if (!value && newIndices.length) {
+        onChange(newIndices[0]);
+      }
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  });
+
+  return <Component {...props} indices={indices} loading={loading} />;
+};

x-pack/plugins/canvas/public/components/es_index_select/index.js

@@ -1,27 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { compose, withState, lifecycle } from 'recompose';
-import { getIndices } from '../../lib/es_service';
-import { ESIndexSelect as Component } from './es_index_select';
-
-export const ESIndexSelect = compose(
-  withState('loading', 'setLoading', true),
-  withState('indices', 'setIndices', []),
-  lifecycle({
-    componentDidMount() {
-      getIndices().then((indices = []) => {
-        const { setLoading, setIndices, value, onChange } = this.props;
-        setLoading(false);
-        setIndices(indices.sort());
-        if (!value && indices.length) {
-          onChange(indices[0]);
-        }
-      });
-    },
-  })
-)(Component);

x-pack/plugins/canvas/public/components/es_index_select/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { ESIndexSelect } from './es_index_select';
+export { ESIndexSelect as ESIndexSelectComponent } from './es_index_select.component';