Don't send empty objects inside template

Author: sebelga

x-pack/plugins/index_management/common/lib/utils.ts

@@ -23,5 +23,5 @@ export const getTemplateParameter = (
 ) => {
   return isLegacyTemplate(template)
     ? (template as LegacyTemplateSerialized)[setting]
-    : (template as TemplateSerialized).template[setting];
+    : (template as TemplateSerialized).template?.[setting];
 };

x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx

@@ -21,9 +21,6 @@ interface Props {
   value?: MappingsConfiguration;
 }
 
-const stringifyJson = (json: GenericObject) =>
-  Object.keys(json).length ? JSON.stringify(json, null, 2) : '{\n\n}';
-
 const formSerializer: SerializerFunc<MappingsConfiguration> = (formData) => {
   const {
     dynamicMapping: {
@@ -40,22 +37,17 @@ const formSerializer: SerializerFunc<MappingsConfiguration> = (formData) => {
 
   const dynamic = dynamicMappingsEnabled ? true : throwErrorsForUnmappedFields ? 'strict' : false;
 
-  let parsedMeta;
-  try {
-    parsedMeta = JSON.parse(metaField);
-  } catch {
-    parsedMeta = {};
-  }
-
-  return {
+  const serialized = {
     dynamic,
     numeric_detection,
     date_detection,
     dynamic_date_formats,
-    _source: { ...sourceField },
-    _meta: parsedMeta,
+    _source: sourceField,
+    _meta: metaField,
     _routing,
   };
+
+  return serialized;
 };
 
 const formDeserializer = (formData: GenericObject) => {
@@ -64,7 +56,11 @@ const formDeserializer = (formData: GenericObject) => {
     numeric_detection,
     date_detection,
     dynamic_date_formats,
-    _source: { enabled, includes, excludes },
+    _source: { enabled, includes, excludes } = {} as {
+      enabled?: boolean;
+      includes?: string[];
+      excludes?: string[];
+    },
     _meta,
     _routing,
   } = formData;
@@ -82,7 +78,7 @@ const formDeserializer = (formData: GenericObject) => {
       includes,
       excludes,
     },
-    metaField: stringifyJson(_meta),
+    metaField: _meta ?? {},
     _routing,
   };
 };

x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form_schema.tsx

@@ -48,10 +48,30 @@ export const configurationFormSchema: FormSchema<MappingsConfiguration> = {
         validator: isJsonField(
           i18n.translate('xpack.idxMgmt.mappingsEditor.configuration.metaFieldEditorJsonError', {
             defaultMessage: 'The _meta field JSON is not valid.',
-          })
+          }),
+          { allowEmptyString: true }
         ),
       },
     ],
