[Mappings editor] Search fields

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/configuration_form/configuration_form.tsx

@@ -93,8 +93,16 @@ export const ConfigurationForm = React.memo(({ defaultValue }: Props) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const subscription = form.subscribe(updatedConfiguration => {
-      dispatch({ type: 'configuration.update', value: { ...updatedConfiguration, form } });
+    const subscription = form.subscribe(({ data, isValid, validate }) => {
+      dispatch({
+        type: 'configuration.update',
+        value: {
+          data,
+          isValid,
+          validate,
+          submitForm: form.submit,
+        },
+      });
     });
     return subscription.unsubscribe;
   }, [form]);

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/_index.scss

@@ -1 +1,3 @@
+
+@import './document_fields';
 @import './fields/index';

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx

@@ -3,81 +3,60 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import React, { useEffect, useMemo } from 'react';
-import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import React, { useMemo, useCallback } from 'react';
+import { EuiSpacer } from '@elastic/eui';
 
 import { useMappingsState, useDispatch } from '../../mappings_state';
-import { FieldsList, CreateField, EditFieldContainer } from './fields';
-
-export const DocumentFields = () => {
+import { deNormalize } from '../../lib';
+import { EditFieldContainer } from './fields';
+import { DocumentFieldsHeader } from './document_fields_header';
+import { DocumentFieldsJsonEditor } from './fields_json_editor';
+import { DocumentFieldsTreeEditor } from './fields_tree_editor';
+import { SearchResult } from './search_fields';
+
+export const DocumentFields = React.memo(() => {
+  const { fields, search, documentFields } = useMappingsState();
   const dispatch = useDispatch();
-  const {
-    fields: { byId, rootLevelFields },
-    documentFields: { status, fieldToAddFieldTo, fieldToEdit },
-  } = useMappingsState();
 
-  const getField = (fieldId: string) => byId[fieldId];
-  const fields = useMemo(() => rootLevelFields.map(getField), [rootLevelFields]);
-
-  const addField = () => {
-    dispatch({ type: 'documentField.createField' });
-  };
+  const { status, fieldToEdit, editor: editorType } = documentFields;
 
-  useEffect(() => {
-    /**
-     * If there aren't any fields yet, we display the create field form
-     */
-    if (status === 'idle' && fields.length === 0) {
-      addField();
+  const jsonEditorDefaultValue = useMemo(() => {
+    if (editorType === 'json') {
+      return deNormalize(fields);
     }
-  }, [fields, status]);
+  }, [editorType]);
 
-  const renderCreateField = () => {
-    // The "fieldToAddFieldTo" is undefined when adding to the top level "properties" object.
-    const isCreateFieldFormVisible = status === 'creatingField' && fieldToAddFieldTo === undefined;
-
-    if (!isCreateFieldFormVisible) {
-      return null;
-    }
-
-    return <CreateField isCancelable={fields.length > 0} allFields={byId} isRootLevelField />;
-  };
-
-  const renderAddFieldButton = () => {
-    const isDisabled = status !== 'idle';
-    return (
-      <>
-        <EuiSpacer />
-        <EuiButtonEmpty
-          disabled={isDisabled}
-          onClick={addField}
-          iconType="plusInCircleFilled"
-          data-test-subj="addFieldButton"
-        >
-          {i18n.translate('xpack.idxMgmt.mappingsEditor.addFieldButtonLabel', {
-            defaultMessage: 'Add field',
-          })}
-        </EuiButtonEmpty>
-      </>
+  const editor =
+    editorType === 'json' ? (
+      <DocumentFieldsJsonEditor defaultValue={jsonEditorDefaultValue!} />
+    ) : (
+      <DocumentFieldsTreeEditor />
     );
-  };
 
   const renderEditField = () => {
     if (status !== 'editingField') {
       return null;
     }
-    const field = byId[fieldToEdit!];
-    return <EditFieldContainer field={field} allFields={byId} />;
+    const field = fields.byId[fieldToEdit!];
+    return <EditFieldContainer field={field} allFields={fields.byId} />;
   };
 
+  const onSearchChange = useCallback((value: string) => {
+    dispatch({ type: 'search:update', value });
+  }, []);
+
+  const searchTerm = search.term.trim();
+
   return (
     <>
-      <FieldsList fields={fields} />
-      {renderCreateField()}
-      {renderAddFieldButton()}
+      <DocumentFieldsHeader searchValue={search.term} onSearchChange={onSearchChange} />
+      <EuiSpacer size="m" />
+      {searchTerm !== '' ? (
+        <SearchResult result={search.result} documentFieldsState={documentFields} />
+      ) : (
+        editor
+      )}
       {renderEditField()}
     </>
   );
-};
+});

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields_header.tsx

@@ -4,27 +4,57 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { EuiText, EuiLink } from '@elastic/eui';
+
+import { EuiText, EuiLink, EuiFlexGroup, EuiFlexItem, EuiFieldSearch } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { documentationService } from '../../../../services/documentation';
 
-export const DocumentFieldsHeader = () => {
+interface Props {
+  searchValue: string;
+  onSearchChange(value: string): void;
+}
+
+export const DocumentFieldsHeader = React.memo(({ searchValue, onSearchChange }: Props) => {
   return (
-    <EuiText size="s" color="subdued">
-      <FormattedMessage
-        id="xpack.idxMgmt.mappingsEditor.documentFieldsDescription"
-        defaultMessage="Define the fields for your indexed documents. {docsLink}"
-        values={{
-          docsLink: (
-            <EuiLink href={documentationService.getMappingTypesLink()} target="_blank">
-              {i18n.translate('xpack.idxMgmt.mappingsEditor.documentFieldsDocumentationLink', {
-                defaultMessage: 'Learn more.',
-              })}
-            </EuiLink>
-          ),
-        }}
-      />
-    </EuiText>
+    <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexItem>
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="xpack.idxMgmt.mappingsEditor.documentFieldsDescription"
+            defaultMessage="Define the fields for your indexed documents. {docsLink}"
+            values={{
+              docsLink: (
+                <EuiLink href={documentationService.getMappingTypesLink()} target="_blank">
+                  {i18n.translate('xpack.idxMgmt.mappingsEditor.documentFieldsDocumentationLink', {
+                    defaultMessage: 'Learn more.',
+                  })}
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiFieldSearch
+          style={{ minWidth: '350px' }}
+          placeholder={i18n.translate(
+            'xpack.idxMgmt.mappingsEditor.documentFields.searchFieldsPlaceholder',
+            {
+              defaultMessage: 'Search fields',
+            }
+          )}
+          value={searchValue}
+          onChange={e => onSearchChange(e.target.value)}
+          aria-label={i18n.translate(
+            'xpack.idxMgmt.mappingsEditor.documentFields.searchFieldsAriaLabel',
+            {
+              defaultMessage: 'Search mapped fields',
+            }
+          )}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
-};
+});

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/field_parameters/fielddata_parameter.tsx

@@ -54,14 +54,10 @@ export const FieldDataParameter = ({ field, defaultToggleValue }: Props) => {
     const nextMaxConfig = getConfig('max', nextValueType);
 
     min.setValue(
-      nextMinConfig.deserializer
-        ? nextMinConfig.deserializer(nextMinConfig.defaultValue)
-        : nextMinConfig.defaultValue
+      nextMinConfig.deserializer?.(nextMinConfig.defaultValue) ?? nextMinConfig.defaultValue
     );
     max.setValue(
-      nextMaxConfig.deserializer
-        ? nextMaxConfig.deserializer(nextMaxConfig.defaultValue)
-        : nextMaxConfig.defaultValue
+      nextMaxConfig.deserializer?.(nextMaxConfig.defaultValue) ?? nextMaxConfig.defaultValue
     );
 
     setValueType(nextValueType);

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss

@@ -11,6 +11,7 @@
 
 .mappingsEditor__fieldsListItem__field {
   border-bottom: $euiBorderThin;
+  height: $euiSizeXL * 2;
   margin-top: $euiSizeXS; // [1]
 }
 
@@ -24,7 +25,7 @@
   }
 }
 
-.mappingsEditor__fieldsListItem__field--selected {
+.mappingsEditor__fieldsListItem__field--highlighted {
   background-color: $euiColorLightestShade;
   &:hover {
     background-color: $euiColorLightestShade;

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import {
   EuiFlexGroup,
@@ -41,21 +41,24 @@ interface Props {
   treeDepth: number;
 }
 
-export const FieldsListItem = React.memo(function FieldListItemComponent({
-  field,
-  allFields,
-  isHighlighted,
-  isDimmed,
-  isCreateFieldFormVisible,
-  areActionButtonsVisible,
-  isLastItem,
-  childFieldsArray,
-  maxNestedDepth,
-  addField,
-  editField,
-  toggleExpand,
-  treeDepth,
-}: Props) {
+function FieldListItemComponent(
+  {
+    field,
+    allFields,
+    isHighlighted,
+    isDimmed,
+    isCreateFieldFormVisible,
+    areActionButtonsVisible,
+    isLastItem,
+    childFieldsArray,
+    maxNestedDepth,
+    addField,
+    editField,
+    toggleExpand,
+    treeDepth,
+  }: Props,
+  ref: React.Ref<HTMLLIElement>
+) {
   const {
     source,
     isMultiField,
@@ -149,12 +152,13 @@ export const FieldsListItem = React.memo(function FieldListItemComponent({
         'mappingsEditor__fieldsListItem--dottedLine': hasDottedLine,
       })}
       data-test-subj="fieldsListItem"
+      ref={ref}
     >
       <div
         style={{ paddingLeft: `${indent}px` }}
         className={classNames('mappingsEditor__fieldsListItem__field', {
           'mappingsEditor__fieldsListItem__field--enabled': areActionButtonsVisible,
-          'mappingsEditor__fieldsListItem__field--selected': isHighlighted,
+          'mappingsEditor__fieldsListItem__field--highlighted': isHighlighted,
           'mappingsEditor__fieldsListItem__field--dim': isDimmed,
         })}
       >
@@ -248,4 +252,6 @@ export const FieldsListItem = React.memo(function FieldListItemComponent({
       {renderCreateField()}
     </li>
   );
-});
+}
+
+export const FieldsListItem = React.memo(forwardRef<HTMLLIElement, Props>(FieldListItemComponent));

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 
 import { useMappingsState, useDispatch } from '../../../mappings_state';
 import { NormalizedField } from '../../../types';
@@ -17,6 +17,7 @@ interface Props {
 
 export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Props) => {
   const dispatch = useDispatch();
+  const listElement = useRef<HTMLLIElement | null>(null);
   const {
     documentFields: { status, fieldToAddFieldTo, fieldToEdit },
     fields: { byId, maxNestedDepth },
@@ -55,6 +56,7 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
 
   return (
     <FieldsListItem
+      ref={listElement}
       field={field}
       allFields={byId}
       treeDepth={treeDepth}