Web Notifications even handlers and fixing toaster bug (#21773)

 Web Notifications even handlers and fixing toaster bug

frontend/src/metabase/dashboard/reducers.js

@@ -314,7 +314,7 @@ const loadingDashCards = handleActions(
       next: state => ({
         ...state,
         loadingIds: state.dashcardIds,
-        loadingStatus: "running",
+        loadingStatus: state.dashcardIds.length > 0 ? "running" : "idle",
         startTime:
           state.dashcardIds.length > 0 &&
           // check that performance is defined just in case

frontend/src/metabase/dashboard/reducers.unit.spec.js

@@ -6,6 +6,8 @@ import {
   CLOSE_SIDEBAR,
   REMOVE_PARAMETER,
   SET_DASHBOARD_ATTRIBUTES,
+  FETCH_DASHBOARD_CARD_DATA,
+  FETCH_CARD_DATA,
 } from "./actions";
 
 describe("dashboard reducers", () => {
@@ -217,4 +219,80 @@ describe("dashboard reducers", () => {
       });
     });
   });
+
+  describe("Should accurately describe loading state", () => {
+    //Can't check straight equality due to state.loadingDashCards.startTime being a time.
+    it("should change to running when loading cards", () => {
+      const dashcardIds = [1, 2, 3];
+      const loadingMatch = {
+        dashcardIds: dashcardIds,
+        loadingIds: dashcardIds,
+        loadingStatus: "running",
+        startTime: expect.any(Number),
+      };
+
+      expect(
+        reducer(
+          {
+            ...initState,
+            loadingDashCards: {
+              dashcardIds: dashcardIds,
+            },
+          },
+          {
+            type: FETCH_DASHBOARD_CARD_DATA,
+            payload: {},
+          },
+        ),
+      ).toMatchObject({
+        ...initState,
+        loadingDashCards: loadingMatch,
+      });
+    });
+
+    it("should stay idle with no cards to load", () => {
+      expect(
+        reducer(initState, {
+          type: FETCH_DASHBOARD_CARD_DATA,
+          payload: {},
+        }),
+      ).toEqual({
+        ...initState,
+        loadingDashCards: {
+          dashcardIds: [],
+          loadingIds: [],
+          loadingStatus: "idle",
+          startTime: null,
+        },
+      });
+    });
+
+    it("should be complete when loading finishes", () => {
+      expect(
+        reducer(
+          {
+            ...initState,
+            loadingDashCards: {
+              dashcardIds: [1, 2, 3],
+              loadingIds: [3],
+              loadingStatus: "running",
+            },
+          },
+          {
+            type: FETCH_CARD_DATA,
+            payload: { dashcard_id: 3, card_id: 1, result: {} },
+          },
+        ),
+      ).toEqual({
+        ...initState,
+        loadingDashCards: {
+          dashcardIds: [1, 2, 3],
+          loadingIds: [],
+          loadingStatus: "complete",
+          startTime: null,
+        },
+        dashcardData: { 3: { 1: {} } },
+      });
+    });
+  });
 });

frontend/src/metabase/hooks/use-web-notification.ts

@@ -7,10 +7,31 @@ export function useWebNotification() {
   }, []);
 
   const showNotification = useCallback((title: string, body: string) => {
-    new Notification(title, {
+    const notification = new Notification(title, {
       body,
       icon: "app/assets/img/favicon-32x32.png",
     });
+
+    const closeNotification = (e: Event) => {
+      e.preventDefault();
+      notification.close();
+    };
+
+    notification.addEventListener("click", e => {
+      e.preventDefault();
+      window.focus();
+    });
+
+    window.addEventListener("beforeunload", closeNotification);
+
+    document.addEventListener(
+      "visibilitychange",
+      e => {
+        closeNotification(e);
+        window.removeEventListener("beforeunload", closeNotification);
+      },
+      { once: true },
+    );
   }, []);
 
   return [requestPermission, showNotification];