Add help text to schedule form and detail with link to documentation

ansible · Jul 5, 2022 · c5b92c0 · c5b92c0
1 parent ffb8f37
commit c5b92c0
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 42 deletions.
diff --git a/awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js b/awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js
@@ -11,6 +11,7 @@ import { formatDateString } from 'util/dates';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import { JobTemplatesAPI, SchedulesAPI, WorkflowJobTemplatesAPI } from 'api';
 import { parseVariableField, jsonToYaml } from 'util/yaml';
+import { useConfig } from 'contexts/Config';
 import AlertModal from '../../AlertModal';
 import { CardBody, CardActionsRow } from '../../Card';
 import ContentError from '../../ContentError';
@@ -24,8 +25,7 @@ import ErrorDetail from '../../ErrorDetail';
 import ChipGroup from '../../ChipGroup';
 import { VariablesDetail } from '../../CodeEditor';
 import { VERBOSITY } from '../../VerbositySelectField';
-import getDocsBaseUrl from 'util/getDocsBaseUrl';
-import { useConfig } from 'contexts/Config';
+import helpText from '../../../screens/Template/shared/JobTemplate.helptext';
 
 const PromptDivider = styled(Divider)`
   margin-top: var(--pf-global--spacer--lg);
@@ -262,24 +262,10 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
           value={formatDateString(next_run, timezone)}
         />
         <Detail label={t`Last Run`} value={formatDateString(dtend, timezone)} />
-        <Detail 
-          label={t`Local Time Zone`} 
-          value={timezone} 
-          helpText={
-            <>
-              <span>{t`Refer to the`} </span>
-              <a
-                href={`${getDocsBaseUrl(
-                  config
-                )}/html/userguide/scheduling.html`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                {t`documentation`}
-              </a>
-              {' '}{t`for more information.`}
-            </>
-          }
+        <Detail
+          label={t`Local Time Zone`}
+          value={timezone}
+          helpText={helpText.localTimeZone(config)}
         />
         <Detail label={t`Repeat Frequency`} value={repeatFrequency} />
         {hasDaysToKeepField ? (

diff --git a/awx/ui/src/components/Schedule/shared/ScheduleForm.js b/awx/ui/src/components/Schedule/shared/ScheduleForm.js
@@ -14,12 +14,13 @@ import {
   // To be removed once UI completes complex schedules
   Alert,
 } from '@patternfly/react-core';
-import { Config } from 'contexts/Config';
+import { Config, useConfig } from 'contexts/Config';
 import { SchedulesAPI } from 'api';
 import { dateToInputDateTime } from 'util/dates';
 import useRequest from 'hooks/useRequest';
 import { required } from 'util/validators';
 import { parseVariableField } from 'util/yaml';
+import Popover from '../../Popover';
 import AnsibleSelect from '../../AnsibleSelect';
 import ContentError from '../../ContentError';
 import ContentLoading from '../../ContentLoading';
@@ -33,9 +34,7 @@ import FrequencyDetailSubform from './FrequencyDetailSubform';
 import SchedulePromptableFields from './SchedulePromptableFields';
 import DateTimePicker from './DateTimePicker';
 import buildRuleObj from './buildRuleObj';
-import getDocsBaseUrl from 'util/getDocsBaseUrl';
-import { useConfig } from 'contexts/Config';
-import Popover from '../../Popover';
+import helpText from '../../../screens/Template/shared/JobTemplate.helptext';
 
 const NUM_DAYS_PER_FREQUENCY = {
   week: 7,
@@ -153,21 +152,7 @@ function ScheduleFormFields({ hasDaysToKeepField, zoneOptions, zoneLinks }) {
         validated={timezoneValidatedStatus}
         label={t`Local time zone`}
         helperText={timezoneMessage}
-        labelIcon={<Popover content={
-          <>
-            <span>{t`Refer to the`} </span>
-            <a
-              href={`${getDocsBaseUrl(
-                config
-              )}/html/userguide/scheduling.html`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t`documentation`}
-            </a>
-            {' '}{t`for more information.`}
-          </>}
-        />}
+        labelIcon={<Popover content={helpText.localTimeZone(config)} />}
       >
         <AnsibleSelect
           id="schedule-timezone"

diff --git a/awx/ui/src/components/Schedule/shared/ScheduleForm.test.js b/awx/ui/src/components/Schedule/shared/ScheduleForm.test.js
@@ -91,7 +91,9 @@ const defaultFieldsVisible = () => {
   expect(wrapper.find('FormGroup[label="Description"]').length).toBe(1);
   expect(wrapper.find('FormGroup[label="Start date/time"]').length).toBe(1);
   expect(wrapper.find('FormGroup[label="Local time zone"]').length).toBe(1);
-  expect(wrapper.find('FormGroup[label="Local time zone"]').find('HelpIcon').length).toBe(1);
+  expect(
+    wrapper.find('FormGroup[label="Local time zone"]').find('HelpIcon').length
+  ).toBe(1);
   expect(wrapper.find('FormGroup[label="Run frequency"]').length).toBe(1);
 };
 

diff --git a/awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js b/awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js
@@ -267,8 +267,8 @@ function SurveyQuestionForm({
                       rel="noreferrer"
                     >
                       {t`documentation`}
-                    </a>
-                    {' '}{t`for more information.`}
+                    </a>{' '}
+                    {t`for more information.`}
                   </>
                 }
               />

diff --git a/awx/ui/src/screens/Template/shared/JobTemplate.helptext.js b/awx/ui/src/screens/Template/shared/JobTemplate.helptext.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { t } from '@lingui/macro';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 
 const jtHelpTextStrings = {
   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.`,
@@ -46,6 +47,19 @@ const jtHelpTextStrings = {
       {t`Refer to the Ansible documentation for details about the configuration file.`}
     </span>
   ),
+  localTimeZone: (config = '') => (
+    <span>
+      {t`Refer to the`}{' '}
+      <a
+        href={`${getDocsBaseUrl(config)}/html/userguide/scheduling.html`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t`documentation`}
+      </a>{' '}
+      {t`for more information.`}
+    </span>
+  ),
 };
 
 export default jtHelpTextStrings;