Add Help Text with documentation link to Schedules page (#12448)

* Added help text to schedule form and detail with link to documentation

* Added test cases for help text in schedule form and detail

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

Co-authored-by: Veda Periwal <vperiwal@vperiwal-mac.attlocal.net>

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,6 +25,7 @@ import ErrorDetail from '../../ErrorDetail';
 import ChipGroup from '../../ChipGroup';
 import { VariablesDetail } from '../../CodeEditor';
 import { VERBOSITY } from '../../VerbositySelectField';
+import helpText from '../../../screens/Template/shared/JobTemplate.helptext';
 
 const PromptDivider = styled(Divider)`
   margin-top: var(--pf-global--spacer--lg);
@@ -39,7 +41,6 @@ const PromptTitle = styled(Title)`
 const PromptDetailList = styled(DetailList)`
   padding: 0px 20px;
 `;
-
 function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
   const {
     id,
@@ -67,6 +68,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
   const history = useHistory();
   const { pathname } = useLocation();
   const pathRoot = pathname.substr(0, pathname.indexOf('schedules'));
+  const config = useConfig();
 
   const {
     request: deleteSchedule,
@@ -260,7 +262,11 @@ 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} />
+        <Detail
+          label={t`Local Time Zone`}
+          value={timezone}
+          helpText={helpText.localTimeZone(config)}
+        />
         <Detail label={t`Repeat Frequency`} value={repeatFrequency} />
         {hasDaysToKeepField ? (
           <Detail label={t`Days of Data to Keep`} value={daysToKeep} />

awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.test.js

@@ -164,6 +164,9 @@ describe('<ScheduleDetail />', () => {
     expect(
       wrapper.find('Detail[label="Local Time Zone"]').find('dd').text()
     ).toBe('America/New_York');
+    expect(
+      wrapper.find('Detail[label="Local Time Zone"]').prop('helpText')
+    ).toBeDefined();
     expect(wrapper.find('Detail[label="Repeat Frequency"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);

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,6 +34,7 @@ import FrequencyDetailSubform from './FrequencyDetailSubform';
 import SchedulePromptableFields from './SchedulePromptableFields';
 import DateTimePicker from './DateTimePicker';
 import buildRuleObj from './buildRuleObj';
+import helpText from '../../../screens/Template/shared/JobTemplate.helptext';
 
 const NUM_DAYS_PER_FREQUENCY = {
   week: 7,
@@ -118,6 +120,9 @@ function ScheduleFormFields({ hasDaysToKeepField, zoneOptions, zoneLinks }) {
   } else if (timezoneMessage) {
     timezoneValidatedStatus = 'warning';
   }
+
+  const config = useConfig();
+
   return (
     <>
       <FormField
@@ -147,6 +152,7 @@ function ScheduleFormFields({ hasDaysToKeepField, zoneOptions, zoneLinks }) {
         validated={timezoneValidatedStatus}
         label={t`Local time zone`}
         helperText={timezoneMessage}
+        labelIcon={<Popover content={helpText.localTimeZone(config)} />}
       >
         <AnsibleSelect
           id="schedule-timezone"

awx/ui/src/components/Schedule/shared/ScheduleForm.test.js

@@ -91,6 +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="Run frequency"]').length).toBe(1);
 };
 

awx/ui/src/screens/Template/Survey/SurveyQuestionForm.js

@@ -266,8 +266,8 @@ function SurveyQuestionForm({
                       target="_blank"
                       rel="noreferrer"
                     >
-                      {t`documentation`}{' '}
+                      {t`documentation`}
-                    </a>
+                    </a>{' '}
                     {t`for more information.`}
                   </>
                 }

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;