Hide _meta json editor behind toggle

Author: sebelga

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 (
     <EuiDescribedFormGroup title={titleWrapped} description={description} fullWidth>
-      {children ? children : <Field field={field!} {...rest} />}
+      {children ? children : field ? <Field field={field!} {...rest} /> : null}
     </EuiDescribedFormGroup>
   );
 };

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<Props> = React.memo(
             </>
           }
         >
-          {isMetaVisible ? (
+          {isMetaVisible && (
             <UseField
               path="_meta"
               component={JsonEditorField}
@@ -211,16 +211,12 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
                   'aria-label': i18n.translate(
                     'xpack.idxMgmt.componentTemplateForm.stepLogistics.metaAriaLabel',
                     {
-                      defaultMessage: 'Metadata JSON editor',
+                      defaultMessage: '_meta field data editor',
                     }
                   ),
                 },
               }}
             />
-          ) : (
-            // <FormRow/> requires children or a field
-            // For now, we return an empty <div> if the editor is not visible
-            <div />
           )}
         </FormRow>
       </Form>

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: (
       <FormattedMessage

x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx

@@ -16,6 +16,7 @@ import {
   Field,
   Forms,
   JsonEditorField,
+  FormDataProvider,
 } from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
 import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas';
@@ -57,10 +58,10 @@ const fieldsMeta = {
   },
   priority: {
     title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityTitle', {
-      defaultMessage: 'Merge priority',
+      defaultMessage: 'Priority',
     }),
     description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityDescription', {
-      defaultMessage: 'The merge priority when multiple templates match an index.',
+      defaultMessage: 'Only the highest priority template will be applied.',
     }),
     testSubject: 'priorityField',
   },
@@ -75,19 +76,45 @@ const fieldsMeta = {
   },
 };
 
+interface LogisticsForm {
+  [key: string]: any;
+}
+
+interface LogisticsFormInternal extends LogisticsForm {
+  __internal__: {
+    addMeta: boolean;
+  };
+}
+
 interface Props {
-  defaultValue: { [key: string]: any };
+  defaultValue: LogisticsForm;
   onChange: (content: Forms.Content) => 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<Props> = 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<Props> = React.memo(
                     id="xpack.idxMgmt.templateForm.stepLogistics.metaFieldDescription"
                     defaultMessage="Use the _meta field to store any metadata you want."
                   />
+                  <EuiSpacer size="m" />
+                  <UseField path="__internal__.addMeta" data-test-subj="metaToggle" />
                 </>
               }
             >
-              <UseField
-                path="_meta"
-                component={JsonEditorField}
-                componentProps={{
-                  euiCodeEditorProps: {
-                    height: '280px',
-                    'aria-label': i18n.translate(
-                      'xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorAriaLabel',
-                      {
-                        defaultMessage: '_meta field data editor',
-                      }
-                    ),
-                    'data-test-subj': 'metaField',
-                  },
+              <FormDataProvider pathsToWatch="__internal__.addMeta">
+                {({ '__internal__.addMeta': addMeta }) => {
+                  return (
+                    addMeta && (
+                      <UseField
+                        path="_meta"
+                        component={JsonEditorField}
+                        componentProps={{
+                          euiCodeEditorProps: {
+                            height: '280px',
+                            'aria-label': i18n.translate(
+                              'xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorAriaLabel',
+                              {
+                                defaultMessage: '_meta field data editor',
+                              }
+                            ),
+                            'data-test-subj': 'metaField',
+                          },
+                        }}
+                      />
+                    )
+                  );
                 }}
-              />
+              </FormDataProvider>
             </FormRow>
           )}
         </Form>

x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx

@@ -187,5 +187,13 @@ export const schemas: Record<string, FormSchema> = {
         }
       },
     },
+    __internal__: {
+      addMeta: {
+        type: FIELD_TYPES.TOGGLE,
+        label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.addMetadataLabel', {
+          defaultMessage: 'Add metadata',
+        }),
+      } as FieldConfig,
+    },
   },
 };

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';