feature: server-side pagination/filtering/sorting for secrets overview and main pages

frontend/src/hooks/api/dashboard/index.ts

@@ -0,0 +1 @@
+export { useGetProjectSecretsDetails } from "./queries";

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

@@ -0,0 +1,274 @@
+import { useCallback } from "react";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+import { createNotification } from "@app/components/notifications";
+import { apiRequest } from "@app/config/request";
+import {
+  DashboardProjectSecretsDetails,
+  DashboardProjectSecretsDetailsResponse,
+  DashboardProjectSecretsOverview,
+  DashboardProjectSecretsOverviewResponse,
+  DashboardSecretsOrderBy,
+  TGetDashboardProjectSecretsDetailsDTO,
+  TGetDashboardProjectSecretsOverviewDTO
+} from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { mergePersonalSecrets } from "@app/hooks/api/secrets/queries";
+import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+
+export const dashboardKeys = {
+  all: () => ["dashboard"] as const,
+  getDashboardSecrets: ({
+    projectId,
+    secretPath
+  }: Pick<TGetDashboardProjectSecretsDetailsDTO, "projectId" | "secretPath">) =>
+    [...dashboardKeys.all(), { projectId, secretPath }] as const,
+  getProjectSecretsOverview: ({
+    projectId,
+    secretPath,
+    ...params
+  }: TGetDashboardProjectSecretsOverviewDTO) =>
+    [
+      ...dashboardKeys.getDashboardSecrets({ projectId, secretPath }),
+      "secrets-overview",
+      params
+    ] as const,
+  getProjectSecretsDetails: ({
+    projectId,
+    secretPath,
+    environment,
+    ...params
+  }: TGetDashboardProjectSecretsDetailsDTO) =>
+    [
+      ...dashboardKeys.getDashboardSecrets({ projectId, secretPath }),
+      environment,
+      "secrets-details",
+      params
+    ] as const
+};
+
+export const fetchProjectSecretsOverview = async ({
+  includeFolders,
+  includeSecrets,
+  includeDynamicSecrets,
+  environments,
+  ...params
+}: TGetDashboardProjectSecretsOverviewDTO) => {
+  const { data } = await apiRequest.get<DashboardProjectSecretsOverviewResponse>(
+    "/api/v3/dashboard/secrets-overview",
+    {
+      params: {
+        ...params,
+        environments: encodeURIComponent(environments.join(",")),
+        includeFolders: includeFolders ? "1" : "",
+        includeSecrets: includeSecrets ? "1" : "",
+        includeDynamicSecrets: includeDynamicSecrets ? "1" : ""
+      }
+    }
+  );
+
+  return data;
+};
+
+export const fetchProjectSecretsDetails = async ({
+  includeFolders,
+  includeImports,
+  includeSecrets,
+  includeDynamicSecrets,
+  tags,
+  ...params
+}: TGetDashboardProjectSecretsDetailsDTO) => {
+  const { data } = await apiRequest.get<DashboardProjectSecretsDetailsResponse>(
+    "/api/v3/dashboard/secrets-details",
+    {
+      params: {
+        ...params,
+        includeImports: includeImports ? "1" : "",
+        includeFolders: includeFolders ? "1" : "",
+        includeSecrets: includeSecrets ? "1" : "",
+        includeDynamicSecrets: includeDynamicSecrets ? "1" : "",
+        tags: encodeURIComponent(
+          Object.entries(tags)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            .filter(([_, enabled]) => enabled)
+            .map(([tag]) => tag)
+            .join(",")
+        )
+      }
+    }
+  );
+
+  return data;
+};
+
+export const useGetProjectSecretsOverview = (
+  {
+    projectId,
+    secretPath,
+    offset = 0,
+    limit = 100,
+    orderBy = DashboardSecretsOrderBy.Name,
+    orderDirection = OrderByDirection.ASC,
+    search = "",
+    includeSecrets,
+    includeFolders,
+    includeDynamicSecrets,
+    environments
+  }: TGetDashboardProjectSecretsOverviewDTO,
+  options?: Omit<
+    UseQueryOptions<
+      DashboardProjectSecretsOverviewResponse,
+      unknown,
+      DashboardProjectSecretsOverview,
+      ReturnType<typeof dashboardKeys.getProjectSecretsOverview>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    ...options,
+    // wait for all values to be available
+    enabled: Boolean(projectId) && (options?.enabled ?? true) && Boolean(environments.length),
+    queryKey: dashboardKeys.getProjectSecretsOverview({
+      secretPath,
+      search,
+      limit,
+      orderBy,
+      orderDirection,
+      offset,
+      projectId,
+      includeSecrets,
+      includeFolders,
+      includeDynamicSecrets,
+      environments
+    }),
+    queryFn: () =>
+      fetchProjectSecretsOverview({
+        secretPath,
+        search,
+        limit,
+        orderBy,
+        orderDirection,
+        offset,
+        projectId,
+        includeSecrets,
+        includeFolders,
+        includeDynamicSecrets,
+        environments
+      }),
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const serverResponse = error.response?.data as { message: string };
+        createNotification({
+          title: "Error fetching secret details",
+          type: "error",
+          text: serverResponse.message
+        });
+      }
+    },
+    select: useCallback((data: Awaited<ReturnType<typeof fetchProjectSecretsOverview>>) => {
+      const { secrets, ...select } = data;
+
+      let sanitizedSecrets: Record<string, Record<string, SecretV3RawSanitized>> = {};
+
+      if (secrets) {
+        sanitizedSecrets = {};
+        Object.entries(secrets).forEach(([env, rawSecrets]) => {
+          sanitizedSecrets[env] = mergePersonalSecrets(rawSecrets).reduce<
+            Record<string, SecretV3RawSanitized>
+          >((prev, curr) => ({ ...prev, [curr.key]: curr }), {});
+        });
+      }
+      return {
+        ...select,
+        ...(secrets && {
+          secrets: sanitizedSecrets
+        })
+      };
+    }, []),
+    keepPreviousData: true
+  });
+};
+
+export const useGetProjectSecretsDetails = (
+  {
+    projectId,
+    secretPath,
+    environment,
+    offset = 0,
+    limit = 100,
+    orderBy = DashboardSecretsOrderBy.Name,
+    orderDirection = OrderByDirection.ASC,
+    search = "",
+    includeSecrets,
+    includeFolders,
+    includeImports,
+    includeDynamicSecrets,
+    tags
+  }: TGetDashboardProjectSecretsDetailsDTO,
+  options?: Omit<
+    UseQueryOptions<
+      DashboardProjectSecretsDetailsResponse,
+      unknown,
+      DashboardProjectSecretsDetails,
+      ReturnType<typeof dashboardKeys.getProjectSecretsDetails>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    ...options,
+    // wait for all values to be available
+    enabled: Boolean(projectId) && (options?.enabled ?? true),
+    queryKey: dashboardKeys.getProjectSecretsDetails({
+      secretPath,
+      search,
+      limit,
+      orderBy,
+      orderDirection,
+      offset,
+      projectId,
+      environment,
+      includeSecrets,
+      includeFolders,
+      includeImports,
+      includeDynamicSecrets,
+      tags
+    }),
+    queryFn: () =>
+      fetchProjectSecretsDetails({
+        secretPath,
+        search,
+        limit,
+        orderBy,
+        orderDirection,
+        offset,
+        projectId,
+        environment,
+        includeSecrets,
+        includeFolders,
+        includeImports,
+        includeDynamicSecrets,
+        tags
+      }),
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const serverResponse = error.response?.data as { message: string };
+        createNotification({
+          title: "Error fetching secret details",
+          type: "error",
+          text: serverResponse.message
+        });
+      }
+    },
+    select: useCallback(
+      (data: Awaited<ReturnType<typeof fetchProjectSecretsDetails>>) => ({
+        ...data,
+        secrets: data.secrets ? mergePersonalSecrets(data.secrets) : undefined
+      }),
+      []
+    ),
+    keepPreviousData: true
+  });
+};

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

