Clean up notification event detail view

msupply-foundation · Nov 9, 2023 · 55e837b · 55e837b
1 parent d62e3b3
commit 55e837b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/frontend/packages/common/src/intl/locales/en/system.json b/frontend/packages/common/src/intl/locales/en/system.json
@@ -96,6 +96,6 @@
   "label.select-queries": "Select Queries",
   "message.no-queries-selected": "No queries selected",
   "label.schedule": "Schedule",
-  "button.edit-config": "Edit Config",
+  "button.edit-notification-config": "Edit Notification Config",
   "messages.no-events-matching-status": "No events found"
 }
diff --git a/frontend/packages/system/src/NotificationEvents/DetailView/DetailView.tsx b/frontend/packages/system/src/NotificationEvents/DetailView/DetailView.tsx
@@ -11,6 +11,7 @@ import {
   Stack,
   TextArea,
   Typography,
+  Tooltip,
 } from '@common/ui';
 import { useTranslation } from '@common/intl';
 import { useNotificationEvents } from '../api';
@@ -48,25 +49,27 @@ export const DetailView = () => {
       <AppBarButtonsPortal>
         {/* if we have a config_id, create a link to edit the config */}
         {entity?.notificationConfigId && (
-          <BaseButton
-            onClick={() => {
-              navigate(
-                configRoute(
-                  entity.notificationConfig?.kind ?? ConfigKind.Scheduled,
-                  entity.notificationConfigId ?? ''
-                )
-              );
-            }}
-            variant="outlined"
-            endIcon={<EditIcon />}
-          >
-            {t('button.edit-config')} ({entity.notificationConfig?.title})
-          </BaseButton>
+          <Tooltip title={entity.notificationConfig?.title ?? ''}>
+            <BaseButton
+              onClick={() => {
+                navigate(
+                  configRoute(
+                    entity.notificationConfig?.kind ?? ConfigKind.Scheduled,
+                    entity.notificationConfigId ?? ''
+                  )
+                );
+              }}
+              variant="outlined"
+              endIcon={<EditIcon />}
+            >
+              {t('button.edit-notification-config')}
+            </BaseButton>
+          </Tooltip>
         )}
       </AppBarButtonsPortal>
       <AppBarContentPortal sx={{ paddingBottom: '16px', flex: 1 }}>
         <Box flex={1} display="flex" gap={2}>
-          <Box flex={0.2}>
+          <Box flex={0.3}>
             <Stack gap={1}>
               <NotificationStatusChip
                 status={entity?.status ?? EventStatus.Errored}
@@ -106,11 +109,32 @@ export const DetailView = () => {
           <BasicSpinner />
         ) : (
           <>
-            <Typography variant="h4">{entity?.title}</Typography>
-            <Typography variant="h6">
-              {entity?.toAddress} ({entity?.notificationType})
-            </Typography>
+            <Typography variant="h6">Generated Notification</Typography>
+            <TextArea
+              label="To"
+              minRows={1}
+              maxRows={1}
+              sx={{
+                border: '1px solid',
+                borderColor: 'grey.100',
+                width: '100%',
+              }}
+              value={`${entity?.toAddress} (${entity?.notificationType})`}
+            />
+            <TextArea
+              label="Title"
+              minRows={1}
+              maxRows={1}
+              sx={{
+                border: '1px solid',
+                borderColor: 'grey.100',
+                width: '100%',
+              }}
+              value={entity?.title}
+            />
+
             <TextArea
+              label="Message"
               minRows={2}
               maxRows={25}
               sx={{