Adds ID's to prompt wizard steps

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[1].name.props.children).toEqual('Credentials');
-    expect(steps[2].name).toEqual('Other Prompts');
+    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);
   });

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"

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,
   };

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,
   };

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,
   };

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}

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>

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
+        wrapper.find('StepName#preview-step').simulate('click');
-          .find('WizardNavItem[content="Preview"]')
-          .find('button')
-          .prop('onClick')();
       });
       wrapper.update();
       await act(async () => {

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(),
   };

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 !== '',
   };