Moves cred plugin test button down into wizard footer

awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.jsx

@@ -1,38 +1,127 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { func, shape } from 'prop-types';
 import { Formik, useField } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Wizard } from '@patternfly/react-core';
+import {
+  Button,
+  Tooltip,
+  Wizard,
+  WizardContextConsumer,
+  WizardFooter,
+} from '@patternfly/react-core';
 import CredentialsStep from './CredentialsStep';
 import MetadataStep from './MetadataStep';
+import { CredentialsAPI } from '../../../../../api';
+import useRequest from '../../../../../util/useRequest';
+import { CredentialPluginTestAlert } from '..';
 
 function CredentialPluginWizard({ i18n, handleSubmit, onClose }) {
   const [selectedCredential] = useField('credential');
+  const [inputValues] = useField('inputs');
+
+  const {
+    result: testPluginSuccess,
+    error: testPluginError,
+    request: testPluginMetadata,
+  } = useRequest(
+    useCallback(
+      async () =>
+        CredentialsAPI.test(selectedCredential.value.id, {
+          metadata: inputValues.value,
+        }),
+      [selectedCredential, inputValues]
+    ),
+    null
+  );
+
   const steps = [
     {
       id: 1,
       name: i18n._(t`Credential`),
+      key: 'credential',
       component: <CredentialsStep />,
       enableNext: !!selectedCredential.value,
     },
     {
       id: 2,
       name: i18n._(t`Metadata`),
+      key: 'metadata',
       component: <MetadataStep />,
       canJumpTo: !!selectedCredential.value,
-      nextButtonText: i18n._(t`OK`),
     },
   ];
 
+  const CustomFooter = (
+    <WizardFooter>
+      <WizardContextConsumer>
+        {({ activeStep, onNext, onBack }) => (
+          <>
+            <Button
+              id="credential-plugin-prompt-next"
+              variant="primary"
+              onClick={onNext}
+              isDisabled={!selectedCredential.value}
+            >
+              {activeStep.key === 'metadata' ? i18n._(t`OK`) : i18n._(t`Next`)}
+            </Button>
+            {activeStep && activeStep.key === 'metadata' && (
+              <>
+                <Tooltip
+                  content={i18n._(
+                    t`Click this button to verify connection to the secret management system using the selected credential and specified inputs.`
+                  )}
+                  position="right"
+                >
+                  <Button
+                    id="credential-plugin-prompt-test"
+                    variant="secondary"
+                    onClick={() => testPluginMetadata()}
+                  >
+                    {i18n._(t`Test`)}
+                  </Button>
+                </Tooltip>
+
+                <Button
+                  id="credential-plugin-prompt-back"
+                  variant="secondary"
+                  onClick={onBack}
+                >
+                  {i18n._(t`Back`)}
+                </Button>
+              </>
+            )}
+            <Button
+              id="credential-plugin-prompt-cancel"
+              variant="link"
+              onClick={onClose}
+            >
+              {i18n._(t`Cancel`)}
+            </Button>
+          </>
+        )}
+      </WizardContextConsumer>
+    </WizardFooter>
+  );
+
   return (
-    <Wizard
+    <>
-      isOpen
+      <Wizard
-      onClose={onClose}
+        isOpen
-      title={i18n._(t`External Secret Management System`)}
+        onClose={onClose}
-      steps={steps}
+        title={i18n._(t`External Secret Management System`)}
-      onSave={handleSubmit}
+        steps={steps}
-    />
+        onSave={handleSubmit}
+        footer={CustomFooter}
+      />
+      {selectedCredential.value && (
+        <CredentialPluginTestAlert
+          credentialName={selectedCredential.value.name}
+          successResponse={testPluginSuccess}
+          errorResponse={testPluginError}
+        />
+      )}
+    </>
   );
 }
 

awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx

@@ -238,7 +238,7 @@ describe('<CredentialPluginPrompt />', () => {
     });
     test('clicking Test button makes correct call', async () => {
       await act(async () => {
-        wrapper.find('Button#credential-plugin-test').simulate('click');
+        wrapper.find('Button[children="Test"]').simulate('click');
       });
       expect(CredentialsAPI.test).toHaveBeenCalledWith(1, {
         metadata: { secret_path: '/foo/bar', secret_version: '9000' },

awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/MetadataStep.jsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect } from 'react';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import { useField, useFormikContext } from 'formik';
 import styled from 'styled-components';
-import { Button, Form, FormGroup, Tooltip } from '@patternfly/react-core';
+import { Form, FormGroup, Tooltip } from '@patternfly/react-core';
 import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
-import { CredentialsAPI, CredentialTypesAPI } from '../../../../../api';
+import { CredentialTypesAPI } from '../../../../../api';
 import AnsibleSelect from '../../../../../components/AnsibleSelect';
 import ContentError from '../../../../../components/ContentError';
 import ContentLoading from '../../../../../components/ContentLoading';
@@ -13,36 +12,16 @@ import FormField from '../../../../../components/FormField';
 import { FormFullWidthLayout } from '../../../../../components/FormLayout';
 import useRequest from '../../../../../util/useRequest';
 import { required } from '../../../../../util/validators';
-import { CredentialPluginTestAlert } from '..';
 
 const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
   margin-left: 10px;
 `;
 
-const TestButton = styled(Button)`
-  margin-top: 20px;
-`;
-
 function MetadataStep({ i18n }) {
   const form = useFormikContext();
   const [selectedCredential] = useField('credential');
   const [inputValues] = useField('inputs');
 
-  const {
-    result: testPluginSuccess,
-    error: testPluginError,
-    request: testPluginMetadata,
-  } = useRequest(
-    useCallback(
-      async () =>
-        CredentialsAPI.test(selectedCredential.value.id, {
-          metadata: inputValues.value,
-        }),
-      [selectedCredential.value.id, inputValues.value]
-    ),
-    null
-  );
-
   const {
     result: fields,
     error,
@@ -148,26 +127,6 @@ function MetadataStep({ i18n }) {
           </FormFullWidthLayout>
         </Form>
       )}
-      <Tooltip
-        content={i18n._(
-          t`Click this button to verify connection to the secret management system using the selected credential and specified inputs.`
-        )}
-        position="right"
-      >
-        <TestButton
-          id="credential-plugin-test"
-          variant="primary"
-          type="submit"
-          onClick={() => testPluginMetadata()}
-        >
-          {i18n._(t`Test`)}
-        </TestButton>
-      </Tooltip>
-      <CredentialPluginTestAlert
-        credentialName={selectedCredential.value.name}
-        successResponse={testPluginSuccess}
-        errorResponse={testPluginError}
-      />
     </>
   );
 }

awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginTestAlert.jsx

@@ -55,14 +55,7 @@ function CredentialPluginTestAlert({
     <AlertGroup isToast>
       {testMessage && testVariant && (
         <Alert
-          title={
+          actionClose={
-            <>
-              <b id="credential-plugin-test-name">{credentialName}</b>
-              <p id="credential-plugin-test-message">{testMessage}</p>
-            </>
-          }
-          variant={testVariant}
-          action={
             <AlertActionCloseButton
               onClose={() => {
                 setTestMessage(null);
@@ -70,6 +63,13 @@ function CredentialPluginTestAlert({
               }}
             />
           }
+          title={
+            <>
+              <b id="credential-plugin-test-name">{credentialName}</b>
+              <p id="credential-plugin-test-message">{testMessage}</p>
+            </>
+          }
+          variant={testVariant}
         />
       )}
     </AlertGroup>