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;

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

@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+import { useCallback } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import {
@@ -29,14 +30,16 @@ export const secretKeys = {
 const fetchProjectEncryptedSecrets = async (
   workspaceId: string,
   env: string | string[],
-  folderId?: string
+  folderId?: string,
+  secretPath?: string
 ) => {
   if (typeof env === 'string') {
     const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
       params: {
         environment: env,
         workspaceId,
-        folderId: folderId || undefined
+        folderId: folderId || undefined,
+        secretPath
       }
     });
     return data.secrets;
@@ -52,7 +55,8 @@ const fetchProjectEncryptedSecrets = async (
         params: {
           environment: envPoint,
           workspaceId,
-          folderId
+          folderId,
+          secretPath
         }
       });
       allEnvData = allEnvData.concat(data.secrets);
@@ -77,7 +81,7 @@ export const useGetProjectSecrets = ({
     enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
     queryKey: secretKeys.getProjectSecret(workspaceId, env, folderId),
     queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId),
-    select: (data) => {
+    select: useCallback((data: EncryptedSecret[]) => {
       const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
       const latestKey = decryptFileKey;
       const key = decryptAssymmetric({
@@ -146,21 +150,24 @@ export const useGetProjectSecrets = ({
         }
       });
       return { secrets: sharedSecrets };
-    }
+    }, [])
   });
 
 export const useGetProjectSecretsByKey = ({
   workspaceId,
   env,
   decryptFileKey,
-  isPaused
+  isPaused,
+  folderId,
+  secretPath
 }: GetProjectSecretsDTO) =>
   useQuery({
     // wait for all values to be available
     enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
-    queryKey: secretKeys.getProjectSecret(workspaceId, env),
-    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env),
-    select: (data) => {
+    // right now secretpath is passed as folderid as only this is used in overview
+    queryKey: secretKeys.getProjectSecret(workspaceId, env, secretPath),
+    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env, folderId, secretPath),
+    select: useCallback((data: EncryptedSecret[]) => {
       const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
       const latestKey = decryptFileKey;
       const key = decryptAssymmetric({
@@ -235,7 +242,7 @@ export const useGetProjectSecretsByKey = ({
       });
 
       return { secrets: sharedSecrets, uniqueSecCount: Object.keys(uniqSecKeys).length };
-    }
+    }, [])
   });
 
 const fetchEncryptedSecretVersion = async (secretId: string, offset: number, limit: number) => {
@@ -256,7 +263,7 @@ export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
     enabled: Boolean(dto.secretId && dto.decryptFileKey),
     queryKey: secretKeys.getSecretVersion(dto.secretId),
     queryFn: () => fetchEncryptedSecretVersion(dto.secretId, dto.offset, dto.limit),
-    select: (data) => {
+    select: useCallback((data: EncryptedSecretVersion[]) => {
       const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
       const latestKey = dto.decryptFileKey;
       const key = decryptAssymmetric({
@@ -278,7 +285,7 @@ export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
           })
         }))
         .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
-    }
+    }, [])
   });
 
 export const useBatchSecretsOp = () => {

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

@@ -96,6 +96,7 @@ export type GetProjectSecretsDTO = {
   env: string | string[];
   decryptFileKey: UserWsKeyPair;
   folderId?: string;
+  secretPath?: string;
   isPaused?: boolean;
   onSuccess?: (data: DecryptedSecret[]) => void;
 };