[Mappings editor] Fix regressions in scaled_float and date_range types (

elastic#81286)

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/date_range_datatype.test.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { act } from 'react-dom/test-utils';
+
+import { componentHelpers, MappingsEditorTestBed } from '../helpers';
+
+const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
+
+// Parameters automatically added to the date range datatype when saved (with the default values)
+export const defaultDateRangeParameters = {
+  type: 'date_range',
+  coerce: true,
+  index: true,
+  store: false,
+};
+
+describe('Mappings editor: date range datatype', () => {
+  /**
+   * Variable to store the mappings data forwarded to the consumer component
+   */
+  let data: any;
+  let onChangeHandler: jest.Mock = jest.fn();
+  let getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  let testBed: MappingsEditorTestBed;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    onChangeHandler = jest.fn();
+    getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  });
+
+  test('should require a scaling factor to be provided', async () => {
+    const defaultMappings = {
+      properties: {
+        myField: {
+          type: 'double_range',
+        },
+      },
+    };
+
+    const updatedMappings = { ...defaultMappings };
+
+    await act(async () => {
+      testBed = setup({ value: defaultMappings, onChange: onChangeHandler });
+    });
+    testBed.component.update();
+
+    const {
+      component,
+      find,
+      exists,
+      actions: { startEditField, updateFieldAndCloseFlyout, toggleFormRow },
+    } = testBed;
+
+    // Open the flyout to edit the field
+    await startEditField('myField');
+
+    expect(exists('formatParameter')).toBe(false);
+
+    // Change the type to "date_range"
+    await act(async () => {
+      find('mappingsEditorFieldEdit.fieldSubType').simulate('change', [
+        {
+          label: 'Date range',
+          value: 'date_range',
+        },
+      ]);
+    });
+    component.update();
+
+    expect(exists('formatParameter')).toBe(true);
+    expect(exists('formatParameter.formatInput')).toBe(false);
+    toggleFormRow('formatParameter');
+    expect(exists('formatParameter.formatInput')).toBe(true);
+
+    await act(async () => {
+      find('formatParameter.formatInput').simulate('change', [{ label: 'customDateFormat' }]);
+    });
+    component.update();
+
+    await updateFieldAndCloseFlyout();
+
+    // It should have the default parameters values added, plus the scaling factor
+    updatedMappings.properties.myField = {
+      ...defaultDateRangeParameters,
+      format: 'customDateFormat',
+    } as any;
+
+    ({ data } = await getMappingsEditorData(component));
+    expect(data).toEqual(updatedMappings);
+  });
+});

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/scaled_float_datatype.test.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { act } from 'react-dom/test-utils';
+
+import { componentHelpers, MappingsEditorTestBed } from '../helpers';
+
+const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
+
+// Parameters automatically added to the scaled float datatype when saved (with the default values)
+export const defaultScaledFloatParameters = {
+  type: 'scaled_float',
+  coerce: true,
+  doc_values: true,
+  ignore_malformed: false,
+  index: true,
+  store: false,
+};
+
+describe('Mappings editor: scaled float datatype', () => {
+  /**
+   * Variable to store the mappings data forwarded to the consumer component
+   */
+  let data: any;
+  let onChangeHandler: jest.Mock = jest.fn();
+  let getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  let testBed: MappingsEditorTestBed;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    onChangeHandler = jest.fn();
+    getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  });
+
+  test('should require a scaling factor to be provided', async () => {
+    const defaultMappings = {
+      properties: {
+        myField: {
+          type: 'byte',
+        },
+      },
+    };
+
+    const updatedMappings = { ...defaultMappings };
+
+    await act(async () => {
+      testBed = setup({ value: defaultMappings, onChange: onChangeHandler });
+    });
+    testBed.component.update();
+
+    const {
+      component,
+      find,
+      exists,
+      form,
+      actions: { startEditField, updateFieldAndCloseFlyout },
+    } = testBed;
+
+    // Open the flyout to edit the field
+    await startEditField('myField');
+
+    // Change the type to "scaled_float"
+    await act(async () => {
+      find('mappingsEditorFieldEdit.fieldSubType').simulate('change', [
+        {
+          label: 'Scaled float',
+          value: 'scaled_float',
+        },
+      ]);
+    });
+    component.update();
+
+    // It should **not** allow to save as the "scaling factor" parameter has not been set
+    await updateFieldAndCloseFlyout();
+    expect(exists('mappingsEditorFieldEdit')).toBe(true);
+    expect(form.getErrorsMessages()).toEqual(['A scaling factor is required.']);
+
+    await act(async () => {
+      form.setInputValue('scalingFactor.input', '123');
+    });
+    await updateFieldAndCloseFlyout();
+    expect(exists('mappingsEditorFieldEdit')).toBe(false);
+
+    // It should have the default parameters values added, plus the scaling factor
+    updatedMappings.properties.myField = {
+      ...defaultScaledFloatParameters,
+      scaling_factor: 123,
+    } as any;
+
+    ({ data } = await getMappingsEditorData(component));
+    expect(data).toEqual(updatedMappings);
+  });
+});

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