@@ -0,0 +1,68 @@
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
+import { TSecretImport } from "@app/hooks/api/secretImports/types";
+import { SecretV3Raw, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+
+export type DashboardProjectSecretsOverviewResponse = {
+  folders?: { [key: string]: TSecretFolder[] };
+  dynamicSecrets?: { [key: string]: TDynamicSecret[] };
+  secrets?: { [key: string]: SecretV3Raw[] };
+  totalSecretCount?: number;
+  totalFolderCount?: number;
+  totalDynamicSecretCount?: number;
+  totalCount: number;
+};
+
+export type DashboardProjectSecretsDetailsResponse = {
+  imports?: TSecretImport[];
+  folders?: TSecretFolder[];
+  dynamicSecrets?: TDynamicSecret[];
+  secrets?: SecretV3Raw[];
+  totalImportCount?: number;
+  totalFolderCount?: number;
+  totalDynamicSecretCount?: number;
+  totalSecretCount?: number;
+  totalCount: number;
+};
+
+export type DashboardProjectSecretsOverview = Omit<
+  DashboardProjectSecretsOverviewResponse,
+  "secrets"
+> & {
+  secrets?: Record<string, Record<string, SecretV3RawSanitized>>;
+};
+
+export type DashboardProjectSecretsDetails = Omit<
+  DashboardProjectSecretsDetailsResponse,
+  "secrets"
+> & {
+  secrets?: SecretV3RawSanitized[];
+};
+
+export enum DashboardSecretsOrderBy {
+  Name = "name"
+}
+
+export type TGetDashboardProjectSecretsOverviewDTO = {
+  projectId: string;
+  secretPath: string;
+  offset?: number;
+  limit?: number;
+  orderBy?: DashboardSecretsOrderBy;
+  orderDirection?: OrderByDirection;
+  search?: string;
+  includeSecrets?: boolean;
+  includeFolders?: boolean;
+  includeDynamicSecrets?: boolean;
+  environments: string[];
+};
+
+export type TGetDashboardProjectSecretsDetailsDTO = Omit<
+  TGetDashboardProjectSecretsOverviewDTO,
+  "environments"
+> & {
+  environment: string;
+  includeImports?: boolean;
+  tags: Record<string, boolean>;
+};

frontend/src/hooks/api/dynamicSecret/mutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
 import { dynamicSecretKeys } from "./queries";
 import {
@@ -22,6 +23,8 @@ export const useCreateDynamicSecret = () => {
       return data.dynamicSecret;
     },
     onSuccess: (_, { path, environmentSlug, projectSlug }) => {
+      // TODO: optimize but we currently don't pass projectId
+      queryClient.invalidateQueries(dashboardKeys.all());
       queryClient.invalidateQueries(dynamicSecretKeys.list({ path, projectSlug, environmentSlug }));
     }
   });
