Fix toast notification to show link to model transfer job (opendatahub-io#6709)

* Fix toast notification to show link to model transfer job

Signed-off-by: ppadti <ppadti@redhat.com>

* Fix lint

Signed-off-by: ppadti <ppadti@redhat.com>

---------

Signed-off-by: ppadti <ppadti@redhat.com>

Author: ppadti

…ties/useFederatedNotificationListener.ts …ies/useFederatedNotificationListener.tsxfrontend/src/utilities/useFederatedNotificationListener.ts renamed to frontend/src/utilities/useFederatedNotificationListener.tsx frontend/src/utilities/useFederatedNotificationListener.ts renamed to frontend/src/utilities/useFederatedNotificationListener.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { AlertVariant } from '@patternfly/react-core';
 import { useAppDispatch } from '#~/redux/hooks';
 import { addNotification } from '#~/redux/actions/actions';
@@ -23,28 +24,60 @@ const NOTIFICATION_BRIDGE_EVENT = 'odh-notification-bridge';
 
 export const useFederatedNotificationListener = (): void => {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const handleNotificationEvent = (event: Event) => {
       try {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        const customEvent = event as CustomEvent;
-        if (!customEvent.detail) {
-          return;
-        }
+        const { detail } = event as CustomEvent;
+        if (!detail) return;
 
-        const { status, title, message, timestamp } = customEvent.detail;
+        const {
+          status,
+          title,
+          message,
+          timestamp,
+          linkUrl,
+          linkLabel,
+        }: {
+          status?: AlertVariant;
+          title: string;
+          message?: string;
+          timestamp?: string;
+          linkUrl?: string;
+          linkLabel?: string;
+        } = detail;
 
         const timestampDate = timestamp ? new Date(timestamp) : new Date();
 
-        dispatch(
-          addNotification({
-            status: status || AlertVariant.info,
-            title,
-            message,
-            timestamp: timestampDate,
-          }),
-        );
+        const notificationMessage =
+          linkUrl && linkLabel && message ? (
+            <p>
+              {message}
+              <a
+                href={linkUrl}
+                onClick={(e: React.MouseEvent) => {
+                  e.preventDefault();
+                  navigate(linkUrl);
+                }}
+              >
+                {linkLabel}
+              </a>
+              .
+            </p>
+          ) : (
+            message
+          );
+
+        const notificationPayload = {
+          status: status || AlertVariant.info,
+          title,
+          message: notificationMessage,
+          timestamp: timestampDate,
+        };
+
+        dispatch(addNotification(notificationPayload));
       } catch (error) {
         console.error('[NotificationBridge] Failed to handle notification event:', error);
       }
@@ -55,5 +88,5 @@ export const useFederatedNotificationListener = (): void => {
     return () => {
       window.removeEventListener(NOTIFICATION_BRIDGE_EVENT, handleNotificationEvent);
     };
-  }, [dispatch]);
+  }, [dispatch, navigate]);
 };

packages/model-registry/upstream/frontend/src/odh/hooks/useNotificationListener.ts

@@ -17,39 +17,40 @@ const NOTIFICATION_BRIDGE_EVENT = 'odh-notification-bridge';
 
 export const useNotificationListener = (): void => {
   const { notifications } = useContext(NotificationContext);
-  const lastNotificationIdRef = useRef<number | undefined>();
+  const lastBridgedIndexRef = useRef(0);
 
   useEffect(() => {
-    if (notifications.length > 0) {
-      const lastNotification = notifications[notifications.length - 1];
-      
-      // Only dispatch event for new notifications we haven't seen before
-      if (
-        lastNotification.id !== undefined &&
-        lastNotification.id !== lastNotificationIdRef.current &&
-        !lastNotification.hidden
-      ) {
-        lastNotificationIdRef.current = lastNotification.id;
-        
-        try {
-          const messageStr =
-            typeof lastNotification.message === 'string' ? lastNotification.message : undefined;
-
-          // Dispatch a custom event that the midstream can listen to
-          const event = new CustomEvent(NOTIFICATION_BRIDGE_EVENT, {
-            detail: {
-              status: lastNotification.status,
-              title: lastNotification.title,
-              message: messageStr,
-              timestamp: lastNotification.timestamp?.toISOString() || new Date().toISOString(),
-            },
-          });
-          
-          window.dispatchEvent(event);
-        } catch (error) {
-          console.error('[NotificationBridge] Failed to dispatch notification:', error);
-        }
+    const newNotifications = notifications.slice(lastBridgedIndexRef.current);
+    lastBridgedIndexRef.current = notifications.length;
+
+    newNotifications.forEach((notification) => {
+      if (notification.hidden || typeof notification.title !== 'string') {
+        return;
+      }
+
+      try {
+        const messageStr =
+          typeof notification.messageText === 'string'
+            ? notification.messageText
+            : typeof notification.message === 'string'
+              ? notification.message
+              : undefined;
+
+        const detail: Record<string, unknown> = {
+          status: notification.status,
+          title: notification.title,
+          message: messageStr,
+          timestamp: notification.timestamp?.toISOString() || new Date().toISOString(),
+          ...(notification.linkUrl && notification.linkLabel && {
+            linkUrl: notification.linkUrl,
+            linkLabel: notification.linkLabel,
+          }),
+        };
+
+        window.dispatchEvent(new CustomEvent(NOTIFICATION_BRIDGE_EVENT, { detail }));
+      } catch (error) {
+        console.error('[NotificationBridge] Failed to dispatch notification:', error);
       }
-    }
+    });
   }, [notifications]);
 };