From c0d59801d5d8113d75e42481704fa9a436403495 Mon Sep 17 00:00:00 2001
From: vedaperi <vedaperiwal@gmail.com>
Date: Tue, 2 Aug 2022 18:15:56 -0700
Subject: [PATCH] Add help text to Notification Templates form and detail with
 link to documentation

---
 .../NotificationTemplateDetail.js                     |  6 +++++-
 .../NotificationTemplateDetail.test.js                |  6 ++++++
 .../shared/NotificationTemplateForm.test.js           |  3 +++
 .../shared/Notifications.helptext.js                  | 11 +++++++++++
 .../NotificationTemplate/shared/TypeInputsSubForm.js  |  7 ++++++-
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js
index 7e900f56e2..17a969b5e8 100644
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js
+++ b/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}
+              />
             )}
           </>
         )}
diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.test.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.test.js
index e0013b4bb9..792aabc8ba 100644
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.test.js
+++ b/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();
   });
 });
diff --git a/awx/ui/src/screens/NotificationTemplate/shared/NotificationTemplateForm.test.js b/awx/ui/src/screens/NotificationTemplate/shared/NotificationTemplateForm.test.js
index 4d4ada59ed..14f360d8c4 100644
--- a/awx/ui/src/screens/NotificationTemplate/shared/NotificationTemplateForm.test.js
+++ b/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 () => {
diff --git a/awx/ui/src/screens/NotificationTemplate/shared/Notifications.helptext.js b/awx/ui/src/screens/NotificationTemplate/shared/Notifications.helptext.js
index a3ab7d52df..b411b2cae6 100644
--- a/awx/ui/src/screens/NotificationTemplate/shared/Notifications.helptext.js
+++ b/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;
diff --git a/awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js b/awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js
index b3a361a46c..9c1eafe161 100644
--- a/awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js
+++ b/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"