From b7d11444a9373830b2568ab60757cfced6f6f868 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 6 Jan 2025 19:01:10 +0530 Subject: [PATCH] feat: resolved bug on org change select and project on change --- frontend/package-lock.json | 118 +++++++++--------- frontend/package.json | 4 +- .../OrganizationLayout/OrganizationLayout.tsx | 19 ++- .../layouts/ProjectLayout/ProjectLayout.tsx | 19 ++- .../ProjectSelect/ProjectSelect.tsx | 4 +- .../src/pages/middlewares/authenticate.tsx | 1 - .../GithubOauthCallbackPage/route.tsx | 4 +- 7 files changed, 95 insertions(+), 74 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a374dd22d..3a9482a56 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -44,7 +44,7 @@ "@radix-ui/react-tooltip": "^1.1.5", "@sindresorhus/slugify": "^2.2.1", "@tanstack/react-query": "^5.62.7", - "@tanstack/react-router": "^1.87.9", + "@tanstack/react-router": "^1.95.1", "@tanstack/virtual-file-routes": "^1.87.6", "@tanstack/zod-adapter": "^1.91.0", "@types/nprogress": "^0.2.3", @@ -93,7 +93,7 @@ "@tailwindcss/typography": "^0.5.15", "@tanstack/eslint-plugin-router": "^1.87.6", "@tanstack/router-devtools": "^1.87.9", - "@tanstack/router-plugin": "^1.87.11", + "@tanstack/router-plugin": "^1.95.1", "@types/argon2-browser": "^1.18.4", "@types/file-saver": "^2.0.7", "@types/jsrp": "^0.2.6", @@ -1003,6 +1003,23 @@ "node": ">=12" } }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/openbsd-x64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", @@ -3635,9 +3652,9 @@ } }, "node_modules/@tanstack/history": { - "version": "1.87.6", - "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.87.6.tgz", - "integrity": "sha512-5OPHcc20Ye5XR+RBkFk+64TtRJ83clrpaOcC/S8t4N0k+/xPDJpkPEPnoENb3sQeRI28y1dJaUuvXt/dv/ylaQ==", + "version": "1.95.0", + "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.95.0.tgz", + "integrity": "sha512-w1/yWuIBqmG0Z0MPMf1OuOCce7FXyVH4L4dIA4rvpnjIUCH8qRUgloFAVg37nTMUbOmhMsY2NZDxCpKBv+CLJg==", "license": "MIT", "engines": { "node": ">=12" @@ -3674,13 +3691,13 @@ } }, "node_modules/@tanstack/react-router": { - "version": "1.87.9", - "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.87.9.tgz", - "integrity": "sha512-oHmgGsN5rEZkRfCDei9OisOGDpLTUgdriW8nNvaNwYdnd1x7igR4gXYbX57Pv7JJjG0CHsmlR/2Oisp7JYoZqA==", + "version": "1.95.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.95.1.tgz", + "integrity": "sha512-P5x4yNhcdkYsCEoYeGZP8Q9Jlxf0WXJa4G/xvbmM905seZc9FqJqvCSRvX3dWTPOXRABhl4g+8DHqfft0c/AvQ==", "license": "MIT", "dependencies": { - "@tanstack/history": "1.87.6", - "@tanstack/react-store": "^0.6.1", + "@tanstack/history": "1.95.0", + "@tanstack/react-store": "^0.7.0", "jsesc": "^3.0.2", "tiny-invariant": "^1.3.3", "tiny-warning": "^1.0.3" @@ -3693,24 +3710,18 @@ "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/router-generator": "^1.87.7", "react": ">=18", "react-dom": ">=18" - }, - "peerDependenciesMeta": { - "@tanstack/router-generator": { - "optional": true - } } }, "node_modules/@tanstack/react-store": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.6.1.tgz", - "integrity": "sha512-6gOopOpPp1cAXkEyTEv6tMbAywwFunvIdCKN/SpEiButUayjXU+Q5Sp5Y3hREN3VMR4OA5+RI5SPhhJoqP9e4w==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.7.0.tgz", + "integrity": "sha512-S/Rq17HaGOk+tQHV/yrePMnG1xbsKZIl/VsNWnNXt4XW+tTY8dTlvpJH2ZQ3GRALsusG5K6Q3unAGJ2pd9W/Ng==", "license": "MIT", "dependencies": { - "@tanstack/store": "0.6.0", - "use-sync-external-store": "^1.2.2" + "@tanstack/store": "0.7.0", + "use-sync-external-store": "^1.4.0" }, "funding": { "type": "github", @@ -3762,10 +3773,10 @@ } }, "node_modules/@tanstack/router-generator": { - "version": "1.87.7", - "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.87.7.tgz", - "integrity": "sha512-w9Px1C6DM0YNVXvu1VjUuZ5el0ykOeofEmEZBW83VUTzvCXFpcjPCHncU9FO9uXup8NFIxNfGz+xpwf93GoFnQ==", - "devOptional": true, + "version": "1.95.1", + "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.95.1.tgz", + "integrity": "sha512-bUymh20C9AdtwLdZkgfx04S3N9yvm8S60xFFJu1dyYI7gn5g4aPSPYaQKYFmPhc+kQJ67ZbmWVkFBKHZ8YGYvA==", + "dev": true, "license": "MIT", "dependencies": { "@tanstack/virtual-file-routes": "^1.87.6", @@ -3779,12 +3790,20 @@ "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-router": "^1.95.1" + }, + "peerDependenciesMeta": { + "@tanstack/react-router": { + "optional": true + } } }, "node_modules/@tanstack/router-plugin": { - "version": "1.87.11", - "resolved": "https://registry.npmjs.org/@tanstack/router-plugin/-/router-plugin-1.87.11.tgz", - "integrity": "sha512-mg8Ci9IT2H5aDBM6DippwKr1AHTBc6eudgpvHRMelGxLl4VY7vlKNx5Ds5yZeqE9Jp6VNr2z7E0xx70e8cFoBg==", + "version": "1.95.1", + "resolved": "https://registry.npmjs.org/@tanstack/router-plugin/-/router-plugin-1.95.1.tgz", + "integrity": "sha512-d8iIaehb/6fAUdhHOuIP/9B9pEXLy0AWTX8yWIK9PB3r/kSShWqNDrx7Qj0O6dg3xK3yiwHSNqPQMtA03s0vag==", "dev": true, "license": "MIT", "dependencies": { @@ -3796,13 +3815,13 @@ "@babel/template": "^7.25.9", "@babel/traverse": "^7.26.4", "@babel/types": "^7.26.3", - "@tanstack/router-generator": "^1.87.7", + "@tanstack/router-generator": "^1.95.1", "@tanstack/virtual-file-routes": "^1.87.6", "@types/babel__core": "^7.20.5", "@types/babel__generator": "^7.6.8", "@types/babel__template": "^7.4.4", "@types/babel__traverse": "^7.20.6", - "babel-dead-code-elimination": "^1.0.6", + "babel-dead-code-elimination": "^1.0.8", "chokidar": "^3.6.0", "unplugin": "^1.16.0", "zod": "^3.23.8" @@ -3832,9 +3851,9 @@ } }, "node_modules/@tanstack/store": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.6.0.tgz", - "integrity": "sha512-+m2OBglsjXcLmmKOX6/9v8BDOCtyxhMmZLsRUDswOOSdIIR9mvv6i0XNKsmTh3AlYU8c1mRcodC8/Vyf+69VlQ==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.7.0.tgz", + "integrity": "sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==", "license": "MIT", "funding": { "type": "github", @@ -4782,9 +4801,9 @@ } }, "node_modules/babel-dead-code-elimination": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/babel-dead-code-elimination/-/babel-dead-code-elimination-1.0.6.tgz", - "integrity": "sha512-JxFi9qyRJpN0LjEbbjbN8g0ux71Qppn9R8Qe3k6QzHg2CaKsbUQtbn307LQGiDLGjV6JCtEFqfxzVig9MyDCHQ==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/babel-dead-code-elimination/-/babel-dead-code-elimination-1.0.8.tgz", + "integrity": "sha512-og6HQERk0Cmm+nTT4Od2wbPtgABXFMPaHACjbKLulZIFMkYyXZLkUGuAxdgpMJBrxyt/XFpSz++lNzjbcMnPkQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7274,7 +7293,7 @@ "version": "4.8.1", "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz", "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "resolve-pkg-maps": "^1.0.0" @@ -9466,7 +9485,7 @@ "version": "3.4.2", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", - "devOptional": true, + "dev": true, "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" @@ -10204,7 +10223,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", - "devOptional": true, + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" @@ -11210,7 +11229,7 @@ "version": "4.19.2", "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "esbuild": "~0.23.0", @@ -11532,23 +11551,6 @@ "node": ">=18" } }, - "node_modules/tsx/node_modules/@esbuild/openbsd-arm64": { - "version": "0.23.1", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", - "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, "node_modules/tsx/node_modules/@esbuild/openbsd-x64": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", @@ -11638,7 +11640,7 @@ "version": "0.23.1", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", - "devOptional": true, + "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { diff --git a/frontend/package.json b/frontend/package.json index 1d7cd8bd0..6e92ba789 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -48,7 +48,7 @@ "@radix-ui/react-tooltip": "^1.1.5", "@sindresorhus/slugify": "^2.2.1", "@tanstack/react-query": "^5.62.7", - "@tanstack/react-router": "^1.87.9", + "@tanstack/react-router": "^1.95.1", "@tanstack/virtual-file-routes": "^1.87.6", "@tanstack/zod-adapter": "^1.91.0", "@types/nprogress": "^0.2.3", @@ -97,7 +97,7 @@ "@tailwindcss/typography": "^0.5.15", "@tanstack/eslint-plugin-router": "^1.87.6", "@tanstack/router-devtools": "^1.87.9", - "@tanstack/router-plugin": "^1.87.11", + "@tanstack/router-plugin": "^1.95.1", "@types/argon2-browser": "^1.18.4", "@types/file-saver": "^2.0.7", "@types/jsrp": "^0.2.6", diff --git a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx index 8ccae5f29..34a975da1 100644 --- a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx +++ b/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) { diff --git a/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx b/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx index d6ebbe984..a41e13cdb 100644 --- a/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx +++ b/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) { diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx index bac15d545..0ba943b7b 100644 --- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx +++ b/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={{ diff --git a/frontend/src/pages/middlewares/authenticate.tsx b/frontend/src/pages/middlewares/authenticate.tsx index da67f8f9d..7810690e5 100644 --- a/frontend/src/pages/middlewares/authenticate.tsx +++ b/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, diff --git a/frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx b/frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx index 8071fc316..3452e045f 100644 --- a/frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx +++ b/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(