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 && (
-
+
)}
>
)}
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('', () => {
.find('Detail[label="Email Options"]')
.containsAllMatchingElements([
Use SSL, Use TLS])
).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('', () => {
.find('Detail[label="Email Options"]')
.containsAllMatchingElements([Use SSL, Use TLS])
).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('', () => {
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`}{' '}
+ {t`documentation`}{' '}
+ {t`for more information.`}
+ >
+ ),
};
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}
/>
-
+ }
+ >