[8.x] [Mappings editor] Only add defined advanced options to request (#194148) (#194795)

# Backport This will backport the following commits from `main` to `8.x`: - [[Mappings editor] Only add defined advanced options to request (#194148)](https://github.com/elastic/kibana/pull/194148)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"9f58ffd52755335aa4a8558cdad408c6b32526f4","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Kibana Management","release_note:skip","Feature:Mappings Editor","v9.0.0","backport:prev-minor","v8.16.0"],"title":"[Mappings editor] Only add defined advanced options to request","number":194148,"url":"https://github.com/elastic/kibana/pull/194148","mergeCommit":{"message":"[Mappings editor] Only add defined advanced options to request (#194148)\n\nFixes https://github.com/elastic/kibana/issues/106006\r\nFixes https://github.com/elastic/kibana/issues/106151\r\nFixes https://github.com/elastic/kibana/issues/150395\r\n\r\n## Summary\r\n\r\nThis PR makes the Advanced options (configuration) form add to the\r\nrequest only the field values that have set values. This works by adding\r\nthe `stripUnsetFields` option to the `useForm` hook (similar to the\r\n`stripEmptyFields` option) which determines if the unset values will be\r\nreturned by the form (unset means that the field hasn't been\r\nset/modified by the user (is not dirty) and its initial value is\r\nundefined).\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b46af90d-6886-4232-ae0f-66910902e238\r\n\r\n\r\n\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"9f58ffd52755335aa4a8558cdad408c6b32526f4"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194148","number":194148,"mergeCommit":{"message":"[Mappings editor] Only add defined advanced options to request (#194148)\n\nFixes https://github.com/elastic/kibana/issues/106006\r\nFixes https://github.com/elastic/kibana/issues/106151\r\nFixes https://github.com/elastic/kibana/issues/150395\r\n\r\n## Summary\r\n\r\nThis PR makes the Advanced options (configuration) form add to the\r\nrequest only the field values that have set values. This works by adding\r\nthe `stripUnsetFields` option to the `useForm` hook (similar to the\r\n`stripEmptyFields` option) which determines if the unset values will be\r\nreturned by the form (unset means that the field hasn't been\r\nset/modified by the user (is not dirty) and its initial value is\r\nundefined).\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/b46af90d-6886-4232-ae0f-66910902e238\r\n\r\n\r\n\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"9f58ffd52755335aa4a8558cdad408c6b32526f4"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-10-11 21:18:48 +11:00 · 2024-10-11 21:18:48 +11:00 · e433a3ce1c
commit e433a3ce1c
parent ffa3e09a42
6 changed files with 138 additions and 34 deletions
--- a/src/plugins/es_ui_shared/static/forms/docs/core/use_form_hook.mdx
+++ b/src/plugins/es_ui_shared/static/forms/docs/core/use_form_hook.mdx
@ -261,3 +261,48 @@ With this option you can decide if you want empty string value to be returned by
  "role": ""
 }
 ```
+
+#### stripUnsetFields
+
+**Type:** `boolean`
+**Default:** `false`
+
+Sometimes, we only want to include fields that have a defined initial value or if their value has been set by the user.
+In this case, set `stripUnsetFields` to `true`.
+
+Suppose we have a toggle field `autocompleteEnabled`, which doesn't have a specified default value passed to `useForm`:
+
+```js
+const { form } = useForm({
+  defaultValue: {
+    darkModeEnabled: false,
+    accessibilityEnabled: true,
+    autocompleteEnabled: undefined,
+  },
+  options: { stripUnsetFields: true },
+});
+```
+
+Initially, the form data includes only `darkModeEnabled` and `accessibilityEnabled` because `autocompleteEnabled` is stripped.
+
+```js
+{
+  "darkModeEnabled": false,
+  "accessibilityEnabled": true,
+}
+```
+
+Then the user toggles the `autocompleteEnabled` field to `false`. Now the field is included in the form data:
+
+```js
+{
+  "darkModeEnabled": false,
+  "accessibilityEnabled": true,
+  "autocompleteEnabled": false,
+}
+```
+
+Note: This option only considers the `defaultValue` config passed to `useForm()` to determine if the initial value is
+undefined. If a default value has been specified as a prop to the `<UseField />` component or in the form schema,
+but not in the `defaultValue` config for `useForm()`, the field would initially be populated with the specified default
+value, but it won't be included in the form data until the user explicitly sets its value.
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts
@ -25,6 +25,7 @@ import { createArrayItem, getInternalArrayFieldPath } from '../components/use_ar
 const DEFAULT_OPTIONS = {
  valueChangeDebounceTime: 500,
  stripEmptyFields: true,
+  stripUnsetFields: false,
 };

 export interface UseFormReturn<T extends FormData, I extends FormData> {
@ -66,13 +67,18 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
    return initDefaultValue(defaultValue);
  }, [defaultValue, initDefaultValue]);

-  const { valueChangeDebounceTime, stripEmptyFields: doStripEmptyFields } = options ?? {};
+  const {
+    valueChangeDebounceTime,
+    stripEmptyFields: doStripEmptyFields,
+    stripUnsetFields,
+  } = options ?? {};
  const formOptions = useMemo(
    () => ({
      stripEmptyFields: doStripEmptyFields ?? DEFAULT_OPTIONS.stripEmptyFields,
      valueChangeDebounceTime: valueChangeDebounceTime ?? DEFAULT_OPTIONS.valueChangeDebounceTime,
+      stripUnsetFields: stripUnsetFields ?? DEFAULT_OPTIONS.stripUnsetFields,
    }),
-    [valueChangeDebounceTime, doStripEmptyFields]
+    [valueChangeDebounceTime, doStripEmptyFields, stripUnsetFields]
  );

  const [isSubmitted, setIsSubmitted] = useState(false);
@ -177,8 +183,16 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(

  const fieldsToArray = useCallback<() => FieldHook[]>(() => Object.values(fieldsRefs.current), []);

+  const getFieldDefaultValue: FormHook<T, I>['getFieldDefaultValue'] = useCallback(
+    (fieldName) => get(defaultValueDeserialized.current ?? {}, fieldName),
+    []
+  );
+
  const getFieldsForOutput = useCallback(
-    (fields: FieldsMap, opts: { stripEmptyFields: boolean }): FieldsMap => {
+    (
+      fields: FieldsMap,
+      opts: { stripEmptyFields: boolean; stripUnsetFields: boolean }
+    ): FieldsMap => {
      return Object.entries(fields).reduce((acc, [key, field]) => {
        if (!field.__isIncludedInOutput) {
          return acc;
@ -191,11 +205,17 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
          }
        }

+        if (opts.stripUnsetFields) {
+          if (!field.isDirty && getFieldDefaultValue(field.path) === undefined) {
+            return acc;
+          }
+        }
+
        acc[key] = field;
        return acc;
      }, {} as FieldsMap);
    },
-    []
+    [getFieldDefaultValue]
  );

  const updateFormDataAt: FormHook<T, I>['__updateFormDataAt'] = useCallback(
@ -396,12 +416,13 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
  const getFormData: FormHook<T, I>['getFormData'] = useCallback(() => {
    const fieldsToOutput = getFieldsForOutput(fieldsRefs.current, {
      stripEmptyFields: formOptions.stripEmptyFields,
+      stripUnsetFields: formOptions.stripUnsetFields,
    });
    const fieldsValue = mapFormFields(fieldsToOutput, (field) => field.__serializeValue());
    return serializer
      ? serializer(unflattenObject<I>(fieldsValue))
      : unflattenObject<T>(fieldsValue);
-  }, [getFieldsForOutput, formOptions.stripEmptyFields, serializer]);
+  }, [getFieldsForOutput, formOptions.stripEmptyFields, formOptions.stripUnsetFields, serializer]);

  const getErrors: FormHook<T, I>['getErrors'] = useCallback(() => {
    if (isValid === true) {
@ -455,11 +476,6 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(

  const getFields: FormHook<T, I>['getFields'] = useCallback(() => fieldsRefs.current, []);

-  const getFieldDefaultValue: FormHook<T, I>['getFieldDefaultValue'] = useCallback(
-    (fieldName) => get(defaultValueDeserialized.current ?? {}, fieldName),
-    []
-  );
-
  const updateFieldValues: FormHook<T, I>['updateFieldValues'] = useCallback(
    (updatedFormData, { runDeserializer = true } = {}) => {
      if (
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts
@ -141,6 +141,10 @@ export interface FormOptions {
   * Remove empty string field ("") from form data
   */
  stripEmptyFields?: boolean;
+  /**
+   * Remove fields from form data that don't have initial value and are not modified by the user.
+   */
+  stripUnsetFields?: boolean;
 }

 export interface FieldHook<T = unknown, I = T> {
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
@ -29,30 +29,19 @@ interface Props {
 }

 const formSerializer = (formData: GenericObject, sourceFieldMode?: string) => {
-  const {
-    dynamicMapping: {
-      enabled: dynamicMappingsEnabled,
-      throwErrorsForUnmappedFields,
-      /* eslint-disable @typescript-eslint/naming-convention */
-      numeric_detection,
-      date_detection,
-      dynamic_date_formats,
-      /* eslint-enable @typescript-eslint/naming-convention */
-    },
-    sourceField,
-    metaField,
-    _routing,
-    _size,
-    subobjects,
-  } = formData;
+  const { dynamicMapping, sourceField, metaField, _routing, _size, subobjects } = formData;

-  const dynamic = dynamicMappingsEnabled ? true : throwErrorsForUnmappedFields ? 'strict' : false;
+  const dynamic = dynamicMapping?.enabled
+    ? true
+    : dynamicMapping?.throwErrorsForUnmappedFields
+    ? 'strict'
+    : dynamicMapping?.enabled;

  const serialized = {
    dynamic,
-    numeric_detection,
-    date_detection,
-    dynamic_date_formats,
+    numeric_detection: dynamicMapping?.numeric_detection,
+    date_detection: dynamicMapping?.date_detection,
+    dynamic_date_formats: dynamicMapping?.dynamic_date_formats,
    _source: sourceFieldMode ? { mode: sourceFieldMode } : sourceField,
    _meta: metaField,
    _routing,
@ -85,18 +74,18 @@ const formDeserializer = (formData: GenericObject) => {

  return {
    dynamicMapping: {
-      enabled: dynamic === true || dynamic === undefined,
-      throwErrorsForUnmappedFields: dynamic === 'strict',
+      enabled: dynamic === 'strict' ? false : dynamic,
+      throwErrorsForUnmappedFields: dynamic === 'strict' ? true : undefined,
      numeric_detection,
      date_detection,
      dynamic_date_formats,
    },
    sourceField: {
-      enabled: enabled === true || enabled === undefined,
+      enabled,
      includes,
      excludes,
    },
-    metaField: _meta ?? {},
+    metaField: _meta,
    _routing,
    _size,
    subobjects,
@ -121,6 +110,7 @@ export const ConfigurationForm = React.memo(({ value, esNodesPlugins }: Props) =
    deserializer: formDeserializer,
    defaultValue: value,
    id: 'configurationForm',
+    options: { stripUnsetFields: true },
  });
  const dispatch = useDispatch();
  const { subscribe, submit, reset, getFormData } = form;
--- a/x-pack/test/functional/apps/index_management/index_template_wizard.ts
+++ b/x-pack/test/functional/apps/index_management/index_template_wizard.ts
@ -15,6 +15,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
  const comboBox = getService('comboBox');
  const find = getService('find');
  const browser = getService('browser');
+  const log = getService('log');

  describe('Index template wizard', function () {
    before(async () => {
@ -162,6 +163,40 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
        expect(await testSubjects.exists('fieldSubType')).to.be(true);
        expect(await testSubjects.exists('nextButton')).to.be(true);
      });
+
+      it("advanced options tab doesn't add default values to request by default", async () => {
+        await pageObjects.indexManagement.changeMappingsEditorTab('advancedOptions');
+        await testSubjects.click('previewIndexTemplate');
+        const templatePreview = await testSubjects.getVisibleText('simulateTemplatePreview');
+
+        await log.debug(`Template preview text: ${templatePreview}`);
+
+        // All advanced options should not be part of the request
+        expect(templatePreview).to.not.contain('"dynamic"');
+        expect(templatePreview).to.not.contain('"subobjects"');
+        expect(templatePreview).to.not.contain('"dynamic_date_formats"');
+        expect(templatePreview).to.not.contain('"date_detection"');
+        expect(templatePreview).to.not.contain('"numeric_detection"');
+      });
+
+      it('advanced options tab adds the set values to the request', async () => {
+        await pageObjects.indexManagement.changeMappingsEditorTab('advancedOptions');
+
+        // Toggle the subobjects field to false
+        await testSubjects.click('subobjectsToggle');
+
+        await testSubjects.click('previewIndexTemplate');
+        const templatePreview = await testSubjects.getVisibleText('simulateTemplatePreview');
+
+        await log.debug(`Template preview text: ${templatePreview}`);
+
+        // Only the subobjects option should be part of the request
+        expect(templatePreview).to.contain('"subobjects": false');
+        expect(templatePreview).to.not.contain('"dynamic"');
+        expect(templatePreview).to.not.contain('"dynamic_date_formats"');
+        expect(templatePreview).to.not.contain('"date_detection"');
+        expect(templatePreview).to.not.contain('"numeric_detection"');
+      });
    });
  });
 };
--- a/x-pack/test/functional/page_objects/index_management_page.ts
+++ b/x-pack/test/functional/page_objects/index_management_page.ts
@ -118,6 +118,20 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
      await testSubjects.click(tab);
    },

+    async changeMappingsEditorTab(
+      tab: 'mappedFields' | 'runtimeFields' | 'dynamicTemplates' | 'advancedOptions'
+    ) {
+      const index = [
+        'mappedFields',
+        'runtimeFields',
+        'dynamicTemplates',
+        'advancedOptions',
+      ].indexOf(tab);
+
+      const tabs = await testSubjects.findAll('formTab');
+      await tabs[index].click();
+    },
+
    async clickNextButton() {
      await testSubjects.click('nextButton');
    },