Add popover help text to job details and ad hoc job details (#12261)

* Add popover text to Job Details page.

* Add module documentation links to ad hoc job detail page.

* Add forks help text to job details.

awx/ui/src/components/DetailList/DeletedDetail.js

@@ -11,8 +11,15 @@ const Detail = styled(_Detail)`
   }
 `;
 
-function DeletedDetail({ label, dataCy }) {
-  return <Detail label={label} dataCy={dataCy} value={t`Deleted`} />;
+function DeletedDetail({ label, dataCy, helpText }) {
+  return (
+    <Detail
+      label={label}
+      dataCy={dataCy}
+      value={t`Deleted`}
+      helpText={helpText}
+    />
+  );
 }
 
 DeletedDetail.propTypes = {

awx/ui/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js

@@ -60,6 +60,7 @@ function ExecutionEnvironmentDetail({
     return (
       <Detail
         label={label}
+        helpText={helpText}
         value={
           <>
             {t`Missing resource`}
@@ -102,6 +103,7 @@ function ExecutionEnvironmentDetail({
     return (
       <Detail
         label={t`Execution Environment`}
+        helpText={helpText}
         value={
           <>
             {t`Missing resource`}

awx/ui/src/screens/Job/Job.helptext.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+
+const jobHelpText = {
+  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`The execution environment that will be used when launching this job template. The resolved execution environment can be overridden by explicitly assigning a different one to 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.`,
+  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.`,
+  sourceControlBranch: t`Select a branch for the workflow. This branch is applied to all job template nodes that prompt for a branch.`,
+  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>
+  ),
+  module: (moduleName) =>
+    moduleName ? (
+      <>
+        {t`These arguments are used with the specified module. You can find information about ${moduleName} by clicking `}{' '}
+        <a
+          href={`https://docs.ansible.com/ansible/latest/modules/${moduleName}_module.html`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t`here.`}
+        </a>
+      </>
+    ) : (
+      t`These arguments are used with the specified module.`
+    ),
+};
+
+export default jobHelpText;

awx/ui/src/screens/Job/JobDetail/JobDetail.js

@@ -28,6 +28,7 @@ import ExecutionEnvironmentDetail from 'components/ExecutionEnvironmentDetail';
 import { getJobModel, isJobRunning } from 'util/jobs';
 import { formatDateString } from 'util/dates';
 import { Job } from 'types';
+import jobHelpText from '../Job.helptext';
 
 const StatusDetailValue = styled.div`
   align-items: center;
@@ -110,6 +111,7 @@ function JobDetail({ job, inventorySourceLabels }) {
         <Detail
           dataCy="job-inventory"
           label={t`Inventory`}
+          helpText={jobHelpText.inventory}
           value={
             <Link
               to={
@@ -123,7 +125,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           }
         />
       ) : (
-        <DeletedDetail label={t`Inventory`} />
+        <DeletedDetail label={t`Inventory`} helpText={jobHelpText.inventory} />
       );
     }
     if (job.type === 'workflow_job') {
@@ -131,6 +133,7 @@ function JobDetail({ job, inventorySourceLabels }) {
         <Detail
           dataCy="job-inventory"
           label={t`Inventory`}
+          helpText={jobHelpText.inventory}
           value={
             <Link
               to={
@@ -160,6 +163,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           <Detail
             dataCy="job-project"
             label={t`Project`}
+            helpText={jobHelpText.project}
             value={<Link to={`/projects/${project.id}`}>{project.name}</Link>}
           />
           <Detail
@@ -250,6 +254,7 @@ function JobDetail({ job, inventorySourceLabels }) {
         <Detail
           dataCy="job-type"
           label={t`Job Type`}
+          helpText={jobHelpText.jobType}
           value={jobTypes[job.type]}
         />
         <Detail
@@ -304,6 +309,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           <Detail
             dataCy="source-control-branch"
             label={t`Source Control Branch`}
+            helpText={jobHelpText.sourceControlBranch}
             value={scmBranch}
           />
         )}
@@ -315,18 +321,26 @@ function JobDetail({ job, inventorySourceLabels }) {
         <Detail
           dataCy="job-playbook"
           label={t`Playbook`}
+          helpText={jobHelpText.playbook}
           value={job.playbook}
         />
-        <Detail dataCy="job-limit" label={t`Limit`} value={job.limit} />
+        <Detail
+          dataCy="job-limit"
+          label={t`Limit`}
+          helpText={jobHelpText.limit}
+          value={job.limit}
+        />
         <Detail
           dataCy="job-verbosity"
           label={t`Verbosity`}
+          helpText={jobHelpText.verbosity}
           value={VERBOSITY[job.verbosity]}
         />
         {job.type !== 'workflow_job' && !isJobRunning(job.status) && (
           <ExecutionEnvironmentDetail
             dataCy="job-execution-environment"
             executionEnvironment={executionEnvironment}
+            helpText={jobHelpText.executionEnvironment}
             verifyMissingVirtualEnv={false}
           />
         )}
@@ -339,6 +353,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           <Detail
             dataCy="job-instance-group"
             label={t`Instance Group`}
+            helpText={jobHelpText.instanceGroups}
             value={buildInstanceGroupLink(instanceGroup)}
           />
         )}
@@ -354,6 +369,7 @@ function JobDetail({ job, inventorySourceLabels }) {
             <Detail
               dataCy="job-slice"
               label={t`Job Slice`}
+              helpText={jobHelpText.jobSlicing}
               value={`${job.job_slice_number}/${job.job_slice_count}`}
             />
           )}
@@ -365,7 +381,12 @@ function JobDetail({ job, inventorySourceLabels }) {
           />
         )}
         {typeof job.forks === 'number' && (
-          <Detail dataCy="forks" label={t`Forks`} value={`${job.forks}`} />
+          <Detail
+            dataCy="forks"
+            label={t`Forks`}
+            value={`${job.forks}`}
+            helpText={jobHelpText.forks}
+          />
         )}
 
         {credential && (
@@ -392,6 +413,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           <Detail
             dataCy="job-credentials"
             fullWidth
+            helpText={jobHelpText.credentials}
             label={t`Credentials`}
             value={
               <ChipGroup
@@ -416,6 +438,7 @@ function JobDetail({ job, inventorySourceLabels }) {
             dataCy="job-labels"
             fullWidth
             label={t`Labels`}
+            helpText={jobHelpText.labels}
             value={
               <ChipGroup
                 numChips={5}
@@ -436,6 +459,7 @@ function JobDetail({ job, inventorySourceLabels }) {
             dataCy="job-tags"
             fullWidth
             label={t`Job Tags`}
+            helpText={jobHelpText.jobTags}
             value={
               <ChipGroup
                 numChips={5}
@@ -460,6 +484,7 @@ function JobDetail({ job, inventorySourceLabels }) {
             dataCy="job-skip-tags"
             fullWidth
             label={t`Skip Tags`}
+            helpText={jobHelpText.skipTags}
             value={
               <ChipGroup
                 numChips={5}
@@ -483,6 +508,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           dataCy="job-module-name"
           label={t`Module Name`}
           value={job.module_name}
+          helpText={jobHelpText.module(job.module_name)}
         />
         <Detail
           dataCy="job-module-arguments"
@@ -505,6 +531,7 @@ function JobDetail({ job, inventorySourceLabels }) {
             label={t`Variables`}
             name="extra_vars"
             dataCy="job-detail-extra-variables"
+            helpText={jobHelpText.variables}
           />
         )}
         {job.artifacts && (