From 31dda6e9d618b16d1fb8bc87f389e99125a90450 Mon Sep 17 00:00:00 2001
From: Kersom <9053044+nixocio@users.noreply.github.com>
Date: Fri, 13 May 2022 14:53:36 -0400
Subject: [PATCH] Add help text popovers to /#/execution_environments details
 fields (#12224)

Add help text popovers to /#/execution_environments details fields

See: https://github.com/ansible/awx/issues/11874
---
 .../ExecutionEnvironmentDetails.js            |  6 ++++-
 .../ExecutionEnvironmentDetails.test.js       |  9 ++++---
 .../shared/ExecutionEnvironment.helptext.js   | 24 +++++++++++++++++++
 .../shared/ExecutionEnvironmentForm.js        | 21 ++++------------
 4 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironment.helptext.js

diff --git a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.js b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.js
index 59d1aa70b2..9d6d7ef8ed 100644
--- a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.js
@@ -12,8 +12,10 @@ import useRequest, { useDismissableError } from 'hooks/useRequest';
 import { toTitleCase } from 'util/strings';
 import { ExecutionEnvironmentsAPI } from 'api';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
+import executionEnvironmentHelpTextString from '../shared/ExecutionEnvironment.helptext';
 
 function ExecutionEnvironmentDetails({ executionEnvironment }) {
+  const helperText = executionEnvironmentHelpTextString();
   const history = useHistory();
   const {
     id,
@@ -52,6 +54,7 @@ function ExecutionEnvironmentDetails({ executionEnvironment }) {
           label={t`Image`}
           value={image}
           dataCy="execution-environment-detail-image"
+          helpText={helperText.image}
         />
         <Detail
           label={t`Description`}
@@ -86,13 +89,14 @@ function ExecutionEnvironmentDetails({ executionEnvironment }) {
         />
         {executionEnvironment.summary_fields.credential && (
           <Detail
-            label={t`Credential`}
+            label={t`Registry credential`}
             value={
               <Label variant="outline" color="blue">
                 {executionEnvironment.summary_fields.credential.name}
               </Label>
             }
             dataCy="execution-environment-credential"
+            helpText={helperText.registryCredential}
           />
         )}
         <UserDateDetail
diff --git a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.test.js b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.test.js
index eeb5576691..73d96708e9 100644
--- a/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.test.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.test.js
@@ -79,7 +79,8 @@ describe('<ExecutionEnvironmentDetails/>', () => {
       'Globally Available'
     );
     expect(
-      wrapper.find('Detail[label="Credential"]').prop('value').props.children
+      wrapper.find('Detail[label="Registry credential"]').prop('value').props
+        .children
     ).toEqual(executionEnvironment.summary_fields.credential.name);
     expect(wrapper.find('Detail[label="Managed"]').prop('value')).toEqual(
       'False'
@@ -124,7 +125,8 @@ describe('<ExecutionEnvironmentDetails/>', () => {
     );
     expect(wrapper.find(`Detail[label="Organization"] dd`).text()).toBe('Bar');
     expect(
-      wrapper.find('Detail[label="Credential"]').prop('value').props.children
+      wrapper.find('Detail[label="Registry credential"]').prop('value').props
+        .children
     ).toEqual(executionEnvironment.summary_fields.credential.name);
     const dates = wrapper.find('UserDateDetail');
     expect(dates).toHaveLength(2);
@@ -176,7 +178,8 @@ describe('<ExecutionEnvironmentDetails/>', () => {
       'Globally Available'
     );
     expect(
-      wrapper.find('Detail[label="Credential"]').prop('value').props.children
+      wrapper.find('Detail[label="Registry credential"]').prop('value').props
+        .children
     ).toEqual(executionEnvironment.summary_fields.credential.name);
     expect(wrapper.find('Detail[label="Managed"]').prop('value')).toEqual(
       'True'
diff --git a/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironment.helptext.js b/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironment.helptext.js
new file mode 100644
index 0000000000..539bd6cae4
--- /dev/null
+++ b/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironment.helptext.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+
+const executionEnvironmentHelpTextStrings = () => ({
+  image: (
+    <span>
+      {t`The full image location, including the container registry, image name, and version tag.`}
+      <br />
+      <br />
+      {t`Examples:`}
+      <ul css="margin: 10px 0 10px 20px">
+        <li>
+          <code>quay.io/ansible/awx-ee:latest</code>
+        </li>
+        <li>
+          <code>repo/project/image-name:tag</code>
+        </li>
+      </ul>
+    </span>
+  ),
+  registryCredential: t`Credential to authenticate with a protected container registry.`,
+});
+
+export default executionEnvironmentHelpTextStrings;
diff --git a/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.js b/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.js
index bbf7271955..b8e233a9a6 100644
--- a/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.js
+++ b/awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.js
@@ -14,6 +14,7 @@ import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { required } from 'util/validators';
 import useRequest from 'hooks/useRequest';
+import executionEnvironmentHelpTextString from './ExecutionEnvironment.helptext';
 
 function ExecutionEnvironmentFormFields({
   me,
@@ -21,6 +22,7 @@ function ExecutionEnvironmentFormFields({
   executionEnvironment,
   isOrgLookupDisabled,
 }) {
+  const helpText = executionEnvironmentHelpTextString();
   const [credentialField, credentialMeta, credentialHelpers] =
     useField('credential');
   const [organizationField, organizationMeta, organizationHelpers] =
@@ -99,22 +101,7 @@ function ExecutionEnvironmentFormFields({
         validate={required(null)}
         isRequired
         isDisabled={executionEnvironment?.managed || false}
-        tooltip={
-          <span>
-            {t`The full image location, including the container registry, image name, and version tag.`}
-            <br />
-            <br />
-            {t`Examples:`}
-            <ul css="margin: 10px 0 10px 20px">
-              <li>
-                <code>quay.io/ansible/awx-ee:latest</code>
-              </li>
-              <li>
-                <code>repo/project/image-name:tag</code>
-              </li>
-            </ul>
-          </span>
-        }
+        tooltip={helpText.image}
       />
       <FormGroup
         fieldId="execution-environment-container-options"
@@ -160,7 +147,7 @@ function ExecutionEnvironmentFormFields({
         onBlur={() => credentialHelpers.setTouched()}
         onChange={onCredentialChange}
         value={credentialField.value}
-        tooltip={t`Credential to authenticate with a protected container registry.`}
+        tooltip={helpText.registryCredential}
         isDisabled={executionEnvironment?.managed || false}
       />
     </>