+    deserializer: (value: any) => {
+      if (value === '') {
+        return value;
+      }
+      return JSON.stringify(value, null, 2);
+    },
+    serializer: (value: string) => {
+      try {
+        const parsed = JSON.parse(value);
+        // If an empty object was passed, strip out this value entirely.
+        if (!Object.keys(parsed).length) {
+          return undefined;
+        }
+        return parsed;
+      } catch (error) {
+        // swallow error and return non-parsed value;
+        return value;
+      }
+    },
   },
   sourceField: {
     enabled: {

x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx

@@ -22,7 +22,7 @@ interface Props {
 const stringifyJson = (json: { [key: string]: any }) =>
   Array.isArray(json) ? JSON.stringify(json, null, 2) : '[\n\n]';
 
-const formSerializer: SerializerFunc<MappingsTemplates> = (formData) => {
+const formSerializer: SerializerFunc<MappingsTemplates | undefined> = (formData) => {
   const { dynamicTemplates } = formData;
 
   let parsedTemplates;
@@ -34,12 +34,14 @@ const formSerializer: SerializerFunc<MappingsTemplates> = (formData) => {
       parsedTemplates = [parsedTemplates];
     }
   } catch {
-    parsedTemplates = [];
+    // Silently swallow errors
   }
 
-  return {
-    dynamic_templates: parsedTemplates,
-  };
+  return Array.isArray(parsedTemplates) && parsedTemplates.length > 0
+    ? {
+        dynamic_templates: parsedTemplates,
+      }
+    : undefined;
 };
 
 const formDeserializer = (formData: { [key: string]: any }) => {

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

@@ -199,7 +199,7 @@ export const getTypeMetaFromSource = (
  *
  * @param fieldsToNormalize The "properties" object from the mappings (or "fields" object for `text` and `keyword` types)
  */
-export const normalize = (fieldsToNormalize: Fields): NormalizedFields => {
+export const normalize = (fieldsToNormalize: Fields = {}): NormalizedFields => {
   let maxNestedDepth = 0;
 
   const normalizeFields = (

x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx

@@ -39,14 +39,14 @@ export const MappingsEditor = React.memo(({ onChange, value, indexSettings }: Pr
     }
 
     const {
-      _source = {},
-      _meta = {},
+      _source,
+      _meta,
       _routing,
       dynamic,
       numeric_detection,
       date_detection,
       dynamic_date_formats,
-      properties = {},
+      properties,
       dynamic_templates,
     } = mappingsDefinition;
 

x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx

@@ -19,7 +19,7 @@ import { normalize, deNormalize, stripUndefinedValues } from './lib';
 
 type Mappings = MappingsTemplates &
   MappingsConfiguration & {
-    properties: MappingsFields;
+    properties?: MappingsFields;
   };
 
 export interface Types {
@@ -31,7 +31,7 @@ export interface Types {
 
 export interface OnUpdateHandlerArg {
   isValid?: boolean;
-  getData: () => Mappings;
+  getData: () => Mappings | undefined;
   validate: () => Promise<boolean>;
 }
 
@@ -114,13 +114,18 @@ export const MappingsState = React.memo(({ children, onChange, value }: Props) =
         const configurationData = state.configuration.data.format();
         const templatesData = state.templates.data.format();
 
-        return {
+        const output = {
           ...stripUndefinedValues({
             ...configurationData,
             ...templatesData,
           }),
-          properties: fields,
         };
+
+        if (fields && Object.keys(fields).length > 0) {
+          output.properties = fields;
+        }
+
+        return Object.keys(output).length > 0 ? (output as Mappings) : undefined;
       },
       validate: async () => {
         const configurationFormValidator =

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

@@ -45,7 +45,11 @@ export const StepComponents = ({ defaultValue = [], onChange, esDocsBase }: Prop
 
   const onComponentSelectionChange = useCallback(
     (components: string[]) => {
-      onChange({ isValid: true, validate: async () => true, getData: () => components });
+      onChange({
+        isValid: true,
+        validate: async () => true,
+        getData: () => (components.length > 0 ? components : undefined),
+      });
     },
     [onChange]
   );

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

@@ -103,8 +103,8 @@ function formDeserializer(formData: LogisticsForm): LogisticsFormInternal {
 }
 
 function formSerializer(formData: LogisticsFormInternal): LogisticsForm {
-  const { __internal__, ...data } = formData;
-  return data;
+  const { __internal__, ...rest } = formData;
+  return rest;
 }
 
 export const StepLogistics: React.FunctionComponent<Props> = React.memo(

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

@@ -91,12 +91,7 @@ export const TemplateForm = ({
   const indexTemplate = defaultValue ?? {
     name: '',
     indexPatterns: [],
-    composedOf: [],
-    template: {
-      settings: {},
-      mappings: {},
-      aliases: {},
-    },
+    template: {},
     _kbnMeta: {
       isManaged: false,
       isCloudManaged: false,
@@ -150,18 +145,50 @@ export const TemplateForm = ({
     </>
   ) : null;
 
-  const buildTemplateObject = (initialTemplate: TemplateDeserialized) => (
-    wizardData: WizardContent
-  ): TemplateDeserialized => ({
-    ...initialTemplate,
-    ...wizardData.logistics,
-    composedOf: wizardData.components,
-    template: {
-      settings: wizardData.settings,
-      mappings: wizardData.mappings,
-      aliases: wizardData.aliases,
+  /**
+   * If no mappings, settings or aliases are defined, it is better to not send empty
+   * object for those values.
+   * This method takes care of that and other cleanup of empty fields.
+   * @param template The template object to clean up
+   */
+  const cleanupTemplateObject = (template: TemplateDeserialized) => {
+    const outputTemplate = { ...template };
+
+    if (outputTemplate.template.settings === undefined) {
+      delete outputTemplate.template.settings;
+    }
+    if (outputTemplate.template.mappings === undefined) {
+      delete outputTemplate.template.mappings;
+    }
+    if (outputTemplate.template.aliases === undefined) {
+      delete outputTemplate.template.aliases;
+    }
+    if (Object.keys(outputTemplate.template).length === 0) {
+      delete outputTemplate.template;
+    }
+
+    return outputTemplate;
+  };
+
+  const buildTemplateObject = useCallback(
+    (initialTemplate: TemplateDeserialized) => (
+      wizardData: WizardContent
+    ): TemplateDeserialized => {
+      const outputTemplate = {
+        ...initialTemplate,
+        ...wizardData.logistics,
+        composedOf: wizardData.components,
+        template: {
+          settings: wizardData.settings,
+          mappings: wizardData.mappings,
+          aliases: wizardData.aliases,
+        },
+      };
+
+      return cleanupTemplateObject(outputTemplate);
     },
-  });
+    []
+  );
 
   const onSaveTemplate = useCallback(
     async (wizardData: WizardContent) => {
@@ -177,7 +204,7 @@ export const TemplateForm = ({
 
       clearSaveError();
     },
-    [indexTemplate, onSave, clearSaveError]
+    [indexTemplate, buildTemplateObject, onSave, clearSaveError]
   );
 
   return (