feat: allow specifying mui icon for notification

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx

@@ -22,13 +22,7 @@ import {
 } from '@backstage/core-components';
 import { NotificationsTable } from '../NotificationsTable';
 import { useNotificationsApi } from '../../hooks';
-import {
-  Button,
-  Grid,
-  makeStyles,
-  Paper,
-  TableContainer,
-} from '@material-ui/core';
+import { Button, Grid, makeStyles } from '@material-ui/core';
 import Bookmark from '@material-ui/icons/Bookmark';
 import Check from '@material-ui/icons/Check';
 import Inbox from '@material-ui/icons/Inbox';
@@ -90,14 +84,12 @@ export const NotificationsPage = () => {
             </Button>
           </Grid>
           <Grid item xs={10}>
-            <TableContainer component={Paper}>
-              <NotificationsTable
-                notifications={value}
-                type={type}
-                loading={loading}
-                onUpdate={onUpdate}
-              />
-            </TableContainer>
+            <NotificationsTable
+              notifications={value}
+              type={type}
+              loading={loading}
+              onUpdate={onUpdate}
+            />
           </Grid>
         </Grid>
       </Content>

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import { Notification } from '@backstage/plugin-notifications-common';
+// eslint-disable-next-line no-restricted-imports
+import * as muiIcons from '@material-ui/icons';
+import Avatar from '@material-ui/core/Avatar';
+
+/** @internal */
+export const NotificationIcon = (props: { notification: Notification }) => {
+  const { notification } = props;
+  if (notification.icon && notification.icon in muiIcons) {
+    const Icon = muiIcons[notification.icon];
+    return <Icon fontSize="small" />;
+  }
+
+  if (notification.image) {
+    return (
+      <Avatar
+        src={notification.image}
+        style={{ width: '20px', height: '20px' }}
+      />
+    );
+  }
+
+  return <NotificationsIcon fontSize="small" />;
+};

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

@@ -31,7 +31,6 @@ import {
   NotificationType,
 } from '@backstage/plugin-notifications-common';
 import { useNavigate } from 'react-router-dom';
-import NotificationsIcon from '@material-ui/icons/Notifications';
 import Checkbox from '@material-ui/core/Checkbox';
 import Check from '@material-ui/icons/Check';
 import Bookmark from '@material-ui/icons/Bookmark';
@@ -42,6 +41,8 @@ import CloseIcon from '@material-ui/icons/Close';
 import { Skeleton } from '@material-ui/lab';
 // @ts-ignore
 import RelativeTime from 'react-relative-time';
+import { NotificationIcon } from './NotificationIcon';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 const useStyles = makeStyles(theme => ({
   notificationRow: {
@@ -53,7 +54,7 @@ const useStyles = makeStyles(theme => ({
       display: 'none',
     },
     '&:hover': {
-      backgroundColor: theme.palette.linkHover,
+      backgroundColor: theme.palette.background.paper,
       '& .hideOnHover': {
         display: 'none',
       },
@@ -110,8 +111,6 @@ export const NotificationsTable = (props: {
     return <Skeleton variant="rect" height={200} />;
   }
 
-  // TODO: Show timestamp relative time (react-relative-time npm package)
-  // TODO: Add signals listener and refresh data on message
   return (
     <Table size="small">
       <TableHead>
@@ -174,16 +173,19 @@ export const NotificationsTable = (props: {
       {props.notifications?.map(notification => {
         return (
           <TableRow key={notification.id} className={styles.notificationRow}>
-            <TableCell width={100} style={{ verticalAlign: 'center' }}>
+            <TableCell width="90px" style={{ verticalAlign: 'center' }}>
               <Checkbox
                 className={styles.checkBox}
                 size="small"
                 checked={isChecked(notification.id)}
                 onClick={() => onCheckBoxClick(notification.id)}
               />
-              {notification.icon ?? <NotificationsIcon fontSize="small" />}
+              <NotificationIcon notification={notification} />
             </TableCell>
-            <TableCell onClick={() => navigate(notification.link)}>
+            <TableCell
+              onClick={() => navigate(notification.link)}
+              style={{ paddingLeft: 0 }}
+            >
               <Typography variant="subtitle2">{notification.title}</Typography>
               <Typography variant="body2">
                 {notification.description}
@@ -194,6 +196,14 @@ export const NotificationsTable = (props: {
                 <RelativeTime value={notification.created} />
               </Box>
               <Box className="showOnHover">
+                <Tooltip title={notification.link}>
+                  <IconButton
+                    className={styles.actionButton}
+                    onClick={() => navigate(notification.link)}
+                  >
+                    <ArrowForwardIcon />
+                  </IconButton>
+                </Tooltip>
                 <Tooltip
                   title={notification.read ? 'Move to inbox' : 'Mark as done'}
                 >