feat: make notification page filters work

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

plugins/notifications/src/api/NotificationsApi.ts

@@ -17,6 +17,7 @@ import { createApiRef } from '@backstage/core-plugin-api';
 import {
   Notification,
   NotificationStatus,
+  NotificationType,
 } from '@backstage/plugin-notifications-common';
 
 /** @public */
@@ -24,11 +25,17 @@ export const notificationsApiRef = createApiRef<NotificationsApi>({
   id: 'plugin.notifications.service',
 });
 
+/** @public */
+export type GetNotificationsOptions = {
+  type?: NotificationType;
+};
+
 /** @public */
 export interface NotificationsApi {
-  getNotifications(): Promise<Notification[]>;
+  getNotifications(options?: GetNotificationsOptions): Promise<Notification[]>;
 
   getStatus(): Promise<NotificationStatus>;
 
   // TODO: Mark as read/unread by notification id(s)
+  // TODO: Mark as saved/unsaved by notification id(s)
 }

plugins/notifications/src/api/NotificationsClient.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NotificationsApi } from './NotificationsApi';
+import { GetNotificationsOptions, NotificationsApi } from './NotificationsApi';
 import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import {
@@ -34,8 +34,17 @@ export class NotificationsClient implements NotificationsApi {
     this.fetchApi = options.fetchApi;
   }
 
-  async getNotifications(): Promise<Notification[]> {
-    return await this.get<Notification[]>('notifications');
+  async getNotifications(
+    options?: GetNotificationsOptions,
+  ): Promise<Notification[]> {
+    const queryString = new URLSearchParams();
+    if (options?.type) {
+      queryString.append('type', options.type);
+    }
+
+    const urlSegment = `notifications?${queryString}`;
+
+    return await this.get<Notification[]>(urlSegment);
   }
 
   async getStatus(): Promise<NotificationStatus> {

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Content,
   ErrorPanel,
@@ -32,6 +32,7 @@ import {
 import Bookmark from '@material-ui/icons/Bookmark';
 import Check from '@material-ui/icons/Check';
 import Inbox from '@material-ui/icons/Inbox';
+import { NotificationType } from '@backstage/plugin-notifications-common';
 
 const useStyles = makeStyles(_theme => ({
   filterButton: {
@@ -41,32 +42,48 @@ const useStyles = makeStyles(_theme => ({
 }));
 
 export const NotificationsPage = () => {
+  const [type, setType] = useState<NotificationType>('unread');
+
   const {
     loading: _loading,
     error,
     value,
     retry: _retry,
-  } = useNotificationsApi(api => api.getNotifications());
+  } = useNotificationsApi(api => api.getNotifications({ type }), [type]);
 
   const styles = useStyles();
   if (error) {
     return <ErrorPanel error={new Error('Failed to load notifications')} />;
   }
 
-  // TODO: Make the filter buttons work
   // TODO: Add signals listener and refresh data on message
   return (
     <PageWithHeader title="Notifications" themeId="tool">
       <Content>
         <Grid container>
           <Grid item xs={2}>
-            <Button className={styles.filterButton} startIcon={<Inbox />}>
+            <Button
+              className={styles.filterButton}
+              startIcon={<Inbox />}
+              variant={type === 'unread' ? 'contained' : 'text'}
+              onClick={() => setType('unread')}
+            >
               Inbox
             </Button>
-            <Button className={styles.filterButton} startIcon={<Check />}>
+            <Button
+              className={styles.filterButton}
+              startIcon={<Check />}
+              variant={type === 'read' ? 'contained' : 'text'}
+              onClick={() => setType('read')}
+            >
               Done
             </Button>
-            <Button className={styles.filterButton} startIcon={<Bookmark />}>
+            <Button
+              className={styles.filterButton}
+              startIcon={<Bookmark />}
+              variant={type === 'saved' ? 'contained' : 'text'}
+              onClick={() => setType('saved')}
+            >
               Saved
             </Button>
           </Grid>