Merge pull request #10361 from nixocio/ui_issue_10355

Update message for missing EE for Job pages

Update message for missing EE for Job pages
See: #10355

Reviewed-by: Keith Grant <keithjgrant@gmail.com>
Reviewed-by: Kersom <None>
Reviewed-by: Michael Abashian <None>

awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.jsx

@@ -17,9 +17,10 @@ const ExclamationTriangleIcon = styled(PFExclamationTriangleIcon)`
 `;
 
 function ExecutionEnvironmentDetail({
-  virtualEnvironment,
   executionEnvironment,
   isDefaultEnvironment,
+  virtualEnvironment,
+  verifyMissingVirtualEnv,
 }) {
   const label = isDefaultEnvironment
     ? t`Default Execution Environment`
@@ -40,7 +41,7 @@ function ExecutionEnvironmentDetail({
       />
     );
   }
-  if (virtualEnvironment && !executionEnvironment) {
+  if (verifyMissingVirtualEnv && virtualEnvironment && !executionEnvironment) {
     return (
       <Detail
         label={label}
@@ -61,6 +62,31 @@ function ExecutionEnvironmentDetail({
       />
     );
   }
+  if (
+    !verifyMissingVirtualEnv &&
+    !virtualEnvironment &&
+    !executionEnvironment
+  ) {
+    return (
+      <Detail
+        label={t`Execution Environment`}
+        value={
+          <>
+            {t`Missing resource`}
+            <span>
+              <Tooltip
+                content={t`Execution environment is missing or deleted.`}
+              >
+                <ExclamationTriangleIcon />
+              </Tooltip>
+            </span>
+          </>
+        }
+        dataCy="execution-environment-detail"
+      />
+    );
+  }
+
   return null;
 }
 
@@ -68,12 +94,14 @@ ExecutionEnvironmentDetail.propTypes = {
   executionEnvironment: ExecutionEnvironment,
   isDefaultEnvironment: bool,
   virtualEnvironment: string,
+  verifyMissingVirtualEnv: bool,
 };
 
 ExecutionEnvironmentDetail.defaultProps = {
   isDefaultEnvironment: false,
   executionEnvironment: null,
   virtualEnvironment: '',
+  verifyMissingVirtualEnv: true,
 };
 
 export default ExecutionEnvironmentDetail;

awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.test.jsx

@@ -61,4 +61,19 @@ describe('<ExecutionEnvironmentDetail/>', () => {
       `Custom virtual environment ${virtualEnvironment} must be replaced by an execution environment.`
     );
   });
+
+  test('should display warning deleted execution environment', async () => {
+    const wrapper = mountWithContexts(
+      <ExecutionEnvironmentDetail verifyMissingVirtualEnv={false} />
+    );
+    const executionEnvironment = wrapper.find('ExecutionEnvironmentDetail');
+    expect(executionEnvironment).toHaveLength(1);
+    expect(executionEnvironment.find('dt').text()).toEqual(
+      'Execution Environment'
+    );
+    expect(executionEnvironment.find('dd').text()).toEqual('Missing resource');
+    expect(wrapper.find('Tooltip').prop('content')).toEqual(
+      `Execution environment is missing or deleted.`
+    );
+  });
 });

awx/ui_next/src/components/JobList/JobListItem.jsx

@@ -203,8 +203,8 @@ function JobListItem({
                 />
               )}
               <ExecutionEnvironmentDetail
-                virtualEnvironment={job.custom_virtualenv}
                 executionEnvironment={execution_environment}
+                verifyMissingVirtualEnv={false}
               />
               {credentials && credentials.length > 0 && (
                 <Detail

awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx

@@ -221,8 +221,8 @@ function JobDetail({ job }) {
         <Detail label={t`Limit`} value={job.limit} />
         <Detail label={t`Verbosity`} value={VERBOSITY[job.verbosity]} />
         <ExecutionEnvironmentDetail
-          virtualEnvironment={job.custom_virtualenv}
           executionEnvironment={executionEnvironment}
+          verifyMissingVirtualEnv={false}
         />
         <Detail label={t`Execution Node`} value={job.execution_node} />
         {instanceGroup && !instanceGroup?.is_container_group && (

awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx

@@ -71,12 +71,8 @@ describe('<JobDetail />', () => {
     assertDetail('Machine Credential', 'SSH: Machine cred');
     assertDetail('Source Control Branch', 'main');
 
-    const executionEnvironment = wrapper.find('ExecutionEnvironmentDetail');
+    assertDetail(
-    expect(executionEnvironment).toHaveLength(1);
+      'Execution Environment',
-    expect(executionEnvironment.find('dt').text()).toEqual(
-      'Execution Environment'
-    );
-    expect(executionEnvironment.find('dd').text()).toEqual(
       mockJobData.summary_fields.execution_environment.name
     );