feature: secret overview page pagination/optimizations

2026-09-22 13:39:35 +00:00 · 2024-09-12 21:44:38 -07:00
parent 088e888560
commit a5f5f803df
4 changed files with 166 additions and 78 deletions
--- a/frontend/src/components/v2/Pagination/Pagination.tsx
+++ b/frontend/src/components/v2/Pagination/Pagination.tsx
@@ -1,3 +1,4 @@
+import {} from "@fortawesome/fontawesome-svg-core";
 import {
  faCaretDown,
  faCheck,
@@ -40,6 +41,8 @@ export const Pagination = ({
  const upperLimit = Math.ceil(count / perPage);
  const nextPageNumber = Math.min(upperLimit, page + 1);
  const canGoNext = page + 1 <= upperLimit;
+  const canGoFirst = page > 1;
+  const canGoLast = page < upperLimit;

  return (
    <div
@@ -73,6 +76,16 @@ export const Pagination = ({
        </DropdownMenu>
      </div>
      <div className="flex items-center space-x-4">
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-first"
+          className="relative"
+          onClick={() => onChangePage(1)}
+          isDisabled={!canGoFirst}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
+        </IconButton>
        <IconButton
          variant="plain"
          ariaLabel="pagination-prev"
@@ -89,6 +102,16 @@ export const Pagination = ({
        >
          <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
        </IconButton>
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-last"
+          className="relative"
+          onClick={() => onChangePage(upperLimit)}
+          isDisabled={!canGoLast}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
+        </IconButton>
      </div>
    </div>
  );
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/frontend/src/hooks/api/secretImports/queries.tsx
@@ -160,10 +160,9 @@ export const useGetImportedSecretsAllEnvs = ({
        projectId,
        path
      }),
-      queryFn: () => fetchImportedSecrets(projectId, env, path).catch(() => []),
-      enabled: Boolean(projectId) && Boolean(env),
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      select: (data: TImportedSecrets[]) => {
+      queryFn: async () => {
+        const data = await fetchImportedSecrets(projectId, env, path).catch(() => []);
+
        return data.map((el) => ({
          environment: el.environment,
          secretPath: el.secretPath,
@@ -183,7 +182,8 @@ export const useGetImportedSecretsAllEnvs = ({
            };
          })
        }));
-      }
+      },
+      enabled: Boolean(projectId) && Boolean(env)
    }))
  });

--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -24,6 +24,12 @@ export const secretKeys = {
  // this is also used in secretSnapshot part
  getProjectSecret: ({ workspaceId, environment, secretPath }: TGetProjectSecretsKey) =>
    [{ workspaceId, environment, secretPath }, "secrets"] as const,
+  getProjectSecretAllEnvironments: ({
+    workspaceId,
+    environment,
+    secretPath
+  }: TGetProjectSecretsKey) =>
+    [...secretKeys.getProjectSecret({ workspaceId, environment, secretPath }), "all"] as const,
  getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const
 };

@@ -95,7 +101,7 @@ export const useGetProjectSecrets = ({
 }: TGetProjectSecretsDTO & {
  options?: Omit<
    UseQueryOptions<
-      SecretV3RawResponse,
+      SecretV3RawSanitized[],
      unknown,
      SecretV3RawSanitized[],
      ReturnType<typeof secretKeys.getProjectSecret>
@@ -108,7 +114,10 @@ export const useGetProjectSecrets = ({
    // wait for all values to be available
    enabled: Boolean(workspaceId && environment) && (options?.enabled ?? true),
    queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: async () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+    queryFn: async () => {
+      const resp = await fetchProjectSecrets({ workspaceId, environment, secretPath });
+      return mergePersonalSecrets(resp.secrets);
+    },
    onError: (error) => {
      if (axios.isAxiosError(error)) {
        const serverResponse = error.response?.data as { message: string };
@@ -118,8 +127,7 @@ export const useGetProjectSecrets = ({
          text: serverResponse.message
        });
      }
-    },
-    select: ({ secrets }) => mergePersonalSecrets(secrets)
+    }
  });

 export const useGetProjectSecretsAllEnv = ({
@@ -131,7 +139,11 @@ export const useGetProjectSecretsAllEnv = ({

  const secrets = useQueries({
    queries: envs.map((environment) => ({
-      queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
+      queryKey: secretKeys.getProjectSecretAllEnvironments({
+        workspaceId,
+        environment,
+        secretPath
+      }),
      enabled: Boolean(workspaceId && environment),
      onError: (error: unknown) => {
        if (axios.isAxiosError(error) && !isErrorHandled) {
@@ -147,12 +159,15 @@ export const useGetProjectSecretsAllEnv = ({
          setIsErrorHandled.on();
        }
      },
-      queryFn: async () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
-      select: (el: SecretV3RawResponse) =>
-        mergePersonalSecrets(el.secrets).reduce<Record<string, SecretV3RawSanitized>>(
+      queryFn: async () => {
+        const resp = await fetchProjectSecrets({ workspaceId, environment, secretPath });
+
+        return mergePersonalSecrets(resp.secrets).reduce<Record<string, SecretV3RawSanitized>>(
          (prev, curr) => ({ ...prev, [curr.key]: curr }),
          {}
-        )
+        );
+      },
+      staleTime: 5 * 60 * 1000
    }))
  });

--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -31,6 +31,7 @@ import {
  Input,
  Modal,
  ModalContent,
+  Pagination,
  Table,
  TableContainer,
  TableSkeleton,
@@ -49,7 +50,7 @@ import {
  useProjectPermission,
  useWorkspace
 } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { useDebounce, usePopUp } from "@app/hooks";
 import {
  useCreateFolder,
  useCreateSecretV3,
@@ -78,6 +79,14 @@ export enum EntryType {
  SECRET = "secret"
 }

+enum RowType {
+  Folder = "folder",
+  DynamicSecret = "dynamic",
+  Secret = "Secret"
+}
+
+const INIT_PER_PAGE = 10;
+
 export const SecretOverviewPage = () => {
  const { t } = useTranslation();

@@ -101,6 +110,7 @@ export const SecretOverviewPage = () => {
  const workspaceId = currentWorkspace?.id as string;
  const projectSlug = currentWorkspace?.slug as string;
  const [searchFilter, setSearchFilter] = useState("");
+  const debouncedSearchFilter = useDebounce(searchFilter);
  const secretPath = (router.query?.secretPath as string) || "/";

  const [selectedEntries, setSelectedEntries] = useState<{
@@ -111,6 +121,9 @@ export const SecretOverviewPage = () => {
    [EntryType.SECRET]: {}
  });

+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(INIT_PER_PAGE);
+
  const toggleSelectedEntry = useCallback(
    (type: EntryType, key: string) => {
      const isChecked = Boolean(selectedEntries[type]?.[key]);
@@ -439,7 +452,40 @@ export const SecretOverviewPage = () => {
    }
  };

-  if (isWorkspaceLoading) {
+  const rows = useMemo(() => {
+    const filteredSecretNames =
+      secKeys
+        ?.filter((name) => name.toUpperCase().includes(debouncedSearchFilter.toUpperCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+    const filteredFolderNames =
+      folderNames
+        ?.filter((name) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+    const filteredDynamicSecrets =
+      dynamicSecretNames
+        ?.filter((name) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
+        .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a))) ?? [];
+
+    return [
+      ...filteredFolderNames.map((name) => ({ name, type: RowType.Folder })),
+      ...filteredDynamicSecrets.map((name) => ({ name, type: RowType.DynamicSecret })),
+      ...filteredSecretNames.map((name) => ({ name, type: RowType.Secret }))
+    ];
+  }, [sortDir, debouncedSearchFilter, secKeys, folderNames, dynamicSecretNames]);
+
+  const paginationOffset = (page - 1) * perPage;
+
+  useEffect(() => {
+    // reset page if no longer valid
+    if (rows.length < paginationOffset) setPage(1);
+  }, [rows.length]);
+
+  const isTableLoading =
+    folders?.some(({ isLoading }) => isLoading) ||
+    secrets?.some(({ isLoading }) => isLoading) ||
+    dynamicSecrets?.some(({ isLoading }) => isLoading);
+
+  if (isWorkspaceLoading || isTableLoading) {
    return (
      <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
        <img
@@ -454,32 +500,16 @@ export const SecretOverviewPage = () => {
    );
  }

-  const isTableLoading = !(
-    folders?.some(({ isLoading }) => !isLoading) && secrets?.some(({ isLoading }) => !isLoading)
-  );
-
  const canViewOverviewPage = Boolean(userAvailableEnvs.length);
  // This is needed to also show imports from other paths – right now those are missing.
  // const combinedKeys = [...secKeys, ...secretImports.map((impSecrets) => impSecrets?.data?.map((impSec) => impSec.secrets?.map((impSecKey) => impSecKey.key))).flat().flat()];
-  const filteredSecretNames = secKeys
-    ?.filter((name) => name.toUpperCase().includes(searchFilter.toUpperCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
-  const filteredFolderNames = folderNames
-    ?.filter((name) => name.toLowerCase().includes(searchFilter.toLowerCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));
-  const filteredDynamicSecrets = dynamicSecretNames
-    ?.filter((name) => name.toLowerCase().includes(searchFilter.toLowerCase()))
-    .sort((a, b) => (sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a)));

  const isTableEmpty =
    !(
      folders?.every(({ isLoading }) => isLoading) &&
      secrets?.every(({ isLoading }) => isLoading) &&
      dynamicSecrets?.every(({ isLoading }) => isLoading)
-    ) &&
-    filteredSecretNames?.length === 0 &&
-    filteredFolderNames?.length === 0 &&
-    filteredDynamicSecrets?.length === 0;
+    ) && rows.length === 0;

  return (
    <>
@@ -656,7 +686,7 @@ export const SecretOverviewPage = () => {
          resetSelectedEntries={resetSelectedEntries}
        />
        <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-          <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
+          <TableContainer>
            <Table>
              <THead>
                <Tr className="sticky top-0 z-20 border-0">
@@ -753,7 +783,7 @@ export const SecretOverviewPage = () => {
                    <Td colSpan={visibleEnvs.length + 1}>
                      <EmptyState
                        title={
-                          searchFilter
+                          debouncedSearchFilter
                            ? "No secret found for your search, add one now"
                            : "Let's add some secrets"
                        }
@@ -774,48 +804,59 @@ export const SecretOverviewPage = () => {
                  </Tr>
                )}
                {!isTableLoading &&
-                  filteredFolderNames.map((folderName, index) => (
-                    <SecretOverviewFolderRow
-                      folderName={folderName}
-                      isFolderPresentInEnv={isFolderPresentInEnv}
-                      isSelected={selectedEntries.folder[folderName]}
-                      onToggleFolderSelect={() => toggleSelectedEntry(EntryType.FOLDER, folderName)}
-                      environments={visibleEnvs}
-                      key={`overview-${folderName}-${index + 1}`}
-                      onClick={handleFolderClick}
-                      onToggleFolderEdit={(name: string) =>
-                        handlePopUpOpen("updateFolder", { name })
-                      }
-                    />
-                  ))}
-                {!isTableLoading &&
-                  filteredDynamicSecrets.map((dynamicSecretName, index) => (
-                    <SecretOverviewDynamicSecretRow
-                      dynamicSecretName={dynamicSecretName}
-                      isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
-                      environments={visibleEnvs}
-                      key={`overview-${dynamicSecretName}-${index + 1}`}
-                    />
-                  ))}
-                {!isTableLoading &&
-                  visibleEnvs?.length > 0 &&
-                  filteredSecretNames.map((key, index) => (
-                    <SecretOverviewTableRow
-                      isSelected={selectedEntries.secret[key]}
-                      onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
-                      secretPath={secretPath}
-                      getImportedSecretByKey={getImportedSecretByKey}
-                      isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
-                      onSecretCreate={handleSecretCreate}
-                      onSecretDelete={handleSecretDelete}
-                      onSecretUpdate={handleSecretUpdate}
-                      key={`overview-${key}-${index + 1}`}
-                      environments={visibleEnvs}
-                      secretKey={key}
-                      getSecretByKey={getSecretByKey}
-                      expandableColWidth={expandableTableWidth}
-                    />
-                  ))}
+                  rows.slice(paginationOffset, paginationOffset + perPage).map((row, index) => {
+                    switch (row.type) {
+                      case RowType.Secret:
+                        if (visibleEnvs?.length === 0) return null;
+                        return (
+                          <SecretOverviewTableRow
+                            isSelected={selectedEntries.secret[row.name]}
+                            onToggleSecretSelect={() =>
+                              toggleSelectedEntry(EntryType.SECRET, row.name)
+                            }
+                            secretPath={secretPath}
+                            getImportedSecretByKey={getImportedSecretByKey}
+                            isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
+                            onSecretCreate={handleSecretCreate}
+                            onSecretDelete={handleSecretDelete}
+                            onSecretUpdate={handleSecretUpdate}
+                            key={`overview-${row.name}-${index + 1}`}
+                            environments={visibleEnvs}
+                            secretKey={row.name}
+                            getSecretByKey={getSecretByKey}
+                            expandableColWidth={expandableTableWidth}
+                          />
+                        );
+                      case RowType.DynamicSecret:
+                        return (
+                          <SecretOverviewDynamicSecretRow
+                            dynamicSecretName={row.name}
+                            isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
+                            environments={visibleEnvs}
+                            key={`overview-${row.name}-${index + 1}`}
+                          />
+                        );
+                      case RowType.Folder:
+                        return (
+                          <SecretOverviewFolderRow
+                            folderName={row.name}
+                            isFolderPresentInEnv={isFolderPresentInEnv}
+                            isSelected={selectedEntries.folder[row.name]}
+                            onToggleFolderSelect={() =>
+                              toggleSelectedEntry(EntryType.FOLDER, row.name)
+                            }
+                            environments={visibleEnvs}
+                            key={`overview-${row.name}-${index + 1}`}
+                            onClick={handleFolderClick}
+                            onToggleFolderEdit={(name: string) =>
+                              handlePopUpOpen("updateFolder", { name })
+                            }
+                          />
+                        );
+                      default:
+                        return null;
+                    }
+                  })}
              </TBody>
              <TFoot>
                <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
@@ -842,6 +883,15 @@ export const SecretOverviewPage = () => {
                </Tr>
              </TFoot>
            </Table>
+            {!isTableLoading && rows.length > INIT_PER_PAGE && (
+              <Pagination
+                count={rows.length}
+                page={page}
+                perPage={perPage}
+                onChangePage={(newPage) => setPage(newPage)}
+                onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
          </TableContainer>
        </div>
      </div>