fix: don't call window reload every time we receive an alert (#251)

* fix: don't call window reload every time we receive an alert

* feat: add ReactQueryDevtools

* chore: remove notification code

* feat: more granular invalidation of data when alerts SSE is received

Author: alex-mcgovern

package-lock.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@stacklok/ui-kit": "^1.0.1-1",
     "@tanstack/react-query": "^5.64.1",
+    "@tanstack/react-query-devtools": "^5.66.0",
     "@types/prismjs": "^1.26.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@untitled-ui/icons-react": "^0.1.4",

package.json

@@ -7,12 +7,19 @@ vi.mock("react-router-dom", () => ({
   useLocation: vi.fn(() => ({ pathname: "/" })),
 }));
 
-const mockSendNotification = vi.fn();
-vi.mock("../useBrowserNotification", () => ({
-  useBrowserNotification: vi.fn(() => {
-    return { sendNotification: mockSendNotification };
-  }),
-}));
+const mockInvalidate = vi.fn();
+
+vi.mock("@tanstack/react-query", async () => {
+  const original = await vi.importActual<
+    typeof import("@tanstack/react-query")
+  >("@tanstack/react-query");
+  return {
+    ...original,
+    useQueryClient: () => ({
+      invalidateQueries: mockInvalidate,
+    }),
+  };
+});
 
 class MockEventSource {
   static instances: MockEventSource[] = [];
@@ -63,7 +70,7 @@ describe("useSse", () => {
     global.EventSource = originalEventSource;
   });
 
-  it("should send notification if new alert is detected", () => {
+  it("should invalidate queries if new alert is detected", () => {
     renderHook(() => useSse(), { wrapper: TestQueryClientProvider });
 
     expect(MockEventSource.instances.length).toBe(1);
@@ -76,29 +83,6 @@ describe("useSse", () => {
       MockEventSource.triggerMessage("new alert detected");
     });
 
-    expect(mockSendNotification).toHaveBeenCalledWith("CodeGate Dashboard", {
-      body: "New Alert detected!",
-    });
-
-    act(() => {
-      vi.advanceTimersByTime(2000);
-    });
-
-    expect(global.location.reload).toHaveBeenCalled();
-  });
-
-  it("should send notification if new alert is detected", () => {
-    renderHook(() => useSse(), { wrapper: TestQueryClientProvider });
-
-    act(() => {
-      MockEventSource.triggerMessage("other message");
-    });
-
-    expect(mockSendNotification).not.toHaveBeenCalledWith(
-      "CodeGate Dashboard",
-      {
-        body: "New Alert detected!",
-      },
-    );
+    expect(mockInvalidate).toHaveBeenCalled();
   });
 });

src/hooks/__tests__/useBrowserNotification.test.ts

@@ -1,13 +1,16 @@
 import { useEffect } from "react";
-import { useBrowserNotification } from "./useBrowserNotification";
 import { useLocation } from "react-router-dom";
-import { useQueryClient } from "@tanstack/react-query";
+import { Query, useQueryClient } from "@tanstack/react-query";
+import { OpenApiTsReactQueryKey } from "@/types/openapi-ts";
+import {
+  v1GetWorkspaceAlertsQueryKey,
+  v1GetWorkspaceMessagesQueryKey,
+} from "@/api/generated/@tanstack/react-query.gen";
 
 const BASE_URL = import.meta.env.VITE_BASE_API_URL;
 
 export function useSse() {
   const location = useLocation();
-  const { sendNotification } = useBrowserNotification();
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -17,19 +20,25 @@ export function useSse() {
 
     eventSource.onmessage = function (event) {
       if (event.data.toLowerCase().includes("new alert detected")) {
-        queryClient.invalidateQueries({ refetchType: "all" });
-        sendNotification("CodeGate Dashboard", {
-          body: "New Alert detected!",
+        queryClient.invalidateQueries({
+          refetchType: "all",
+          predicate: (
+            query: Query<unknown, Error, unknown, OpenApiTsReactQueryKey>,
+          ) =>
+            query.queryKey[0]._id ===
+              v1GetWorkspaceAlertsQueryKey({
+                path: { workspace_name: "default" }, // NOTE: Just supplying "default" to satisfy the type-checker, because we are just using the `_id`, this invalidates for any workspace
+              })[0]?._id ||
+            query.queryKey[0]._id ===
+              v1GetWorkspaceMessagesQueryKey({
+                path: { workspace_name: "default" }, // NOTE: Just supplying "default" to satisfy the type-checker, because we are just using the `_id`, this invalidates for any workspace
+              })[0]?._id,
         });
-
-        setTimeout(() => {
-          window.location.reload();
-        }, 2000);
       }
     };
 
     return () => {
       eventSource.close();
     };
-  }, [location.pathname, queryClient, sendNotification]);
+  }, [location.pathname, queryClient]);
 }

src/hooks/__tests__/useSee.test.ts

@@ -12,6 +12,7 @@ import { QueryClientProvider } from "./components/react-query-provider.tsx";
 import { BrowserRouter } from "react-router-dom";
 import { UiKitClientSideRoutingProvider } from "./lib/ui-kit-client-side-routing.tsx";
 import { ConfirmProvider } from "./context/confirm-context.tsx";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Initialize the API client
 client.setConfig({
@@ -31,6 +32,7 @@ createRoot(document.getElementById("root")!).render(
                   <App />
                 </ConfirmProvider>
               </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
             </QueryClientProvider>
           </SidebarProvider>
         </DarkModeProvider>

src/hooks/useBrowserNotification.ts

@@ -0,0 +1,11 @@
+import { OptionsLegacyParser } from "@hey-api/client-fetch";
+
+export type OpenApiTsReactQueryKey = [
+  Pick<
+    OptionsLegacyParser,
+    "baseUrl" | "body" | "headers" | "path" | "query"
+  > & {
+    _id: string;
+    _infinite?: boolean;
+  },
+];