Merge pull request #10413 from AlexSCorey/10404-RoleAccessSaveButton

fixes next button and internationalizes nav buttons on wizard

SUMMARY
Resolves #10404 and it internationalizes the next button.
ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

AWX VERSION
ADDITIONAL INFORMATION

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/components/AddRole/AddResourceRole.jsx

@@ -212,6 +212,7 @@ function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
           )}
         </div>
       ),
+      nextButtonText: t`Next`,
       enableNext: selectedResource !== null,
     },
     {
@@ -246,6 +247,7 @@ function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
         </Fragment>
       ),
       enableNext: selectedResourceRows.length > 0,
+      nextButtonText: t`Next`,
       canJumpTo: maxEnabledStep >= 2,
     },
     {
@@ -269,12 +271,12 @@ function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
 
   const currentStep = steps.find(step => step.id === currentStepId);
 
-  // TODO: somehow internationalize steps and currentStep.nextButtonText
   return (
     <Wizard
       style={{ overflow: 'scroll' }}
       isOpen
       onNext={handleWizardNext}
+      onBack={step => setCurrentStepId(step.id)}
       onClose={onClose}
       onSave={handleWizardSave}
       onGoToStep={step => handleWizardGoToStep(step)}

awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx

@@ -357,4 +357,62 @@ describe('<_AddResourceRole />', () => {
       wrapper.find('SelectableCard[label="Users"]').prop('isSelected')
     ).toBe(true);
   });
+  test('should show correct button text', async () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <AddResourceRole onClose={() => {}} onSave={() => {}} roles={roles} />,
+        { context: { network: { handleHttpError: () => {} } } }
+      );
+    });
+    wrapper.update();
+
+    // Step 1
+    const selectableCardWrapper = wrapper.find('SelectableCard');
+    expect(selectableCardWrapper.length).toBe(2);
+    act(() => wrapper.find('SelectableCard[label="Users"]').prop('onClick')());
+    wrapper.update();
+    await act(async () =>
+      wrapper.find('Button[type="submit"]').prop('onClick')()
+    );
+    expect(wrapper.find('Button[type="submit"]').text()).toBe('Next');
+
+    wrapper.update();
+
+    // Step 2
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    expect(wrapper.find('Chip').length).toBe(0);
+    act(() =>
+      wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
+    );
+    wrapper.update();
+    expect(
+      wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
+    ).toBe(true);
+    expect(wrapper.find('Chip').length).toBe(1);
+    expect(wrapper.find('Button[type="submit"]').text()).toBe('Next');
+    act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
+    wrapper.update();
+
+    // Step 3
+    act(() =>
+      wrapper.find('Checkbox[aria-label="Admin"]').invoke('onChange')(true)
+    );
+    expect(wrapper.find('Button[type="submit"]').text()).toBe('Save');
+    wrapper.update();
+
+    // Go Back
+    await act(async () =>
+      wrapper.find('Button[variant="secondary"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('Button[type="submit"]').text()).toBe('Next');
+
+    // return to last step
+    await act(async () =>
+      wrapper.find('Button[type="submit"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('Button[type="submit"]').text()).toBe('Save');
+  });
 });