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} /> )}