Fix auth redirect on the Dashboard page (rilldata#3600)

* Small cleanup

* Redirect to login page for all admin server 401s

* After login, redirect to previous page

web-admin/src/client/utils.ts

@@ -0,0 +1,18 @@
+import type { Query } from "@tanstack/svelte-query";
+
+export function isAdminServerQuery(query: Query): boolean {
+  const [apiPath] = query.queryKey as string[];
+  const adminApiEndpoints = [
+    "/v1/deployments",
+    "/v1/github",
+    "/v1/organizations",
+    "/v1/projects",
+    "/v1/services",
+    "/v1/superuser",
+    "/v1/telemetry",
+    "/v1/tokens",
+    "/v1/users",
+  ];
+
+  return adminApiEndpoints.some((endpoint) => apiPath.startsWith(endpoint));
+}

web-admin/src/features/errors/error-utils.ts

@@ -1,6 +1,11 @@
 import { goto } from "$app/navigation";
 import { page } from "$app/stores";
-import { getScreenNameFromPage } from "@rilldata/web-admin/features/navigation/nav-utils";
+import { isAdminServerQuery } from "@rilldata/web-admin/client/utils";
+import {
+  getScreenNameFromPage,
+  isDashboardPage,
+  isProjectPage,
+} from "@rilldata/web-admin/features/navigation/nav-utils";
 import { errorEvent } from "@rilldata/web-common/metrics/initMetrics";
 import type { Query } from "@tanstack/query-core";
 import type { QueryClient } from "@tanstack/svelte-query";
@@ -13,10 +18,6 @@ import { ErrorStoreState, errorStore } from "./error-store";
 
 export function createGlobalErrorCallback(queryClient: QueryClient) {
   return (error: AxiosError, query: Query) => {
-    const isProjectPage = get(page).route.id === "/[organization]/[project]";
-    const isDashboardPage =
-      get(page).route.id === "/[organization]/[project]/[dashboard]";
-
     const screenName = getScreenNameFromPage(get(page));
     if (!error.response) {
       errorEvent?.fireHTTPErrorBoundaryEvent(
@@ -35,8 +36,17 @@ export function createGlobalErrorCallback(queryClient: QueryClient) {
       );
     }
 
+    // If unauthorized to the admin server, redirect to login page
+    if (isAdminServerQuery(query) && error.response?.status === 401) {
+      goto(
+        `${ADMIN_URL}/auth/login?redirect=${window.location.origin}${window.location.pathname}`
+      );
+      return;
+    }
+
     // Special handling for some errors on the Project page
-    if (isProjectPage && error.response?.status === 400) {
+    const onProjectPage = isProjectPage(get(page));
+    if (onProjectPage && error.response?.status === 400) {
       // If "repository not found", ignore the error and show the page
       if (
         (error.response.data as RpcStatus).message === "repository not found"
@@ -52,7 +62,8 @@ export function createGlobalErrorCallback(queryClient: QueryClient) {
     }
 
     // Special handling for some errors on the Dashboard page
-    if (isDashboardPage) {
+    const onDashboardPage = isDashboardPage(get(page));
+    if (onDashboardPage) {
       // If a dashboard wasn't found, let +page.svelte handle the error.
       // Because the project may be reconciling, in which case we want to show a loading spinner not a 404.
       if (
@@ -69,12 +80,6 @@ export function createGlobalErrorCallback(queryClient: QueryClient) {
       }
     }
 
-    // If Unauthorized, redirect to login page
-    if (error.response?.status === 401) {
-      goto(`${ADMIN_URL}/auth/login?redirect=${window.origin}`);
-      return;
-    }
-
     // Create a pretty message for the error page
     const errorStoreState = createErrorStoreStateFromAxiosError(error);