Merge pull request #12618 from vedaperi/3999-NotificationHelpText

Add Help Text with documentation link to Notification Templates page

awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js

@@ -172,7 +172,11 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
               dataCy="nt-detail-timeout"
             />
             {renderOptionsField && (
-              <Detail label={t`Email Options`} value={renderOptions} />
+              <Detail
+                label={t`Email Options`}
+                value={renderOptions}
+                helpText={helpText.emailOptions}
+              />
             )}
           </>
         )}

awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.test.js

@@ -95,6 +95,9 @@ describe('<NotificationTemplateDetail />', () => {
         .find('Detail[label="Email Options"]')
         .containsAllMatchingElements([<li>Use SSL</li>, <li>Use TLS</li>])
     ).toEqual(true);
+    expect(
+      wrapper.find('Detail[label="Email Options"]').prop('helpText')
+    ).toBeDefined();
   });
 
   test('should render Details when defaultMessages is missing', async () => {
@@ -118,5 +121,8 @@ describe('<NotificationTemplateDetail />', () => {
         .find('Detail[label="Email Options"]')
         .containsAllMatchingElements([<li>Use SSL</li>, <li>Use TLS</li>])
     ).toEqual(true);
+    expect(
+      wrapper.find('Detail[label="Email Options"]').prop('helpText')
+    ).toBeDefined();
   });
 });

awx/ui/src/screens/NotificationTemplate/shared/NotificationTemplateForm.test.js

@@ -101,6 +101,9 @@ describe('<NotificationTemplateForm />', () => {
 
     expect(wrapper.find('input#option-use-ssl').length).toBe(1);
     expect(wrapper.find('input#option-use-tls').length).toBe(1);
+    expect(
+      wrapper.find('FormGroup[label="Email Options"]').find('HelpIcon').length
+    ).toBe(1);
   });
 
   test('should render custom messages fields', async () => {

awx/ui/src/screens/NotificationTemplate/shared/Notifications.helptext.js

@@ -29,6 +29,17 @@ const helpText = {
           route SMS messages. Phone numbers should be formatted +11231231234. For more information see Twilio documentation`,
   webhookHeaders: t`Specify HTTP Headers in JSON format. Refer to
         the Ansible Controller documentation for example syntax.`,
+  emailOptions: (
+    <>
+      {t`See Django`}{' '}
+      <a
+        href="https://docs.djangoproject.com/en/4.0/ref/settings/#std:setting-EMAIL_USE_TLS"
+        target="_blank"
+        rel="noreferrer"
+      >{t`documentation`}</a>{' '}
+      <span>{t`for more information.`}</span>
+    </>
+  ),
 };
 
 export default helpText;

awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js

@@ -25,6 +25,7 @@ import {
   twilioPhoneNumber,
 } from 'util/validators';
 import { NotificationType } from 'types';
+import Popover from '../../../components/Popover/Popover';
 import helpText from './Notifications.helptext';
 
 const TypeFields = {
@@ -118,7 +119,11 @@ function EmailFields() {
         max="120"
         tooltip={helpText.emailTimeout}
       />
-      <FormGroup fieldId="email-options" label={t`E-mail options`}>
+      <FormGroup
+        fieldId="email-options"
+        label={t`Email Options`}
+        labelIcon={<Popover content={helpText.emailOptions} />}
+      >
         <FormCheckboxLayout>
           <CheckboxField
             id="option-use-ssl"