Always show row actions for the fields list in the Mappings Editor

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts

@@ -50,6 +50,8 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
       .find('removeFieldButton')
       .at(index)
       .simulate('click');
+
+    testBed.find('confirmModalConfirmButton').simulate('click');
   };
 
   const clickCancelCreateFieldButton = () => {
@@ -195,6 +197,7 @@ export type TemplateFormTestSubjects = TestSubjects;
 export type TestSubjects =
   | 'backButton'
   | 'codeEditorContainer'
+  | 'confirmModalConfirmButton'
   | 'createFieldWrapper.addChildButton'
   | 'createFieldWrapper.addButton'
   | 'createFieldWrapper.addFieldButton'

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

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

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

@@ -18,10 +18,6 @@
 .mappingsEditor__fieldsListItem__field--enabled {
   &:hover {
     background-color: $euiColorLightestShade;
-    .mappingsEditor__fieldsListItem__actions,
-    .mappingsEditor__fieldsListItem__multiFieldButton {
-      opacity: 1;
-    }
   }
 }
 
@@ -53,7 +49,7 @@
   position: relative;
 }
 
-.mappingsEditor__fieldsListItem__content --indent {
+.mappingsEditor__fieldsListItem__content--indent {
   padding-left: $euiSizeXL;
 }
 
@@ -62,9 +58,6 @@
   width: $euiSizeL;
 }
 
-.mappingsEditor__fieldsListItem__actions,
-.mappingsEditor__fieldsListItem__multiFieldButton {
-  opacity: 0;
-  padding-right: $euiSizeS;
-  transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
+.mappingsEditor__fieldsListItem__actions {
+  padding-left: $euiSizeS;
 }

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

@@ -55,17 +55,12 @@ export const DeleteFieldProvider = ({ children }: Props) => {
   }
 
   const deleteField: DeleteFieldFunc = field => {
-    const { hasChildFields, hasMultiFields } = field;
     const aliases = getAllDescendantAliases(field, fields)
       .map(id => byId[id].path.join(' > '))
       .sort();
     const hasAliases = Boolean(aliases.length);
 
-    if (hasChildFields || hasMultiFields || hasAliases) {
-      setState({ isModalOpen: true, field, aliases: hasAliases ? aliases : undefined });
-    } else {
-      dispatch({ type: 'field.remove', value: field.id });
-    }
+    setState({ isModalOpen: true, field, aliases: hasAliases ? aliases : undefined });
   };
 
   const closeModal = () => {

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

@@ -8,10 +8,10 @@ import classNames from 'classnames';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonEmpty,
   EuiBadge,
   EuiButtonIcon,
   EuiToolTip,
+  EuiIcon,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -68,9 +68,6 @@ function FieldListItemComponent(
     hasMultiFields,
     isExpanded,
   } = field;
-  const isAddFieldBtnDisabled = false; // For now, we never disable the Add Child button.
-  // const isAddFieldBtnDisabled = field.nestedDepth === MAX_DEPTH_DEFAULT_EDITOR - 1;
-
   // When there aren't any "child" fields (the maxNestedDepth === 0), there is no toggle icon on the left of any field.
   // For that reason, we need to compensate and substract some indent to left align on the page.
   const substractIndentAmount = maxNestedDepth === 0 ? CHILD_FIELD_INDENT_SIZE * 0.5 : 0;
@@ -109,36 +106,79 @@ function FieldListItemComponent(
       return null;
     }
 
+    const addMultiFieldButtonLabel = i18n.translate(
+      'xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel',
+      {
+        defaultMessage: 'Add a multi-field to index the same field in different ways.',
+      }
+    );
+
+    const addChildButtonLabel = i18n.translate('xpack.idxMgmt.mappingsEditor.addChildButtonLabel', {
+      defaultMessage: 'Add child',
+    });
+
+    const editButtonLabel = i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', {
+      defaultMessage: 'Edit',
+    });
+
+    const deleteButtonLabel = i18n.translate(
+      'xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel',
+      {
+        defaultMessage: 'Remove',
+      }
+    );
+
     return (
-      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexGroup gutterSize="s" className="mappingsEditor__fieldsListItem__actions">
+        {canHaveMultiFields && (
+          <EuiFlexItem grow={false}>
+            <EuiToolTip content={addMultiFieldButtonLabel}>
+              <EuiButtonIcon
+                iconType="documents"
+                onClick={addField}
+                data-test-subj="addMultiFieldButton"
+                aria-label={addMultiFieldButtonLabel}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        )}
+
         {canHaveChildFields && (
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              onClick={addField}
-              disabled={isAddFieldBtnDisabled}
-              data-test-subj="addChildButton"
-            >
-              {i18n.translate('xpack.idxMgmt.mappingsEditor.addChildButtonLabel', {
-                defaultMessage: 'Add child',
-              })}
-            </EuiButtonEmpty>
+            <EuiToolTip content={addChildButtonLabel}>
+              <EuiButtonIcon
+                iconType="plusInCircle"
+                onClick={addField}
+                data-test-subj="addChildButton"
+                aria-label={addChildButtonLabel}
+              />
+            </EuiToolTip>
           </EuiFlexItem>
         )}
+
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={editField} data-test-subj="editFieldButton">
-            {i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', {
-              defaultMessage: 'Edit',
-            })}
-          </EuiButtonEmpty>
+          <EuiToolTip content={editButtonLabel}>
+            <EuiButtonIcon
+              iconType="pencil"
+              onClick={editField}
+              data-test-subj="editFieldButton"
+              aria-label={editButtonLabel}
+            />
+          </EuiToolTip>
         </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
           <DeleteFieldProvider>
             {deleteField => (
-              <EuiButtonEmpty onClick={() => deleteField(field)} data-test-subj="removeFieldButton">
-                {i18n.translate('xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel', {
-                  defaultMessage: 'Remove',
-                })}
-              </EuiButtonEmpty>
+              <EuiToolTip content={deleteButtonLabel}>
+                <EuiButtonIcon
+                  iconType="trash"
+                  color="danger"
+                  onClick={() => deleteField(field)}
+                  data-test-subj="removeFieldButton"
+                  aria-label={deleteButtonLabel}
+                />
+              </EuiToolTip>
             )}
           </DeleteFieldProvider>
         </EuiFlexItem>
