Add dismissible notification when a model deployment fails

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>
   );
 };

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;

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;