Mark broadcast notifications in the list

Signed-off-by: Marek Libra <marek.libra@gmail.com>

.changeset/healthy-islands-smash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Broadcast notifications are now decorated with an icon.

plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx

@@ -24,6 +24,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { Notification } from '@backstage/plugin-notifications-common';
 import { useConfirm } from 'material-ui-confirm';
+import BroadcastIcon from '@material-ui/icons/RssFeed';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import {
   Link,
@@ -40,7 +41,7 @@ import { BulkActions } from './BulkActions';
 
 const ThrottleDelayMs = 1000;
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   description: {
     maxHeight: '5rem',
     overflow: 'auto',
@@ -48,7 +49,15 @@ const useStyles = makeStyles({
   severityItem: {
     alignContent: 'center',
   },
-});
+  broadcastIcon: {
+    fontSize: '1rem',
+    verticalAlign: 'text-bottom',
+  },
+  notificationInfoRow: {
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+  },
+}));
 
 /** @public */
 export type NotificationsTableProps = Pick<
@@ -236,15 +245,40 @@ export const NotificationsTable = ({
                       {notification.payload.description}
                     </Typography>
                   ) : null}
+
                   <Typography variant="caption">
+                    {!notification.user && (
+                      <>
+                        <BroadcastIcon className={classes.broadcastIcon} />
+                      </>
+                    )}
                     {notification.origin && (
-                      <>{notification.origin}&nbsp;&bull;&nbsp;</>
+                      <>
+                        <Typography
+                          variant="inherit"
+                          className={classes.notificationInfoRow}
+                        >
+                          {notification.origin}
+                        </Typography>
+                        &bull;
+                      </>
                     )}
                     {notification.payload.topic && (
-                      <>{notification.payload.topic}&nbsp;&bull;&nbsp;</>
+                      <>
+                        <Typography
+                          variant="inherit"
+                          className={classes.notificationInfoRow}
+                        >
+                          {notification.payload.topic}
+                        </Typography>
+                        &bull;
+                      </>
                     )}
                     {notification.created && (
-                      <RelativeTime value={notification.created} />
+                      <RelativeTime
+                        value={notification.created}
+                        className={classes.notificationInfoRow}
+                      />
                     )}
                   </Typography>
                 </Box>
@@ -272,15 +306,13 @@ export const NotificationsTable = ({
             selectedNotifications={new Set([notification.id])}
             onSwitchReadStatus={onSwitchReadStatus}
             onSwitchSavedStatus={onSwitchSavedStatus}
-            //
           />
         ),
       },
     ];
   }, [
-    markAsReadOnLinkOpen,
-    selectedNotifications,
     notifications,
+    selectedNotifications,
     isUnread,
     onSwitchReadStatus,
     onSwitchSavedStatus,
@@ -288,6 +320,9 @@ export const NotificationsTable = ({
     onNotificationsSelectChange,
     classes.severityItem,
     classes.description,
+    classes.broadcastIcon,
+    classes.notificationInfoRow,
+    markAsReadOnLinkOpen,
   ]);
 
   return (