From b7c729c96fd44cb5f984a3f68b1ad4df9e97a81e Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 9 Dec 2020 10:29:16 -0500
Subject: [PATCH] Adds ID's to prompt wizard steps

---
 .../src/components/LaunchPrompt/LaunchPrompt.test.jsx  | 10 +++++-----
 .../src/components/LaunchPrompt/steps/StepName.jsx     |  6 +++---
 .../LaunchPrompt/steps/useCredentialsStep.jsx          |  8 ++++++--
 .../components/LaunchPrompt/steps/useInventoryStep.jsx |  6 +++++-
 .../LaunchPrompt/steps/useOtherPromptsStep.jsx         |  7 ++++++-
 .../components/LaunchPrompt/steps/usePreviewStep.jsx   |  7 ++++++-
 .../components/LaunchPrompt/steps/useSurveyStep.jsx    |  1 +
 .../Modals/NodeModals/NodeModal.test.jsx               |  5 +----
 .../Modals/NodeModals/NodeTypeStep/useNodeTypeStep.jsx |  7 ++++++-
 .../Modals/NodeModals/useRunTypeStep.jsx               |  8 ++++++--
 10 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx b/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
index 707e0f5401..c320aac30b 100644
--- a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
@@ -112,10 +112,10 @@ describe('LaunchPrompt', () => {
 
     expect(steps).toHaveLength(5);
     expect(steps[0].name.props.children).toEqual('Inventory');
-    expect(steps[1].name).toEqual('Credentials');
-    expect(steps[2].name).toEqual('Other Prompts');
+    expect(steps[1].name.props.children).toEqual('Credentials');
+    expect(steps[2].name.props.children).toEqual('Other prompts');
     expect(steps[3].name.props.children).toEqual('Survey');
-    expect(steps[4].name).toEqual('Preview');
+    expect(steps[4].name.props.children).toEqual('Preview');
   });
 
   test('should add inventory step', async () => {
@@ -161,7 +161,7 @@ describe('LaunchPrompt', () => {
     const steps = wizard.prop('steps');
 
     expect(steps).toHaveLength(2);
-    expect(steps[0].name).toEqual('Credentials');
+    expect(steps[0].name.props.children).toEqual('Credentials');
     expect(isElementOfType(steps[0].component, CredentialsStep)).toEqual(true);
     expect(isElementOfType(steps[1].component, PreviewStep)).toEqual(true);
   });
@@ -185,7 +185,7 @@ describe('LaunchPrompt', () => {
     const steps = wizard.prop('steps');
 
     expect(steps).toHaveLength(2);
-    expect(steps[0].name).toEqual('Other Prompts');
+    expect(steps[0].name.props.children).toEqual('Other prompts');
     expect(isElementOfType(steps[0].component, OtherPromptsStep)).toEqual(true);
     expect(isElementOfType(steps[1].component, PreviewStep)).toEqual(true);
   });
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/StepName.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/StepName.jsx
index 28bf5f0414..d7d37989cd 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/StepName.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/StepName.jsx
@@ -14,13 +14,13 @@ const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
   margin-left: 10px;
 `;
 
-function StepName({ hasErrors, children, i18n }) {
+function StepName({ hasErrors, children, i18n, id }) {
   if (!hasErrors) {
-    return children;
+    return <div id={id}>{children}</div>;
   }
   return (
     <>
-      <AlertText>
+      <AlertText id={id}>
         {children}
         <Tooltip
           position="right"
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/useCredentialsStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/useCredentialsStep.jsx
index 8cc32714c6..8151332078 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/useCredentialsStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/useCredentialsStep.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
-
 import CredentialsStep from './CredentialsStep';
+import StepName from './StepName';
 
 const STEP_ID = 'credentials';
 
@@ -28,7 +28,11 @@ function getStep(launchConfig, i18n) {
   return {
     id: STEP_ID,
     key: 4,
-    name: i18n._(t`Credentials`),
+    name: (
+      <StepName hasErrors={false} id="credentials-step">
+        {i18n._(t`Credentials`)}
+      </StepName>
+    ),
     component: <CredentialsStep i18n={i18n} />,
     enableNext: true,
   };
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/useInventoryStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/useInventoryStep.jsx
index dfdf645275..0d00a3b747 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/useInventoryStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/useInventoryStep.jsx
@@ -35,7 +35,11 @@ function getStep(launchConfig, i18n, formError) {
   }
   return {
     id: STEP_ID,
-    name: <StepName hasErrors={formError}>{i18n._(t`Inventory`)}</StepName>,
+    name: (
+      <StepName hasErrors={formError} id="inventory-step">
+        {i18n._(t`Inventory`)}
+      </StepName>
+    ),
     component: <InventoryStep i18n={i18n} />,
     enableNext: true,
   };
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/useOtherPromptsStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/useOtherPromptsStep.jsx
index 9af74046fd..1f63397c17 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/useOtherPromptsStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/useOtherPromptsStep.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { t } from '@lingui/macro';
 import { jsonToYaml, parseVariableField } from '../../../util/yaml';
 import OtherPromptsStep from './OtherPromptsStep';
+import StepName from './StepName';
 
 const STEP_ID = 'other';
 
@@ -43,7 +44,11 @@ function getStep(launchConfig, i18n) {
   return {
     id: STEP_ID,
     key: 5,
-    name: i18n._(t`Other Prompts`),
+    name: (
+      <StepName hasErrors={false} id="other-prompts-step">
+        {i18n._(t`Other prompts`)}
+      </StepName>
+    ),
     component: <OtherPromptsStep launchConfig={launchConfig} i18n={i18n} />,
     enableNext: true,
   };
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/usePreviewStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/usePreviewStep.jsx
index fae5fd91f3..77570fab0b 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/usePreviewStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/usePreviewStep.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 import PreviewStep from './PreviewStep';
+import StepName from './StepName';
 
 const STEP_ID = 'preview';
 
@@ -16,7 +17,11 @@ export default function usePreviewStep(
     step: showStep
       ? {
           id: STEP_ID,
-          name: i18n._(t`Preview`),
+          name: (
+            <StepName hasErrors={false} id="preview-step">
+              {i18n._(t`Preview`)}
+            </StepName>
+          ),
           component: (
             <PreviewStep
               launchConfig={launchConfig}
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
index 54a38905f0..05719ad3a7 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/useSurveyStep.jsx
@@ -89,6 +89,7 @@ function getStep(launchConfig, surveyConfig, validate, i18n, visitedSteps) {
           Object.keys(visitedSteps).includes(STEP_ID) &&
           Object.keys(validate()).length
         }
+        id="survey-step"
       >
         {i18n._(t`Survey`)}
       </StepName>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
index 55ed1b6fc8..1c227ef90d 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
@@ -274,10 +274,7 @@ describe('NodeModal', () => {
       wrapper.update();
       expect(wrapper.find('NodeNextButton').prop('buttonText')).toBe('Next');
       act(() => {
-        wrapper
-          .find('WizardNavItem[content="Preview"]')
-          .find('button')
-          .prop('onClick')();
+        wrapper.find('StepName#preview-step').simulate('click');
       });
       wrapper.update();
       await act(async () => {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/useNodeTypeStep.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/useNodeTypeStep.jsx
index 73c4e10fcf..2b0dcd888d 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/useNodeTypeStep.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/useNodeTypeStep.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { t } from '@lingui/macro';
 import { useField } from 'formik';
 import NodeTypeStep from './NodeTypeStep';
+import StepName from '../../../../../../components/LaunchPrompt/steps/StepName';
 
 const STEP_ID = 'nodeType';
 
@@ -38,7 +39,11 @@ function getStep(i18n, nodeTypeField, approvalNameField, nodeResourceField) {
   };
   return {
     id: STEP_ID,
-    name: i18n._(t`Node Type`),
+    name: (
+      <StepName hasErrors={false} id="node-type-step">
+        {i18n._(t`Node type`)}
+      </StepName>
+    ),
     component: <NodeTypeStep i18n={i18n} />,
     enableNext: isEnabled(),
   };
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/useRunTypeStep.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/useRunTypeStep.jsx
index 6417ee2826..2e117da77e 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/useRunTypeStep.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/useRunTypeStep.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 import { useField } from 'formik';
-
 import RunStep from './RunStep';
+import StepName from '../../../../../components/LaunchPrompt/steps/StepName';
 
 const STEP_ID = 'runType';
 
@@ -28,7 +28,11 @@ function getStep(askLinkType, meta, i18n) {
   }
   return {
     id: STEP_ID,
-    name: i18n._(t`Run Type`),
+    name: (
+      <StepName hasErrors={false} id="run-type-step">
+        {i18n._(t`Run type`)}
+      </StepName>
+    ),
     component: <RunStep />,
     enableNext: meta.value !== '',
   };