add docs links to notification templates, project scm

awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx

@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React, { useEffect, useRef } from 'react';
-import { Trans, withI18n } from '@lingui/react';
+import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { useField, useFormikContext } from 'formik';
 import { Switch, Text } from '@patternfly/react-core';
@@ -9,6 +9,8 @@ import {
   SubFormLayout,
 } from '../../../components/FormLayout';
 import CodeEditorField from '../../../components/CodeEditor/CodeEditorField';
+import { useConfig } from '../../../contexts/Config';
+import getDocsBaseUrl from '../../../util/getDocsBaseUrl';
 
 function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
   const [useCustomField, , useCustomHelpers] = useField('useCustomMessages');
@@ -16,6 +18,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
   const showBodies = ['email', 'pagerduty', 'webhook'].includes(type);
 
   const { setFieldValue } = useFormikContext();
+  const config = useConfig();
   const mountedRef = useRef(null);
   useEffect(
     function resetToDefaultMessages() {
@@ -69,11 +72,9 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
             css="margin-bottom: var(--pf-c-content--MarginBottom)"
           >
             <small>
-              <Trans>
+              {i18n._(t`Use custom messages to change the content of
-                Use custom messages to change the content of notifications sent
+                notifications sent when a job starts, succeeds, or fails. Use
-                when a job starts, succeeds, or fails. Use curly braces to
+                curly braces to access information about the job:`)}{' '}
-                access information about the job:{' '}
-              </Trans>
               <code>
                 {'{{'} job_friendly_name {'}}'}
               </code>
@@ -81,23 +82,22 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               <code>
                 {'{{'} url {'}}'}
               </code>
-              , <Trans>or attributes of the job such as</Trans>{' '}
+              ,{' '}
               <code>
                 {'{{'} job.status {'}}'}
               </code>
               .{' '}
-              <Trans>
+              {i18n._(t`You may apply a number of possible variables in the
-                You may apply a number of possible variables in the message.
+                message. For more information, refer to the`)}{' '}
-                Refer to the{' '}
-              </Trans>{' '}
               <a
-                href="https://docs.ansible.com/ansible-tower/latest/html/userguide/notifications.html#create-custom-notifications"
                 target="_blank"
                 rel="noopener noreferrer"
+                href={`${getDocsBaseUrl(
+                  config
+                )}/html/userguide/notifications.html#create-custom-notifications`}
               >
-                Ansible Tower documentation
+                {i18n._(t`Ansible Tower Documentation.`)}
-              </a>{' '}
+              </a>
-              <Trans>for more details.</Trans>
             </small>
           </Text>
           <FormFullWidthLayout>

awx/ui_next/src/screens/Project/shared/ProjectSubForms/GitSubForm.jsx

@@ -9,90 +9,97 @@ import {
   ScmCredentialFormField,
   ScmTypeOptions,
 } from './SharedFields';
+import { useConfig } from '../../../../contexts/Config';
+import getDocsBaseUrl from '../../../../util/getDocsBaseUrl';
 
 const GitSubForm = ({
   i18n,
   credential,
   onCredentialSelection,
   scmUpdateOnLaunch,
-}) => (
+}) => {
-  <>
+  const config = useConfig();
-    <UrlFormField
+  return (
-      i18n={i18n}
+    <>
-      tooltip={
+      <UrlFormField
-        <span>
+        i18n={i18n}
-          {i18n._(t`Example URLs for GIT Source Control include:`)}
+        tooltip={
-          <ul css="margin: 10px 0 10px 20px">
+          <span>
-            <li>
+            {i18n._(t`Example URLs for GIT Source Control include:`)}
-              <code>https://github.com/ansible/ansible.git</code>
+            <ul css="margin: 10px 0 10px 20px">
-            </li>
+              <li>
-            <li>
+                <code>https://github.com/ansible/ansible.git</code>
-              <code>git@github.com:ansible/ansible.git</code>
+              </li>
-            </li>
+              <li>
-            <li>
+                <code>git@github.com:ansible/ansible.git</code>
-              <code>git://servername.example.com/ansible.git</code>
+              </li>
-            </li>
+              <li>
-          </ul>
+                <code>git://servername.example.com/ansible.git</code>
-          {i18n._(t`Note: When using SSH protocol for GitHub or
+              </li>
+            </ul>
+            {i18n._(t`Note: When using SSH protocol for GitHub or
             Bitbucket, enter an SSH key only, do not enter a username
             (other than git). Additionally, GitHub and Bitbucket do
             not support password authentication when using SSH. GIT
             read only protocol (git://) does not use username or
             password information.`)}
-        </span>
+          </span>
-      }
+        }
-    />
+      />
-    <BranchFormField
+      <BranchFormField
-      i18n={i18n}
+        i18n={i18n}
-      label={i18n._(t`Source Control Branch/Tag/Commit`)}
+        label={i18n._(t`Source Control Branch/Tag/Commit`)}
-    />
+      />
-    <FormField
+      <FormField
-      id="project-scm-refspec"
+        id="project-scm-refspec"
-      label={i18n._(t`Source Control Refspec`)}
+        label={i18n._(t`Source Control Refspec`)}
-      name="scm_refspec"
+        name="scm_refspec"
-      type="text"
+        type="text"
-      tooltipMaxWidth="400px"
+        tooltipMaxWidth="400px"
-      tooltip={
+        tooltip={
-        <span>
+          <span>
-          {i18n._(t`A refspec to fetch (passed to the Ansible git
+            {i18n._(t`A refspec to fetch (passed to the Ansible git
             module). This parameter allows access to references via
             the branch field not otherwise available.`)}
-          <br />
+            <br />
-          <br />
+            <br />
-          {i18n._(t`Note: This field assumes the remote name is "origin".`)}
+            {i18n._(t`Note: This field assumes the remote name is "origin".`)}
-          <br />
+            <br />
-          <br />
+            <br />
-          {i18n._(t`Examples include:`)}
+            {i18n._(t`Examples include:`)}
-          <ul css={{ margin: '10px 0 10px 20px' }}>
+            <ul css={{ margin: '10px 0 10px 20px' }}>
-            <li>
+              <li>
-              <code>refs/*:refs/remotes/origin/*</code>
+                <code>refs/*:refs/remotes/origin/*</code>
-            </li>
+              </li>
-            <li>
+              <li>
-              <code>refs/pull/62/head:refs/remotes/origin/pull/62/head</code>
+                <code>refs/pull/62/head:refs/remotes/origin/pull/62/head</code>
-            </li>
+              </li>
-          </ul>
+            </ul>
-          {i18n._(t`The first fetches all references. The second
+            {i18n._(t`The first fetches all references. The second
             fetches the Github pull request number 62, in this example
             the branch needs to be "pull/62/head".`)}
-          <br />
+            <br />
-          <br />
+            <br />
-          {i18n._(t`For more information, refer to the`)}{' '}
+            {i18n._(t`For more information, refer to the`)}{' '}
-          <a
+            <a
-            target="_blank"
+              target="_blank"
-            rel="noopener noreferrer"
+              rel="noopener noreferrer"
-            href="https://docs.ansible.com/ansible-tower/latest/html/userguide/projects.html#manage-playbooks-using-source-control"
+              href={`${getDocsBaseUrl(
-          >
+                config
-            {i18n._(t`Ansible Tower Documentation.`)}
+              )}/html/userguide/projects.html#manage-playbooks-using-source-control`}
-          </a>
+            >
-        </span>
+              {i18n._(t`Ansible Tower Documentation.`)}
-      }
+            </a>
-    />
+          </span>
-    <ScmCredentialFormField
+        }
-      credential={credential}
+      />
-      onCredentialSelection={onCredentialSelection}
+      <ScmCredentialFormField
-    />
+        credential={credential}
-    <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
+        onCredentialSelection={onCredentialSelection}
-  </>
+      />
-);
+      <ScmTypeOptions scmUpdateOnLaunch={scmUpdateOnLaunch} />
+    </>
+  );
+};
 
 export default withI18n()(GitSubForm);