Field Search in Data panel

src/plugins/wizard/public/application/components/data_tab/field_selector.tsx

@@ -3,16 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-
-import {
-  EuiFormLabel,
-  EuiFlexItem,
-  EuiAccordion,
-  EuiSpacer,
-  EuiNotificationBadge,
-  EuiTitle,
-} from '@elastic/eui';
+import React, { useCallback, useState, useEffect } from 'react';
+import { EuiFlexItem, EuiAccordion, EuiSpacer, EuiNotificationBadge, EuiTitle } from '@elastic/eui';
+import { WizardFieldSearch } from './wizard_field_search';
 
 import {
   IndexPatternField,
@@ -41,7 +34,23 @@ const META_FIELDS: string[] = [
 ];
 
 export const FieldSelector = ({ indexFields }: FieldSelectorDeps) => {
-  const fields = indexFields?.reduce<IFieldCategories>(
+  const [filteredFields, setFilteredFields] = useState(indexFields);
+  const [fieldSearchValue, setFieldSearchValue] = useState('');
+
+  useEffect(() => {
+    const filteredSubset = indexFields.filter((field) => {
+      if (!field.displayName.includes(fieldSearchValue)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    setFilteredFields(filteredSubset);
+    return;
+  }, [indexFields, fieldSearchValue]);
+
+  const fields = filteredFields?.reduce<IFieldCategories>(
     (fieldGroups, currentField) => {
       const category = getFieldCategory(currentField);
       fieldGroups[category].push(currentField);
@@ -55,10 +64,16 @@ export const FieldSelector = ({ indexFields }: FieldSelectorDeps) => {
     }
   );
 
+  const onChangeFieldSearch = useCallback((field: string) => {
+    setFieldSearchValue(field);
+  }, []);
+
   return (
     <div className="wizFieldSelector">
       <div>
-        <EuiFormLabel>TODO: Search goes here</EuiFormLabel>
+        <form>
+          <WizardFieldSearch onChange={onChangeFieldSearch} value={fieldSearchValue} />
+        </form>
       </div>
       <div className="wizFieldSelector__fieldGroups">
         <FieldGroup

src/plugins/wizard/public/application/components/data_tab/wizard_field_search.tsx

@@ -0,0 +1,88 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+export interface State {
+  searchable: string;
+  aggregatable: string;
+  type: string;
+  missing: boolean;
+  [index: string]: string | boolean;
+}
+
+export interface Props {
+  /**
+   * triggered on input of user into search field
+   */
+  onChange: (field: string) => void;
+
+  /**
+   * the input value of the user
+   */
+  value?: string;
+}
+
+/**
+ * Component is Wizard's side bar to  search of available fields
+ * Additionally there's a button displayed that allows the user to show/hide more filter fields
+ */
+export function WizardFieldSearch({ onChange, value }: Props) {
+  const searchPlaceholder = i18n.translate('wizard.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search field names',
+  });
+
+  if (typeof value !== 'string') {
+    // at initial rendering value is undefined (angular related), this catches the warning
+    // should be removed once all is react
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup responsive={false} gutterSize={'s'}>
+        <EuiFlexItem>
+          <EuiFieldSearch
+            aria-label={searchPlaceholder}
+            data-test-subj="fieldFilterSearchInput"
+            compressed
+            fullWidth
+            onChange={(event) => onChange(event.currentTarget.value)}
+            placeholder={searchPlaceholder}
+            value={value}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </React.Fragment>
+  );
+}