Reload menu when switching branch (#4776)

frontend/app/src/components/account-menu.tsx

@@ -91,7 +91,7 @@ const UnauthenticatedAccountMenu = () => {
   return (
     <DropdownMenu>
       <Link
-        className="flex items-center h-14 w-full rounded-lg p-2 gap-2 hover:bg-indigo-50 overflow-hidden"
+        className="flex items-center h-14 w-full rounded-lg p-2 gap-2 hover:bg-indigo-50 overflow-hidden shrink-0"
         to="/login"
         state={{ from: location }}
       >
@@ -206,7 +206,7 @@ const AuthenticatedAccountMenu = ({
 
 const AccountMenuSkeleton = () => {
   return (
-    <div className="flex items-center gap-2 p-2">
+    <div className="flex items-center gap-2 p-2 shrink-0">
       <Skeleton className="rounded-full h-10 w-10" />
 
       <div className="flex-grow space-y-2 group-data-[collapsed=true]/sidebar:hidden">

frontend/app/src/hooks/useAuth.tsx

@@ -7,6 +7,7 @@ import { components } from "@/infraops";
 import { configState } from "@/state/atoms/config.atom";
 import { parseJwt } from "@/utils/common";
 import { fetchUrl } from "@/utils/fetch";
+import { ObservableQuery } from "@apollo/client";
 import { useAtom } from "jotai/index";
 import { ReactElement, ReactNode, createContext, useContext, useState } from "react";
 import { Navigate, useLocation } from "react-router-dom";
@@ -47,6 +48,12 @@ export const removeTokensInLocalStorage = () => {
   localStorage.removeItem(REFRESH_TOKEN_KEY);
 };
 
+const QUERY_TO_IGNORE = ["GET_PROFILE_DETAILS"];
+
+const shouldIgnoreQuery = (observableQuery: ObservableQuery) => {
+  return !!observableQuery.queryName && QUERY_TO_IGNORE.includes(observableQuery.queryName);
+};
+
 export const getNewToken = async () => {
   const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
 
@@ -126,7 +133,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const signOut = () => {
     removeTokensInLocalStorage();
     setAccessToken(null);
-    graphqlClient.refetchQueries({ include: "active" });
+    graphqlClient.refetchQueries({
+      include: "active",
+      onQueryUpdated(observableQuery) {
+        return !shouldIgnoreQuery(observableQuery);
+      },
+    });
   };
 
   const data = parseJwt(accessToken);

frontend/app/src/screens/layout/menu-navigation/menu-navigation.tsx

@@ -6,7 +6,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { MenuSectionInternal } from "@/screens/layout/menu-navigation/components/menu-section-internal";
 import { MenuSectionObject } from "@/screens/layout/menu-navigation/components/menu-section-object";
 import { currentBranchAtom } from "@/state/atoms/branches.atom";
-import { currentSchemaHashAtom, menuAtom } from "@/state/atoms/schema.atom";
+import { menuAtom } from "@/state/atoms/schema.atom";
 import { fetchUrl } from "@/utils/fetch";
 import { useAtom, useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
@@ -19,12 +19,11 @@ export interface MenuNavigationProps {
 export default function MenuNavigation({ isCollapsed }: MenuNavigationProps) {
   const { accessToken } = useAuth();
   const currentBranch = useAtomValue(currentBranchAtom);
-  const currentSchemaHash = useAtomValue(currentSchemaHashAtom);
   const [menu, setMenu] = useAtom(menuAtom);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (!currentSchemaHash) return;
+    if (!currentBranch) return;
 
     const headers = accessToken && {
       authorization: `Bearer ${accessToken}`,
@@ -39,7 +38,7 @@ export default function MenuNavigation({ isCollapsed }: MenuNavigationProps) {
     } finally {
       setIsLoading(false);
     }
-  }, [currentSchemaHash, accessToken]);
+  }, [currentBranch, accessToken]);
 
   if (isLoading) return <div>Loading...</div>;
   if (!menu?.sections) return <div className="flex-grow" />;