flush out template detail

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplate.jsx

@@ -18,8 +18,9 @@ function NotificationTemplate({ i18n, setBreadcrumb }) {
   } = useRequest(
     useCallback(async () => {
       const { data } = await NotificationTemplatesAPI.readDetail(templateId);
+      setBreadcrumb(data);
       return data;
-    }, [templateId]),
+    }, [templateId, setBreadcrumb]),
     null
   );
 
@@ -49,7 +50,12 @@ function NotificationTemplate({ i18n, setBreadcrumb }) {
   return (
     <PageSection>
       <Card>
-        <NotificationTemplateDetail template={template} isLoading={isLoading} />
+        {template && (
+          <NotificationTemplateDetail
+            template={template}
+            isLoading={isLoading}
+          />
+        )}
       </Card>
     </PageSection>
   );

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx

@@ -31,7 +31,23 @@ import { VariablesDetail } from '../../../components/CodeMirrorInput';
 import { JobTemplatesAPI } from '../../../api';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 
+const TYPES = {
+  email: 'Email',
+  grafana: 'Grafana',
+  irc: 'IRC',
+  mattermost: 'Mattermost',
+  pagerduty: 'Pagerduty',
+  rocketchat: 'Rocket.Chat',
+  slack: 'Slack',
+  twilio: 'Twilio',
+  webhook: 'Webhook',
+};
+
 function NotificationTemplateDetail({ i18n, template }) {
+  const {
+    notification_configuration: configuration,
+    summary_fields,
+  } = template;
   return (
     <CardBody>
       <DetailList gutter="sm">
@@ -40,6 +56,215 @@ function NotificationTemplateDetail({ i18n, template }) {
           value={template.name}
           dataCy="nt-detail-name"
         />
+        <Detail
+          label={i18n._(t`Description`)}
+          value={template.description}
+          dataCy="nt-detail-description"
+        />
+        {summary_fields.organization ? (
+          <Detail
+            label={i18n._(t`Organization`)}
+            value={
+              <Link
+                to={`/organizations/${summary_fields.organization.id}/details`}
+              >
+                {summary_fields.organization.name}
+              </Link>
+            }
+          />
+        ) : (
+          <DeletedDetail label={i18n._(t`Organization`)} />
+        )}
+        <Detail
+          label={i18n._(t`Notification Type`)}
+          value={
+            TYPES[template.notification_type] || template.notification_type
+          }
+          dataCy="nt-detail-type"
+        />
+        {template.notification_type === 'email' && (
+          <>
+            <Detail
+              label={i18n._(t`Username`)}
+              value={configuration.username}
+              dataCy="nt-detail-username"
+            />
+            <Detail
+              label={i18n._(t`Host`)}
+              value={configuration.host}
+              dataCy="nt-detail-host"
+            />
+            <Detail
+              label={i18n._(t`Recipient List`)}
+              value={configuration.recipients} // array
+              dataCy="nt-detail-recipients"
+            />
+            <Detail
+              label={i18n._(t`Sender Email`)}
+              value={configuration.sender}
+              dataCy="nt-detail-sender"
+            />
+            <Detail
+              label={i18n._(t`Port`)}
+              value={configuration.port}
+              dataCy="nt-detail-port"
+            />
+            <Detail
+              label={i18n._(t`Timeout`)}
+              value={configuration.timeout}
+              dataCy="nt-detail-timeout"
+            />
+            <Detail
+              label={i18n._(t`Email Options`)}
+              value={
+                configuration.use_ssl ? i18n._(t`Use SSL`) : i18n._(t`Use TLS`)
+              }
+              dataCy="nt-detail-email-options"
+            />
+          </>
+        )}
+        {template.notification_type === 'grafana' && (
+          <>
+            <Detail
+              label={i18n._(t`Grafana URL`)}
+              value={configuration.grafana_url}
+              dataCy="nt-detail-grafana-url"
+            />
+            <Detail
+              label={i18n._(t`ID of the Dashboard`)}
+              value={configuration.dashboardId}
+              dataCy="nt-detail-dashboard-id"
+            />
+            <Detail
+              label={i18n._(t`ID of the Panel`)}
+              value={configuration.panelId}
+              dataCy="nt-detail-panel-id"
+            />
+            <Detail
+              label={i18n._(t`Tags for the Annotation`)}
+              value={configuration.annotation_tags} // array
+              dataCy="nt-detail-"
+            />
+            <Detail
+              label={i18n._(t`Disable SSL Verification`)}
+              value={
+                configuration.grafana_no_verify_ssl
+                  ? i18n._(t`True`)
+                  : i18n._(t`False`)
+              }
+              dataCy="nt-detail-disable-ssl"
+            />
+          </>
+        )}
+        {template.notification_type === 'irc' && (
+          <>
+            <Detail
+              label={i18n._(t`IRC Server Port`)}
+              value={configuration.port}
+              dataCy="nt-detail-irc-port"
+            />
+            <Detail
+              label={i18n._(t`IRC Server Address`)}
+              value={configuration.server}
+              dataCy="nt-detail-irc-server"
+            />
+            <Detail
+              label={i18n._(t`IRC Nick`)}
+              value={configuration.nickname}
+              dataCy="nt-detail-irc-nickname"
+            />
+            <Detail
+              label={i18n._(t`Destination Channels or Users`)}
+              value={configuration.targets} // array
+              dataCy="nt-detail-channels"
+            />
+            <Detail
+              label={i18n._(t`SSL Connection`)}
+              value={configuration.use_ssl ? i18n._(t`True`) : i18n._(t`False`)}
+              dataCy="nt-detail-irc-ssl"
+            />
+          </>
+        )}
+        {template.notification_type === 'mattermost' && (
+          <>
+            <Detail
+              label={i18n._(t`Target URL`)}
+              value={configuration.mattermost_url}
+              dataCy="nt-detail-mattermost-url"
+            />
+            <Detail
+              label={i18n._(t`Username`)}
+              value={configuration.mattermost_username}
+              dataCy="nt-detail-mattermost-username"
+            />
+            <Detail
+              label={i18n._(t`Channel`)}
+              value={configuration.mattermost_channel}
+              dataCy="nt-detail-mattermost_channel"
+            />
+            <Detail
+              label={i18n._(t`Icon URL`)}
+              value={configuration.mattermost_icon_url}
+              dataCy="nt-detail-mattermost-icon-url"
+            />
+            <Detail
+              label={i18n._(t`Disable SSL Verification`)}
+              value={
+                configuration.mattermost_no_verify_ssl
+                  ? i18n._(t`True`)
+                  : i18n._(t`False`)
+              }
+              dataCy="nt-detail-disable-ssl"
+            />
+          </>
+        )}
+        {template.notification_type === 'pagerduty' && (
+          <>
+            <Detail
+              label={i18n._(t`Pagerduty Subdomain`)}
+              value={configuration.subdomain}
+              dataCy="nt-detail-pagerduty-subdomain"
+            />
+            <Detail
+              label={i18n._(t`API Service/Integration Key`)}
+              value={configuration.service_key}
+              dataCy="nt-detail-pagerduty-service-key"
+            />
+            <Detail
+              label={i18n._(t`Client Identifier`)}
+              value={configuration.client_name}
+              dataCy="nt-detail-pagerduty-client-name"
+            />
+          </>
+        )}
+        {template.notification_type === 'rocketchat' && (
+          <>
+            <Detail
+              label={i18n._(t`Target URL`)}
+              value={configuration.rocketchat_url}
+              dataCy="nt-detail-rocketchat-url"
+            />
+            <Detail
+              label={i18n._(t`Username`)}
+              value={configuration.rocketchat_username}
+              dataCy="nt-detail-pagerduty-rocketchat-username"
+            />
+            <Detail
+              label={i18n._(t`Icon URL`)}
+              value={configuration.rocketchat_icon_url}
+              dataCy="nt-detail-rocketchat-icon-url"
+            />
+            <Detail
+              label={i18n._(t`Disable SSL Verification`)}
+              value={
+                configuration.rocketchat_no_verify_ssl
+                  ? i18n._(t`True`)
+                  : i18n._(t`False`)
+              }
+              dataCy="nt-detail-disable-ssl"
+            />
+          </>
+        )}
       </DetailList>
     </CardBody>
   );

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/index.js

@@ -1 +1,3 @@
-export default from './NotificationTemplateDetail';
+import NotificationTemplateDetail from './NotificationTemplateDetail';
+
+export default NotificationTemplateDetail;

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -14,18 +14,21 @@ function NotificationTemplates({ i18n }) {
     '/notification_templates/add': i18n._(t`Create New Notification Template`),
   });
 
-  const updateBreadcrumbConfig = notification => {
+  const updateBreadcrumbConfig = useCallback(
-    const { id } = notification;
+    notification => {
-    setBreadcrumbConfig({
+      const { id } = notification;
-      '/notification_templates': i18n._(t`Notification Templates`),
+      setBreadcrumbConfig({
-      '/notification_templates/add': i18n._(
+        '/notification_templates': i18n._(t`Notification Templates`),
-        t`Create New Notification Template`
+        '/notification_templates/add': i18n._(
-      ),
+          t`Create New Notification Template`
-      [`/notification_templates/${id}`]: notification.name,
+        ),
-      [`/notification_templates/${id}/edit`]: i18n._(t`Edit Details`),
+        [`/notification_templates/${id}`]: notification.name,
-      [`/notification_templates/${id}/details`]: i18n._(t`Details`),
+        [`/notification_templates/${id}/edit`]: i18n._(t`Edit Details`),
-    });
+        [`/notification_templates/${id}/details`]: i18n._(t`Details`),
-  };
+      });
+    },
+    [i18n]
+  );
 
   return (
     <>