Adds popover for Notification Templates and Instance group details (#12197)

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 = {

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 }) {
     <div css="grid-column: span 2">
       <DetailName component={TextListItemVariants.dt} data-cy={labelCy}>
         {label}
+        {helpText && <Popover header={label} content={helpText} id={dataCy} />}
       </DetailName>
       <Value component={TextListItemVariants.dd} data-cy={valueCy}>
         {vals.map((v) => (

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 (
     <Detail
       label={label}
       dataCy={dataCy}
+      helpText={helpText}
       value={<Badge isRead>{content}</Badge>}
     />
   );

awx/ui/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.js

@@ -50,6 +50,7 @@ function ContainerGroupDetails({ instanceGroup }) {
         {instanceGroup.summary_fields.credential && (
           <Detail
             label={t`Credential`}
+            helpText={t`Credential to authenticate with Kubernetes or OpenShift`}
             value={
               <Link
                 to={`/credentials/${instanceGroup?.summary_fields?.credential?.id}`}
@@ -81,6 +82,7 @@ function ContainerGroupDetails({ instanceGroup }) {
                 : instanceGroup.pod_spec_override
             }
             rows={6}
+            helpText={t`Custom Kubernetes or OpenShift Pod specification.`}
             name="pod_spec_override"
             dataCy="container-group-detail-pod-spec-override"
           />

awx/ui/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.js

@@ -62,10 +62,14 @@ function InstanceGroupDetails({ instanceGroup }) {
         <DetailBadge
           label={t`Policy instance minimum`}
           dataCy="instance-group-policy-instance-minimum"
+          helpText={t`Minimum number of instances that will be automatically
+          assigned to this group when new instances come online.`}
           content={instanceGroup.policy_instance_minimum}
         />
         <DetailBadge
           label={t`Policy instance percentage`}
+          helpText={t`Minimum percentage of all instances that will be automatically
+          assigned to this group when new instances come online.`}
           dataCy="instance-group-policy-instance-percentage"
           content={`${instanceGroup.policy_instance_percentage} %`}
         />

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 }) {
             />
             <ArrayDetail
               label={t`Recipient List`}
+              helpText={helpText.emailRecepients}
               value={configuration.recipients}
               dataCy="nt-detail-recipients"
             />
@@ -166,6 +167,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
             />
             <Detail
               label={t`Timeout`}
+              helpText={helpText.emailTimeout}
               value={configuration.timeout}
               dataCy="nt-detail-timeout"
             />
@@ -178,6 +180,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
           <>
             <Detail
               label={t`Grafana URL`}
+              helpText={helpText.grafanaUrl}
               value={configuration.grafana_url}
               dataCy="nt-detail-grafana-url"
             />
@@ -193,6 +196,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
             />
             <ArrayDetail
               label={t`Tags for the Annotation`}
+              helpText={helpText.grafanaTags}
               value={configuration.annotation_tags}
               dataCy="nt-detail-"
             />
@@ -222,6 +226,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
             />
             <ArrayDetail
               label={t`Destination Channels or Users`}
+              helpText={helpText.ircTargets}
               value={configuration.targets}
               dataCy="nt-detail-channels"
             />
@@ -311,11 +316,13 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
         {template.notification_type === 'slack' && (
           <>
             <ArrayDetail
+              helpText={helpText.slackChannels}
               label={t`Destination Channels`}
               value={configuration.channels}
               dataCy="nt-detail-slack-channels"
             />
             <Detail
+              helpText={helpText.slackColor}
               label={t`Notification Color`}
               value={configuration.hex_color}
               dataCy="nt-detail-slack-color"
@@ -326,11 +333,13 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
           <>
             <Detail
               label={t`Source Phone Number`}
+              helpText={helpText.twilioSourcePhoneNumber}
               value={configuration.from_number}
               dataCy="nt-detail-twilio-source-phone"
             />
             <ArrayDetail
               label={t`Destination SMS Number(s)`}
+              helpText={helpText.twilioDestinationNumbers}
               value={configuration.to_numbers}
               dataCy="nt-detail-twilio-destination-numbers"
             />
@@ -367,6 +376,7 @@ function NotificationTemplateDetail({ template, defaultMessages }) {
             />
             <CodeDetail
               label={t`HTTP Headers`}
+              helpText={helpText.webhookHeaders}
               value={JSON.stringify(configuration.headers)}
               mode="json"
               rows={6}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+
+const helpText = {
+  emailRecepients: t`Use one email address per line to create a recipient list for this type of notification.`,
+  emailTimeout: t`The amount of time (in seconds) before the email
+          notification stops trying to reach the host and times out. Ranges
+          from 1 to 120 seconds.`,
+  grafanaUrl: t`The base URL of the Grafana server - the
+        /api/annotations endpoint will be added automatically to the base
+        Grafana URL.`,
+  grafanaTags: t`Use one Annotation Tag per line, without commas.`,
+  ircTargets: t`Use one IRC channel or username per line. The pound
+          symbol (#) for channels, and the at (@) symbol for users, are not
+          required.`,
+  slackChannels: (
+    <>
+      {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`}{' '}
+      <a href="https://api.slack.com/messaging/retrieving#individual_messages">{t`documentation`}</a>{' '}
+      <span>{t`for more information.`}</span>
+    </>
+  ),
+  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;

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
+        tooltip={helpText.emailRecepients}
-          list for this type of notification.`}
       />
       <FormField
         id="email-sender"
@@ -117,9 +116,7 @@ function EmailFields() {
         isRequired
         min="1"
         max="120"
-        tooltip={t`The amount of time (in seconds) before the email
+        tooltip={helpText.emailTimeout}
-          notification stops trying to reach the host and times out. Ranges
-          from 1 to 120 seconds.`}
       />
       <FormGroup fieldId="email-options" label={t`E-mail options`}>
         <FormCheckboxLayout>
@@ -149,9 +146,7 @@ function GrafanaFields() {
         type="text"
         validate={required(null)}
         isRequired
-        tooltip={t`The base URL of the Grafana server - the
+        tooltip={helpText.grafanaUrl}
-        /api/annotations endpoint will be added automatically to the base
-        Grafana URL.`}
       />
       <PasswordField
         id="grafana-key"
@@ -178,7 +173,7 @@ function GrafanaFields() {
         name="notification_configuration.annotation_tags"
         type="textarea"
         rows={3}
-        tooltip={t`Enter one Annotation Tag per line, without commas.`}
+        tooltip={helpText.grafanaTags}
       />
       <CheckboxField
         id="grafana-ssl"
@@ -229,9 +224,7 @@ function IRCFields() {
         type="textarea"
         validate={required(null)}
         isRequired
-        tooltip={t`Enter one IRC channel or username per line. The pound
+        tooltip={helpText.ircTargets}
-          symbol (#) for channels, and the at (@) symbol for users, are not
-          required.`}
       />
       <CheckboxField
         id="grafana-ssl"
@@ -362,14 +355,7 @@ function SlackFields() {
         type="textarea"
         validate={required(null)}
         isRequired
-        tooltip={
+        tooltip={helpText.slackChannels}
-          <>
-            {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`}{' '}
-            <a href="https://api.slack.com/messaging/retrieving#individual_messages">{t`documentation`}</a>{' '}
-            <span>{t`for more information.`}</span>
-          </>
-        }
       />
       <PasswordField
         id="slack-token"
@@ -383,8 +369,7 @@ function SlackFields() {
         label={t`Notification color`}
         name="notification_configuration.hex_color"
         type="text"
-        tooltip={t`Specify a notification color. Acceptable colors are hex
+        tooltip={helpText.slackColor}
-          color code (example: #3af or #789abc).`}
       />
     </>
   );
@@ -407,8 +392,7 @@ function TwilioFields() {
         type="text"
         validate={combine([required(null), twilioPhoneNumber()])}
         isRequired
-        tooltip={t`Enter the number associated with the "Messaging
+        tooltip={helpText.twilioSourcePhoneNumber}
-          Service" in Twilio in the format +18005550199.`}
       />
       <ArrayTextField
         id="twilio-destination-numbers"
@@ -417,8 +401,7 @@ function TwilioFields() {
         type="textarea"
         validate={combine([required(null), twilioPhoneNumber()])}
         isRequired
-        tooltip={t`Enter one phone number per line to specify where to
+        tooltip={helpText.twilioDestinationNumbers}
-          route SMS messages. Phone numbers should be formatted +11231231234. For more information see Twilio documentation`}
       />
       <FormField
         id="twilio-account-sid"
@@ -469,8 +452,7 @@ function WebhookFields() {
           name="notification_configuration.headers"
           label={t`HTTP Headers`}
           mode="javascript"
-          tooltip={t`Specify HTTP Headers in JSON format. Refer to
+          tooltip={helpText.webhookHeaders}
-        the Ansible Tower documentation for example syntax.`}
           rows={5}
         />
       </FormFullWidthLayout>