From aea89fd0b5b81cbbf5b1f0fd3ae300dacd62c8e8 Mon Sep 17 00:00:00 2001
From: Ashique Ansari <nasiba.ansari@gmail.com>
Date: Thu, 2 Nov 2023 15:07:05 +0530
Subject: [PATCH] Add dismissible notification when a model deployment fails

---
 frontend/src/app/App.tsx                      | 43 +++++++++--------
 frontend/src/app/NotificationsContext.tsx     | 46 +++++++++++++++++++
 .../components/GlobalToastNotifications.tsx   | 22 +++++++++
 3 files changed, 92 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/app/NotificationsContext.tsx
 create mode 100644 frontend/src/components/GlobalToastNotifications.tsx

diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index 2d8e49dfdf..ee19148adb 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -13,6 +13,7 @@ import {
 } from '@patternfly/react-core';
 import ErrorBoundary from '~/components/error/ErrorBoundary';
 import ToastNotifications from '~/components/ToastNotifications';
+import GlobalToastNotifications from '~/components/GlobalToastNotifications';
 import { useWatchBuildStatus } from '~/utilities/useWatchBuildStatus';
 import { useUser } from '~/redux/selectors';
 import { DASHBOARD_MAIN_CONTAINER_ID } from '~/utilities/const';
@@ -23,6 +24,7 @@ import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import AppNotificationDrawer from './AppNotificationDrawer';
 import { AppContext } from './AppContext';
+import NotificationsContextProvider from './NotificationsContext';
 import { useApplicationSettings } from './useApplicationSettings';
 import TelemetrySetup from './TelemetrySetup';
 import { logout } from './appUtils';
@@ -89,25 +91,28 @@ const App: React.FC = () => {
         dashboardConfig,
       }}
     >
-      <Page
-        className="odh-dashboard"
-        isManagedSidebar
-        header={<Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />}
-        sidebar={isAllowed ? <NavSidebar /> : undefined}
-        notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
-        isNotificationDrawerExpanded={notificationsOpen}
-        mainContainerId={DASHBOARD_MAIN_CONTAINER_ID}
-      >
-        <ErrorBoundary>
-          <ProjectsContextProvider>
-            <QuickStarts>
-              <AppRoutes />
-            </QuickStarts>
-          </ProjectsContextProvider>
-          <ToastNotifications />
-          <TelemetrySetup />
-        </ErrorBoundary>
-      </Page>
+      <NotificationsContextProvider>
+        <Page
+          className="odh-dashboard"
+          isManagedSidebar
+          header={<Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />}
+          sidebar={isAllowed ? <NavSidebar /> : undefined}
+          notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
+          isNotificationDrawerExpanded={notificationsOpen}
+          mainContainerId={DASHBOARD_MAIN_CONTAINER_ID}
+        >
+          <ErrorBoundary>
+            <ProjectsContextProvider>
+              <QuickStarts>
+                <AppRoutes />
+              </QuickStarts>
+            </ProjectsContextProvider>
+            <GlobalToastNotifications />
+            <ToastNotifications />
+            <TelemetrySetup />
+          </ErrorBoundary>
+        </Page>
+      </NotificationsContextProvider>
     </AppContext.Provider>
   );
 };
diff --git a/frontend/src/app/NotificationsContext.tsx b/frontend/src/app/NotificationsContext.tsx
new file mode 100644
index 0000000000..f2e6043cdc
--- /dev/null
+++ b/frontend/src/app/NotificationsContext.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { AppNotification } from '~/redux/types';
+
+type NotificationsContext = {
+  notifications: AppNotification[];
+  addNotification: (status: AppNotification['status'], title: string, message: string) => void;
+};
+
+export const NotificationsContext = React.createContext<NotificationsContext>({
+  notifications: [],
+  addNotification: () => undefined,
+});
+
+type NotificationsProviderProps = {
+  children: React.ReactNode;
+};
+
+const NotificationsContextProvider: React.FC<NotificationsProviderProps> = ({ children }) => {
+  const [notifications, setNotifications] = React.useState<AppNotification[]>([]);
+
+  const addNotification = React.useCallback(
+    (status: AppNotification['status'], title: string, message: string) => {
+      const newNotification = {
+        status,
+        title,
+        message,
+        timestamp: new Date(),
+      };
+
+      setNotifications([...notifications, newNotification]);
+    },
+    [notifications],
+  );
+
+  return (
+    <NotificationsContext.Provider
+      value={{
+        notifications,
+        addNotification,
+      }}
+    >
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
+export default NotificationsContextProvider;
diff --git a/frontend/src/components/GlobalToastNotifications.tsx b/frontend/src/components/GlobalToastNotifications.tsx
new file mode 100644
index 0000000000..7a51dc3f41
--- /dev/null
+++ b/frontend/src/components/GlobalToastNotifications.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { AlertGroup } from '@patternfly/react-core';
+import { NotificationsContext } from '~/app/NotificationsContext';
+import ToastNotification from './ToastNotification';
+
+const GlobalToastNotifications: React.FC = () => {
+  const { notifications } = React.useContext(NotificationsContext);
+
+  if (!notifications) {
+    return null;
+  }
+
+  return (
+    <AlertGroup isToast isLiveRegion>
+      {notifications.map((notification) => (
+        <ToastNotification notification={notification} key={notification.id} />
+      ))}
+    </AlertGroup>
+  );
+};
+
+export default GlobalToastNotifications;