diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.jsx
index 831291871e..51d832c8c4 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.jsx
+++ b/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: ,
enableNext: !!selectedCredential.value,
},
{
id: 2,
name: i18n._(t`Metadata`),
+ key: 'metadata',
component: ,
canJumpTo: !!selectedCredential.value,
- nextButtonText: i18n._(t`OK`),
},
];
+ const CustomFooter = (
+
+
+ {({ activeStep, onNext, onBack }) => (
+ <>
+
+ {activeStep && activeStep.key === 'metadata' && (
+ <>
+
+
+
+
+
+ >
+ )}
+
+ >
+ )}
+
+
+ );
+
return (
-
+ <>
+
+ {selectedCredential.value && (
+
+ )}
+ >
);
}
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
index df33091452..bff46c7cd6 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
@@ -238,7 +238,7 @@ describe('', () => {
});
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' },
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/MetadataStep.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/MetadataStep.jsx
index 0597bfb253..8f4c0b2e5c 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/MetadataStep.jsx
+++ b/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 }) {
)}
-
- testPluginMetadata()}
- >
- {i18n._(t`Test`)}
-
-
-
>
);
}
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginTestAlert.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginTestAlert.jsx
index 741893eb16..01b2c56598 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginTestAlert.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginTestAlert.jsx
@@ -55,14 +55,7 @@ function CredentialPluginTestAlert({
{testMessage && testVariant && (
- {credentialName}
- {testMessage}
- >
- }
- variant={testVariant}
- action={
+ actionClose={
{
setTestMessage(null);
@@ -70,6 +63,13 @@ function CredentialPluginTestAlert({
}}
/>
}
+ title={
+ <>
+ {credentialName}
+ {testMessage}
+ >
+ }
+ variant={testVariant}
/>
)}