[ML] Add functional tests for runtime mappings in Transforms (#92738) (#94155)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>

Author: kibanamachine

x-pack/plugins/ml/public/application/components/data_grid/use_data_grid.tsx

@@ -112,7 +112,7 @@ export const useDataGrid = (
             <ColumnChart
               chartData={chartData}
               columnType={c}
-              dataTestSubj={`mlDataGridChart-${index}`}
+              dataTestSubj={`mlDataGridChart-${c.id}`}
             />
           ) : undefined,
       };

x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx

@@ -26,7 +26,7 @@ export const AdvancedRuntimeMappingsEditor: FC<StepDefineFormHook['runtimeMappin
   }) => {
     return (
       <EuiCodeEditor
-        data-test-subj="transformAdvancedPivotEditor"
+        data-test-subj="transformAdvancedRuntimeMappingsEditor"
         style={{ border: '1px solid #e3e6ef' }}
         height="250px"
         width="100%"

x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_settings/advanced_runtime_mappings_settings.tsx

@@ -155,6 +155,7 @@ export const AdvancedRuntimeMappingsSettings: FC<StepDefineFormHook> = (props) =
                     fill
                     onClick={applyChanges}
                     disabled={!isRuntimeMappingsEditorApplyButtonEnabled}
+                    data-test-subj="transformRuntimeMappingsApplyButton"
                   >
                     {i18n.translate(
                       'xpack.transform.stepDefineForm.advancedSourceEditorApplyButtonText',

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

@@ -41,12 +41,50 @@ function getTransformConfig(): TransformPivotConfig {
   };
 }
 
+function getTransformConfigWithRuntimeMappings(): TransformPivotConfig {
+  const date = Date.now();
+
+  return {
+    id: `ec_cloning_runtime_${date}`,
+    source: {
+      index: ['ft_ecommerce'],
+      runtime_mappings: {
+        rt_gender_lower: {
+          type: 'keyword',
+          script: "emit(doc['customer_gender'].value.toLowerCase())",
+        },
+        rt_total_charge: {
+          type: 'double',
+          script: {
+            source: "emit(doc['taxful_total_price'].value + 4.00)",
+          },
+        },
+      },
+    },
+    pivot: {
+      group_by: { rt_gender_lower: { terms: { field: 'rt_gender_lower' } } },
+      aggregations: {
+        'rt_total_charge.avg': { avg: { field: 'rt_total_charge' } },
+        'rt_total_charge.min': { min: { field: 'rt_total_charge' } },
+        'rt_total_charge.max': { max: { field: 'rt_total_charge' } },
+      },
+    },
+    description: 'ecommerce batch transform grouped by terms(rt_gender_lower)',
+    frequency: '3s',
+    settings: {
+      max_page_search_size: 250,
+    },
+    dest: { index: `user-ec_2_${date}` },
+  };
+}
+
 export default function ({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const transform = getService('transform');
 
   describe('cloning', function () {
     const transformConfigWithPivot = getTransformConfig();
+    const transformConfigWithRuntimeMapping = getTransformConfigWithRuntimeMappings();
     // const transformConfigWithLatest = getLatestTransformConfig();
 
     before(async () => {
@@ -56,6 +94,11 @@ export default function ({ getService }: FtrProviderContext) {
         transformConfigWithPivot.id,
         transformConfigWithPivot
       );
+      await transform.api.createAndRunTransform(
+        transformConfigWithRuntimeMapping.id,
+        transformConfigWithRuntimeMapping
+      );
+
       // await transform.api.createAndRunTransform(
       //   transformConfigWithLatest.id,
       //   transformConfigWithLatest
@@ -67,8 +110,13 @@ export default function ({ getService }: FtrProviderContext) {
 
     after(async () => {
       await transform.testResources.deleteIndexPatternByTitle(transformConfigWithPivot.dest.index);
+      await transform.testResources.deleteIndexPatternByTitle(
+        transformConfigWithRuntimeMapping.dest.index
+      );
+
       // await transform.testResources.deleteIndexPatternByTitle(transformConfigWithLatest.dest.index);
       await transform.api.deleteIndices(transformConfigWithPivot.dest.index);
+      await transform.api.deleteIndices(transformConfigWithRuntimeMapping.dest.index);
       // await transform.api.deleteIndices(transformConfigWithLatest.dest.index);
       await transform.api.cleanTransformIndices();
     });
@@ -84,6 +132,7 @@ export default function ({ getService }: FtrProviderContext) {
           return `user-${this.transformId}`;
         },
         expected: {
+          runtimeMappingsEditorValueArr: [''],
           aggs: {
             index: 0,
             label: 'products.base_price.avg',
@@ -108,6 +157,35 @@ export default function ({ getService }: FtrProviderContext) {
           },
         },
       },
+      {
+        type: 'pivot' as const,
+        suiteTitle: 'clone transform with runtime mappings',
+        originalConfig: transformConfigWithRuntimeMapping,
+        transformId: `clone_${transformConfigWithRuntimeMapping.id}`,
+        transformDescription: `a cloned transform with runtime mappings`,
+        get destinationIndex(): string {
+          return `user-${this.transformId}`;
+        },
+        expected: {
+          runtimeMappingsEditorValueArr: ['{', '  "rt_gender_lower": {', '    "type": "keyword",'],
+          aggs: {
+            index: 0,
+            label: 'rt_total_charge.avg',
+          },
+          indexPreview: {
+            columns: 10,
+            rows: 5,
+          },
+          groupBy: {
+            index: 0,
+            label: 'rt_gender_lower',
+          },
+          transformPreview: {
+            column: 0,
+            values: [`female`, `male`],
+          },
+        },
+      },
       // TODO enable tests when https://github.com/elastic/elasticsearch/issues/67148 is resolved
       // {
       //   type: 'latest' as const,
@@ -168,6 +246,18 @@ export default function ({ getService }: FtrProviderContext) {
         });
 
         it('navigates through the wizard, checks and sets all needed fields', async () => {
+          await transform.testExecution.logTestStep('should have runtime mapping editor');
+          await transform.wizard.assertRuntimeMappingsEditorSwitchExists();
+          await transform.wizard.assertRuntimeMappingsEditorSwitchCheckState(false);
+
+          if (testData.expected.runtimeMappingsEditorValueArr) {
+            await transform.wizard.toggleRuntimeMappingsEditorSwitch(true);
+            await transform.wizard.assertRuntimeMappingsEditorExists();
+            await transform.wizard.assertRuntimeMappingsEditorContent(
+              testData.expected.runtimeMappingsEditorValueArr
+            );
+          }
+
           await transform.testExecution.logTestStep('should load the index preview');
           await transform.wizard.assertIndexPreviewLoaded();