adjust when we clear query cache

gitpod-io · Sep 20, 2023 · 1e0af49 · 1e0af49
1 parent 0bc9cb3
commit 1e0af49
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 35 deletions.
diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
@@ -21,6 +21,7 @@ import { SSOLoginForm } from "./login/SSOLoginForm";
 import { useAuthProviders } from "./data/auth-providers/auth-provider-query";
 import { SetupPending } from "./login/SetupPending";
 import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
+import { useQueryClient } from "@tanstack/react-query";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -35,6 +36,7 @@ type LoginProps = {
 };
 export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
     const { setUser } = useContext(UserContext);
+    const client = useQueryClient();
 
     const urlHash = useMemo(() => getURLHash(), []);
 
@@ -65,10 +67,12 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
     const updateUser = useCallback(async () => {
         await getGitpodService().reconnect();
-        const [user] = await Promise.all([getGitpodService().server.getLoggedInUser()]);
+        const user = await getGitpodService().server.getLoggedInUser();
+        // Clear the query cache on login to reset it
+        client.clear();
         setUser(user);
         markLoggedIn();
-    }, [setUser]);
+    }, [client, setUser]);
 
     const authorizeSuccessful = useCallback(async () => {
         updateUser().catch(console.error);

diff --git a/components/dashboard/src/menu/Menu.tsx b/components/dashboard/src/menu/Menu.tsx
@@ -20,6 +20,7 @@ import { isGitpodIo } from "../utils";
 import OrganizationSelector from "./OrganizationSelector";
 import { getAdminTabs } from "../admin/admin.routes";
 import classNames from "classnames";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface Entry {
     title: string;
@@ -167,6 +168,8 @@ type UserMenuProps = {
     onFeedback?: () => void;
 };
 const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedbackLink, onFeedback }) => {
+    const client = useQueryClient();
+
     const extraSection = useMemo(() => {
         const items: ContextMenuEntry[] = [];
 
@@ -191,6 +194,42 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
         return items;
     }, [onFeedback, user?.rolesOrPermissions, withAdminLink, withFeedbackLink]);
 
+    const menuEntries = useMemo(() => {
+        return [
+            {
+                title: (user && (User.getPrimaryEmail(user) || user?.name)) || "User",
+                customFontStyle: "text-gray-400",
+                separator: true,
+            },
+            {
+                title: "User Settings",
+                link: "/user/settings",
+            },
+            {
+                title: "Docs",
+                href: "https://www.gitpod.io/docs/",
+                target: "_blank",
+                rel: "noreferrer",
+            },
+            {
+                title: "Help",
+                href: "https://www.gitpod.io/support/",
+                target: "_blank",
+                rel: "noreferrer",
+                separator: true,
+            },
+            ...extraSection,
+            {
+                title: "Log out",
+                href: gitpodHostUrl.asApiLogout().toString(),
+                // Clear query cache on logout
+                onClick: () => {
+                    client.clear();
+                },
+            },
+        ];
+    }, [client, extraSection, user]);
+
     return (
         <div
             className={classNames(
@@ -199,37 +238,7 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
             )}
             data-analytics='{"label":"Account"}'
         >
-            <ContextMenu
-                menuEntries={[
-                    {
-                        title: (user && (User.getPrimaryEmail(user) || user?.name)) || "User",
-                        customFontStyle: "text-gray-400",
-                        separator: true,
-                    },
-                    {
-                        title: "User Settings",
-                        link: "/user/settings",
-                    },
-                    {
-                        title: "Docs",
-                        href: "https://www.gitpod.io/docs/",
-                        target: "_blank",
-                        rel: "noreferrer",
-                    },
-                    {
-                        title: "Help",
-                        href: "https://www.gitpod.io/support/",
-                        target: "_blank",
-                        rel: "noreferrer",
-                        separator: true,
-                    },
-                    ...extraSection,
-                    {
-                        title: "Log out",
-                        href: gitpodHostUrl.asApiLogout().toString(),
-                    },
-                ]}
-            >
+            <ContextMenu menuEntries={menuEntries}>
                 <img className="rounded-full w-8 h-8" src={user?.avatarUrl || ""} alt={user?.name || "Anonymous"} />
             </ContextMenu>
         </div>

diff --git a/components/dashboard/src/user-context.tsx b/components/dashboard/src/user-context.tsx
@@ -29,7 +29,10 @@ const UserContextProvider: React.FC = ({ children }) => {
     const doSetUser = useCallback(
         (updatedUser: User) => {
             updateErrorUserDetails(updatedUser);
-            if (user?.id !== updatedUser.id) {
+            // If user has changed clear cache
+            // Ignore the case where user hasn't been set yet - initial load
+            if (user && user?.id !== updatedUser.id) {
+                console.log("user changed, clearing query cache");
                 client.clear();
             }
             setUser(updatedUser);
@@ -53,7 +56,7 @@ const UserContextProvider: React.FC = ({ children }) => {
                 }, frequencyMs);
             }
         },
-        [user?.id, setUser, client],
+        [user, client],
     );
 
     // Wrap value in useMemo to avoid unnecessary re-renders