@@ -358,9 +358,11 @@ export type TestSubjects =
   | 'toggleExpandButton'
   | 'createFieldForm'
   | 'createFieldForm.fieldType'
+  | 'createFieldForm.fieldSubType'
   | 'createFieldForm.addButton'
   | 'mappingsEditorFieldEdit'
   | 'mappingsEditorFieldEdit.fieldType'
+  | 'mappingsEditorFieldEdit.fieldSubType'
   | 'mappingsEditorFieldEdit.editFieldUpdateButton'
   | 'mappingsEditorFieldEdit.flyoutTitle'
   | 'mappingsEditorFieldEdit.documentationLink'
@@ -383,4 +385,7 @@ export type TestSubjects =
   | 'searchQuoteAnalyzer-custom.input'
   | 'useSameAnalyzerForSearchCheckBox.input'
   | 'metaParameterEditor'
+  | 'scalingFactor.input'
+  | 'formatParameter'
+  | 'formatParameter.formatInput'
   | string;

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

@@ -55,6 +55,7 @@ export const FormatParameter = ({ defaultValue, defaultToggleValue }: Props) =>
         href: documentationService.getFormatLink(),
       }}
       defaultToggleValue={defaultToggleValue}
+      data-test-subj="formatParameter"
     >
       <UseField path="format" config={getFieldConfig('format')}>
         {(formatField) => {
@@ -81,6 +82,7 @@ export const FormatParameter = ({ defaultValue, defaultToggleValue }: Props) =>
                   setComboBoxOptions([...comboBoxOptions, newOption]);
                 }}
                 fullWidth
+                data-test-subj="formatInput"
               />
             </EuiFormRow>
           );

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

@@ -85,6 +85,7 @@ export const SubTypeParameter = ({
                 selectedOptions={subTypeField.value as ComboBoxOption[]}
                 onChange={subTypeField.setValue}
                 isClearable={false}
+                data-test-subj="fieldSubType"
               />
             </EuiFormRow>
           );

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/numeric_type.tsx

@@ -50,7 +50,7 @@ export const NumericType = ({ field }: Props) => {
         {/* scaling_factor */}
         <FormDataProvider pathsToWatch="subType">
           {(formData) =>
-            formData.subType === 'scaled_float' ? (
+            formData.subType?.[0]?.value === 'scaled_float' ? (
               <EditFieldFormRow
                 title={PARAMETERS_DEFINITION.scaling_factor.title!}
                 description={PARAMETERS_DEFINITION.scaling_factor.description}
@@ -60,6 +60,7 @@ export const NumericType = ({ field }: Props) => {
                   path="scaling_factor"
                   config={getFieldConfig('scaling_factor')}
                   component={Field}
+                  data-test-subj="scalingFactor"
                 />
               </EditFieldFormRow>
             ) : null

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/range_type.tsx

@@ -35,7 +35,7 @@ export const RangeType = ({ field }: Props) => {
 
         <FormDataProvider pathsToWatch="subType">
           {(formData) =>
-            formData.subType === 'date_range' ? (
+            formData.subType?.[0]?.value === 'date_range' ? (
               <FormatParameter
                 defaultValue={field.source.format as string}
                 defaultToggleValue={getDefaultToggleValue('format', field.source)}