PMM-11231 Rework redirect to login

ui/src/components/main/Main.tsx

@@ -6,22 +6,24 @@ import { useAuth } from 'contexts/auth';
 export const Main = () => {
   const { isLoading } = useAuth();
 
+  if (isLoading) {
+    return (
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          padding: 10,
+        }}
+      >
+        <CircularProgress data-testid="pmm-loading-indicator" />
+      </Stack>
+    );
+  }
+
   return (
     <Stack>
       <AppBar />
-      {isLoading ? (
-        <Stack
-          alignItems="center"
-          justifyContent="center"
-          sx={{
-            padding: 10,
-          }}
-        >
-          <CircularProgress data-testid="pmm-loading-indicator" />
-        </Stack>
-      ) : (
-        <Outlet />
-      )}
+      <Outlet />
     </Stack>
   );
 };

ui/src/constants.ts

@@ -1 +1,2 @@
 export const PMM_HOME_URL = '/graph/d/pmm-home';
+export const PMM_LOGIN_URL = '/graph/login';

ui/src/contexts/auth/auth.provider.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useEffect } from 'react';
+import { FC, PropsWithChildren, useMemo } from 'react';
 import { AuthContext } from './auth.context';
 import { useQuery } from '@tanstack/react-query';
 import { rotateToken } from 'api/auth';
@@ -13,15 +13,16 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
     refetchIntervalInBackground: true,
     retry: false,
   });
-
-  useEffect(() => {
+  const shouldRedirectToLogin = useMemo(() => {
     const response = (error as AxiosError)?.response;
-
-    if (response?.status === HttpStatusCode.Unauthorized) {
-      redirectToLogin();
-    }
+    return response?.status === HttpStatusCode.Unauthorized;
   }, [error]);
 
+  if (shouldRedirectToLogin) {
+    redirectToLogin();
+    return null;
+  }
+
   return (
     <AuthContext.Provider value={{ isLoading }}>
       {children}

ui/src/contexts/auth/auth.utils.ts

@@ -1,3 +1,5 @@
+import { PMM_LOGIN_URL } from 'constants';
+
 export const getSessionExpiry = () => {
   const expiryCookie = getSessionExpiryCookie();
 
@@ -33,5 +35,5 @@ export const getSessionExpiryCookie = () =>
     .find((row) => row.startsWith('grafana_session_expiry='));
 
 export const redirectToLogin = () => {
-  window.location.replace('/graph/login');
+  window.location.replace(PMM_LOGIN_URL);
 };