@@ -39,6 +42,8 @@ export const useUpdateDynamicSecret = () => {
       return data.dynamicSecret;
     },
     onSuccess: (_, { path, environmentSlug, projectSlug }) => {
+      // TODO: optimize but currently don't pass projectId
+      queryClient.invalidateQueries(dashboardKeys.all());
       queryClient.invalidateQueries(dynamicSecretKeys.list({ path, projectSlug, environmentSlug }));
     }
   });
@@ -56,6 +61,8 @@ export const useDeleteDynamicSecret = () => {
       return data.dynamicSecret;
     },
     onSuccess: (_, { path, environmentSlug, projectSlug }) => {
+      // TODO: optimize but currently don't pass projectId
+      queryClient.invalidateQueries(dashboardKeys.all());
       queryClient.invalidateQueries(dynamicSecretKeys.list({ path, projectSlug, environmentSlug }));
     }
   });

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

@@ -8,6 +8,7 @@ import {
 } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import {
@@ -124,6 +125,12 @@ export const useCreateFolder = () => {
       return data;
     },
     onSuccess: (_, { projectId, environment, path }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({
+          projectId,
+          secretPath: path ?? "/"
+        })
+      );
       queryClient.invalidateQueries(
         folderQueryKeys.getSecretFolders({ projectId, environment, path })
       );
@@ -151,6 +158,12 @@ export const useUpdateFolder = () => {
       return data;
     },
     onSuccess: (_, { projectId, environment, path }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({
+          projectId,
+          secretPath: path ?? "/"
+        })
+      );
       queryClient.invalidateQueries(
         folderQueryKeys.getSecretFolders({ projectId, environment, path })
       );
@@ -179,6 +192,12 @@ export const useDeleteFolder = () => {
       return data;
     },
     onSuccess: (_, { path = "/", projectId, environment }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({
+          projectId,
+          secretPath: path
+        })
+      );
       queryClient.invalidateQueries(
         folderQueryKeys.getSecretFolders({ projectId, environment, path })
       );
@@ -206,6 +225,12 @@ export const useUpdateFolderBatch = () => {
     },
     onSuccess: (_, { projectId, folders }) => {
       folders.forEach((folder) => {
+        queryClient.invalidateQueries(
+          dashboardKeys.getDashboardSecrets({
+            projectId,
+            secretPath: folder.path ?? "/"
+          })
+        );
         queryClient.invalidateQueries(
           folderQueryKeys.getSecretFolders({
             projectId,

frontend/src/hooks/api/secretImports/mutation.tsx

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
 import { secretImportKeys } from "./queries";
 import {
@@ -31,6 +32,9 @@ export const useCreateSecretImport = () => {
       queryClient.invalidateQueries(
         secretImportKeys.getSecretImportSecrets({ projectId, environment, path })
       );
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId, secretPath: path ?? "/" })
+      );
     }
   });
 };
@@ -55,6 +59,9 @@ export const useUpdateSecretImport = () => {
       queryClient.invalidateQueries(
         secretImportKeys.getSecretImportSecrets({ environment, path, projectId })
       );
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId, secretPath: path ?? "/" })
+      );
     }
   });
 };
