[ML] Transforms: Preserves the field for unsupported aggs (#142106)

* preserve field for unsupported agg * add unit test
elastic · Sep 30, 2022 · 2d8eb0e · 2d8eb0e
1 parent 68bc381
commit 2d8eb0e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 8 deletions.
diff --git a/...ons/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap b/...ons/create_transform/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
diff --git a/...rm/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx b/...rm/public/app/sections/create_transform/components/aggregation_list/popover_form.test.tsx
@@ -6,16 +6,19 @@
  */
 
 import { shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-
 import { AggName } from '../../../../../../common/types/aggregations';
 import { PIVOT_SUPPORTED_AGGS } from '../../../../../../common/types/pivot_aggs';
-
 import { PivotAggsConfig } from '../../../../common';
-
 import { PopoverForm } from './popover_form';
+import { I18nProvider } from '@kbn/i18n-react';
 
 describe('Transform: Aggregation <PopoverForm />', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('Minimal initialization', () => {
     const defaultData: PivotAggsConfig = {
       agg: PIVOT_SUPPORTED_AGGS.CARDINALITY,
@@ -37,4 +40,67 @@ describe('Transform: Aggregation <PopoverForm />', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('preserves the field for unsupported aggs', async () => {
+    const mockOnChange = jest.fn();
+    const { getByTestId } = render(
+      <I18nProvider>
+        <PopoverForm
+          defaultData={{
+            field: 'AvgTicketPrice',
+            keyed: true,
+            ranges: [
+              {
+                to: 500,
+              },
+              {
+                from: 500,
+                to: 700,
+              },
+              {
+                from: 700,
+              },
+            ],
+            // @ts-ignore
+            agg: 'range',
+            aggName: 'AvgTicketPrice.ranges',
+            dropDownName: 'AvgTicketPrice.ranges',
+          }}
+          otherAggNames={[]}
+          options={{}}
+          onChange={mockOnChange}
+        />
+      </I18nProvider>
+    );
+
+    const aggNameInput = getByTestId('transformAggName');
+    fireEvent.change(aggNameInput, {
+      target: { value: 'betterName' },
+    });
+
+    const applyButton = getByTestId('transformApplyAggChanges');
+    fireEvent.click(applyButton);
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+    expect(mockOnChange).toHaveBeenCalledWith({
+      field: 'AvgTicketPrice',
+      keyed: true,
+      ranges: [
+        {
+          to: 500,
+        },
+        {
+          from: 500,
+          to: 700,
+        },
+        {
+          from: 700,
+        },
+      ],
+      // @ts-ignore
+      agg: 'range',
+      aggName: 'betterName',
+      dropDownName: 'AvgTicketPrice.ranges',
+    });
+  });
 });
diff --git a/...ansform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx b/...ansform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
@@ -100,8 +100,8 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
       ...aggConfigDef,
       agg,
       aggName,
-      field: resultField,
       dropDownName: defaultData.dropDownName,
+      ...(isUnsupportedAgg ? {} : { field: resultField }),
     };
 
     return updatedItem;
@@ -153,7 +153,7 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
   }
 
   return (
-    <EuiForm style={{ width: '300px' }} data-test-subj={'transformAggPopoverForm_' + aggName}>
+    <EuiForm css={{ width: '300px' }} data-test-subj={'transformAggPopoverForm_' + aggName}>
       <EuiFormRow
         error={!validAggName && [aggNameError]}
         isInvalid={!validAggName}
@@ -257,7 +257,7 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
           fontSize="s"
           language="json"
           paddingSize="s"
-          style={{ width: '100%', height: '200px' }}
+          css={{ width: '100%', height: '200px' }}
         >
           {JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
         </EuiCodeBlock>