diff --git a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js index 6fdcd4b93a..4e6291a9a5 100644 --- a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js +++ b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.js @@ -2,8 +2,9 @@ import React, { useEffect, useCallback } from 'react'; import { Link } from 'react-router-dom'; import { t } from '@lingui/macro'; -import { Button } from '@patternfly/react-core'; +import { Button, Alert as PFAlert } from '@patternfly/react-core'; import { CaretLeftIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; import { CardBody, CardActionsRow } from 'components/Card'; import ContentLoading from 'components/ContentLoading'; import ContentError from 'components/ContentError'; @@ -15,6 +16,10 @@ import { useConfig } from 'contexts/Config'; import { useSettings } from 'contexts/Settings'; import { SettingDetail } from '../../shared'; +const Alert = styled(PFAlert)` + margin-bottom: 20px; +`; + function RADIUSDetail() { const { me } = useConfig(); const { GET: options } = useSettings(); @@ -61,22 +66,30 @@ function RADIUSDetail() { {isLoading && } {!isLoading && error && } {!isLoading && radius && ( - - {Object.keys(radius).map((key) => { - const record = options?.[key]; - return ( - - ); - })} - + <> + + + {Object.keys(radius).map((key) => { + const record = options?.[key]; + return ( + + ); + })} + + )} {me?.is_superuser && ( diff --git a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.test.js b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.test.js index 6c71e6c90e..cbb91201ae 100644 --- a/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.test.js +++ b/awx/ui/src/screens/Setting/RADIUS/RADIUSDetail/RADIUSDetail.test.js @@ -52,6 +52,9 @@ describe('', () => { }); test('should render expected details', () => { + expect(wrapper.find('Alert').prop('title')).toBe( + 'This feature is deprecated and will be removed in a future release.' + ); assertDetail(wrapper, 'RADIUS Server', 'example.org'); assertDetail(wrapper, 'RADIUS Port', '1812'); assertDetail(wrapper, 'RADIUS Secret', 'Encrypted'); diff --git a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js index c3f64f5ac0..bcec78f963 100644 --- a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js +++ b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.js @@ -2,8 +2,9 @@ import React, { useEffect, useCallback } from 'react'; import { Link } from 'react-router-dom'; import { t } from '@lingui/macro'; -import { Button } from '@patternfly/react-core'; +import { Button, Alert as PFAlert } from '@patternfly/react-core'; import { CaretLeftIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; import { CardBody, CardActionsRow } from 'components/Card'; import ContentLoading from 'components/ContentLoading'; import ContentError from 'components/ContentError'; @@ -15,6 +16,10 @@ import { useConfig } from 'contexts/Config'; import { useSettings } from 'contexts/Settings'; import { SettingDetail } from '../../shared'; +const Alert = styled(PFAlert)` + margin-bottom: 20px; +`; + function TACACSDetail() { const { me } = useConfig(); const { GET: options } = useSettings(); @@ -53,7 +58,12 @@ function TACACSDetail() { id: 0, }, ]; - + if (isLoading) { + return ; + } + if (!isLoading && error) { + return ; + } return ( <> @@ -61,22 +71,30 @@ function TACACSDetail() { {isLoading && } {!isLoading && error && } {!isLoading && tacacs && ( - - {Object.keys(tacacs).map((key) => { - const record = options?.[key]; - return ( - - ); - })} - + <> + + + {Object.keys(tacacs).map((key) => { + const record = options?.[key]; + return ( + + ); + })} + + )} {me?.is_superuser && ( diff --git a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.test.js b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.test.js index 8376f596f0..3244c1110d 100644 --- a/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.test.js +++ b/awx/ui/src/screens/Setting/TACACS/TACACSDetail/TACACSDetail.test.js @@ -54,6 +54,9 @@ describe('', () => { }); test('should render expected details', () => { + expect(wrapper.find('Alert').prop('title')).toBe( + 'This feature is deprecated and will be removed in a future release.' + ); assertDetail(wrapper, 'TACACS+ Server', 'mockhost'); assertDetail(wrapper, 'TACACS+ Port', '49'); assertDetail(wrapper, 'TACACS+ Secret', 'Encrypted');