feat: resolved bug on org change select and project on change

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-router";
 
 import { Mfa } from "@app/components/auth/Mfa";
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
@@ -10,9 +11,11 @@ import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Menu, MenuItem } from "@app/components/v2";
 import { useUser } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
-import { useSelectOrganization } from "@app/hooks/api";
+import { useSelectOrganization, workspaceKeys } from "@app/hooks/api";
+import { authKeys } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
+import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
 import { SidebarFooter } from "./components/SidebarFooter";
@@ -27,10 +30,15 @@ export const OrganizationLayout = () => {
 
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
   const { mutateAsync: selectOrganization } = useSelectOrganization();
+  const navigate = useNavigate();
+  const router = useRouter();
+  const queryClient = useQueryClient();
 
   const { t } = useTranslation();
-
   const handleOrgChange = async (orgId: string) => {
+    queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
+    queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
+
     const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
       organizationId: orgId
     });
@@ -42,9 +50,10 @@ export const OrganizationLayout = () => {
       }
       toggleShowMfa.on();
       setMfaSuccessCallback(() => () => handleOrgChange(orgId));
+      return;
     }
-
-    // await navigateUserToOrg(router, orgId);
+    await router.invalidate();
+    await navigateUserToOrg(navigate, orgId);
   };
 
   if (shouldShowMfa) {

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -2,7 +2,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, Outlet } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-router";
 
 import { Mfa } from "@app/components/auth/Mfa";
 import SecurityClient from "@app/components/utilities/SecurityClient";
@@ -12,10 +13,13 @@ import { useToggle } from "@app/hooks";
 import {
   useGetAccessRequestsCount,
   useGetSecretApprovalRequestCount,
-  useSelectOrganization
+  useSelectOrganization,
+  workspaceKeys
 } from "@app/hooks/api";
+import { authKeys } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
+import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 import { SidebarFooter } from "../OrganizationLayout/components/SidebarFooter";
@@ -26,6 +30,7 @@ import { SidebarHeader } from "./components/SidebarHeader";
 // If the product layout differs significantly, create a new layout as needed.
 export const ProjectLayout = () => {
   const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate();
 
   const [shouldShowMfa, toggleShowMfa] = useToggle(false);
   const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
@@ -36,6 +41,8 @@ export const ProjectLayout = () => {
   const { mutateAsync: selectOrganization } = useSelectOrganization();
 
   const { t } = useTranslation();
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
 
@@ -46,6 +53,9 @@ export const ProjectLayout = () => {
     (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
 
   const handleOrgChange = async (orgId: string) => {
+    queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
+    queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
+
     const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
       organizationId: orgId
     });
@@ -57,9 +67,10 @@ export const ProjectLayout = () => {
       }
       toggleShowMfa.on();
       setMfaSuccessCallback(() => () => handleOrgChange(orgId));
+      return;
     }
-
-    // await navigateUserToOrg(router, orgId);
+    await router.invalidate();
+    await navigateUserToOrg(navigate, orgId);
   };
 
   if (shouldShowMfa) {

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -17,7 +17,7 @@ import {
   useSubscription,
   useWorkspace
 } from "@app/context";
-import { getProjectHomePage, getProjectTitle } from "@app/helpers/project";
+import { getProjectTitle } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
@@ -194,7 +194,7 @@ export const ProjectSelect = () => {
           // todo(akhi): this is not using react query because react query in overview is throwing error when envs are not exact same count
           // to reproduce change this back to router.push and switch between two projects with different env count
           // look into this on dashboard revamp
-          window.location.assign(getProjectHomePage(project));
+          window.location.assign(`/${project.type}/${project.id}/overview`);
         }}
         options={options}
         components={{

frontend/src/pages/middlewares/authenticate.tsx

@@ -10,7 +10,6 @@ export const Route = createFileRoute("/_authenticate")({
     if (!context.serverConfig.initialized) {
       throw redirect({ to: "/admin/signup" });
     }
-
     const data = await context.queryClient
       .ensureQueryData({
         queryKey: authKeys.getAuthToken,

frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx

@@ -6,8 +6,8 @@ import { GithubOauthCallbackPage } from "./GithubOauthCallbackPage";
 
 export const GithubOAuthCallbackPageQueryParamsSchema = z.object({
   state: z.string().catch(""),
-  installation_id: z.string(),
-  code: z.string()
+  installation_id: z.string().catch(""),
+  code: z.string().catch("")
 });
 
 export const Route = createFileRoute(