feat(folder-sec-overview): implemented folder based ui for sec overview

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

@@ -1 +1,7 @@
-export { useCreateFolder, useDeleteFolder, useGetProjectFolders, useUpdateFolder } from './queries';
+export {
+  useCreateFolder,
+  useDeleteFolder,
+  useGetProjectFolders,
+  useGetProjectFoldersBatch,
+  useUpdateFolder
+} from './queries';

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { apiRequest } from '@app/config/request';
 
@@ -7,6 +7,7 @@ import { secretSnapshotKeys } from '../secretSnapshots/queries';
 import {
   CreateFolderDTO,
   DeleteFolderDTO,
+  GetProjectFoldersBatchDTO,
   GetProjectFoldersDTO,
   TSecretFolder,
   UpdateFolderDTO
@@ -17,6 +18,26 @@ const queryKeys = {
     ['secret-folders', { workspaceId, environment, parentFolderId }] as const
 };
 
+const fetchProjectFolders = async (
+  workspaceId: string,
+  environment: string,
+  parentFolderId?: string,
+  parentFolderPath?: string
+) => {
+  const { data } = await apiRequest.get<{ folders: TSecretFolder[]; dir: TSecretFolder[] }>(
+    '/api/v1/folders',
+    {
+      params: {
+        workspaceId,
+        environment,
+        parentFolderId,
+        parentFolderPath
+      }
+    }
+  );
+  return data;
+};
+
 export const useGetProjectFolders = ({
   workspaceId,
   parentFolderId,
@@ -27,19 +48,7 @@ export const useGetProjectFolders = ({
   useQuery({
     queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderId),
     enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
-    queryFn: async () => {
-      const { data } = await apiRequest.get<{ folders: TSecretFolder[]; dir: TSecretFolder[] }>(
-        '/api/v1/folders',
-        {
-          params: {
-            workspaceId,
-            environment,
-            parentFolderId
-          }
-        }
-      );
-      return data;
-    },
+    queryFn: async () => fetchProjectFolders(workspaceId, environment, parentFolderId),
     select: useCallback(
       ({ folders, dir }: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
         dir,
@@ -53,6 +62,25 @@ export const useGetProjectFolders = ({
     )
   });
 
+export const useGetProjectFoldersBatch = ({
+  folders = [],
+  isPaused,
+  parentFolderPath
+}: GetProjectFoldersBatchDTO) =>
+  useQueries({
+    queries: folders.map(({ workspaceId, environment, parentFolderId }) => ({
+      queryKey: queryKeys.getSecretFolders(workspaceId, environment, parentFolderPath),
+      queryFn: async () =>
+        fetchProjectFolders(workspaceId, environment, parentFolderId, parentFolderPath),
+      enabled: Boolean(workspaceId) && Boolean(environment) && !isPaused,
+      select: (data: { folders: TSecretFolder[]; dir: TSecretFolder[] }) => ({
+        environment,
+        folders: data.folders,
+        dir: data.dir
+      })
+    }))
+  });
+
 export const useCreateFolder = () => {
   const queryClient = useQueryClient();
 

frontend/src/hooks/api/secretFolders/types.ts

@@ -11,6 +11,12 @@ export type GetProjectFoldersDTO = {
   sortDir?: 'asc' | 'desc';
 };
 
+export type GetProjectFoldersBatchDTO = {
+  folders: Omit<GetProjectFoldersDTO, 'isPaused' | 'sortDir'>[];
+  isPaused?: boolean;
+  parentFolderPath?: string;
+};
+
 export type CreateFolderDTO = {
   workspaceId: string;
   environment: string;