Cleanup some text strings files to return object literals (#12269)

* Cleanup some text strings files to return object literals instead of arrow functions.

* Fix render.

* Fix unit tests.

awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironmentDetails/ExecutionEnvironmentDetails.js

@@ -12,10 +12,9 @@ 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';
+import helpText from '../shared/ExecutionEnvironment.helptext';
 
 function ExecutionEnvironmentDetails({ executionEnvironment }) {
-  const helperText = executionEnvironmentHelpTextString();
   const history = useHistory();
   const {
     id,
@@ -54,7 +53,7 @@ function ExecutionEnvironmentDetails({ executionEnvironment }) {
           label={t`Image`}
           value={image}
           dataCy="execution-environment-detail-image"
-          helpText={helperText.image}
+          helpText={helpText.image}
         />
         <Detail
           label={t`Description`}
@@ -96,7 +95,7 @@ function ExecutionEnvironmentDetails({ executionEnvironment }) {
               </Label>
             }
             dataCy="execution-environment-credential"
-            helpText={helperText.registryCredential}
+            helpText={helpText.registryCredential}
           />
         )}
         <UserDateDetail

awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironment.helptext.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 
-const executionEnvironmentHelpTextStrings = () => ({
+const executionEnvironmentHelpTextStrings = {
   image: (
     <span>
       {t`The full image location, including the container registry, image name, and version tag.`}
@@ -19,6 +19,6 @@ const executionEnvironmentHelpTextStrings = () => ({
     </span>
   ),
   registryCredential: t`Credential to authenticate with a protected container registry.`,
-});
+};
 
 export default executionEnvironmentHelpTextStrings;

awx/ui/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.js

@@ -14,7 +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';
+import helpText from './ExecutionEnvironment.helptext';
 
 function ExecutionEnvironmentFormFields({
   me,
@@ -22,7 +22,6 @@ function ExecutionEnvironmentFormFields({
   executionEnvironment,
   isOrgLookupDisabled,
 }) {
-  const helpText = executionEnvironmentHelpTextString();
   const [credentialField, credentialMeta, credentialHelpers] =
     useField('credential');
   const [organizationField, organizationMeta, organizationHelpers] =

awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.js

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { Project } from 'types';
-import { Config } from 'contexts/Config';
+import { Config, useConfig } from 'contexts/Config';
 import AlertModal from 'components/AlertModal';
 import { CardBody, CardActionsRow } from 'components/Card';
 import DeleteButton from 'components/DeleteButton';
@@ -24,12 +24,14 @@ import CredentialChip from 'components/CredentialChip';
 import { ProjectsAPI } from 'api';
 import { toTitleCase } from 'util/strings';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
+import useBrandName from 'hooks/useBrandName';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
 import StatusLabel from 'components/StatusLabel';
 import { formatDateString } from 'util/dates';
 import Popover from 'components/Popover';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
-import ProjectHelpTextStrings from '../shared/Project.helptext';
+import projectHelpText from '../shared/Project.helptext';
 import useWsProject from './useWsProject';
 
 const Label = styled.span`
@@ -58,8 +60,10 @@ function ProjectDetail({ project }) {
     scm_url,
     summary_fields,
   } = useWsProject(project);
+  const docsURL = `${getDocsBaseUrl(
+    useConfig()
+  )}/html/userguide/projects.html#manage-playbooks-using-source-control`;
   const history = useHistory();
-  const projectHelpText = ProjectHelpTextStrings();
   const {
     request: deleteProject,
     isLoading,
@@ -70,6 +74,7 @@ function ProjectDetail({ project }) {
       history.push(`/projects`);
     }, [id, history])
   );
+  const brandName = useBrandName();
 
   const { error, dismissError } = useDismissableError(deleteError);
   const deleteDetailsRequests = relatedResourceDeleteRequests.project(project);
@@ -225,7 +230,7 @@ function ProjectDetail({ project }) {
           value={scm_branch}
         />
         <Detail
-          helpText={projectHelpText.sourceControlRefspec}
+          helpText={projectHelpText.sourceControlRefspec(docsURL)}
           label={t`Source Control Refspec`}
           value={scm_refspec}
         />
@@ -254,7 +259,7 @@ function ProjectDetail({ project }) {
         <Config>
           {({ project_base_dir }) => (
             <Detail
-              helpText={projectHelpText.projectBasePath}
+              helpText={projectHelpText.projectBasePath(brandName)}
               label={t`Project Base Path`}
               value={project_base_dir}
             />

awx/ui/src/screens/Project/shared/Project.helptext.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import { t } from '@lingui/macro';
-import getDocsBaseUrl from 'util/getDocsBaseUrl';
-import { useConfig } from 'contexts/Config';
-import useBrandName from 'hooks/useBrandName';
 
-const ProjectHelpTextStrings = () => ({
+const projectHelpTextStrings = {
   executionEnvironment: t`The execution environment that will be used for jobs that use this project. This will be used as fallback when an execution environment has not been explicitly assigned at the job template or workflow level.`,
-  projectBasePath: (
+  projectBasePath: (brandName = '') => (
     <span>
       {t`Base path used for locating playbooks. Directories
               found inside this path will be listed in the playbook directory drop-down.
@@ -15,7 +12,7 @@ const ProjectHelpTextStrings = () => ({
       <br />
       <br />
       {t`Change PROJECTS_ROOT when deploying
-              ${useBrandName()} to change this location.`}
+              ${brandName} to change this location.`}
     </span>
   ),
   projectLocalPath: t`Select from the list of directories found in
@@ -74,7 +71,7 @@ const ProjectHelpTextStrings = () => ({
     </span>
   ),
 
-  sourceControlRefspec: (
+  sourceControlRefspec: (url = '') => (
     <span>
       {t`A refspec to fetch (passed to the Ansible git
             module). This parameter allows access to references via
@@ -99,13 +96,7 @@ const ProjectHelpTextStrings = () => ({
       <br />
       <br />
       {t`For more information, refer to the`}{' '}
-      <a
+      <a target="_blank" rel="noopener noreferrer" href={`${url}`}>
-        target="_blank"
-        rel="noopener noreferrer"
-        href={`${getDocsBaseUrl(
-          useConfig()
-        )}/html/userguide/projects.html#manage-playbooks-using-source-control`}
-      >
         {t`Documentation.`}
       </a>
     </span>
@@ -137,6 +128,6 @@ const ProjectHelpTextStrings = () => ({
                     considered current, and a new project update will be
                     performed.`,
   },
-});
+};
 
-export default ProjectHelpTextStrings;
+export default projectHelpTextStrings;

awx/ui/src/screens/Project/shared/ProjectForm.js

@@ -16,7 +16,7 @@ import ExecutionEnvironmentLookup from 'components/Lookup/ExecutionEnvironmentLo
 import { CredentialTypesAPI, ProjectsAPI } from 'api';
 import { required } from 'util/validators';
 import { FormColumnLayout, SubFormLayout } from 'components/FormLayout';
-import ProjectHelpTextStrings from './Project.helptext';
+import projectHelpText from './Project.helptext';
 import {
   GitSubForm,
   SvnSubForm,
@@ -196,7 +196,7 @@ function ProjectFormFields({
         }
         onBlur={() => executionEnvironmentHelpers.setTouched()}
         value={executionEnvironmentField.value}
-        popoverContent={ProjectHelpTextStrings.execution_environment}
+        popoverContent={projectHelpText.executionEnvironment}
         onChange={handleExecutionEnvironmentUpdate}
         tooltip={t`Select an organization before editing the default execution environment.`}
         globallyAvailable

awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js

@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React from 'react';
-import ProjectHelpTextStrings from '../Project.helptext';
+import projectHelpText from '../Project.helptext';
 
 import {
   UrlFormField,
@@ -12,18 +12,15 @@ const ArchiveSubForm = ({
   credential,
   onCredentialSelection,
   scmUpdateOnLaunch,
-}) => {
+}) => (
-  const projectHelpText = ProjectHelpTextStrings();
+  <>
-  return (
+    <UrlFormField tooltip={projectHelpText.archiveUrl} />
-    <>
+    <ScmCredentialFormField
-      <UrlFormField tooltip={projectHelpText.archiveUrl} />
+      credential={credential}
-      <ScmCredentialFormField
+      onCredentialSelection={onCredentialSelection}
-        credential={credential}
+    />
-        onCredentialSelection={onCredentialSelection}
+    <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
-      />
+  </>
-      <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
+);
-    </>
-  );
-};
 
 export default ArchiveSubForm;

awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js

@@ -2,6 +2,8 @@ import 'styled-components/macro';
 import React from 'react';
 import { t } from '@lingui/macro';
 import FormField from 'components/FormField';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
+import { useConfig } from 'contexts/Config';
 
 import {
   UrlFormField,
@@ -10,14 +12,17 @@ import {
   ScmTypeOptions,
 } from './SharedFields';
 
-import ProjectHelpTextStrings from '../Project.helptext';
+import projectHelpStrings from '../Project.helptext';
 
 const GitSubForm = ({
   credential,
   onCredentialSelection,
   scmUpdateOnLaunch,
 }) => {
-  const projectHelpStrings = ProjectHelpTextStrings();
+  const docsURL = `${getDocsBaseUrl(
+    useConfig()
+  )}/html/userguide/projects.html#manage-playbooks-using-source-control`;
+
   return (
     <>
       <UrlFormField tooltip={projectHelpStrings.githubSourceControlUrl} />
@@ -28,7 +33,7 @@ const GitSubForm = ({
         name="scm_refspec"
         type="text"
         tooltipMaxWidth="400px"
-        tooltip={projectHelpStrings.sourceControlRefspec}
+        tooltip={projectHelpStrings.sourceControlRefspec(docsURL)}
       />
       <ScmCredentialFormField
         credential={credential}

awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js

@@ -8,7 +8,7 @@ import AnsibleSelect from 'components/AnsibleSelect';
 import FormField from 'components/FormField';
 import Popover from 'components/Popover';
 import useBrandName from 'hooks/useBrandName';
-import ProjectHelpStrings from '../Project.helptext';
+import projectHelpStrings from '../Project.helptext';
 
 const ManualSubForm = ({
   localPath,
@@ -16,8 +16,6 @@ const ManualSubForm = ({
   project_local_paths,
 }) => {
   const brandName = useBrandName();
-  const projectHelpStrings = ProjectHelpStrings();
-
   const localPaths = [...new Set([...project_local_paths, localPath])];
   const options = [
     {
@@ -63,7 +61,7 @@ const ManualSubForm = ({
         name="base_dir"
         type="text"
         isReadOnly
-        tooltip={projectHelpStrings.projectBasePath}
+        tooltip={projectHelpStrings.projectBasePath(brandName)}
       />
       <FormGroup
         fieldId="project-local-path"

awx/ui/src/screens/Project/shared/ProjectSubForms/SharedFields.js

@@ -7,7 +7,7 @@ import CredentialLookup from 'components/Lookup/CredentialLookup';
 import FormField, { CheckboxField } from 'components/FormField';
 import { required } from 'util/validators';
 import { FormCheckboxLayout, FormFullWidthLayout } from 'components/FormLayout';
-import ProjectHelpTextStrings from '../Project.helptext';
+import projectHelpStrings from '../Project.helptext';
 
 export const UrlFormField = ({ tooltip }) => (
   <FormField
@@ -22,18 +22,15 @@ export const UrlFormField = ({ tooltip }) => (
   />
 );
 
-export const BranchFormField = ({ label }) => {
+export const BranchFormField = ({ label }) => (
-  const projectHelpStrings = ProjectHelpTextStrings();
+  <FormField
-  return (
+    id="project-scm-branch"
-    <FormField
+    name="scm_branch"
-      id="project-scm-branch"
+    type="text"
-      name="scm_branch"
+    label={label}
-      type="text"
+    tooltip={projectHelpStrings.branchFormField}
-      label={label}
+  />
-      tooltip={projectHelpStrings.branchFormField}
+);
-    />
-  );
-};
 
 export const ScmCredentialFormField = ({
   credential,
@@ -61,7 +58,6 @@ export const ScmCredentialFormField = ({
 };
 
 export const ScmTypeOptions = ({ scmUpdateOnLaunch, hideAllowOverride }) => {
-  const projectHelpStrings = ProjectHelpTextStrings();
   const { values } = useFormikContext();
 
   return (

awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js

@@ -1,7 +1,7 @@
 import 'styled-components/macro';
 import React from 'react';
 import { t } from '@lingui/macro';
-import ProjectHelpTextStrings from '../Project.helptext';
+import projectHelpStrings from '../Project.helptext';
 
 import {
   UrlFormField,
@@ -14,19 +14,16 @@ const SvnSubForm = ({
   credential,
   onCredentialSelection,
   scmUpdateOnLaunch,
-}) => {
+}) => (
-  const projectHelpStrings = ProjectHelpTextStrings();
+  <>
-  return (
+    <UrlFormField tooltip={projectHelpStrings.svnSourceControlUrl} />
-    <>
+    <BranchFormField label={t`Revision #`} />
-      <UrlFormField tooltip={projectHelpStrings.svnSourceControlUrl} />
+    <ScmCredentialFormField
-      <BranchFormField label={t`Revision #`} />
+      credential={credential}
-      <ScmCredentialFormField
+      onCredentialSelection={onCredentialSelection}
-        credential={credential}
+    />
-        onCredentialSelection={onCredentialSelection}
+    <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
-      />
+  </>
-      <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
+);
-    </>
-  );
-};
 
 export default SvnSubForm;

awx/ui/src/screens/Project/shared/ProjectSyncButton.js

@@ -11,7 +11,7 @@ import useRequest, { useDismissableError } from 'hooks/useRequest';
 import AlertModal from 'components/AlertModal';
 import ErrorDetail from 'components/ErrorDetail';
 import { ProjectsAPI } from 'api';
-import ProjectHelpTextStrings from './Project.helptext';
+import projectHelpStrings from './Project.helptext';
 
 function ProjectSyncButton({ projectId, lastJobStatus = null }) {
   const match = useRouteMatch();
@@ -22,7 +22,6 @@ function ProjectSyncButton({ projectId, lastJobStatus = null }) {
     }, [projectId]),
     null
   );
-  const projectHelpStrings = ProjectHelpTextStrings();
   const { error, dismissError } = useDismissableError(syncError);
   const isDetailsView = match.url.endsWith('/details');
   const isDisabled = ['pending', 'waiting', 'running'].includes(lastJobStatus);

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

@@ -33,7 +33,7 @@ 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';
+import helpText from '../shared/JobTemplate.helptext';
 
 function JobTemplateDetail({ template }) {
   const {
@@ -67,7 +67,6 @@ function JobTemplateDetail({ template }) {
   const { id: templateId } = useParams();
   const history = useHistory();
   const brandName = useBrandName();
-  const helpText = jtHelpTextStrings(brandName);
 
   const {
     isLoading: isLoadingInstanceGroups,
@@ -306,7 +305,7 @@ function JobTemplateDetail({ template }) {
               label={t`Provisioning Callback URL`}
               value={generateCallBackUrl}
               dataCy="jt-detail-provisioning-callback-url"
-              helpText={helpText.provisioningCallbacks}
+              helpText={helpText.provisioningCallbacks(brandName)}
             />
           </>
         )}

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

@@ -25,9 +25,7 @@ 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';
+import helpText from '../shared/WorkflowJobTemplate.helptext';
-
-const helpText = wfHelpTextStrings();
 
 function WorkflowJobTemplateDetail({ template }) {
   const {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 
-const jtHelpTextStrings = (brandName = '') => ({
+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.`,
   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.`,
@@ -24,7 +24,8 @@ const jtHelpTextStrings = (brandName = '') => ({
   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.`,
+  provisioningCallbacks: (brandName = '') =>
+    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.`,
@@ -45,6 +46,6 @@ const jtHelpTextStrings = (brandName = '') => ({
       {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,7 +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';
+import helpText from './JobTemplate.helptext';
 
 const { origin } = document.location;
 
@@ -68,7 +68,6 @@ function JobTemplateForm({
   );
   const isMounted = useIsMounted();
   const brandName = useBrandName();
-  const helpText = jtHelpTextStrings(brandName);
 
   const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
   const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({
@@ -520,7 +519,9 @@ function JobTemplateForm({
                       <span>
                         {t`Provisioning Callbacks`}
                         &nbsp;
-                        <Popover content={helpText.provisioningCallbacks} />
+                        <Popover
+                          content={helpText.provisioningCallbacks(brandName)}
+                        />
                       </span>
                     }
                     id="option-callbacks"

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

@@ -22,9 +22,7 @@ import {
   WorkflowJobTemplatesAPI,
   CredentialTypesAPI,
 } from 'api';
-import wfHelpTextStrings from './WorkflowJobTemplate.helptext';
+import helpText from './WorkflowJobTemplate.helptext';
-
-const helpText = wfHelpTextStrings();
 
 function WebhookSubForm({ templateType }) {
   const { setFieldValue } = useFormikContext();

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { t } from '@lingui/macro';
 
-const wfHelpTextStrings = () => ({
+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
@@ -24,6 +24,6 @@ const wfHelpTextStrings = () => ({
       <p>{t`Webhooks: Enable Webhook for this workflow job template.`}</p>
     </>
   ),
-});
+};
 
 export default wfHelpTextStrings;

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

@@ -28,9 +28,8 @@ import Popover from 'components/Popover';
 import { WorkFlowJobTemplate } from 'types';
 import LabelSelect from 'components/LabelSelect';
 import WebhookSubForm from './WebhookSubForm';
-import wfHelpTextStrings from './WorkflowJobTemplate.helptext';
+import helpText from './WorkflowJobTemplate.helptext';
 
-const helpText = wfHelpTextStrings();
 const urlOrigin = window.location.origin;
 
 function WorkflowJobTemplateForm({