feat(ToastNotification): keep toast notification open when user hovers it (#1288)

Signed-off-by: David Edler <david.edler@canonical.com>

Author: edlerd

src/components/Notifications/ToastNotification/ToastNotification.test.tsx

@@ -187,4 +187,28 @@ describe("ToastNotification", () => {
 
     expect(onDismiss).toHaveBeenCalledWith(notifications);
   });
+
+  it("calls onHoverStart on mouse enter and onHoverEnd on mouse leave", async () => {
+    const onHoverStart = jest.fn();
+    const onHoverEnd = jest.fn();
+
+    render(
+      <ToastNotification
+        notification={baseNotification}
+        show={true}
+        onDismiss={jest.fn()}
+        onHoverStart={onHoverStart}
+        onHoverEnd={onHoverEnd}
+      />,
+    );
+
+    const toast = screen.getByRole("alert");
+    const user = userEvent.setup();
+
+    await user.hover(toast);
+    expect(onHoverStart).toHaveBeenCalledTimes(1);
+
+    await user.unhover(toast);
+    expect(onHoverEnd).toHaveBeenCalledTimes(1);
+  });
 });

src/components/Notifications/ToastNotification/ToastNotification.tsx

@@ -11,9 +11,17 @@ interface Props {
   notification: ToastNotificationType;
   onDismiss: (notification?: ToastNotificationType[]) => void;
   show: boolean;
+  onHoverStart?: () => void;
+  onHoverEnd?: () => void;
 }
 
-const ToastNotification: FC<Props> = ({ notification, onDismiss, show }) => {
+const ToastNotification: FC<Props> = ({
+  notification,
+  onDismiss,
+  show,
+  onHoverStart,
+  onHoverEnd,
+}) => {
   if (!notification) {
     return null;
   }
@@ -36,7 +44,11 @@ const ToastNotification: FC<Props> = ({ notification, onDismiss, show }) => {
           options={{ duration: 200 }}
           className="toast-animate"
         >
-          <div className="toast-notification">
+          <div
+            className="toast-notification"
+            onMouseEnter={onHoverStart}
+            onMouseLeave={onHoverEnd}
+          >
             <Notification
               title={notification.title ?? DefaultTitles[notification.type]}
               actions={notification.actions}

src/components/Notifications/ToastNotification/ToastNotificationProvider.tsx

@@ -217,6 +217,20 @@ const ToastNotificationProvider: FC<PropsWithChildren<Props>> = ({
     });
   };
 
+  const pauseTimer = () => {
+    if (notificationTimer && typeof notificationTimer !== "boolean") {
+      clearTimeout(notificationTimer);
+      setNotificationTimer(true); // mark as paused
+    }
+  };
+
+  const resumeTimer = () => {
+    if (notificationTimer === true) {
+      // only resume if previously paused
+      showNotificationWithDelay();
+    }
+  };
+
   const addNotification = (
     notification: NotificationType & { error?: unknown } & {
       id?: ToastNotificationType["id"];
@@ -311,6 +325,8 @@ const ToastNotificationProvider: FC<PropsWithChildren<Props>> = ({
         notification={latestNotification}
         onDismiss={clear}
         show={!!showNotification}
+        onHoverStart={pauseTimer}
+        onHoverEnd={resumeTimer}
       />
       <ToastNotificationList
         notifications={notifications}