@@ -93,6 +100,9 @@ export const useDeleteSecretImport = () => {
       queryClient.invalidateQueries(
         secretImportKeys.getSecretImportSecrets({ projectId, environment, path })
       );
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId, secretPath: path ?? "/" })
+      );
     }
   });
 };

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

@@ -1,6 +1,7 @@
 import { MutationOptions, useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
 import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
@@ -44,6 +45,9 @@ export const useCreateSecretV3 = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -96,6 +100,9 @@ export const useUpdateSecretV3 = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -139,6 +146,9 @@ export const useDeleteSecretV3 = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -172,6 +182,9 @@ export const useCreateSecretBatch = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -205,6 +218,9 @@ export const useUpdateSecretBatch = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -240,6 +256,9 @@ export const useDeleteSecretBatch = ({
       return data;
     },
     onSuccess: (_, { workspaceId, environment, secretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
@@ -295,6 +314,12 @@ export const useMoveSecrets = ({
       return data;
     },
     onSuccess: (_, { projectId, sourceEnvironment, sourceSecretPath }) => {
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({
+          projectId,
+          secretPath: sourceSecretPath
+        })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({
           workspaceId: projectId,

frontend/src/hooks/utils/index.ts

@@ -0,0 +1 @@
+export * from "./secrets-overview";

frontend/src/hooks/utils/secrets-overview.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useMemo } from "react";
+
+import { DashboardProjectSecretsOverview } from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+
+export const useFolderOverview = (
+  folders: DashboardProjectSecretsOverview["folders"],
+  orderDirection: OrderByDirection
+) => {
+  const folderNames = useMemo(() => {
+    const names = new Set<string>();
+    Object.values(folders ?? {})?.forEach((folderGroup) => {
+      folderGroup.forEach((folder) => {
+        names.add(folder.name);
+      });
+    });
+    return [...names].sort((a, b) =>
+      orderDirection === OrderByDirection.ASC ? a.localeCompare(b) : b.localeCompare(a)
+    );
+  }, [folders]);
+
+  const isFolderPresentInEnv = useCallback(
+    (name: string, env: string) => {
+      return Boolean(folders?.[env]?.find(({ name: folderName }) => folderName === name));
+    },
+    [folders]
+  );
+
+  const getFolderByNameAndEnv = useCallback(
+    (name: string, env: string) => {
+      return folders?.[env]?.find(({ name: folderName }) => folderName === name);
+    },
+    [folders]
+  );
+
+  return { folderNames, isFolderPresentInEnv, getFolderByNameAndEnv };
+};
+
+export const useDynamicSecretOverview = (
+  dynamicSecrets: DashboardProjectSecretsOverview["dynamicSecrets"],
+  orderDirection: OrderByDirection
+) => {
+  const dynamicSecretNames = useMemo(() => {
+    const names = new Set<string>();
+    Object.values(dynamicSecrets ?? {})?.forEach((folderGroup) => {
+      folderGroup.forEach((folder) => {
+        names.add(folder.name);
+      });
+    });
+    return [...names].sort((a, b) =>
+      orderDirection === OrderByDirection.ASC ? a.localeCompare(b) : b.localeCompare(a)
+    );
+  }, [dynamicSecrets]);
+
+  const isDynamicSecretPresentInEnv = useCallback(
+    (name: string, env: string) => {
+      return Boolean(
+        dynamicSecrets?.[env]?.find(({ name: dynamicSecretName }) => dynamicSecretName === name)
+      );
+    },
+    [dynamicSecrets]
+  );
+
+  return { dynamicSecretNames, isDynamicSecretPresentInEnv };
+};
+
+export const useSecretOverview = (
+  secrets: DashboardProjectSecretsOverview["secrets"],
+  orderDirection: OrderByDirection
+) => {
+  const secKeys = useMemo(() => {
+    const keys = new Set<string>();
+    Object.values(secrets ?? {})?.forEach((secretGroup) => {
+      Object.keys(secretGroup || {}).forEach((key) => {
+        keys.add(key);
+      });
+    });
+    return [...keys].sort((a, b) =>
+      orderDirection === OrderByDirection.ASC ? a.localeCompare(b) : b.localeCompare(a)
+    );
+  }, [secrets]);
+
+  const getEnvSecretKeyCount = useCallback(
+    (env: string) => {
+      return Object.keys(secrets?.[env] || {}).length;
+    },
+    [secrets]
+  );
+
+  const getSecretByKey = useCallback(
+    (env: string, key: string) => {
+      const sec = secrets?.[env]?.[key];
+      return sec;
+    },
+    [secrets]
+  );
+
+  return { secKeys, getSecretByKey, getEnvSecretKeyCount };
+};