[Mappings editor] Allow support for nested multi-fields (#58203) (#58328)

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

@@ -96,12 +96,12 @@
         }
       }
 
-      &--toggle {
-        padding-left: 0;
+      &--multiField {
+        padding-left: $euiSizeL;
       }
 
-      &--multiField {
-        padding-left: $euiSizeS;
+      &--toggle {
+        padding-left: 0;
       }
     }
 }

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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 { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut, EuiCode } from '@elastic/eui';
+
+export const ChainedMultifieldsWarning = () => (
+  <EuiCallOut
+    title={i18n.translate('xpack.idxMgmt.mappingsEditor.nestedMultifieldsDeprecatedCallOutTitle', {
+      defaultMessage: 'Chained multi-fields are deprecated',
+    })}
+    iconType="alert"
+    color="warning"
+    data-test-subj="nestedMultifieldsDeprecatedCallout"
+  >
+    <p>
+      <FormattedMessage
+        id="xpack.idxMgmt.mappingsEditor.nestedMultifieldsDeprecatedCallOutDescription"
+        defaultMessage="Defining chained multi-fields was deprecated in 7.3 and is now no longer supported. Consider flattening the chained fields blocks into a single level, or switching to {copyTo} if appropriate."
+        values={{
+          copyTo: <EuiCode>copy_to</EuiCode>,
+        }}
+      />
+    </p>
+  </EuiCallOut>
+);

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

@@ -21,6 +21,7 @@ import {
   CHILD_FIELD_INDENT_SIZE,
   LEFT_PADDING_SIZE_FIELD_ITEM_WRAPPER,
 } from '../../../constants';
+import { ChainedMultifieldsWarning } from '../../chained_multifields_warning';
 import { FieldsList } from './fields_list';
 import { CreateField } from './create_field';
 import { DeleteFieldProvider } from './delete_field_provider';
@@ -33,6 +34,7 @@ interface Props {
   isHighlighted: boolean;
   isDimmed: boolean;
   isLastItem: boolean;
+  isChainedMultifieldsWarningVisible: boolean;
   childFieldsArray: NormalizedField[];
   maxNestedDepth: number;
   addField(): void;
@@ -49,6 +51,7 @@ function FieldListItemComponent(
     isDimmed,
     isCreateFieldFormVisible,
     areActionButtonsVisible,
+    isChainedMultifieldsWarningVisible,
     isLastItem,
     childFieldsArray,
     maxNestedDepth,
@@ -274,6 +277,8 @@ function FieldListItemComponent(
         </div>
       </div>
 
+      {isExpanded && isChainedMultifieldsWarningVisible && <ChainedMultifieldsWarning />}
+
       {Boolean(childFieldsArray.length) && isExpanded && (
         <FieldsList fields={childFieldsArray} treeDepth={treeDepth + 1} />
       )}

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

@@ -26,11 +26,22 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
   const getField = (id: string) => byId[id];
 
   const field: NormalizedField = getField(fieldId);
+  const parentField: NormalizedField | undefined =
+    field.parentId === undefined ? undefined : getField(field.parentId);
   const { childFields } = field;
   const isHighlighted = fieldToEdit === fieldId;
   const isDimmed = status === 'editingField' && fieldToEdit !== fieldId;
   const isCreateFieldFormVisible = status === 'creatingField' && fieldToAddFieldTo === fieldId;
   const areActionButtonsVisible = status === 'idle';
+
+  let isChainedMultifieldsWarningVisible = false;
+  // We add "!Boolean(parentField?.hasMultiFields)" as we only want to show a callOut at the "root" of the nested multi-fields
+  if (field.hasMultiFields && !Boolean(parentField?.hasMultiFields)) {
+    isChainedMultifieldsWarningVisible = field
+      .childFields!.map(getField)
+      .some(childField => Boolean(childField?.hasMultiFields));
+  }
+
   const childFieldsArray = useMemo(
     () => (childFields !== undefined ? childFields.map(getField) : []),
     [childFields]
@@ -64,6 +75,7 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
       isDimmed={isDimmed}
       isCreateFieldFormVisible={isCreateFieldFormVisible}
       areActionButtonsVisible={areActionButtonsVisible}
+      isChainedMultifieldsWarningVisible={isChainedMultifieldsWarningVisible}
       isLastItem={isLastItem}
       childFieldsArray={childFieldsArray}
       maxNestedDepth={maxNestedDepth}

x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/lib/utils.ts

@@ -54,12 +54,11 @@ export const getFieldMeta = (field: Field, isMultiField?: boolean): FieldMeta =>
       Boolean(field[childFieldsName!]) &&
       Object.keys(field[childFieldsName!]!).length > 0;
 
-  const canHaveMultiFields = isMultiField ? false : childFieldsName === 'fields';
-  const hasMultiFields = isMultiField
-    ? false
-    : canHaveMultiFields &&
-      Boolean(field[childFieldsName!]) &&
-      Object.keys(field[childFieldsName!]!).length > 0;
+  const canHaveMultiFields = childFieldsName === 'fields';
+  const hasMultiFields =
+    canHaveMultiFields &&
+    Boolean(field[childFieldsName!]) &&
+    Object.keys(field[childFieldsName!]!).length > 0;
 
   return {
     childFieldsName,