diff --git a/awx/ui/src/components/CodeEditor/VariablesDetail.js b/awx/ui/src/components/CodeEditor/VariablesDetail.js
index 0923d4b1cc..0e17d6e51f 100644
--- a/awx/ui/src/components/CodeEditor/VariablesDetail.js
+++ b/awx/ui/src/components/CodeEditor/VariablesDetail.js
@@ -154,7 +154,7 @@ VariablesDetail.propTypes = {
label: node.isRequired,
rows: oneOfType([number, string]),
dataCy: string,
- helpText: string,
+ helpText: oneOfType([node, string]),
name: string.isRequired,
};
VariablesDetail.defaultProps = {
diff --git a/awx/ui/src/components/DetailList/ArrayDetail.js b/awx/ui/src/components/DetailList/ArrayDetail.js
index cf072be67a..619217b50b 100644
--- a/awx/ui/src/components/DetailList/ArrayDetail.js
+++ b/awx/ui/src/components/DetailList/ArrayDetail.js
@@ -3,6 +3,7 @@ import React from 'react';
import styled from 'styled-components';
import { TextListItemVariants } from '@patternfly/react-core';
import { DetailName, DetailValue } from './Detail';
+import Popover from '../Popover';
const Value = styled(DetailValue)`
margin-top: var(--pf-global--spacer--xs);
@@ -12,7 +13,7 @@ const Value = styled(DetailValue)`
overflow: auto;
`;
-function ArrayDetail({ label, value, dataCy }) {
+function ArrayDetail({ label, helpText, value, dataCy }) {
const labelCy = dataCy ? `${dataCy}-label` : null;
const valueCy = dataCy ? `${dataCy}-value` : null;
@@ -22,6 +23,7 @@ function ArrayDetail({ label, value, dataCy }) {
{label}
+ {helpText && }
{vals.map((v) => (
diff --git a/awx/ui/src/components/DetailList/DetailBadge.js b/awx/ui/src/components/DetailList/DetailBadge.js
index 7447a896f8..1482ae4adc 100644
--- a/awx/ui/src/components/DetailList/DetailBadge.js
+++ b/awx/ui/src/components/DetailList/DetailBadge.js
@@ -9,11 +9,12 @@ const Detail = styled(_Detail)`
word-break: break-word;
`;
-function DetailBadge({ label, content, dataCy = null }) {
+function DetailBadge({ label, helpText, content, dataCy = null }) {
return (
{content}}
/>
);
diff --git a/awx/ui/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.js b/awx/ui/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.js
index 04028ac001..f7a90603f3 100644
--- a/awx/ui/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.js
+++ b/awx/ui/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.js
@@ -50,6 +50,7 @@ function ContainerGroupDetails({ instanceGroup }) {
{instanceGroup.summary_fields.credential && (
diff --git a/awx/ui/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.js b/awx/ui/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.js
index 76f7e23260..6627081f57 100644
--- a/awx/ui/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.js
+++ b/awx/ui/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.js
@@ -62,10 +62,14 @@ function InstanceGroupDetails({ instanceGroup }) {
diff --git a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js
index 9bed4d1044..7e900f56e2 100644
--- a/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js
+++ b/awx/ui/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.js
@@ -25,6 +25,7 @@ import useRequest, { useDismissableError } from 'hooks/useRequest';
import StatusLabel from 'components/StatusLabel';
import hasCustomMessages from '../shared/hasCustomMessages';
import { NOTIFICATION_TYPES } from '../constants';
+import helpText from '../shared/Notifications.helptext';
const NUM_RETRIES = 25;
const RETRY_TIMEOUT = 5000;
@@ -34,7 +35,6 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
const [testStatus, setTestStatus] = useState(
template.summary_fields?.recent_notifications[0]?.status ?? undefined
);
-
const {
created,
modified,
@@ -151,6 +151,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
/>
@@ -166,6 +167,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
/>
@@ -178,6 +180,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
<>
@@ -193,6 +196,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
/>
@@ -222,6 +226,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
/>
@@ -311,11 +316,13 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
{template.notification_type === 'slack' && (
<>
@@ -367,6 +376,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
/>
+ {t`One Slack channel per line. The pound symbol (#)
+ is required for channels. To respond to or start a thread to a specific message add the parent message Id to the channel where the parent message Id is 16 digits. A dot (.) must be manually inserted after the 10th digit. ie:#destination-channel, 1231257890.006423. See Slack`}{' '}
+ {t`documentation`}{' '}
+ {t`for more information.`}
+ >
+ ),
+ slackColor: t`Specify a notification color. Acceptable colors are hex
+ color code (example: #3af or #789abc).`,
+ twilioSourcePhoneNumber: t`The number associated with the "Messaging
+ Service" in Twilio with the format +18005550199.`,
+ twilioDestinationNumbers: t`Use one phone number per line to specify where to
+ 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 Tower documentation for example syntax.`,
+};
+
+export default helpText;
diff --git a/awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js b/awx/ui/src/screens/NotificationTemplate/shared/TypeInputsSubForm.js
index df17414536..b3a361a46c 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 helpText from './Notifications.helptext';
const TypeFields = {
email: EmailFields,
@@ -37,7 +38,6 @@ const TypeFields = {
twilio: TwilioFields,
webhook: WebhookFields,
};
-
function TypeInputsSubForm({ type }) {
const Fields = TypeFields[type];
return (
@@ -87,8 +87,7 @@ function EmailFields() {
validate={required(null)}
isRequired
rows={3}
- tooltip={t`Enter one email address per line to create a recipient
- list for this type of notification.`}
+ tooltip={helpText.emailRecepients}
/>
@@ -149,9 +146,7 @@ function GrafanaFields() {
type="text"
validate={required(null)}
isRequired
- tooltip={t`The base URL of the Grafana server - the
- /api/annotations endpoint will be added automatically to the base
- Grafana URL.`}
+ tooltip={helpText.grafanaUrl}
/>
- {t`Enter one Slack channel per line. The pound symbol (#)
- is required for channels. To respond to or start a thread to a specific message add the parent message Id to the channel where the parent message Id is 16 digits. A dot (.) must be manually inserted after the 10th digit. ie:#destination-channel, 1231257890.006423. See Slack`}{' '}
- {t`documentation`}{' '}
- {t`for more information.`}
- >
- }
+ tooltip={helpText.slackChannels}
/>
>
);
@@ -407,8 +392,7 @@ function TwilioFields() {
type="text"
validate={combine([required(null), twilioPhoneNumber()])}
isRequired
- tooltip={t`Enter the number associated with the "Messaging
- Service" in Twilio in the format +18005550199.`}
+ tooltip={helpText.twilioSourcePhoneNumber}
/>