@@ -184,13 +224,35 @@ function FieldListItemComponent(
                   color="text"
                   onClick={toggleExpand}
                   iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
-                  aria-label={`Expand field ${source.name}`}
+                  aria-label={
+                    isExpanded
+                      ? i18n.translate('xpack.idxMgmt.mappingsEditor.collapseFieldButtonLabel', {
+                          defaultMessage: 'Collapse field {name}',
+                          values: {
+                            name: source.name,
+                          },
+                        })
+                      : i18n.translate('xpack.idxMgmt.mappingsEditor.expandFieldButtonLabel', {
+                          defaultMessage: 'Expand field {name}',
+                          values: {
+                            name: source.name,
+                          },
+                        })
+                  }
                 />
               </EuiFlexItem>
             )}
+
+            {isMultiField && (
+              <EuiFlexItem grow={false} className="mappingsEditor__fieldsListItem__icon">
+                <EuiIcon color="subdued" type="documents" />
+              </EuiFlexItem>
+            )}
+
             <EuiFlexItem grow={false} className="mappingsEditor__fieldsListItem__name">
               {source.name}
             </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
               <EuiBadge color="hollow">
                 {isMultiField
@@ -203,44 +265,8 @@ function FieldListItemComponent(
                   : TYPE_DEFINITION[source.type].label}
               </EuiBadge>
             </EuiFlexItem>
-            {canHaveMultiFields && (
-              <>
-                {areActionButtonsVisible && (
-                  <EuiFlexItem
-                    grow={false}
-                    className="mappingsEditor__fieldsListItem__multiFieldButton"
-                  >
-                    <EuiToolTip
-                      position="top"
-                      content={
-                        <p>
-                          {i18n.translate(
-                            'xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel',
-                            {
-                              defaultMessage:
-                                'Multi-fields are useful to index the same field in different ways.',
-                            }
-                          )}
-                        </p>
-                      }
-                    >
-                      <EuiButtonEmpty
-                        onClick={addField}
-                        iconType="plusInCircleFilled"
-                        data-test-subj="addMultiFieldButton"
-                      >
-                        {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldButtonLabel', {
-                          defaultMessage: 'Add multi-field',
-                        })}
-                      </EuiButtonEmpty>
-                    </EuiToolTip>
-                  </EuiFlexItem>
-                )}
-              </>
-            )}
-            <EuiFlexItem className="mappingsEditor__fieldsListItem__actions">
-              {renderActionButtons()}
-            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>{renderActionButtons()}</EuiFlexItem>
           </EuiFlexGroup>
         </div>
       </div>

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

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import classNames from 'classnames';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiBadge } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiBadge, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { SearchResult } from '../../../types';
@@ -41,26 +41,42 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({
       return null;
     }
 
+    const editButtonLabel = i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', {
+      defaultMessage: 'Edit',
+    });
+
+    const deleteButtonLabel = i18n.translate(
+      'xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel',
+      {
+        defaultMessage: 'Remove',
+      }
+    );
+
     return (
-      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexGroup gutterSize="s" className="mappingsEditor__fieldsListItem__actions">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={editField} data-test-subj="editFieldButton">
-            {i18n.translate('xpack.idxMgmt.mappingsEditor.searchResult.editFieldButtonLabel', {
-              defaultMessage: 'Edit',
-            })}
-          </EuiButtonEmpty>
+          <EuiToolTip content={editButtonLabel}>
+            <EuiButtonIcon
+              iconType="pencil"
+              onClick={editField}
+              data-test-subj="editFieldButton"
+              aria-label={editButtonLabel}
+            />
+          </EuiToolTip>
         </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
           <DeleteFieldProvider>
             {deleteField => (
-              <EuiButtonEmpty onClick={() => deleteField(field)} data-test-subj="removeFieldButton">
-                {i18n.translate(
-                  'xpack.idxMgmt.mappingsEditor.searchResult.removeFieldButtonLabel',
-                  {
-                    defaultMessage: 'Remove',
-                  }
-                )}
-              </EuiButtonEmpty>
+              <EuiToolTip content={deleteButtonLabel}>
+                <EuiButtonIcon
+                  iconType="trash"
+                  color="danger"
+                  onClick={() => deleteField(field)}
+                  data-test-subj="removeFieldButton"
+                  aria-label={deleteButtonLabel}
+                />
+              </EuiToolTip>
             )}
           </DeleteFieldProvider>
         </EuiFlexItem>
@@ -89,6 +105,7 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({
             <EuiFlexItem grow={false} className="mappingsEditor__fieldsListItem__name">
               {display}
             </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
               <EuiBadge color="hollow">
                 {isMultiField
@@ -101,9 +118,8 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({
                   : TYPE_DEFINITION[source.type].label}
               </EuiBadge>
             </EuiFlexItem>
-            <EuiFlexItem className="mappingsEditor__fieldsListItem__actions">
-              {renderActionButtons()}
-            </EuiFlexItem>
+
+            <EuiFlexItem>{renderActionButtons()}</EuiFlexItem>
           </EuiFlexGroup>
         </div>
       </div>

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

@@ -16,6 +16,6 @@ export const MAX_DEPTH_DEFAULT_EDITOR = 4;
  */
 export const EUI_SIZE = 16;
 
-export const CHILD_FIELD_INDENT_SIZE = EUI_SIZE * 2;
+export const CHILD_FIELD_INDENT_SIZE = EUI_SIZE * 1.5;
 
 export const LEFT_PADDING_SIZE_FIELD_ITEM_WRAPPER = EUI_SIZE * 0.25;