[7.x] [ML] Transform: Fix advanced editor initialization. (#59006)

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx

@@ -404,6 +404,10 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange
     xJson: advancedEditorConfig,
   } = useXJsonMode(stringifiedPivotConfig);
 
+  useEffect(() => {
+    setAdvancedEditorConfig(stringifiedPivotConfig);
+  }, [setAdvancedEditorConfig, stringifiedPivotConfig]);
+
   // source config
   const stringifiedSourceConfig = JSON.stringify(previewRequest.source.query, null, 2);
   const [
@@ -797,6 +801,7 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange
                 >
                   <EuiPanel grow={false} paddingSize="none">
                     <EuiCodeEditor
+                      data-test-subj="transformAdvancedPivotEditor"
                       mode={xJsonMode}
                       width="100%"
                       value={advancedEditorConfig}

x-pack/test/functional/apps/transform/creation_index_pattern.ts

@@ -57,6 +57,28 @@ export default function({ getService }: FtrProviderContext) {
           return `user-${this.transformId}`;
         },
         expected: {
+          pivotAdvancedEditorValue: {
+            group_by: {
+              'category.keyword': {
+                terms: {
+                  field: 'category.keyword',
+                },
+              },
+              order_date: {
+                date_histogram: {
+                  field: 'order_date',
+                  calendar_interval: '1m',
+                },
+              },
+            },
+            aggregations: {
+              'products.base_price.avg': {
+                avg: {
+                  field: 'products.base_price',
+                },
+              },
+            },
+          },
           pivotPreview: {
             column: 0,
             values: [`Men's Accessories`],
@@ -152,6 +174,13 @@ export default function({ getService }: FtrProviderContext) {
           await transform.wizard.assertAdvancedPivotEditorSwitchCheckState(false);
         });
 
+        it('displays the advanced configuration', async () => {
+          await transform.wizard.enabledAdvancedPivotEditor();
+          await transform.wizard.assertAdvancedPivotEditorContent(
+            testData.expected.pivotAdvancedEditorValue
+          );
+        });
+
         it('loads the pivot preview', async () => {
           await transform.wizard.assertPivotPreviewLoaded();
         });

x-pack/test/functional/services/transform_ui/wizard.ts

@@ -8,6 +8,7 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export function TransformWizardProvider({ getService }: FtrProviderContext) {
+  const aceEditor = getService('aceEditor');
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
   const retry = getService('retry');
@@ -273,6 +274,12 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) {
       await this.assertAggregationEntryExists(index, expectedLabel);
     },
 
+    async assertAdvancedPivotEditorContent(expectedValue: Record<string, any>) {
+      const advancedEditorString = await aceEditor.getValue('transformAdvancedPivotEditor');
+      const advancedEditorValue = JSON.parse(advancedEditorString);
+      expect(advancedEditorValue).to.eql(expectedValue);
+    },
+
     async assertAdvancedPivotEditorSwitchExists() {
       await testSubjects.existOrFail(`transformAdvancedPivotEditorSwitch`, { allowHidden: true });
     },
@@ -287,6 +294,13 @@ export function TransformWizardProvider({ getService }: FtrProviderContext) {
       );
     },
 
+    async enabledAdvancedPivotEditor() {
+      await this.assertAdvancedPivotEditorSwitchCheckState(false);
+      await testSubjects.click('transformAdvancedPivotEditorSwitch');
+      await this.assertAdvancedPivotEditorSwitchCheckState(true);
+      await testSubjects.existOrFail('transformAdvancedPivotEditor');
+    },
+
     async assertTransformIdInputExists() {
       await testSubjects.existOrFail('transformIdInput');
     },