From c5f56ef6acc26729db743032642289ff92f3fe4a Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 20 Dec 2019 11:27:23 -0800 Subject: [PATCH 01/14] Don't hide row actions. --- .../fields/_field_list_item.scss | 6 - .../fields/fields_list_item.tsx | 121 ++++++++---------- 2 files changed, 55 insertions(+), 72 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index 17bf707c6a1f5..e5d3f2fdf69d6 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/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; - } } } @@ -64,7 +60,5 @@ .mappingsEditor__fieldsListItem__actions, .mappingsEditor__fieldsListItem__multiFieldButton { - opacity: 0; padding-right: $euiSizeS; - transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance; } diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index 602aa58b5423d..0338220a3077f 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -104,47 +104,41 @@ function FieldListItemComponent( ); }; - const renderActionButtons = () => { - if (!areActionButtonsVisible) { - return null; - } - - return ( - - {canHaveChildFields && ( - - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addChildButtonLabel', { - defaultMessage: 'Add child', - })} - - - )} + const renderActionButtons = () => ( + + {canHaveChildFields && ( - - {i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', { - defaultMessage: 'Edit', + + {i18n.translate('xpack.idxMgmt.mappingsEditor.addChildButtonLabel', { + defaultMessage: 'Add child', })} - - - {deleteField => ( - deleteField(field)} data-test-subj="removeFieldButton"> - {i18n.translate('xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel', { - defaultMessage: 'Remove', - })} - - )} - - - - ); - }; + )} + + + {i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', { + defaultMessage: 'Edit', + })} + + + + + {deleteField => ( + deleteField(field)} data-test-subj="removeFieldButton"> + {i18n.translate('xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel', { + defaultMessage: 'Remove', + })} + + )} + + + + ); return (
  • {canHaveMultiFields && ( <> - {areActionButtonsVisible && ( - + + {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel', { + defaultMessage: + 'Multi-fields are useful to index the same field in different ways.', + })} +

    + } > - - {i18n.translate( - 'xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel', - { - defaultMessage: - 'Multi-fields are useful to index the same field in different ways.', - } - )} -

    - } + - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldButtonLabel', { - defaultMessage: 'Add multi-field', - })} - -     -     - )} + {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldButtonLabel', { + defaultMessage: 'Add multi-field', + })} + + + )} From db94d702bc0cde2b5593dc5e6f2b09f220efa239 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 20 Dec 2019 12:37:40 -0800 Subject: [PATCH 02/14] Move add field and add multi-field buttons to the right. Use icon buttons. --- .../fields/_field_list_item.scss | 3 +- .../fields/fields_list_item.tsx | 156 +++++++++--------- 2 files changed, 83 insertions(+), 76 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index e5d3f2fdf69d6..abf260b73a760 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss @@ -58,7 +58,6 @@ width: $euiSizeL; } -.mappingsEditor__fieldsListItem__actions, -.mappingsEditor__fieldsListItem__multiFieldButton { +.mappingsEditor__fieldsListItem__actions { padding-right: $euiSizeS; } diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index 0338220a3077f..f6388efeec669 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -5,14 +5,7 @@ */ import React, { forwardRef } from 'react'; import classNames from 'classnames'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiBadge, - EuiButtonIcon, - EuiToolTip, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { NormalizedField, NormalizedFields } from '../../../types'; @@ -68,9 +61,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; @@ -104,41 +94,86 @@ function FieldListItemComponent( ); }; - const renderActionButtons = () => ( - - {canHaveChildFields && ( + const renderActionButtons = () => { + 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 ( + + {canHaveMultiFields && ( + + + + + + )} + + {canHaveChildFields && ( + + + + + + )} + - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addChildButtonLabel', { - defaultMessage: 'Add child', - })} - + + + - )} - - - {i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldButtonLabel', { - defaultMessage: 'Edit', - })} - - - - - {deleteField => ( - deleteField(field)} data-test-subj="removeFieldButton"> - {i18n.translate('xpack.idxMgmt.mappingsEditor.removeFieldButtonLabel', { - defaultMessage: 'Remove', - })} - - )} - - - - ); + + + + {deleteField => ( + + + + )} + + + + ); + }; return (
  • )} + {source.name} + {isMultiField @@ -197,36 +234,7 @@ function FieldListItemComponent( : TYPE_DEFINITION[source.type].label} - {canHaveMultiFields && ( - <> - - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel', { - defaultMessage: - 'Multi-fields are useful to index the same field in different ways.', - })} -

    - } - > - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addMultiFieldButtonLabel', { - defaultMessage: 'Add multi-field', - })} - -     -     - - )} + {renderActionButtons()} From 416fe78d8a38103ea6fc26743078fd986ea5757a Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 20 Dec 2019 12:55:43 -0800 Subject: [PATCH 03/14] Adjust field list spacing. --- .../document_fields/document_fields.tsx | 30 +++++++++++++++++++ .../fields/_field_list_item.scss | 4 +-- .../constants/mappings_editor.ts | 2 +- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx index 71b5966c3295d..d57521318b562 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx @@ -33,6 +33,36 @@ export const DocumentFields = React.memo(() => { ); + 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 0} allFields={byId} isRootLevelField />; + }; + + const renderAddFieldButton = () => { + const isDisabled = status !== 'idle'; + return ( + <> + + + {i18n.translate('xpack.idxMgmt.mappingsEditor.addFieldButtonLabel', { + defaultMessage: 'Add field', + })} + + + ); + }; + const renderEditField = () => { if (status !== 'editingField') { return null; diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index abf260b73a760..f1be38e749547 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss @@ -49,8 +49,8 @@ position: relative; } -.mappingsEditor__fieldsListItem__content --indent { - padding-left: $euiSizeXL; +.mappingsEditor__fieldsListItem__content--indent { + padding-left: $euiSizeM; } .mappingsEditor__fieldsListItem__toggle { diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/constants/mappings_editor.ts b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/constants/mappings_editor.ts index 8d851fe10b8ce..1678e09512019 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/constants/mappings_editor.ts +++ b/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; From 54acf2cf9e655ea71ccf0d24234b4f19c98325a6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 20 Dec 2019 13:45:02 -0800 Subject: [PATCH 04/14] Fix regressions wrt removing a field and wrong data-test-subj selector. --- .../components/document_fields/fields/fields_list_item.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index f6388efeec669..8012b28f7a140 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -138,7 +138,7 @@ function FieldListItemComponent( @@ -163,8 +163,8 @@ function FieldListItemComponent( deleteField(field)} + data-test-subj="removeFieldButton" aria-label={deleteButtonLabel} /> From dfa0c7070270b7fd1ce841db3a780b591462ebb3 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 10 Jan 2020 16:34:52 -0800 Subject: [PATCH 05/14] Move actions to the left, closer to the name of the node. Change multi-field icon to documents. --- .../document_fields/fields/_field_list_item.scss | 4 ---- .../document_fields/fields/fields_list_item.tsx | 8 +++----- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index f1be38e749547..60b80d9fb6f43 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss @@ -57,7 +57,3 @@ padding-left: $euiSizeXS; width: $euiSizeL; } - -.mappingsEditor__fieldsListItem__actions { - padding-right: $euiSizeS; -} diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index 8012b28f7a140..b7e7c1e6e74c5 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -118,12 +118,12 @@ function FieldListItemComponent( ); return ( - + {canHaveMultiFields && ( - - {renderActionButtons()} - + {renderActionButtons()} From 38c3e7a506d027ec8a62b4cead1ae0ef1612bb72 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 10 Jan 2020 16:40:18 -0800 Subject: [PATCH 06/14] Prompt user to confirm deletion of any field, not just fields with aliases, children, or multi-fields. --- .../document_fields/fields/delete_field_provider.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx index 9c03c47b00c54..c3d30ceed9e25 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx @@ -61,11 +61,7 @@ export const DeleteFieldProvider = ({ children }: Props) => { .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 = () => { From f383341592a11a75c8ee687e05f69eba443ad2f8 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 10 Jan 2020 19:23:46 -0800 Subject: [PATCH 07/14] Fix TS error. --- .../components/document_fields/fields/delete_field_provider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx index c3d30ceed9e25..64ed3a6f87117 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx @@ -55,7 +55,6 @@ 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(); From b84835812b7e998e1524e717dbce74fadea8de3f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 10 Jan 2020 21:16:22 -0800 Subject: [PATCH 08/14] Fix Jest test. --- .../client_integration/helpers/template_form.helpers.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts b/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts index d656eb2e41d99..1ce3a306e7096 100644 --- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts +++ b/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts @@ -50,6 +50,8 @@ export const formSetup = async (initTestBed: SetupFunc) => { .find('removeFieldButton') .at(index) .simulate('click'); + + testBed.find('confirmModalConfirmButton').simulate('click'); }; const clickCancelCreateFieldButton = () => { From f9dbf2a1e09cc49e326afdf24f5900fa1bfd6a15 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 10 Jan 2020 21:35:31 -0800 Subject: [PATCH 09/14] Internationalize expand/collapse button. --- .../document_fields/fields/fields_list_item.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index b7e7c1e6e74c5..217be3fac1deb 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -213,7 +213,21 @@ 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, + }, + }) + } /> )} From ad735f81b556ed25efbb3ba5934abab438f3b168 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 13 Jan 2020 16:17:03 -0800 Subject: [PATCH 10/14] Fix TS error. --- .../__jest__/client_integration/helpers/template_form.helpers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts b/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts index 1ce3a306e7096..48ae51b711f9c 100644 --- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts +++ b/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts @@ -197,6 +197,7 @@ export type TemplateFormTestSubjects = TestSubjects; export type TestSubjects = | 'backButton' | 'codeEditorContainer' + | 'confirmModalConfirmButton' | 'createFieldWrapper.addChildButton' | 'createFieldWrapper.addButton' | 'createFieldWrapper.addFieldButton' From 610d3afa414b7a0db4f038492102607c8f64f936 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 13 Jan 2020 18:31:51 -0800 Subject: [PATCH 11/14] Reinstate original spacing and put back icon for multi-field items. --- .../document_fields/fields/_field_list_item.scss | 2 +- .../document_fields/fields/fields_list_item.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index 60b80d9fb6f43..83b143d81222f 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss @@ -50,7 +50,7 @@ } .mappingsEditor__fieldsListItem__content--indent { - padding-left: $euiSizeM; + padding-left: $euiSizeXL; } .mappingsEditor__fieldsListItem__toggle { diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index 217be3fac1deb..caef3babdd04f 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -5,7 +5,14 @@ */ import React, { forwardRef } from 'react'; import classNames from 'classnames'; -import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiBadge, + EuiButtonIcon, + EuiToolTip, + EuiIcon, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { NormalizedField, NormalizedFields } from '../../../types'; @@ -232,6 +239,12 @@ function FieldListItemComponent( )} + {isMultiField && ( + + + + )} + {source.name} From f074ff4661578dcf9f8cf1ca094a77636785898a Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Jan 2020 12:25:48 -0800 Subject: [PATCH 12/14] Fix rebase error. Add space between row label and actions. --- .../mappings_editor/components/document_fields/_index.scss | 2 -- .../components/document_fields/fields/_field_list_item.scss | 4 ++++ .../components/document_fields/fields/fields_list_item.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/_index.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/_index.scss index 0ce573bed48fb..745f4f4791f73 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/_index.scss +++ b/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'; diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss index 83b143d81222f..e117271dba309 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/_field_list_item.scss @@ -57,3 +57,7 @@ padding-left: $euiSizeXS; width: $euiSizeL; } + +.mappingsEditor__fieldsListItem__actions { + padding-left: $euiSizeS; +} diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index caef3babdd04f..d080ca1150d3f 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -125,7 +125,7 @@ function FieldListItemComponent( ); return ( - + {canHaveMultiFields && ( From 8fa405c480fb07f7afb92a108fd2bc78b81d901c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Jan 2020 12:39:14 -0800 Subject: [PATCH 13/14] Update search result actions. --- .../fields/fields_list_item.tsx | 4 ++ .../search_fields/search_result_item.tsx | 52 ++++++++++++------- 2 files changed, 38 insertions(+), 18 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx index d080ca1150d3f..285598fc8c3c1 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx @@ -102,6 +102,10 @@ function FieldListItemComponent( }; const renderActionButtons = () => { + if (!areActionButtonsVisible) { + return null; + } + const addMultiFieldButtonLabel = i18n.translate( 'xpack.idxMgmt.mappingsEditor.addMultiFieldTooltipLabel', { diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx index 93ab33d777334..dbb8a788514bc 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx +++ b/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 ( - + - - {i18n.translate('xpack.idxMgmt.mappingsEditor.searchResult.editFieldButtonLabel', { - defaultMessage: 'Edit', - })} - + + + + {deleteField => ( - deleteField(field)} data-test-subj="removeFieldButton"> - {i18n.translate( - 'xpack.idxMgmt.mappingsEditor.searchResult.removeFieldButtonLabel', - { - defaultMessage: 'Remove', - } - )} - + + deleteField(field)} + data-test-subj="removeFieldButton" + aria-label={deleteButtonLabel} + /> + )} @@ -89,6 +105,7 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({ {display} + {isMultiField @@ -101,9 +118,8 @@ export const SearchResultItem = React.memo(function FieldListItemFlatComponent({ : TYPE_DEFINITION[source.type].label} - - {renderActionButtons()} - + + {renderActionButtons()} From 9cae00ea5e7b75243a7bae27ea2c86fb1ecd0db1 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Jan 2020 12:51:49 -0800 Subject: [PATCH 14/14] Fix rebase errors. --- .../document_fields/document_fields.tsx | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx index d57521318b562..71b5966c3295d 100644 --- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx +++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/document_fields.tsx @@ -33,36 +33,6 @@ export const DocumentFields = React.memo(() => { ); - 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 0} allFields={byId} isRootLevelField />; - }; - - const renderAddFieldButton = () => { - const isDisabled = status !== 'idle'; - return ( - <> - - - {i18n.translate('xpack.idxMgmt.mappingsEditor.addFieldButtonLabel', { - defaultMessage: 'Add field', - })} - - - ); - }; - const renderEditField = () => { if (status !== 'editingField') { return null;