flushing out notification template detail

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

@@ -1,5 +1,58 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { Card, PageSection } from '@patternfly/react-core';
+import { Link, useParams } from 'react-router-dom';
+import useRequest from '../../util/useRequest';
+import ContentError from '../../components/ContentError';
+import { NotificationTemplatesAPI } from '../../api';
+import NotificationTemplateDetail from './NotificationTemplateDetail';
 
-export default function NotificationTemplate() {
-  return <div />;
+function NotificationTemplate({ i18n, setBreadcrumb }) {
+  const { id: templateId } = useParams();
+  const {
+    result: template,
+    isLoading,
+    error,
+    request: fetchTemplate,
+  } = useRequest(
+    useCallback(async () => {
+      const { data } = await NotificationTemplatesAPI.readDetail(templateId);
+      return data;
+    }, [templateId]),
+    null
+  );
+
+  useEffect(() => {
+    fetchTemplate();
+  }, [fetchTemplate]);
+
+  if (error) {
+    return (
+      <PageSection>
+        <Card>
+          <ContentError error={error}>
+            {error.response.status === 404 && (
+              <span>
+                {i18n._(t`Notification Template not found.`)}{' '}
+                <Link to="/notification_templates">
+                  {i18n._(t`View all Notification Templates.`)}
+                </Link>
+              </span>
+            )}
+          </ContentError>
+        </Card>
+      </PageSection>
+    );
+  }
+
+  return (
+    <PageSection>
+      <Card>
+        <NotificationTemplateDetail template={template} isLoading={isLoading} />
+      </Card>
+    </PageSection>
+  );
 }
+
+export default withI18n()(NotificationTemplate);

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

@@ -0,0 +1,48 @@
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { Link, useHistory, useParams } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import {
+  Button,
+  Chip,
+  TextList,
+  TextListItem,
+  TextListItemVariants,
+  TextListVariants,
+  Label,
+} from '@patternfly/react-core';
+import { t } from '@lingui/macro';
+
+import AlertModal from '../../../components/AlertModal';
+import { CardBody, CardActionsRow } from '../../../components/Card';
+import ChipGroup from '../../../components/ChipGroup';
+import ContentError from '../../../components/ContentError';
+import ContentLoading from '../../../components/ContentLoading';
+import CredentialChip from '../../../components/CredentialChip';
+import {
+  Detail,
+  DetailList,
+  DeletedDetail,
+  UserDateDetail,
+} from '../../../components/DetailList';
+import DeleteButton from '../../../components/DeleteButton';
+import ErrorDetail from '../../../components/ErrorDetail';
+import LaunchButton from '../../../components/LaunchButton';
+import { VariablesDetail } from '../../../components/CodeMirrorInput';
+import { JobTemplatesAPI } from '../../../api';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
+
+function NotificationTemplateDetail({ i18n, template }) {
+  return (
+    <CardBody>
+      <DetailList gutter="sm">
+        <Detail
+          label={i18n._(t`Name`)}
+          value={template.name}
+          dataCy="nt-detail-name"
+        />
+      </DetailList>
+    </CardBody>
+  );
+}
+
+export default withI18n()(NotificationTemplateDetail);

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

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

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

@@ -105,12 +105,8 @@ function NotificationTemplatesList({ i18n }) {
                 isDefault: true,
               },
               {
-                name: i18n._(t`Created By (Username)`),
-                key: 'created_by__username',
-              },
-              {
-                name: i18n._(t`Modified By (Username)`),
-                key: 'modified_by__username',
+                name: i18n._(t`Type`),
+                key: 'notification_type',
               },
             ]}
             toolbarSortColumns={[
@@ -118,6 +114,10 @@ function NotificationTemplatesList({ i18n }) {
                 name: i18n._(t`Name`),
                 key: 'name',
               },
+              {
+                name: i18n._(t`Type`),
+                key: 'notification_type',
+              },
             ]}
             renderToolbar={props => (
               <DataListToolbar

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import {
-  Badge as PFBadge,
   Button,
   DataListAction as _DataListAction,
   DataListCheck,
@@ -12,15 +12,26 @@ import {
   DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
+import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
 import DataListCell from '../../../components/DataListCell';
 
-export default function NotificationTemplatesListItem({
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px 40px;
+`;
+
+function NotificationTemplateListItem({
   template,
   detailUrl,
   isSelected,
   onSelect,
+  i18n,
 }) {
-  const labelId = `check-action-${template.id}`;
+  const sendTestNotification = () => {};
+  const labelId = `template-name-${template.id}`;
+
   return (
     <DataListItem key={template.id} aria-labelledby={labelId} id={template.id}>
       <DataListItemRow>
@@ -37,9 +48,42 @@ export default function NotificationTemplatesListItem({
                 <b>{template.name}</b>
               </Link>
             </DataListCell>,
+            <DataListCell key="type">
+              {template.notification_type}
+            </DataListCell>,
           ]}
         />
+        <DataListAction aria-label="actions" aria-labelledby={labelId}>
+          {template.summary_fields.user_capabilities.edit ? (
+            <Tooltip
+              content={i18n._(t`Edit Notification Template`)}
+              position="top"
+            >
+              <Button
+                aria-label={i18n._(t`Edit Notification Template`)}
+                variant="plain"
+                component={Link}
+                to={`/notification_templates/${template.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          ) : (
+            <div />
+          )}
+          <Tooltip content={i18n._(t`Test Notification`)} position="top">
+            <Button
+              aria-label={i18n._(t`Test Notification`)}
+              variant="plain"
+              onClick={sendTestNotification}
+            >
+              <BellIcon />
+            </Button>
+          </Tooltip>
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
 }
+
+export default withI18n()(NotificationTemplateListItem);

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx

@@ -62,12 +62,10 @@ function OrganizationListItem({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="divider">
-              <span id={labelId}>
-                <Link to={`${detailUrl}`}>
-                  <b>{organization.name}</b>
-                </Link>
-              </span>
+            <DataListCell key="name" id={labelId}>
+              <Link to={`${detailUrl}`}>
+                <b>{organization.name}</b>
+              </Link>
             </DataListCell>,
             <DataListCell key="related-field-counts">
               <ListGroup>
@@ -85,11 +83,7 @@ function OrganizationListItem({
             </DataListCell>,
           ]}
         />
-        <DataListAction
-          aria-label="actions"
-          aria-labelledby={labelId}
-          id={labelId}
-        >
+        <DataListAction aria-label="actions" aria-labelledby={labelId}>
           {organization.summary_fields.user_capabilities.edit ? (
             <Tooltip content={i18n._(t`Edit Organization`)} position="top">
               <Button

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -78,7 +78,7 @@ function TemplateListItem({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="divider">
+            <DataListCell key="name" id={labelId}>
               <span>
                 <Link to={`${detailUrl}`}>
                   <b>{template.name}</b>
@@ -105,11 +105,7 @@ function TemplateListItem({
             </DataListCell>,
           ]}
         />
-        <DataListAction
-          aria-label="actions"
-          aria-labelledby={labelId}
-          id={labelId}
-        >
+        <DataListAction aria-label="actions" aria-labelledby={labelId}>
           {canLaunch && template.type === 'job_template' && (
             <Tooltip content={i18n._(t`Launch Template`)} position="top">
               <LaunchButton resource={template}>