diff --git a/.changeset/healthy-islands-smash.md b/.changeset/healthy-islands-smash.md new file mode 100644 index 0000000000..782a88167c --- /dev/null +++ b/.changeset/healthy-islands-smash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +Broadcast notifications are now decorated with an icon. diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx index d7c4c40781..8a6cbd17d7 100644 --- a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx +++ b/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} ) : null} + + {!notification.user && ( + <> + + + )} {notification.origin && ( - <>{notification.origin} •  + <> + + {notification.origin} + + • + )} {notification.payload.topic && ( - <>{notification.payload.topic} •  + <> + + {notification.payload.topic} + + • + )} {notification.created && ( - + )} @@ -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 (