diff --git a/awx/ui_next/src/screens/Setting/TACACS/TACACS.test.jsx b/awx/ui_next/src/screens/Setting/TACACS/TACACS.test.jsx
index ec3c69aed0..ad8fcdbe61 100644
--- a/awx/ui_next/src/screens/Setting/TACACS/TACACS.test.jsx
+++ b/awx/ui_next/src/screens/Setting/TACACS/TACACS.test.jsx
@@ -2,12 +2,20 @@ import React from 'react';
import { act } from 'react-dom/test-utils';
import { createMemoryHistory } from 'history';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import { SettingsProvider } from '../../../contexts/Settings';
import { SettingsAPI } from '../../../api';
+import mockAllOptions from '../shared/data.allSettingOptions.json';
import TACACS from './TACACS';
jest.mock('../../../api/models/Settings');
SettingsAPI.readCategory.mockResolvedValue({
- data: {},
+ data: {
+ TACACSPLUS_HOST: 'mockhost',
+ TACACSPLUS_PORT: 49,
+ TACACSPLUS_SECRET: '$encrypted$',
+ TACACSPLUS_SESSION_TIMEOUT: 5,
+ TACACSPLUS_AUTH_PROTOCOL: 'ascii',
+ },
});
describe('', () => {
@@ -23,9 +31,14 @@ describe('', () => {
initialEntries: ['/settings/tacacs/details'],
});
await act(async () => {
- wrapper = mountWithContexts(, {
- context: { router: { history } },
- });
+ wrapper = mountWithContexts(
+
+
+ ,
+ {
+ context: { router: { history } },
+ }
+ );
});
expect(wrapper.find('TACACSDetail').length).toBe(1);
});
@@ -35,9 +48,14 @@ describe('', () => {
initialEntries: ['/settings/tacacs/edit'],
});
await act(async () => {
- wrapper = mountWithContexts(, {
- context: { router: { history } },
- });
+ wrapper = mountWithContexts(
+
+
+ ,
+ {
+ context: { router: { history } },
+ }
+ );
});
expect(wrapper.find('TACACSEdit').length).toBe(1);
});
diff --git a/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.jsx b/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.jsx
index 8ec22acb07..a45e59d069 100644
--- a/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.jsx
+++ b/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.jsx
@@ -1,25 +1,130 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import { Button } from '@patternfly/react-core';
-import { CardBody, CardActionsRow } from '../../../../components/Card';
+import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Formik } from 'formik';
+import { Form } from '@patternfly/react-core';
+import { CardBody } from '../../../../components/Card';
+import ContentError from '../../../../components/ContentError';
+import ContentLoading from '../../../../components/ContentLoading';
+import { FormSubmitError } from '../../../../components/FormField';
+import { FormColumnLayout } from '../../../../components/FormLayout';
+import { useSettings } from '../../../../contexts/Settings';
+import { RevertAllAlert, RevertFormActionGroup } from '../../shared';
+import {
+ ChoiceField,
+ EncryptedField,
+ InputField,
+} from '../../shared/SharedFields';
+import useModal from '../../../../util/useModal';
+import useRequest from '../../../../util/useRequest';
+import { SettingsAPI } from '../../../../api';
+
+function TACACSEdit() {
+ const history = useHistory();
+ const { isModalOpen, toggleModal, closeModal } = useModal();
+ const { PUT: options } = useSettings();
+
+ const { isLoading, error, request: fetchTACACS, result: tacacs } = useRequest(
+ useCallback(async () => {
+ const { data } = await SettingsAPI.readCategory('tacacsplus');
+ const mergedData = {};
+ Object.keys(data).forEach(key => {
+ mergedData[key] = options[key];
+ mergedData[key].value = data[key];
+ });
+ return mergedData;
+ }, [options]),
+ null
+ );
+
+ useEffect(() => {
+ fetchTACACS();
+ }, [fetchTACACS]);
+
+ const { error: submitError, request: submitForm } = useRequest(
+ useCallback(
+ async values => {
+ await SettingsAPI.updateAll(values);
+ history.push('/settings/tacacs/details');
+ },
+ [history]
+ ),
+ null
+ );
+
+ const handleSubmit = async form => {
+ await submitForm(form);
+ };
+
+ const handleRevertAll = async () => {
+ const defaultValues = Object.assign(
+ ...Object.entries(tacacs).map(([key, value]) => ({
+ [key]: value.default,
+ }))
+ );
+ await submitForm(defaultValues);
+ closeModal();
+ };
+
+ const handleCancel = () => {
+ history.push('/settings/tacacs/details');
+ };
+
+ const initialValues = fields =>
+ Object.keys(fields).reduce((acc, key) => {
+ acc[key] = fields[key].value ?? '';
+ return acc;
+ }, {});
-function TACACSEdit({ i18n }) {
return (
- {i18n._(t`Edit form coming soon :)`)}
-
-
-
+ {isLoading && }
+ {!isLoading && error && }
+ {!isLoading && tacacs && (
+
+ {formik => (
+
+ )}
+
+ )}
);
}
-export default withI18n()(TACACSEdit);
+export default TACACSEdit;
diff --git a/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.test.jsx b/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.test.jsx
index 529090a34f..a62cdbc289 100644
--- a/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.test.jsx
+++ b/awx/ui_next/src/screens/Setting/TACACS/TACACSEdit/TACACSEdit.test.jsx
@@ -1,16 +1,166 @@
import React from 'react';
-import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import {
+ mountWithContexts,
+ waitForElement,
+} from '../../../../../testUtils/enzymeHelpers';
+import mockAllOptions from '../../shared/data.allSettingOptions.json';
+import { SettingsProvider } from '../../../../contexts/Settings';
+import { SettingsAPI } from '../../../../api';
import TACACSEdit from './TACACSEdit';
+jest.mock('../../../../api/models/Settings');
+SettingsAPI.updateAll.mockResolvedValue({});
+SettingsAPI.readCategory.mockResolvedValue({
+ data: {
+ TACACSPLUS_HOST: 'mockhost',
+ TACACSPLUS_PORT: 49,
+ TACACSPLUS_SECRET: '$encrypted$',
+ TACACSPLUS_SESSION_TIMEOUT: 123,
+ TACACSPLUS_AUTH_PROTOCOL: 'ascii',
+ },
+});
+
describe('', () => {
let wrapper;
- beforeEach(() => {
- wrapper = mountWithContexts();
- });
+ let history;
+
afterEach(() => {
wrapper.unmount();
+ jest.clearAllMocks();
});
+
+ beforeEach(async () => {
+ history = createMemoryHistory({
+ initialEntries: ['/settings/tacacs/edit'],
+ });
+ await act(async () => {
+ wrapper = mountWithContexts(
+
+
+ ,
+ {
+ context: { router: { history } },
+ }
+ );
+ });
+ await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+ });
+
test('initially renders without crashing', () => {
expect(wrapper.find('TACACSEdit').length).toBe(1);
});
+
+ test('should display expected form fields', async () => {
+ expect(wrapper.find('FormGroup[label="TACACS+ Server"]').length).toBe(1);
+ expect(wrapper.find('FormGroup[label="TACACS+ Port"]').length).toBe(1);
+ expect(wrapper.find('FormGroup[label="TACACS+ Secret"]').length).toBe(1);
+ expect(
+ wrapper.find('FormGroup[label="TACACS+ Auth Session Timeout"]').length
+ ).toBe(1);
+ expect(
+ wrapper.find('FormGroup[label="TACACS+ Authentication Protocol"]').length
+ ).toBe(1);
+ });
+
+ test('should successfully send default values to api on form revert all', async () => {
+ expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(0);
+ expect(wrapper.find('RevertAllAlert')).toHaveLength(0);
+ await act(async () => {
+ wrapper
+ .find('button[aria-label="Revert all to default"]')
+ .invoke('onClick')();
+ });
+ wrapper.update();
+ expect(wrapper.find('RevertAllAlert')).toHaveLength(1);
+ await act(async () => {
+ wrapper
+ .find('RevertAllAlert button[aria-label="Confirm revert all"]')
+ .invoke('onClick')();
+ });
+ wrapper.update();
+ expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+ expect(SettingsAPI.updateAll).toHaveBeenCalledWith({
+ TACACSPLUS_HOST: '',
+ TACACSPLUS_PORT: 49,
+ TACACSPLUS_SECRET: '',
+ TACACSPLUS_SESSION_TIMEOUT: 5,
+ TACACSPLUS_AUTH_PROTOCOL: 'ascii',
+ });
+ });
+
+ test('should successfully send request to api on form submission', async () => {
+ act(() => {
+ wrapper.find('input#TACACSPLUS_HOST').simulate('change', {
+ target: { value: 'new_host', name: 'TACACSPLUS_HOST' },
+ });
+ wrapper.find('input#TACACSPLUS_PORT').simulate('change', {
+ target: { value: 999, name: 'TACACSPLUS_PORT' },
+ });
+ wrapper
+ .find(
+ 'FormGroup[fieldId="TACACSPLUS_SECRET"] button[aria-label="Revert"]'
+ )
+ .invoke('onClick')();
+ });
+ wrapper.update();
+ await act(async () => {
+ wrapper.find('Form').invoke('onSubmit')();
+ });
+ expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+ expect(SettingsAPI.updateAll).toHaveBeenCalledWith({
+ TACACSPLUS_HOST: 'new_host',
+ TACACSPLUS_PORT: 999,
+ TACACSPLUS_SECRET: '',
+ TACACSPLUS_SESSION_TIMEOUT: 123,
+ TACACSPLUS_AUTH_PROTOCOL: 'ascii',
+ });
+ });
+
+ test('should navigate to tacacs detail on successful submission', async () => {
+ await act(async () => {
+ wrapper.find('Form').invoke('onSubmit')();
+ });
+ expect(history.location.pathname).toEqual('/settings/tacacs/details');
+ });
+
+ test('should navigate to tacacs detail when cancel is clicked', async () => {
+ await act(async () => {
+ wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
+ });
+ expect(history.location.pathname).toEqual('/settings/tacacs/details');
+ });
+
+ test('should display error message on unsuccessful submission', async () => {
+ const error = {
+ response: {
+ data: { detail: 'An error occurred' },
+ },
+ };
+ SettingsAPI.updateAll.mockImplementation(() => Promise.reject(error));
+ expect(wrapper.find('FormSubmitError').length).toBe(0);
+ expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(0);
+ await act(async () => {
+ wrapper.find('Form').invoke('onSubmit')();
+ });
+ wrapper.update();
+ expect(wrapper.find('FormSubmitError').length).toBe(1);
+ expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+ });
+
+ test('should display ContentError on throw', async () => {
+ SettingsAPI.readCategory.mockImplementationOnce(() =>
+ Promise.reject(new Error())
+ );
+ await act(async () => {
+ wrapper = mountWithContexts(
+
+
+
+ );
+ });
+ await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+ expect(wrapper.find('ContentError').length).toBe(1);
+ });
});