Merge pull request #12204 from kialam/add-popover-detail-job-templates

Add popover text to JT and WJT details pages.

awx/ui/src/screens/Template/JobTemplateDetail/JobTemplateDetail.js

@@ -30,8 +30,10 @@ import { LaunchButton } from 'components/LaunchButton';
 import { VariablesDetail } from 'components/CodeEditor';
 import { JobTemplatesAPI } from 'api';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
+import useBrandName from 'hooks/useBrandName';
 import ExecutionEnvironmentDetail from 'components/ExecutionEnvironmentDetail';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
+import jtHelpTextStrings from '../shared/JobTemplate.helptext';
 
 function JobTemplateDetail({ template }) {
   const {
@@ -64,6 +66,8 @@ function JobTemplateDetail({ template }) {
   } = template;
   const { id: templateId } = useParams();
   const history = useHistory();
+  const brandName = useBrandName();
+  const helpText = jtHelpTextStrings(brandName);
 
   const {
     isLoading: isLoadingInstanceGroups,
@@ -192,6 +196,7 @@ function JobTemplateDetail({ template }) {
           label={t`Job Type`}
           value={job_type}
           dataCy="jt-detail-job-type"
+          helpText={helpText.jobType}
         />
         {summary_fields.organization ? (
           <Detail
@@ -216,6 +221,7 @@ function JobTemplateDetail({ template }) {
               summary_fields.inventory.kind,
               summary_fields.inventory.id
             )}
+            helpText={helpText.inventory}
           />
         ) : (
           !ask_inventory_on_launch && (
@@ -231,6 +237,7 @@ function JobTemplateDetail({ template }) {
                 {summary_fields.project.name}
               </Link>
             }
+            helpText={helpText.project}
           />
         ) : (
           <DeletedDetail label={t`Project`} />
@@ -238,9 +245,7 @@ function JobTemplateDetail({ template }) {
         <ExecutionEnvironmentDetail
           virtualEnvironment={custom_virtualenv}
           executionEnvironment={summary_fields?.resolved_environment}
-          helpText={t`The execution environment that will be used when launching
+          helpText={helpText.executionEnvironment}
-          this job template. The resolved execution environment can be overridden by
-          explicitly assigning a different one to this job template.`}
           dataCy="jt-detail-execution-environment"
         />
         <Detail
@@ -252,32 +257,43 @@ function JobTemplateDetail({ template }) {
           label={t`Playbook`}
           value={playbook}
           dataCy="jt-detail-playbook"
+          helpText={helpText.playbook}
         />
         <Detail
           label={t`Forks`}
           value={forks || '0'}
           dataCy="jt-detail-forks"
+          helpText={helpText.forks}
+        />
+        <Detail
+          label={t`Limit`}
+          value={limit}
+          dataCy="jt-detail-limit"
+          helpText={helpText.limit}
         />
-        <Detail label={t`Limit`} value={limit} dataCy="jt-detail-limit" />
         <Detail
           label={t`Verbosity`}
           value={verbosityDetails[0].details}
           dataCy="jt-detail-verbosity"
+          helpText={helpText.verbosity}
         />
         <Detail
           label={t`Timeout`}
           value={timeout || '0'}
           dataCy="jt-detail-timeout"
+          helpText={helpText.timeout}
         />
         <Detail
           label={t`Show Changes`}
           value={diff_mode ? t`On` : t`Off`}
           dataCy="jt-detail-show-changes"
+          helpText={helpText.showChanges}
         />
         <Detail
           label={t`Job Slicing`}
           value={job_slice_count}
           dataCy="jt-detail-job-slice-count"
+          helpText={helpText.jobSlicing}
         />
         {host_config_key && (
           <>
@@ -290,6 +306,7 @@ function JobTemplateDetail({ template }) {
               label={t`Provisioning Callback URL`}
               value={generateCallBackUrl}
               dataCy="jt-detail-provisioning-callback-url"
+              helpText={helpText.provisioningCallbacks}
             />
           </>
         )}
@@ -298,6 +315,7 @@ function JobTemplateDetail({ template }) {
             label={t`Webhook Service`}
             value={webhook_service === 'github' ? t`GitHub` : t`GitLab`}
             dataCy="jt-detail-webhook-service"
+            helpText={helpText.webhookService}
           />
         )}
         {webhook_receiver && (
@@ -305,17 +323,20 @@ function JobTemplateDetail({ template }) {
             label={t`Webhook URL`}
             value={`${document.location.origin}${webhook_receiver}`}
             dataCy="jt-detail-webhook-url"
+            helpText={helpText.webhookURL}
           />
         )}
         <Detail
           label={t`Webhook Key`}
           value={webhook_key}
           dataCy="jt-detail-webhook-key"
+          helpText={helpText.webhookKey}
         />
         {summary_fields.webhook_credential && (
           <Detail
             label={t`Webhook Credential`}
             dataCy="jt-detail-webhook-credential"
+            helpText={helpText.webhookCredential}
             value={
               <Link
                 to={`/credentials/${summary_fields.webhook_credential.id}/details`}
@@ -341,6 +362,7 @@ function JobTemplateDetail({ template }) {
             label={t`Enabled Options`}
             value={renderOptions}
             dataCy="jt-detail-enabled-options"
+            helpText={helpText.enabledOptions}
           />
         )}
         {summary_fields.credentials && summary_fields.credentials.length > 0 && (
@@ -348,6 +370,7 @@ function JobTemplateDetail({ template }) {
             fullWidth
             label={t`Credentials`}
             dataCy="jt-detail-credentials"
+            helpText={helpText.credentials}
             value={
               <ChipGroup
                 numChips={5}
@@ -373,6 +396,7 @@ function JobTemplateDetail({ template }) {
             fullWidth
             label={t`Labels`}
             dataCy="jt-detail-labels"
+            helpText={helpText.labels}
             value={
               <ChipGroup
                 numChips={5}
@@ -393,6 +417,7 @@ function JobTemplateDetail({ template }) {
             fullWidth
             label={t`Instance Groups`}
             dataCy="jt-detail-instance-groups"
+            helpText={helpText.instanceGroups}
             value={
               <ChipGroup
                 numChips={5}
@@ -419,6 +444,7 @@ function JobTemplateDetail({ template }) {
             fullWidth
             label={t`Job Tags`}
             dataCy="jt-detail-job-tags"
+            helpText={helpText.jobTags}
             value={
               <ChipGroup
                 numChips={5}
@@ -443,6 +469,7 @@ function JobTemplateDetail({ template }) {
             fullWidth
             label={t`Skip Tags`}
             dataCy="jt-detail-skip-tags"
+            helpText={helpText.skipTags}
             value={
               <ChipGroup
                 numChips={5}
@@ -468,6 +495,7 @@ function JobTemplateDetail({ template }) {
           label={t`Variables`}
           dataCy={`jt-detail-${template.id}`}
           name="extra_vars"
+          helpText={helpText.variables}
         />
       </DetailList>
       <CardActionsRow>

awx/ui/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { JobTemplatesAPI, WorkflowJobTemplateNodesAPI } from 'api';
+import { JobTemplatesAPI, WorkflowJobTemplateNodesAPI, RootAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
@@ -26,6 +26,11 @@ describe('<JobTemplateDetail />', () => {
   beforeEach(async () => {
     JobTemplatesAPI.readInstanceGroups.mockResolvedValue(mockInstanceGroups);
     WorkflowJobTemplateNodesAPI.read.mockResolvedValue({ data: { count: 0 } });
+    RootAPI.readAssetVariables.mockResolvedValue({
+      data: {
+        BRAND_NAME: 'AWX',
+      },
+    });
     await act(async () => {
       wrapper = mountWithContexts(
         <JobTemplateDetail template={mockTemplate} />

awx/ui/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.js

@@ -25,6 +25,9 @@ import Sparkline from 'components/Sparkline';
 import { toTitleCase } from 'util/strings';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
+import wfHelpTextStrings from '../shared/WorkflowJobTemplate.helptext';
+
+const helpText = wfHelpTextStrings();
 
 function WorkflowJobTemplateDetail({ template }) {
   const {
@@ -132,34 +135,48 @@ function WorkflowJobTemplateDetail({ template }) {
             dataCy="source-control-branch"
             label={t`Source Control Branch`}
             value={scmBranch}
+            helpText={helpText.sourceControlBranch}
           />
         )}
         <Detail label={t`Job Type`} value={toTitleCase(type)} />
         {summary_fields.inventory && (
           <Detail
             label={t`Inventory`}
+            helpText={helpText.inventory}
             value={inventoryValue(
               summary_fields.inventory.kind,
               summary_fields.inventory.id
             )}
           />
         )}
-        <Detail dataCy="limit" label={t`Limit`} value={limit} />
+        <Detail
+          dataCy="limit"
+          label={t`Limit`}
+          value={limit}
+          helpText={helpText.limit}
+        />
         <Detail
           label={t`Webhook Service`}
           value={toTitleCase(template.webhook_service)}
+          helpText={helpText.webhookService}
         />
         {related.webhook_receiver && (
           <Detail
             label={t`Webhook URL`}
+            helpText={helpText.webhookURL}
             value={`${urlOrigin}${template.related.webhook_receiver}`}
           />
         )}
-        <Detail label={t`Webhook Key`} value={webhook_key} />
+        <Detail
+          label={t`Webhook Key`}
+          value={webhook_key}
+          helpText={helpText.webhookKey}
+        />
         {webhook_credential && (
           <Detail
             fullWidth
             label={t`Webhook Credentials`}
+            helpText={helpText.webhookCredential}
             value={
               <Link
                 to={`/credentials/${summary_fields.webhook_credential.id}/details`}
@@ -180,12 +197,18 @@ function WorkflowJobTemplateDetail({ template }) {
           user={summary_fields.modified_by}
         />
         {renderOptionsField && (
-          <Detail fullWidth label={t`Enabled Options`} value={renderOptions} />
+          <Detail
+            fullWidth
+            label={t`Enabled Options`}
+            value={renderOptions}
+            helpText={helpText.enabledOptions}
+          />
         )}
         {summary_fields.labels?.results?.length > 0 && (
           <Detail
             fullWidth
             label={t`Labels`}
+            helpText={helpText.labels}
             value={
               <ChipGroup
                 numChips={3}
@@ -203,6 +226,7 @@ function WorkflowJobTemplateDetail({ template }) {
         )}
         <VariablesDetail
           dataCy="workflow-job-template-detail-extra-vars"
+          helpText={helpText.variables}
           label={t`Variables`}
           value={extra_vars}
           rows={4}

awx/ui/src/screens/Template/shared/JobTemplate.helptext.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+
+const jtHelpTextStrings = (brandName = '') => ({
+  jobType: t`For job templates, select run to execute the playbook. Select check to only check playbook syntax, test environment setup, and report problems without executing the playbook.`,
+  inventory: t`Select the inventory containing the hosts you want this job to manage.`,
+  project: t`Select the project containing the playbook you want this job to execute.`,
+  executionEnvironment: t`Select the execution environment for this job template.`,
+  playbook: t`Select the playbook to be executed by this job.`,
+  credentials: t`Select credentials for accessing the nodes this job will be ran against. You can only select one credential of each type. For machine credentials (SSH), checking "Prompt on launch" without selecting credentials will require you to select a machine credential at run time. If you select credentials and check "Prompt on launch", the selected credential(s) become the defaults that can be updated at run time.`,
+  labels: t`Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.`,
+  variables: t`Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter for ansible-playbook. Provide key/value pairs using either YAML or JSON. Refer to the documentation for example syntax.`,
+  limit: t`Provide a host pattern to further constrain the list of hosts that will be managed or affected by the playbook. Multiple patterns are allowed. Refer to Ansible documentation for more information and examples on patterns.`,
+  verbosity: t`Control the level of output ansible will produce as the playbook executes.`,
+  jobSlicing: t`Divide the work done by this job template into the specified number of job slices, each running the same tasks against a portion of the inventory.`,
+  timeout: t`The amount of time (in seconds) to run before the job is canceled. Defaults to 0 for no job timeout.`,
+  showChanges: t`If enabled, show the changes made by Ansible tasks, where supported. This is equivalent to Ansible's --diff mode.`,
+  instanceGroups: t`Select the Instance Groups for this Job Template to run on.`,
+  jobTags: t`Tags are useful when you have a large playbook, and you want to run a specific part of a play or task. Use commas to separate multiple tags. Refer to the documentation for details on the usage of tags.`,
+  skipTags: t`Skip tags are useful when you have a large playbook, and you want to skip specific parts of a play or task. Use commas to separate multiple tags. Refer to the documentation for details on the usage of tags.`,
+  webhookService: t`Select a webhook service.`,
+  webhookURL: t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`,
+  webhookKey: t`Webhook services can use this as a shared secret.`,
+  webhookCredential: t`Optionally select the credential to use to send status updates back to the webhook service.`,
+  sourceControlBranch: t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`,
+  provisioningCallbacks: t`Enables creation of a provisioning callback URL. Using the URL a host can contact ${brandName} and request a configuration update using this job template.`,
+  privilegeEscalation: t`If enabled, run this playbook as an administrator.`,
+  enableWebhook: t`Enable webhook for this template.`,
+  concurrentJobs: t`If enabled, simultaneous runs of this job template will be allowed.`,
+  enableFactStorage: t`If enabled, this will store gathered facts so they can be viewed at the host level. Facts are persisted and injected into the fact cache at runtime.`,
+  enabledOptions: (
+    <>
+      <p>{t`Concurrent jobs: If enabled, simultaneous runs of this job template will be allowed.`}</p>
+      <p>{t`Fact storage: If enabled, this will store gathered facts so they can be viewed at the host level. Facts are persisted and injected into the fact cache at runtime..`}</p>
+      <p>{t`Privilege escalation: If enabled, run this playbook as an administrator.`}</p>
+      <p>{t`Provisioning callbacks: Enables creation of a provisioning callback URL. Using the URL a host can contact Ansible AWX and request a configuration update using this job template.`}</p>
+      <p>{t`Webhooks: Enable webhook for this template.`}</p>
+    </>
+  ),
+  forks: (
+    <span>
+      {t`The number of parallel or simultaneous processes to use while executing the playbook. An empty value, or a value less than 1 will use the Ansible default which is usually 5. The default number of forks can be overwritten with a change to`}{' '}
+      <code>ansible.cfg</code>.{' '}
+      {t`Refer to the Ansible documentation for details about the configuration file.`}
+    </span>
+  ),
+});
+
+export default jtHelpTextStrings;

awx/ui/src/screens/Template/shared/JobTemplateForm.js

@@ -45,6 +45,7 @@ import useIsMounted from 'hooks/useIsMounted';
 import LabelSelect from 'components/LabelSelect';
 import PlaybookSelect from './PlaybookSelect';
 import WebhookSubForm from './WebhookSubForm';
+import jtHelpTextStrings from './JobTemplate.helptext';
 
 const { origin } = document.location;
 
@@ -67,6 +68,7 @@ function JobTemplateForm({
   );
   const isMounted = useIsMounted();
   const brandName = useBrandName();
+  const helpText = jtHelpTextStrings(brandName);
 
   const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
   const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({
@@ -258,10 +260,7 @@ function JobTemplateForm({
           label={t`Job Type`}
           promptId="template-ask-job-type-on-launch"
           promptName="ask_job_type_on_launch"
-          tooltip={t`For job templates, select run to execute
+          tooltip={helpText.jobType}
-            the playbook. Select check to only check playbook syntax,
-            test environment setup, and report problems without
-            executing the playbook.`}
         >
           <AnsibleSelect
             {...jobTypeField}
@@ -290,8 +289,7 @@ function JobTemplateForm({
             promptId="template-ask-inventory-on-launch"
             promptName="ask_inventory_on_launch"
             isPromptableField
-            tooltip={t`Select the inventory containing the hosts
+            tooltip={helpText.inventory}
-            you want this job to manage.`}
             onBlur={() => inventoryHelpers.setTouched()}
             onChange={handleInventoryUpdate}
             required={!askInventoryOnLaunchField.value}
@@ -305,8 +303,7 @@ function JobTemplateForm({
         <ProjectLookup
           value={projectField.value}
           onBlur={() => projectHelpers.setTouched()}
-          tooltip={t`Select the project containing the playbook
+          tooltip={helpText.project}
-                  you want this job to execute.`}
           isValid={Boolean(
             !projectMeta.touched || (!projectMeta.error && projectField.value)
           )}
@@ -326,7 +323,7 @@ function JobTemplateForm({
           onBlur={() => executionEnvironmentHelpers.setTouched()}
           value={executionEnvironmentField.value}
           onChange={handleExecutionEnvironmentUpdate}
-          popoverContent={t`Select the execution environment for this job template.`}
+          popoverContent={helpText.executionEnvironment}
           tooltip={t`Select a project before editing the execution environment.`}
           globallyAvailable
           isDisabled={!projectField.value?.id}
@@ -339,8 +336,7 @@ function JobTemplateForm({
             label={t`Source Control Branch`}
             promptId="template-ask-scm-branch-on-launch"
             promptName="ask_scm_branch_on_launch"
-            tooltip={t`Select a branch for the job template. This branch is applied to
+            tooltip={helpText.sourceControlBranch}
-              all job template nodes that prompt for a branch.`}
           >
             <TextInput
               id="template-scm-branch"
@@ -360,11 +356,7 @@ function JobTemplateForm({
           }
           isRequired
           label={t`Playbook`}
-          labelIcon={
+          labelIcon={<Popover content={helpText.playbook} />}
-            <Popover
-              content={t`Select the playbook to be executed by this job.`}
-            />
-          }
         >
           <PlaybookSelect
             onChange={handlePlaybookUpdate}
@@ -381,11 +373,7 @@ function JobTemplateForm({
             label={t`Credentials`}
             promptId="template-ask-credential-on-launch"
             promptName="ask_credential_on_launch"
-            tooltip={t`Select credentials for accessing the nodes this job will be ran
+            tooltip={helpText.credentials}
-                against. You can only select one credential of each type. For machine credentials (SSH),
-                checking "Prompt on launch" without selecting credentials will require you to select a machine
-                credential at run time. If you select credentials and check "Prompt on launch", the selected
-                credential(s) become the defaults that can be updated at run time.`}
           >
             <MultiCredentialsLookup
               value={credentialField.value}
@@ -397,13 +385,7 @@ function JobTemplateForm({
           </FieldWithPrompt>
           <FormGroup
             label={t`Labels`}
-            labelIcon={
+            labelIcon={<Popover content={helpText.labels} />}
-              <Popover
-                content={t`Optional labels that describe this job template,
-                      such as 'dev' or 'test'. Labels can be used to group and filter
-                      job templates and completed jobs.`}
-              />
-            }
             fieldId="template-labels"
           >
             <LabelSelect
@@ -418,10 +400,7 @@ function JobTemplateForm({
             name="extra_vars"
             label={t`Variables`}
             promptId="template-ask-variables-on-launch"
-            tooltip={t`Pass extra command line variables to the playbook. This is the
+            tooltip={helpText.variables}
-              -e or --extra-vars command line parameter for ansible-playbook.
-              Provide key/value pairs using either YAML or JSON. Refer to the
-              documentation for example syntax.`}
           />
           <FormColumnLayout>
             <FormField
@@ -430,28 +409,14 @@ function JobTemplateForm({
               type="number"
               min="0"
               label={t`Forks`}
-              tooltip={
+              tooltip={helpText.forks}
-                <span>
-                  {t`The number of parallel or simultaneous
-                    processes to use while executing the playbook. An empty value,
-                    or a value less than 1 will use the Ansible default which is
-                    usually 5. The default number of forks can be overwritten
-                    with a change to`}{' '}
-                  <code>ansible.cfg</code>.{' '}
-                  {t`Refer to the Ansible documentation for details
-                        about the configuration file.`}
-                </span>
-              }
             />
             <FieldWithPrompt
               fieldId="template-limit"
               label={t`Limit`}
               promptId="template-ask-limit-on-launch"
               promptName="ask_limit_on_launch"
-              tooltip={t`Provide a host pattern to further constrain
+              tooltip={helpText.limit}
-                  the list of hosts that will be managed or affected by the
-                  playbook. Multiple patterns are allowed. Refer to Ansible
-                  documentation for more information and examples on patterns.`}
             >
               <TextInput
                 id="template-limit"
@@ -469,8 +434,7 @@ function JobTemplateForm({
               label={t`Verbosity`}
               promptId="template-ask-verbosity-on-launch"
               promptName="ask_verbosity_on_launch"
-              tooltip={t`Control the level of output ansible will
+              tooltip={helpText.verbosity}
-                produce as the playbook executes.`}
             >
               <AnsibleSelect
                 id="template-verbosity"
@@ -484,9 +448,7 @@ function JobTemplateForm({
               type="number"
               min="1"
               label={t`Job Slicing`}
-              tooltip={t`Divide the work done by this job template
+              tooltip={helpText.jobSlicing}
-                  into the specified number of job slices, each running the
-                  same tasks against a portion of the inventory.`}
             />
             <FormField
               id="template-timeout"
@@ -494,18 +456,14 @@ function JobTemplateForm({
               type="number"
               min="0"
               label={t`Timeout`}
-              tooltip={t`The amount of time (in seconds) to run
+              tooltip={helpText.timeout}
-                  before the job is canceled. Defaults to 0 for no job
-                  timeout.`}
             />
             <FieldWithPrompt
               fieldId="template-diff-mode"
               label={t`Show Changes`}
               promptId="template-ask-diff-mode-on-launch"
               promptName="ask_diff_mode_on_launch"
-              tooltip={t`If enabled, show the changes made by
+              tooltip={helpText.showChanges}
-                Ansible tasks, where supported. This is equivalent
-                to Ansible's --diff mode.`}
             >
               <Switch
                 id="template-show-changes"
@@ -518,8 +476,7 @@ function JobTemplateForm({
               <InstanceGroupsLookup
                 value={instanceGroupsField.value}
                 onChange={(value) => instanceGroupsHelpers.setValue(value)}
-                tooltip={t`Select the Instance Groups for this Job Template
+                tooltip={helpText.instanceGroups}
-                        to run on.`}
                 fieldName="instanceGroups"
               />
               <FieldWithPrompt
@@ -527,11 +484,7 @@ function JobTemplateForm({
                 label={t`Job Tags`}
                 promptId="template-ask-tags-on-launch"
                 promptName="ask_tags_on_launch"
-                tooltip={t`Tags are useful when you have a large
+                tooltip={helpText.jobTags}
-                    playbook, and you want to run a specific part of a
-                    play or task. Use commas to separate multiple tags.
-                    Refer to the documentation for details on
-                    the usage of tags.`}
               >
                 <TagMultiSelect
                   value={jobTagsField.value}
@@ -543,11 +496,7 @@ function JobTemplateForm({
                 label={t`Skip Tags`}
                 promptId="template-ask-skip-tags-on-launch"
                 promptName="ask_skip_tags_on_launch"
-                tooltip={t`Skip tags are useful when you have a
+                tooltip={helpText.skipTags}
-                    large playbook, and you want to skip specific parts of a
-                    play or task. Use commas to separate multiple tags. Refer
-                    to the documentation for details on the usage
-                    of tags.`}
               >
                 <TagMultiSelect
                   value={skipTagsField.value}
@@ -563,8 +512,7 @@ function JobTemplateForm({
                     id="option-privilege-escalation"
                     name="become_enabled"
                     label={t`Privilege Escalation`}
-                    tooltip={t`If enabled, run this playbook as an
+                    tooltip={helpText.privilegeEscalation}
-                        administrator.`}
                   />
                   <Checkbox
                     aria-label={t`Provisioning Callbacks`}
@@ -572,12 +520,7 @@ function JobTemplateForm({
                       <span>
                         {t`Provisioning Callbacks`}
                         &nbsp;
-                        <Popover
+                        <Popover content={helpText.provisioningCallbacks} />
-                          content={t`Enables creation of a provisioning
-                              callback URL. Using the URL a host can contact ${brandName}
-                              and request a configuration update using this job
-                              template.`}
-                        />
                       </span>
                     }
                     id="option-callbacks"
@@ -593,9 +536,7 @@ function JobTemplateForm({
                       <span>
                         {t`Enable Webhook`}
                         &nbsp;
-                        <Popover
+                        <Popover content={helpText.enableWebhook} />
-                          content={t`Enable webhook for this template.`}
-                        />
                       </span>
                     }
                     id="wfjt-enabled-webhooks"
@@ -609,16 +550,13 @@ function JobTemplateForm({
                     id="option-concurrent"
                     name="allow_simultaneous"
                     label={t`Concurrent Jobs`}
-                    tooltip={t`If enabled, simultaneous runs of this job
+                    tooltip={helpText.concurrentJobs}
-                        template will be allowed.`}
                   />
                   <CheckboxField
                     id="option-fact-cache"
                     name="use_fact_cache"
                     label={t`Enable Fact Storage`}
-                    tooltip={t`If enabled, this will store gathered facts so they can
+                    tooltip={helpText.enableFactStorage}
-                      be viewed at the host level. Facts are persisted and
-                      injected into the fact cache at runtime.`}
                   />
                 </FormCheckboxLayout>
               </FormGroup>

awx/ui/src/screens/Template/shared/WebhookSubForm.js

@@ -22,6 +22,9 @@ import {
   WorkflowJobTemplatesAPI,
   CredentialTypesAPI,
 } from 'api';
+import wfHelpTextStrings from './WorkflowJobTemplate.helptext';
+
+const helpText = wfHelpTextStrings();
 
 function WebhookSubForm({ templateType }) {
   const { setFieldValue } = useFormikContext();
@@ -125,7 +128,7 @@ function WebhookSubForm({ templateType }) {
         fieldId="webhook_service"
         helperTextInvalid={webhookServiceMeta.error}
         label={t`Webhook Service`}
-        labelIcon={<Popover content={t`Select a webhook service.`} />}
+        labelIcon={<Popover content={helpText.webhookService} />}
       >
         <AnsibleSelect
           {...webhookServiceField}
@@ -157,11 +160,7 @@ function WebhookSubForm({ templateType }) {
           type="text"
           fieldId="jt-webhookURL"
           label={t`Webhook URL`}
-          labelIcon={
+          labelIcon={<Popover content={helpText.webhookURL} />}
-            <Popover
-              content={t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`}
-            />
-          }
           name="webhook_url"
         >
           <TextInput
@@ -173,11 +172,7 @@ function WebhookSubForm({ templateType }) {
         </FormGroup>
         <FormGroup
           label={t`Webhook Key`}
-          labelIcon={
+          labelIcon={<Popover content={helpText.webhookKey} />}
-            <Popover
-              content={t`Webhook services can use this as a shared secret.`}
-            />
-          }
           fieldId="template-webhook_key"
         >
           <InputGroup>
@@ -203,7 +198,7 @@ function WebhookSubForm({ templateType }) {
       {credTypeId && (
         <CredentialLookup
           label={t`Webhook Credential`}
-          tooltip={t`Optionally select the credential to use to send status updates back to the webhook service.`}
+          tooltip={helpText.webhookCredential}
           credentialTypeId={credTypeId}
           onChange={onCredentialChange}
           isValid={!webhookCredentialMeta.error}

awx/ui/src/screens/Template/shared/WorkflowJobTemplate.helptext.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+
+const wfHelpTextStrings = () => ({
+  inventory: t`Select an inventory for the workflow. This inventory is applied to all workflow nodes that prompt for an inventory.`,
+  limit: t`Provide a host pattern to further constrain
+  the list of hosts that will be managed or affected by the
+  playbook. Multiple patterns are allowed. Refer to Ansible
+  documentation for more information and examples on patterns.`,
+  sourceControlBranch: t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`,
+  labels: t`Optional labels that describe this job template,
+  such as 'dev' or 'test'. Labels can be used to group and filter
+  job templates and completed jobs.`,
+  variables: t`Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter for ansible-playbook. Provide key/value pairs using either YAML or JSON. Refer to the Ansible Tower documentation for example syntax.`,
+  enableWebhook: t`Enable Webhook for this workflow job template.`,
+  enableConcurrentJobs: t`If enabled, simultaneous runs of this workflow job template will be allowed.`,
+  webhookURL: t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`,
+  webhookKey: t`Webhook services can use this as a shared secret.`,
+  webhookCredential: t`Optionally select the credential to use to send status updates back to the webhook service.`,
+  webhookService: t`Select a webhook service.`,
+  enabledOptions: (
+    <>
+      <p>{t`Concurrent jobs: If enabled, simultaneous runs of this workflow job template will be allowed.`}</p>
+      <p>{t`Webhooks: Enable Webhook for this workflow job template.`}</p>
+    </>
+  ),
+});
+
+export default wfHelpTextStrings;

awx/ui/src/screens/Template/shared/WorkflowJobTemplateForm.js

@@ -28,7 +28,9 @@ import Popover from 'components/Popover';
 import { WorkFlowJobTemplate } from 'types';
 import LabelSelect from 'components/LabelSelect';
 import WebhookSubForm from './WebhookSubForm';
+import wfHelpTextStrings from './WorkflowJobTemplate.helptext';
 
+const helpText = wfHelpTextStrings();
 const urlOrigin = window.location.origin;
 
 function WorkflowJobTemplateForm({
@@ -137,7 +139,7 @@ function WorkflowJobTemplateForm({
           <InventoryLookup
             promptId="wfjt-ask-inventory-on-launch"
             promptName="ask_inventory_on_launch"
-            tooltip={t`Select an inventory for the workflow. This inventory is applied to all workflow nodes that prompt for an inventory.`}
+            tooltip={helpText.inventory}
             fieldId="wfjt-inventory"
             isPromptableField
             value={inventoryField.value}
@@ -152,10 +154,7 @@ function WorkflowJobTemplateForm({
           label={t`Limit`}
           promptId="template-ask-limit-on-launch"
           promptName="ask_limit_on_launch"
-          tooltip={t`Provide a host pattern to further constrain
+          tooltip={helpText.limit}
-                  the list of hosts that will be managed or affected by the
-                  playbook. Multiple patterns are allowed. Refer to Ansible
-                  documentation for more information and examples on patterns.`}
         >
           <TextInput
             id="wfjt-limit"
@@ -174,7 +173,7 @@ function WorkflowJobTemplateForm({
           label={t`Source control branch`}
           promptId="wfjt-ask-scm-branch-on-launch"
           promptName="ask_scm_branch_on_launch"
-          tooltip={t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`}
+          tooltip={helpText.sourceControlBranch}
         >
           <TextInput
             id="wfjt-scm-branch"
@@ -189,13 +188,7 @@ function WorkflowJobTemplateForm({
       <FormFullWidthLayout>
         <FormGroup
           label={t`Labels`}
-          labelIcon={
+          labelIcon={<Popover content={helpText.labels} />}
-            <Popover
-              content={t`Optional labels that describe this job template,
-                    such as 'dev' or 'test'. Labels can be used to group and filter
-                    job templates and completed jobs.`}
-            />
-          }
           fieldId="template-labels"
         >
           <LabelSelect
@@ -212,7 +205,7 @@ function WorkflowJobTemplateForm({
           name="extra_vars"
           label={t`Variables`}
           promptId="template-ask-variables-on-launch"
-          tooltip={t`Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter for ansible-playbook. Provide key/value pairs using either YAML or JSON. Refer to the Ansible Tower documentation for example syntax.`}
+          tooltip={helpText.variables}
         />
       </FormFullWidthLayout>
       <FormGroup fieldId="options" label={t`Options`}>
@@ -223,9 +216,7 @@ function WorkflowJobTemplateForm({
               <span>
                 {t`Enable Webhook`}
                 &nbsp;
-                <Popover
+                <Popover content={helpText.enableWebhook} />
-                  content={t`Enable Webhook for this workflow job template.`}
-                />
               </span>
             }
             id="wfjt-enabled-webhooks"
@@ -238,7 +229,7 @@ function WorkflowJobTemplateForm({
           <CheckboxField
             name="allow_simultaneous"
             id="allow_simultaneous"
-            tooltip={t`If enabled, simultaneous runs of this workflow job template will be allowed.`}
+            tooltip={helpText.enableConcurrentJobs}
             label={t`Enable Concurrent Jobs`}
           />
         </FormCheckboxLayout>