improvements: address feedback

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";