chore: refactor service and backend to use REST

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

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

@@ -1,41 +0,0 @@
-/*
- * 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

@@ -41,10 +41,15 @@ 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 => ({
+  table: {
+    border: `1px solid ${theme.palette.divider}`,
+  },
+  header: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
   notificationRow: {
     cursor: 'pointer',
     '&.hideOnHover': {
@@ -54,7 +59,6 @@ const useStyles = makeStyles(theme => ({
       display: 'none',
     },
     '&:hover': {
-      backgroundColor: theme.palette.background.paper,
       '& .hideOnHover': {
         display: 'none',
       },
@@ -112,7 +116,7 @@ export const NotificationsTable = (props: {
   }
 
   return (
-    <Table size="small">
+    <Table size="small" className={styles.table}>
       <TableHead>
         <TableRow>
           <TableCell colSpan={3}>
@@ -172,9 +176,13 @@ export const NotificationsTable = (props: {
       </TableHead>
       {props.notifications?.map(notification => {
         return (
-          <TableRow key={notification.id} className={styles.notificationRow}>
+          <TableRow
+            key={notification.id}
+            className={styles.notificationRow}
+            hover
+          >
             <TableCell
-              width="80px"
+              width="60px"
               style={{ verticalAlign: 'center', paddingRight: '0px' }}
             >
               <Checkbox
@@ -183,7 +191,6 @@ export const NotificationsTable = (props: {
                 checked={isChecked(notification.id)}
                 onClick={() => onCheckBoxClick(notification.id)}
               />
-              <NotificationIcon notification={notification} />
             </TableCell>
             <TableCell
               onClick={() => navigate(notification.link)}