feat: bug fixes in overview page and dashboard page

frontend-v2/src/components/navigation/NavHeader.tsx

@@ -71,7 +71,7 @@ export default function NavHeader({
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
-        to={`/org/${currentOrg?.id}/overview`}
+        to="/organization/secret-manager/overview"
         className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary"
       >
         {currentOrg?.name}

frontend-v2/src/context/ProjectPermissionContext/ProjectPermissionContext.tsx

@@ -28,6 +28,7 @@ export const useProjectPermission = () => {
   } = useSuspenseQuery({
     queryKey: roleQueryKeys.getUserProjectPermissions({ workspaceId: projectId }),
     queryFn: () => fetchUserProjectPermissions({ workspaceId: projectId }),
+    staleTime: Infinity,
     select: (data) => {
       const rule = unpackRules<RawRuleOf<MongoAbility<ProjectPermissionSet>>>(data.permissions);
       const negatedRules = groupBy(

frontend-v2/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -473,7 +473,7 @@ export const OverviewPage = () => {
     navigate({
       search: (prev) => ({
         ...prev,
-        secretPath: `${routerSearch?.secretPath || ""}/${path}`
+        secretPath: `${routerSearch.secretPath === "/" ? "" : routerSearch.secretPath}/${path}`
       })
     }).then(() => {
       setFilter(DEFAULT_FILTER_STATE);
@@ -504,7 +504,7 @@ export const OverviewPage = () => {
       }
     }
 
-    const query: Record<string, string> = { ...routerSearch, env: slug, searchFilter };
+    const query: Record<string, string> = { ...routerSearch, search: searchFilter };
     const envIndex = visibleEnvs.findIndex((el) => slug === el.slug);
     if (envIndex !== -1) {
       navigate({

frontend-v2/src/pages/secret-manager/OverviewPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,8 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/overview"
 )({
   component: OverviewPage,
-  validateSearch: zodValidator(SecretOverviewPageQuerySchema)
+  validateSearch: zodValidator(SecretOverviewPageQuerySchema),
+  search: {
+    middlewares: [stripSearchParams({ secretPath: "/", search: "" })]
+  }
 });

frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -129,7 +129,7 @@ const Page = () => {
 
   const defaultFilterState = {
     tags: {},
-    searchFilter: (routerQueryParams.searchFilter as string) || "",
+    searchFilter: (routerQueryParams.search as string) || "",
     // these should always be on by default for the UI, they will be disabled for the query below based off permissions
     include: {
       [RowType.Folder]: true,
@@ -143,7 +143,6 @@ const Page = () => {
   const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(filter.searchFilter);
   const [filterHistory, setFilterHistory] = useState<Map<string, Filter>>(new Map());
 
-  // TODO(rbr): check why this fails
   const createSecretPopUp = usePopUpState(PopUpNames.CreateSecretForm);
   const { togglePopUp } = usePopUpAction();
 
@@ -261,8 +260,11 @@ const Page = () => {
 
   const handleEnvChange = (slug: string) => {
     navigate({
+      params: {
+        envSlug: slug
+      },
       search: (state) => {
-        const newState = { ...state, secretPath: undefined, env: slug };
+        const newState = { ...state, secretPath: undefined };
         return newState;
       }
     });
@@ -316,17 +318,6 @@ const Page = () => {
     const restore = filterHistory.get(secretPath);
     setFilter(restore ?? defaultFilterState);
     setDebouncedSearchFilter(restore?.searchFilter ?? "");
-
-    // this is a temp work around until we fully transition state to query params,
-    // setting the initial search filter by query and then moving it to internal state
-    if (routerQueryParams.searchFilter) {
-      navigate({
-        search: (state) => {
-          const { searchFilter, ...query } = state;
-          return query;
-        }
-      });
-    }
   }, [secretPath]);
 
   useEffect(() => {

frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx

@@ -90,7 +90,7 @@ export const FolderListView = ({
   };
 
   const handleFolderClick = (name: string) => {
-    const path = `${secretPathQueryparam || ""}/${name}`;
+    const path = `${secretPathQueryparam === "/" ? "" : secretPathQueryparam}/${name}`;
     navigate({
       search: (el) => ({ ...el, secretPath: path })
     }).then(() => onNavigateToFolder(path));

frontend-v2/src/pages/secret-manager/SecretDashboardPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,8 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
 )({
   component: SecretDashboardPage,
-  validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema)
+  validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema),
+  search: {
+    middlewares: [stripSearchParams({ secretPath: "/", search: "", tags: "" })]
+  }
 });

frontend-v2/src/pages/secret-manager/SettingsPage/SettingsPage.tsx

@@ -48,7 +48,7 @@ export const SettingsPage = () => {
         <div className="my-6">
           <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
         </div>
-        <Tabs>
+        <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs
               .filter((el) => !el.isHidden)