From bb56efa0950dacedbf64a1c4fd6c0fde34a15395 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Tue, 7 Jul 2020 12:40:56 +0200 Subject: [PATCH] Hide _meta json editor behind toggle --- .../static/forms/components/form_row.tsx | 6 +- .../steps/step_logistics.tsx | 8 +- .../steps/step_logistics_schema.tsx | 2 +- .../template_form/steps/step_logistics.tsx | 73 ++++++++++++++----- .../template_form/template_form_schemas.tsx | 8 ++ .../index_management/public/shared_imports.ts | 3 + 6 files changed, 70 insertions(+), 30 deletions(-) diff --git a/src/plugins/es_ui_shared/static/forms/components/form_row.tsx b/src/plugins/es_ui_shared/static/forms/components/form_row.tsx index ad5a517e40cfb..d38e6c4f5fd95 100644 --- a/src/plugins/es_ui_shared/static/forms/components/form_row.tsx +++ b/src/plugins/es_ui_shared/static/forms/components/form_row.tsx @@ -57,13 +57,9 @@ export const FormRow = ({ titleWrapped = title; } - if (!children && !field) { - throw new Error('You need to provide either children or a field to the FormRow'); - } - return ( - {children ? children : } + {children ? children : field ? : null} ); }; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx index 8762eae9d2297..18988fa125a06 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx @@ -200,7 +200,7 @@ export const StepLogistics: React.FunctionComponent = React.memo( } > - {isMetaVisible ? ( + {isMetaVisible && ( = React.memo( 'aria-label': i18n.translate( 'xpack.idxMgmt.componentTemplateForm.stepLogistics.metaAriaLabel', { - defaultMessage: 'Metadata JSON editor', + defaultMessage: '_meta field data editor', } ), }, }} /> - ) : ( - // requires children or a field - // For now, we return an empty
if the editor is not visible -
)} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx index 0c52037abde45..c577957339487 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx @@ -65,7 +65,7 @@ export const logisticsFormSchema: FormSchema = { }, _meta: { label: i18n.translate('xpack.idxMgmt.componentTemplateForm.stepLogistics.metaFieldLabel', { - defaultMessage: 'Metadata (optional)', + defaultMessage: '_meta field data (optional)', }), helpText: ( void; isEditing?: boolean; isLegacy?: boolean; } +function formDeserializer(formData: LogisticsForm): LogisticsFormInternal { + return { + ...formData, + __internal__: { + addMeta: Boolean(formData._meta && Object.keys(formData._meta).length), + }, + }; +} + +function formSerializer(formData: LogisticsFormInternal): LogisticsForm { + const { __internal__, ...data } = formData; + return data; +} + export const StepLogistics: React.FunctionComponent = React.memo( ({ defaultValue, isEditing = false, onChange, isLegacy = false }) => { const { form } = useForm({ schema: schemas.logistics, defaultValue, options: { stripEmptyFields: false }, + serializer: formSerializer, + deserializer: formDeserializer, }); /** @@ -226,25 +253,35 @@ export const StepLogistics: React.FunctionComponent = React.memo( id="xpack.idxMgmt.templateForm.stepLogistics.metaFieldDescription" defaultMessage="Use the _meta field to store any metadata you want." /> + + } > - + {({ '__internal__.addMeta': addMeta }) => { + return ( + addMeta && ( + + ) + ); }} - /> + )} diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx index 5af3b4dd00c4f..b42ee4804c5cd 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx @@ -187,5 +187,13 @@ export const schemas: Record = { } }, }, + __internal__: { + addMeta: { + type: FIELD_TYPES.TOGGLE, + label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.addMetadataLabel', { + defaultMessage: 'Add metadata', + }), + } as FieldConfig, + }, }, }; diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts index 5bf1a31d0902b..3f7fcf424f1f0 100644 --- a/x-pack/plugins/index_management/public/shared_imports.ts +++ b/x-pack/plugins/index_management/public/shared_imports.ts @@ -22,6 +22,8 @@ export { useForm, Form, getUseField, + UseField, + FormDataProvider, } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib'; export { @@ -33,6 +35,7 @@ export { export { getFormRow, Field, + ToggleField, JsonEditorField, } from '../../../../src/plugins/es_ui_shared/static/forms/components';