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

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

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'

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;

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}
       />
     </>