diff --git a/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.jsx b/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.jsx
index 5a123ebe49..7a1f26724c 100644
--- a/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.jsx
+++ b/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.jsx
@@ -1,21 +1,29 @@
import React from 'react';
import { bool, string } from 'prop-types';
import { Link } from 'react-router-dom';
-
-import { t } from '@lingui/macro';
-import { Tooltip } from '@patternfly/react-core';
+import { t, Trans } from '@lingui/macro';
+import { Popover, Tooltip } from '@patternfly/react-core';
import styled from 'styled-components';
-
import { ExclamationTriangleIcon as PFExclamationTriangleIcon } from '@patternfly/react-icons';
-
import { Detail } from '../DetailList';
import { ExecutionEnvironment } from '../../types';
+import getDocsBaseUrl from '../../util/getDocsBaseUrl';
+import { useConfig } from '../../contexts/Config';
const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
color: var(--pf-global--warning-color--100);
margin-left: 18px;
+ cursor: pointer;
`;
+const ExclamationTrianglePopover = styled(PFExclamationTriangleIcon)`
+ color: var(--pf-global--warning-color--100);
+ margin-left: 18px;
+ cursor: pointer;
+`;
+
+ExclamationTrianglePopover.displayName = 'ExclamationTrianglePopover';
+
function ExecutionEnvironmentDetail({
executionEnvironment,
isDefaultEnvironment,
@@ -23,6 +31,10 @@ function ExecutionEnvironmentDetail({
verifyMissingVirtualEnv,
helpText,
}) {
+ const config = useConfig();
+ const docsLink = `${getDocsBaseUrl(
+ config
+ )}/html/upgrade-migration-guide/upgrade_to_ees.html`;
const label = isDefaultEnvironment
? t`Default Execution Environment`
: t`Execution Environment`;
@@ -51,12 +63,29 @@ function ExecutionEnvironmentDetail({
<>
{t`Missing resource`}
- {t`Execution Environment Missing`}}
+ bodyContent={
+
+
+ Custom virtual environment {virtualEnvironment} must be
+ replaced by an execution environment. For more information
+ about migrating to execution environments see{' '}
+
+ the documentation.
+
+
+
+ }
position="right"
>
-
-
+
+
>
}
diff --git a/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.jsx b/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.jsx
index b98a8e324d..a0e84e686b 100644
--- a/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.jsx
+++ b/awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.jsx
@@ -57,9 +57,8 @@ describe('', () => {
'Execution Environment'
);
expect(executionEnvironment.find('dd').text()).toEqual('Missing resource');
- expect(wrapper.find('Tooltip').prop('content')).toEqual(
- `Custom virtual environment ${virtualEnvironment} must be replaced by an execution environment.`
- );
+ expect(wrapper.find('ExclamationTrianglePopover').length).toBe(1);
+ expect(wrapper.find('Popover').length).toBe(1);
});
test('should display warning deleted execution environment', async () => {