[ML] Transforms: Adds functional tests for transform cloning and edit…

…ing. (#69933)

Adds functional tests for transform cloning and editing.

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx

@@ -77,10 +77,15 @@ export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout,
 
   return (
     <EuiOverlayMask>
-      <EuiFlyout onClose={closeFlyout} hideCloseButton aria-labelledby="flyoutComplicatedTitle">
+      <EuiFlyout
+        onClose={closeFlyout}
+        hideCloseButton
+        aria-labelledby="transformEditFlyoutTitle"
+        data-test-subj="transformEditFlyout"
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutComplicatedTitle">
+            <h2 id="transformEditFlyoutTitle">
               {i18n.translate('xpack.transform.transformList.editFlyoutTitle', {
                 defaultMessage: 'Edit {transformId}',
                 values: {
@@ -121,7 +126,12 @@ export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout,
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={submitFormHandler} fill isDisabled={isUpdateButtonDisabled}>
+              <EuiButton
+                data-test-subj="transformEditFlyoutUpdateButton"
+                onClick={submitFormHandler}
+                fill
+                isDisabled={isUpdateButtonDisabled}
+              >
                 {i18n.translate('xpack.transform.transformList.editFlyoutUpdateButtonText', {
                   defaultMessage: 'Update',
                 })}

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx

@@ -25,6 +25,7 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
   return (
     <EuiForm>
       <EditTransformFlyoutFormTextInput
+        dataTestSubj="transformEditFlyoutDescriptionInput"
         errorMessages={formFields.description.errorMessages}
         label={i18n.translate('xpack.transform.transformList.editFlyoutFormDescriptionLabel', {
           defaultMessage: 'Description',
@@ -33,6 +34,7 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
         value={formFields.description.value}
       />
       <EditTransformFlyoutFormTextInput
+        dataTestSubj="transformEditFlyoutDocsPerSecondInput"
         errorMessages={formFields.docsPerSecond.errorMessages}
         helpText={i18n.translate(
           'xpack.transform.transformList.editFlyoutFormDocsPerSecondHelptext',
@@ -48,6 +50,7 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
         value={formFields.docsPerSecond.value}
       />
       <EditTransformFlyoutFormTextInput
+        dataTestSubj="transformEditFlyoutFrequencyInput"
         errorMessages={formFields.frequency.errorMessages}
         helpText={i18n.translate('xpack.transform.transformList.editFlyoutFormFrequencyHelptext', {
           defaultMessage:

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_input.tsx

@@ -9,6 +9,7 @@ import React, { FC } from 'react';
 import { EuiFieldText, EuiFormRow } from '@elastic/eui';
 
 interface EditTransformFlyoutFormTextInputProps {
+  dataTestSubj: string;
   errorMessages: string[];
   helpText?: string;
   label: string;
@@ -18,6 +19,7 @@ interface EditTransformFlyoutFormTextInputProps {
 }
 
 export const EditTransformFlyoutFormTextInput: FC<EditTransformFlyoutFormTextInputProps> = ({
+  dataTestSubj,
   errorMessages,
   helpText,
   label,
@@ -33,6 +35,7 @@ export const EditTransformFlyoutFormTextInput: FC<EditTransformFlyoutFormTextInp
       error={errorMessages}
     >
       <EuiFieldText
+        data-test-subj={dataTestSubj}
         placeholder={placeholder}
         isInvalid={errorMessages.length > 0}
         value={value}

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_clone.tsx

@@ -35,6 +35,7 @@ export const CloneAction: FC<CloneActionProps> = ({ itemId }) => {
 
   const cloneButton = (
     <EuiButtonEmpty
+      data-test-subj="transformActionClone"
       size="xs"
       color="text"
       disabled={!canCreateTransform}

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_delete.tsx

@@ -205,6 +205,7 @@ export const DeleteAction: FC<DeleteActionProps> = ({ items, forceDisable }) =>
 
   let deleteButton = (
     <EuiButtonEmpty
+      data-test-subj="transformActionDelete"
       size="xs"
       color="text"
       disabled={forceDisable === true || disabled || !canDeleteTransform}

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_edit.tsx

@@ -35,6 +35,7 @@ export const EditAction: FC<EditActionProps> = ({ config }) => {
 
   const editButton = (
     <EuiButtonEmpty
+      data-test-subj="transformActionEdit"
       size="xs"
       color="text"
       disabled={!canCreateTransform}

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.tsx

@@ -91,6 +91,7 @@ export const StartAction: FC<StartActionProps> = ({ items, forceDisable }) => {
 
   let startButton = (
     <EuiButtonEmpty
+      data-test-subj="transformActionStart"
       size="xs"
       color="text"
       disabled={forceDisable === true || actionIsDisabled}

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.tsx

@@ -59,6 +59,7 @@ export const StopAction: FC<StopActionProps> = ({ items, forceDisable }) => {
 
   const stopButton = (
     <EuiButtonEmpty
+      data-test-subj="transformActionStop"
       size="xs"
       color="text"
       disabled={forceDisable === true || !canStartStopTransform || stoppedTransform === true}

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

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import expect from '@kbn/expect';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { TransformPivotConfig } from '../../../../plugins/transform/public/app/common';
@@ -46,21 +47,183 @@ export default function ({ getService }: FtrProviderContext) {
 
     const testDataList = [
       {
-        suiteTitle: 'batch transform with terms group and avg agg',
-        expected: {},
+        suiteTitle: 'clone transform',
+        transformId: `clone_${transformConfig.id}`,
+        transformDescription: `a cloned transform`,
+        get destinationIndex(): string {
+          return `user-${this.transformId}`;
+        },
+        expected: {
+          aggs: {
+            index: 0,
+            label: 'products.base_price.avg',
+          },
+          indexPreview: {
+            columns: 10,
+            rows: 5,
+          },
+          groupBy: {
+            index: 0,
+            label: 'category',
+          },
+          pivotPreview: {
+            column: 0,
+            values: [
+              `Men's Accessories`,
+              `Men's Clothing`,
+              `Men's Shoes`,
+              `Women's Accessories`,
+              `Women's Clothing`,
+            ],
+          },
+        },
       },
     ];
 
     for (const testData of testDataList) {
       describe(`${testData.suiteTitle}`, function () {
         after(async () => {
-          // await transform.api.deleteIndices(<CLONE_DEST_INDEX>);
+          await transform.api.deleteIndices(testData.destinationIndex);
+          await transform.testResources.deleteIndexPatternByTitle(testData.destinationIndex);
         });
 
-        it('loads the home page', async () => {
+        it('should load the home page', async () => {
           await transform.navigation.navigateTo();
           await transform.management.assertTransformListPageExists();
         });
+
+        it('should display the transforms table', async () => {
+          await transform.management.assertTransformsTableExists();
+        });
+
+        it('should display the original transform in the transform list', async () => {
+          await transform.table.refreshTransformList();
+          await transform.table.filterWithSearchString(transformConfig.id);
+          const rows = await transform.table.parseTransformTable();
+          expect(rows.filter((row) => row.id === transformConfig.id)).to.have.length(1);
+        });
+
+        it('should show the actions popover', async () => {
+          await transform.table.assertTransformRowActions(false);
+        });
+
+        it('should display the define pivot step', async () => {
+          await transform.table.clickTransformRowAction('Clone');
+          await transform.wizard.assertDefineStepActive();
+        });
+
+        it('should load the index preview', async () => {
+          await transform.wizard.assertIndexPreviewLoaded();
+        });
+
+        it('should show the index preview', async () => {
+          await transform.wizard.assertIndexPreview(
+            testData.expected.indexPreview.columns,
+            testData.expected.indexPreview.rows
+          );
+        });
+
+        it('should display the query input', async () => {
+          await transform.wizard.assertQueryInputExists();
+          await transform.wizard.assertQueryValue('');
+        });
+
+        it('should show the pre-filled group-by configuration', async () => {
+          await transform.wizard.assertGroupByEntryExists(
+            testData.expected.groupBy.index,
+            testData.expected.groupBy.label
+          );
+        });
+
+        it('should show the pre-filled aggs configuration', async () => {
+          await transform.wizard.assertAggregationEntryExists(
+            testData.expected.aggs.index,
+            testData.expected.aggs.label
+          );
+        });
+
+        it('should show the pivot preview', async () => {
+          await transform.wizard.assertPivotPreviewChartHistogramButtonMissing();
+          await transform.wizard.assertPivotPreviewColumnValues(
+            testData.expected.pivotPreview.column,
+            testData.expected.pivotPreview.values
+          );
+        });
+
+        it('should load the details step', async () => {
+          await transform.wizard.advanceToDetailsStep();
+        });
+
+        it('should input the transform id', async () => {
+          await transform.wizard.assertTransformIdInputExists();
+          await transform.wizard.assertTransformIdValue('');
+          await transform.wizard.setTransformId(testData.transformId);
+        });
+
+        it('should input the transform description', async () => {
+          await transform.wizard.assertTransformDescriptionInputExists();
+          await transform.wizard.assertTransformDescriptionValue('');
+          await transform.wizard.setTransformDescription(testData.transformDescription);
+        });
+
+        it('should input the destination index', async () => {
+          await transform.wizard.assertDestinationIndexInputExists();
+          await transform.wizard.assertDestinationIndexValue('');
+          await transform.wizard.setDestinationIndex(testData.destinationIndex);
+        });
+
+        it('should display the create index pattern switch', async () => {
+          await transform.wizard.assertCreateIndexPatternSwitchExists();
+          await transform.wizard.assertCreateIndexPatternSwitchCheckState(true);
+        });
+
+        it('should display the continuous mode switch', async () => {
+          await transform.wizard.assertContinuousModeSwitchExists();
+          await transform.wizard.assertContinuousModeSwitchCheckState(false);
+        });
+
+        it('should load the create step', async () => {
+          await transform.wizard.advanceToCreateStep();
+        });
+
+        it('should display the create and start button', async () => {
+          await transform.wizard.assertCreateAndStartButtonExists();
+          await transform.wizard.assertCreateAndStartButtonEnabled(true);
+        });
+
+        it('should display the create button', async () => {
+          await transform.wizard.assertCreateButtonExists();
+          await transform.wizard.assertCreateButtonEnabled(true);
+        });
+
+        it('should display the copy to clipboard button', async () => {
+          await transform.wizard.assertCopyToClipboardButtonExists();
+          await transform.wizard.assertCopyToClipboardButtonEnabled(true);
+        });
+
+        it('should create the transform', async () => {
+          await transform.wizard.createTransform();
+        });
+
+        it('should start the transform and finish processing', async () => {
+          await transform.wizard.startTransform();
+          await transform.wizard.waitForProgressBarComplete();
+        });
+
+        it('should return to the management page', async () => {
+          await transform.wizard.returnToManagement();
+        });
+
+        it('should display the transforms table', async () => {
+          await transform.management.assertTransformsTableExists();
+        });
+
+        it('should display the created transform in the transform list', async () => {
+          await transform.table.refreshTransformList();
+          await transform.table.filterWithSearchString(testData.transformId);
+          const rows = await transform.table.parseTransformTable();
+          expect(rows.filter((row) => row.id === testData.transformId)).to.have.length(1);
+        });
       });
     }
   });

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

@@ -432,7 +432,7 @@ export default function ({ getService }: FtrProviderContext) {
           expect(rows.filter((row) => row.id === testData.transformId)).to.have.length(1);
         });
 
-        it('job creation displays details for the created job in the job list', async () => {
+        it('transform creation displays details for the created transform in the transform list', async () => {
           await transform.table.assertTransformRowFields(testData.transformId, {
             id: testData.transformId,
             description: testData.transformDescription,

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

@@ -235,7 +235,7 @@ export default function ({ getService }: FtrProviderContext) {
           expect(rows.filter((row) => row.id === testData.transformId)).to.have.length(1);
         });
 
-        it('job creation displays details for the created job in the job list', async () => {
+        it('transform creation displays details for the created transform in the transform list', async () => {
           await transform.table.assertTransformRowFields(testData.transformId, {
             id: testData.transformId,
             description: testData.transformDescription,