[Canvas] ESFieldSelect refactor. (#107004) (#108482)

* Refactored `ESFieldSelect`.

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Yaroslav Kuznietsov <[email protected]>

x-pack/plugins/canvas/public/components/es_field_select/es_field_select.js → x-pack/plugins/canvas/public/components/es_field_select/es_field_select.tsx

@@ -5,20 +5,32 @@
  * 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 const ESFieldSelect = ({ value, fields = [], onChange, onFocus, onBlur }) => {
+export interface ESFieldSelectProps {
+  index: string;
+  value: string;
+  onChange: (field: string | null) => void;
+  onBlur: FocusEventHandler<HTMLDivElement> | undefined;
+  onFocus: FocusEventHandler<HTMLDivElement> | undefined;
+  fields: string[];
+}
+
+export const ESFieldSelect: React.FunctionComponent<ESFieldSelectProps> = ({
+  value,
+  fields = [],
+  onChange,
+  onFocus,
+  onBlur,
+}) => {
   const selectedOption = value ? [{ label: value }] : [];
   const options = fields.map((field) => ({ label: field }));
-
   return (
     <EuiComboBox
       selectedOptions={selectedOption}
       options={options}
-      onChange={([field]) => onChange(get(field, 'label', null))}
+      onChange={([field]) => onChange(field?.label ?? null)}
       onSearchChange={(searchValue) => {
         // resets input when user starts typing
         if (searchValue) {
@@ -33,15 +45,3 @@ export const ESFieldSelect = ({ value, fields = [], onChange, onFocus, onBlur })
     />
   );
 };
-
-ESFieldSelect.propTypes = {
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  value: PropTypes.string,
-  fields: PropTypes.array,
-};
-
-ESFieldSelect.defaultProps = {
-  fields: [],
-};

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

@@ -0,0 +1,29 @@
+/*
+ * 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, { useState, useEffect } from 'react';
+import { getFields } from '../../lib/es_service';
+import { ESFieldSelect as Component, ESFieldSelectProps as Props } from './es_field_select';
+
+type ESFieldSelectProps = Omit<Props, 'fields'>;
+
+export const ESFieldSelect: React.FunctionComponent<ESFieldSelectProps> = (props) => {
+  const { index, value, onChange } = props;
+  const [fields, setFields] = useState<string[]>([]);
+
+  useEffect(() => {
+    getFields(index).then((newFields) => setFields(newFields || []));
+  }, [index]);
+
+  useEffect(() => {
+    if (value && !fields.includes(value)) {
+      onChange(null);
+    }
+  }, [value, fields, onChange]);
+
+  return <Component {...props} fields={fields} />;
+};