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');