improvements: address feedback

backend/src/server/routes/v1/project-router.ts

@@ -680,7 +680,7 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
 
   server.route({
     method: "GET",
-    url: "/:workspaceId/folders/project-environments",
+    url: "/:workspaceId/folders/environment-folder-tree",
     config: {
       rateLimit: readLimit
     },

backend/src/services/secret-folder/secret-folder-fns.ts

@@ -0,0 +1,17 @@
+import { TSecretFolders } from "@app/db/schemas";
+import { InternalServerError } from "@app/lib/errors";
+
+export const buildFolderPath = (
+  folder: TSecretFolders,
+  foldersMap: Record<string, TSecretFolders>,
+  depth: number = 0
+): string => {
+  if (depth > 20) {
+    throw new InternalServerError({ message: "Maximum folder depth of 20 exceeded" });
+  }
+  if (!folder.parentId) {
+    return depth === 0 ? "/" : "";
+  }
+
+  return `${buildFolderPath(foldersMap[folder.parentId], foldersMap, depth + 1)}/${folder.name}`;
+};

backend/src/services/secret-folder/secret-folder-service.ts

@@ -2,12 +2,13 @@ import { ForbiddenError, subject } from "@casl/ability";
 import path from "path";
 import { v4 as uuidv4, validate as uuidValidate } from "uuid";
 
-import { ActionProjectType, TSecretFolders, TSecretFoldersInsert } from "@app/db/schemas";
+import { ActionProjectType, TSecretFoldersInsert } from "@app/db/schemas";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
 import { TSecretSnapshotServiceFactory } from "@app/ee/services/secret-snapshot/secret-snapshot-service";
 import { BadRequestError, NotFoundError } from "@app/lib/errors";
 import { OrderByDirection, OrgServiceActor } from "@app/lib/types";
+import { buildFolderPath } from "@app/services/secret-folder/secret-folder-fns";
 
 import { TProjectDALFactory } from "../project/project-dal";
 import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
@@ -608,14 +609,7 @@ export const secretFolderServiceFactory = ({
 
         const foldersWithPath = relevantFolders.map((folder) => ({
           ...folder,
-          path: folder.parentId
-            ? (function buildPath(f: TSecretFolders): string {
-                if (!f.parentId) {
-                  return "";
-                }
-                return `${buildPath(foldersMap[f.parentId])}/${f.name}`;
-              })(folder)
-            : "/"
+          path: buildFolderPath(folder, foldersMap)
         }));
 
         return [env.slug, { ...env, folders: foldersWithPath }];

frontend/src/components/permissions/AccessTree/AccessTree.tsx

@@ -29,8 +29,6 @@ import { useAccessTree } from "./hooks";
 import { FolderNode, RoleNode } from "./nodes";
 import { ViewMode } from "./types";
 
-import "@xyflow/react/dist/style.css";
-
 export type AccessTreeProps = {
   permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
 };
@@ -63,7 +61,7 @@ const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
         duration: 1000,
         maxZoom: 1
       });
-    }, 5);
+    }, 1);
   }, [fitView, nodes, edges, getViewport()]);
 
   const handleToggleModalView = () =>

frontend/src/components/permissions/AccessTree/hooks/index.ts

@@ -22,7 +22,7 @@ export const useAccessTree = (permissions: MongoAbility<ProjectPermissionSet, Mo
   const [nodes, setNodes] = useNodesState<Node>([]);
   const [edges, setEdges] = useEdgesState<Edge>([]);
   const [subject, setSubject] = useState(ProjectPermissionSub.Secrets);
-  const [environment, setEnvironment] = useState(currentWorkspace.environments[0].slug);
+  const [environment, setEnvironment] = useState(currentWorkspace.environments[0]?.slug ?? "");
   const { data: environmentsFolders, isPending } = useListProjectEnvironmentsFolders(
     currentWorkspace.id
   );

frontend/src/components/permissions/AccessTree/nodes/FolderNode/FolderNode.tsx

@@ -48,6 +48,7 @@ export const FolderNode = ({
 
             return (
               <Tooltip
+                key={action}
                 className="hidden" // just using the tooltip to trigger node toolbar
                 content={
                   <FolderNodeTooltipContent

frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx

@@ -70,9 +70,9 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
                   </span>
                   <span> when:</span>
                   {Object.entries(rule.conditions).map(([key, condition]) => (
-                    <ul key={key} className="list-[square] pl-4">
+                    <ul key={`${action}_${index + 1}_${key}`} className="list-[square] pl-4">
                       {Object.entries(condition as object).map(([operator, value]) => (
-                        <li>
+                        <li key={`${action}_${index + 1}_${key}_${operator}`}>
                           <span className="font-medium capitalize text-mineshaft-100">
                             {camelCaseToSpaces(key)}
                           </span>{" "}

frontend/src/components/permissions/AccessTree/utils/createFolderNode.ts

@@ -150,7 +150,7 @@ export const createFolderNode = ({
     })
   );
 
-  let height = 84;
+  let height: number;
 
   switch (subject) {
     case ProjectPermissionSub.DynamicSecrets:

frontend/src/hooks/api/secretFolders/queries.tsx

@@ -56,7 +56,7 @@ export const useListProjectEnvironmentsFolders = (
     queryKey: folderQueryKeys.getProjectEnvironmentsFolders(projectId),
     queryFn: async () => {
       const { data } = await apiRequest.get<TProjectEnvironmentsFolders>(
-        `/api/v1/workspace/${projectId}/folders/project-environments`
+        `/api/v1/workspace/${projectId}/folders/environment-folder-tree`
       );
       return data;
     },

frontend/src/main.tsx

@@ -10,6 +10,7 @@ import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
+import "@xyflow/react/dist/style.css";
 import "nprogress/nprogress.css";
 import "react-toastify/dist/ReactToastify.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";