From 64db44acefb905920b90a039756ac015e5179a49 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Wed, 18 May 2022 19:04:21 -0400 Subject: [PATCH] Adds popover for Notification Templates and Instance group details (#12197) --- .../components/CodeEditor/VariablesDetail.js | 2 +- .../src/components/DetailList/ArrayDetail.js | 4 +- .../src/components/DetailList/DetailBadge.js | 3 +- .../ContainerGroupDetails.js | 2 + .../InstanceGroupDetails.js | 4 ++ .../NotificationTemplateDetail.js | 12 +++++- .../shared/Notifications.helptext.js | 34 ++++++++++++++++ .../shared/TypeInputsSubForm.js | 40 +++++-------------- 8 files changed, 68 insertions(+), 33 deletions(-) create mode 100644 awx/ui/src/screens/NotificationTemplate/shared/Notifications.helptext.js 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} />