Merge pull request #23537 from mareklibra/FLPATH-1005.severity.followUp

chore: use colors from theme for notification's severity

.changeset/clean-drinks-poke.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-notifications-backend': minor
+'@backstage/plugin-notifications': minor
+---
+
+Notifications-backend URL query parameter changed from `minimal_severity` to `minimumSeverity`.

.changeset/wet-plants-help.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+The severity icons now get their colors from the theme.

plugins/notifications-backend/src/service/router.ts

@@ -262,9 +262,9 @@ export async function createRouter(
       }
       opts.createdAfter = new Date(sinceEpoch);
     }
-    if (req.query.minimal_severity) {
+    if (req.query.minimumSeverity) {
       opts.minimumSeverity = normalizeSeverity(
-        req.query.minimal_severity.toString(),
+        req.query.minimumSeverity.toString(),
       );
     }
 

plugins/notifications/src/api/NotificationsClient.ts

@@ -68,7 +68,7 @@ export class NotificationsClient implements NotificationsApi {
       queryString.append('createdAfter', options.createdAfter.toISOString());
     }
     if (options?.minimumSeverity !== undefined) {
-      queryString.append('minimal_severity', options.minimumSeverity);
+      queryString.append('minimumSeverity', options.minimumSeverity);
     }
     const urlSegment = `?${queryString}`;
 

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

@@ -19,21 +19,39 @@ import NormalIcon from '@material-ui/icons/CheckOutlined';
 import CriticalIcon from '@material-ui/icons/ErrorOutline';
 import HighIcon from '@material-ui/icons/WarningOutlined';
 import LowIcon from '@material-ui/icons/InfoOutlined';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  critical: {
+    color: theme.palette.status.error,
+  },
+  high: {
+    color: theme.palette.status.warning,
+  },
+  normal: {
+    color: theme.palette.status.ok,
+  },
+  low: {
+    color: theme.palette.status.running,
+  },
+}));
 
 export const SeverityIcon = ({
   severity,
 }: {
   severity?: NotificationSeverity;
 }) => {
+  const classes = useStyles();
+
   switch (severity) {
     case 'critical':
-      return <CriticalIcon htmlColor="#C9190B" />;
+      return <CriticalIcon className={classes.critical} />;
     case 'high':
-      return <HighIcon htmlColor="#F0AB00" />;
+      return <HighIcon className={classes.high} />;
     case 'low':
-      return <LowIcon htmlColor="#2B9AF3" />;
+      return <LowIcon className={classes.low} />;
     case 'normal':
     default:
-      return <NormalIcon htmlColor="#5BA352" />;
+      return <NormalIcon className={classes.normal} />;
   }
 };