From 6726b72fe22c0c0f2c18457709049c3a734eb834 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Thu, 10 Jun 2021 11:21:57 -0400
Subject: [PATCH] fixes next button and internationalizes nav buttons on wizard

---
 .../components/AddRole/AddResourceRole.jsx    |  4 +-
 .../AddRole/AddResourceRole.test.jsx          | 58 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/AddRole/AddResourceRole.jsx b/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
index 9b40ac470f..34bb4a0a9b 100644
--- a/awx/ui_next/src/components/AddRole/AddResourceRole.jsx
+++ b/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)}
diff --git a/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx b/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
index 651368d927..1f6ba521b7 100644
--- a/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
+++ b/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');
+  });
 });