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

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityModal.tsx

@@ -46,12 +46,12 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const { data: identityMembershipOrgsData } = useGetIdentityMembershipOrgs({
     organizationId,
-    limit: 20000 // TODO: this is temp to preserve functionality for bitcoindepot, will replace with combobox in separate PR
+    limit: 20000 // TODO: this is temp to preserve functionality for larger projects, will replace with combobox in separate PR
   });
   const identityMembershipOrgs = identityMembershipOrgsData?.identityMemberships;
   const { data: identityMembershipsData } = useGetWorkspaceIdentityMemberships({
     workspaceId,
-    limit: 20000 // TODO: this is temp to preserve functionality for bitcoindepot, will optimize in PR referenced above
+    limit: 20000 // TODO: this is temp to preserve functionality for larger projects, will optimize in PR referenced above
   });
   const identityMemberships = identityMembershipsData?.identityMemberships;
 

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
 import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
@@ -17,29 +18,28 @@ import {
 } from "@app/context";
 import { useDebounce, usePopUp } from "@app/hooks";
 import {
-  useGetDynamicSecrets,
   useGetImportedSecretsSingleEnv,
-  useGetProjectFolders,
-  useGetProjectSecrets,
   useGetSecretApprovalPolicyOfABoard,
-  useGetSecretImports,
   useGetWorkspaceSnapshotList,
   useGetWsSnapshotCount,
   useGetWsTags
 } from "@app/hooks/api";
+import { useGetProjectSecretsDetails } from "@app/hooks/api/dashboard";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { DynamicSecretListView } from "@app/views/SecretMainPage/components/DynamicSecretListView";
+import { FolderListView } from "@app/views/SecretMainPage/components/FolderListView";
+import { SecretImportListView } from "@app/views/SecretMainPage/components/SecretImportListView";
+import { SecretTableResourceCount } from "@app/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount";
 
 import { SecretV2MigrationSection } from "../SecretOverviewPage/components/SecretV2MigrationSection";
 import { ActionBar } from "./components/ActionBar";
 import { CreateSecretForm } from "./components/CreateSecretForm";
-import { DynamicSecretListView } from "./components/DynamicSecretListView";
-import { FolderListView } from "./components/FolderListView";
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
-import { SecretImportListView } from "./components/SecretImportListView";
 import { SecretListView } from "./components/SecretListView";
 import { SnapshotView } from "./components/SnapshotView";
 import { StoreProvider } from "./SecretMainPage.store";
-import { Filter, SortDir } from "./SecretMainPage.types";
+import { Filter, RowType } from "./SecretMainPage.types";
 
 const LOADER_TEXT = [
   "Retrieving your encrypted secrets...",
@@ -55,12 +55,8 @@ export const SecretMainPage = () => {
   const { permission } = useProjectPermission();
 
   const [isVisible, setIsVisible] = useState(false);
-  const [sortDir, setSortDir] = useState<SortDir>(SortDir.ASC);
-  const [filter, setFilter] = useState<Filter>({
-    tags: {},
-    searchFilter: (router.query.searchFilter as string) || ""
-  });
-  const debouncedSearchFilter = useDebounce(filter.searchFilter);
+  const [orderDirection, setOrderDirection] = useState<OrderByDirection>(OrderByDirection.ASC);
+
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(INIT_PER_PAGE);
   const paginationOffset = (page - 1) * perPage;
@@ -83,6 +79,18 @@ export const SecretMainPage = () => {
     ProjectPermissionSub.SecretRollback
   );
 
+  const [filter, setFilter] = useState<Filter>({
+    tags: {},
+    searchFilter: (router.query.searchFilter as string) || "",
+    include: {
+      [RowType.Folder]: true,
+      [RowType.Import]: canReadSecret,
+      [RowType.DynamicSecret]: canReadSecret,
+      [RowType.Secret]: canReadSecret
+    }
+  });
+  const debouncedSearchFilter = useDebounce(filter.searchFilter);
+
   useEffect(() => {
     if (
       !isWorkspaceLoading &&
@@ -91,43 +99,43 @@ export const SecretMainPage = () => {
     ) {
       router.push(`/project/${workspaceId}/secrets/overview`);
       createNotification({
-        text: "No envronment found with given slug",
+        text: "No environment found with given slug",
         type: "error"
       });
     }
   }, [isWorkspaceLoading, currentWorkspace, environment, router.isReady]);
 
-  // fetch secrets
-  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
-    environment,
-    workspaceId,
-    secretPath,
-    options: {
-      enabled: canReadSecret
-    }
-  });
-
-  // fetch folders
-  const { data: folders, isLoading: isFoldersLoading } = useGetProjectFolders({
-    projectId: workspaceId,
-    environment,
-    path: secretPath
-  });
-
-  // fetch secret imports
   const {
-    data: secretImports,
-    isLoading: isSecretImportsLoading,
-    isFetching: isSecretImportsFetching
-  } = useGetSecretImports({
-    projectId: workspaceId,
+    data,
+    isLoading: isDetailsLoading,
+    isFetching: isDetailsFetching
+  } = useGetProjectSecretsDetails({
     environment,
-    path: secretPath,
-    options: {
-      enabled: canReadSecret
-    }
+    projectId: workspaceId,
+    secretPath,
+    offset: paginationOffset,
+    limit: perPage,
+    search: debouncedSearchFilter,
+    orderDirection,
+    includeImports: canReadSecret && filter.include.import,
+    includeFolders: filter.include.folder,
+    includeDynamicSecrets: canReadSecret && filter.include.dynamic,
+    includeSecrets: canReadSecret && filter.include.secret,
+    tags: filter.tags
   });
 
+  const {
+    imports,
+    folders,
+    dynamicSecrets,
+    secrets,
+    totalImportCount = 0,
+    totalFolderCount = 0,
+    totalDynamicSecretCount = 0,
+    totalSecretCount = 0,
+    totalCount = 0
+  } = data ?? {};
+
   // fetch imported secrets to show user the overriden ones
   const { data: importedSecrets } = useGetImportedSecretsSingleEnv({
     projectId: workspaceId,
@@ -138,13 +146,7 @@ export const SecretMainPage = () => {
     }
   });
 
-  const { data: dynamicSecrets, isLoading: isDynamicSecretLoading } = useGetDynamicSecrets({
-    projectSlug,
-    environmentSlug: environment,
-    path: secretPath
-  });
-
-  // fech tags
+  // fetch tags
   const { data: tags } = useGetWsTags(canReadSecret ? workspaceId : "");
 
   const { data: boardPolicy } = useGetSecretApprovalPolicyOfABoard({
@@ -174,12 +176,14 @@ export const SecretMainPage = () => {
     isPaused: !canDoReadRollback
   });
 
-  const isNotEmtpy = Boolean(
-    secrets?.length || folders?.length || secretImports?.length || dynamicSecrets?.length
+  const isNotEmpty = Boolean(
+    secrets?.length || folders?.length || imports?.length || dynamicSecrets?.length
   );
 
   const handleSortToggle = () =>
-    setSortDir((state) => (state === SortDir.ASC ? SortDir.DESC : SortDir.ASC));
+    setOrderDirection((state) =>
+      state === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+    );
 
   const handleEnvChange = (slug: string) => {
     const query: Record<string, string> = { ...router.query, env: slug };
@@ -191,17 +195,31 @@ export const SecretMainPage = () => {
   };
 
   const handleTagToggle = useCallback(
-    (tagId: string) =>
+    (tagSlug: string) =>
       setFilter((state) => {
-        const isTagPresent = Boolean(state.tags?.[tagId]);
+        const isTagPresent = Boolean(state.tags?.[tagSlug]);
         const newTagFilter = { ...state.tags };
-        if (isTagPresent) delete newTagFilter[tagId];
-        else newTagFilter[tagId] = true;
+        if (isTagPresent) delete newTagFilter[tagSlug];
+        else newTagFilter[tagSlug] = true;
         return { ...state, tags: newTagFilter };
       }),
     []
   );
 
+  const handleToggleRowType = useCallback(
+    (rowType: RowType) =>
+      setFilter((state) => {
+        return {
+          ...state,
+          include: {
+            ...state.include,
+            [rowType]: !state.include[rowType]
+          }
+        };
+      }),
+    []
+  );
+
   const handleSearchChange = useCallback(
     (searchFilter: string) => setFilter((state) => ({ ...state, searchFilter })),
     []
@@ -219,126 +237,18 @@ export const SecretMainPage = () => {
     handlePopUpClose("snapshots");
   }, []);
 
-  // loading screen when u have permission
-  const loadingOnAccess =
-    canReadSecret &&
-    (isSecretsLoading || isSecretImportsLoading || isFoldersLoading || isDynamicSecretLoading);
-
-  const rows = useMemo(() => {
-    const filteredSecrets =
-      secrets
-        ?.filter(({ key, tags: secretTags, value }) => {
-          const isTagFilterActive = Boolean(Object.keys(filter.tags).length);
-          return (
-            (!isTagFilterActive || secretTags?.some(({ id }) => filter.tags?.[id])) &&
-            (key.toUpperCase().includes(debouncedSearchFilter.toUpperCase()) ||
-              value?.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
-          );
-        })
-        .sort((a, b) =>
-          sortDir === SortDir.ASC ? a.key.localeCompare(b.key) : b.key.localeCompare(a.key)
-        ) ?? [];
-    const filteredFolders =
-      folders
-        ?.filter(({ name }) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
-        .sort((a, b) =>
-          sortDir === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
-        ) ?? [];
-    const filteredDynamicSecrets =
-      dynamicSecrets
-        ?.filter(({ name }) => name.toLowerCase().includes(debouncedSearchFilter.toLowerCase()))
-        .sort((a, b) =>
-          sortDir === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
-        ) ?? [];
-    const filteredSecretImports =
-      secretImports
-        ?.filter(({ importPath }) =>
-          importPath.toLowerCase().includes(debouncedSearchFilter.toLowerCase())
-        )
-        .sort((a, b) =>
-          sortDir === "asc"
-            ? a.importPath.localeCompare(b.importPath)
-            : b.importPath.localeCompare(a.importPath)
-        ) ?? [];
-
-    const totalRows =
-      filteredSecretImports.length +
-      filteredFolders.length +
-      filteredDynamicSecrets.length +
-      filteredSecrets.length;
-
-    const paginatedImports = filteredSecretImports.slice(
-      paginationOffset,
-      paginationOffset + perPage
-    );
-
-    let remainingRows = perPage - paginatedImports.length;
-    const foldersStartIndex = Math.max(0, paginationOffset - filteredSecretImports.length);
-    const paginatedFolders =
-      remainingRows > 0
-        ? filteredFolders.slice(foldersStartIndex, foldersStartIndex + remainingRows)
-        : [];
-
-    remainingRows -= paginatedFolders.length;
-    const dynamicSecretStartIndex = Math.max(
-      0,
-      paginationOffset - filteredSecretImports.length - filteredFolders.length
-    );
-    const paginatiedDynamicSecrets =
-      remainingRows > 0
-        ? filteredDynamicSecrets.slice(
-            dynamicSecretStartIndex,
-            dynamicSecretStartIndex + remainingRows
-          )
-        : [];
-
-    remainingRows -= paginatiedDynamicSecrets.length;
-    const secretStartIndex = Math.max(
-      0,
-      paginationOffset -
-        filteredSecretImports.length -
-        filteredFolders.length -
-        filteredDynamicSecrets.length
-    );
-
-    const paginatiedSecrets =
-      remainingRows > 0
-        ? filteredSecrets.slice(secretStartIndex, secretStartIndex + remainingRows)
-        : [];
-
-    return {
-      imports: paginatedImports,
-      folders: paginatedFolders,
-      secrets: paginatiedSecrets,
-      dynamicSecrets: paginatiedDynamicSecrets,
-      totalRows
-    };
-  }, [
-    sortDir,
-    debouncedSearchFilter,
-    folders,
-    secrets,
-    dynamicSecrets,
-    paginationOffset,
-    perPage,
-    filter.tags,
-    importedSecrets
-  ]);
-
   useEffect(() => {
     // reset page if no longer valid
-    if (rows.totalRows < paginationOffset) setPage(1);
-  }, [rows.totalRows]);
+    if (totalCount < paginationOffset) setPage(1);
+  }, [totalCount]);
 
-  // loading screen when you don't have permission but as folder's is viewable need to wait for that
-  const loadingOnDenied = !canReadSecret && isFoldersLoading;
-  if (loadingOnAccess || loadingOnDenied) {
+  if (isDetailsLoading) {
     return <ContentLoader text={LOADER_TEXT} />;
   }
 
   return (
     <StoreProvider>
-      <div className="container mx-auto flex h-full flex-col px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+      <div className="container mx-auto flex flex-col px-6 text-mineshaft-50 dark:[color-scheme:dark]">
         <SecretV2MigrationSection />
         <div className="relative right-6 -top-2 mb-2 ml-6">
           <NavHeader
@@ -372,17 +282,22 @@ export const SecretMainPage = () => {
               isVisible={isVisible}
               filter={filter}
               tags={tags}
-              onVisiblilityToggle={handleToggleVisibility}
+              onVisibilityToggle={handleToggleVisibility}
               onSearchChange={handleSearchChange}
               onToggleTagFilter={handleTagToggle}
               snapshotCount={snapshotCount || 0}
               isSnapshotCountLoading={isSnapshotCountLoading}
+              onToggleRowType={handleToggleRowType}
               onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
             />
-            <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
+            <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
               <div className="flex flex-col" id="dashboard">
-                {isNotEmtpy && (
-                  <div className="flex border-b border-mineshaft-600 font-medium">
+                {isNotEmpty && (
+                  <div
+                    className={twMerge(
+                      "sticky top-0 flex border-b border-mineshaft-600 bg-mineshaft-800 font-medium"
+                    )}
+                  >
                     <div style={{ width: "2.8rem" }} className="flex-shrink-0 px-4 py-3" />
                     <div
                       className="flex w-80 flex-shrink-0 items-center border-r border-mineshaft-600 px-4 py-2"
@@ -395,45 +310,43 @@ export const SecretMainPage = () => {
                     >
                       Key
                       <FontAwesomeIcon
-                        icon={sortDir === SortDir.ASC ? faArrowDown : faArrowUp}
+                        icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
                         className="ml-2"
                       />
                     </div>
                     <div className="flex-grow px-4 py-2">Value</div>
                   </div>
                 )}
-                {canReadSecret && (
+                {canReadSecret && imports?.length && (
                   <SecretImportListView
-                    searchTerm={filter.searchFilter}
-                    secretImports={rows.imports}
-                    isFetching={isSecretImportsLoading || isSecretImportsFetching}
+                    searchTerm={debouncedSearchFilter}
+                    secretImports={imports}
+                    isFetching={isDetailsFetching}
                     environment={environment}
                     workspaceId={workspaceId}
                     secretPath={secretPath}
-                    secrets={secrets}
                     importedSecrets={importedSecrets}
                   />
                 )}
-                <FolderListView
-                  folders={rows.folders}
-                  environment={environment}
-                  workspaceId={workspaceId}
-                  secretPath={secretPath}
-                  sortDir={sortDir}
-                  searchTerm={filter.searchFilter}
-                />
-                {canReadSecret && (
+                {folders?.length && (
+                  <FolderListView
+                    folders={folders}
+                    environment={environment}
+                    workspaceId={workspaceId}
+                    secretPath={secretPath}
+                  />
+                )}
+                {canReadSecret && dynamicSecrets?.length && (
                   <DynamicSecretListView
-                    sortDir={sortDir}
                     environment={environment}
                     projectSlug={projectSlug}
                     secretPath={secretPath}
-                    dynamicSecrets={rows.dynamicSecrets || []}
+                    dynamicSecrets={dynamicSecrets}
                   />
                 )}
-                {canReadSecret && (
+                {canReadSecret && secrets?.length && (
                   <SecretListView
-                    secrets={rows.secrets}
+                    secrets={secrets}
                     tags={tags}
                     isVisible={isVisible}
                     environment={environment}
@@ -443,18 +356,26 @@ export const SecretMainPage = () => {
                   />
                 )}
                 {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
-                {!loadingOnAccess && rows.totalRows > INIT_PER_PAGE && (
-                  <Pagination
-                    className="border-t border-solid border-t-mineshaft-600"
-                    count={rows.totalRows}
-                    page={page}
-                    perPage={perPage}
-                    onChangePage={(newPage) => setPage(newPage)}
-                    onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
-                  />
-                )}
               </div>
             </div>
+            {!isDetailsLoading && totalCount > INIT_PER_PAGE && (
+              <Pagination
+                startAdornment={
+                  <SecretTableResourceCount
+                    dynamicSecretCount={totalDynamicSecretCount}
+                    importCount={totalImportCount}
+                    secretCount={totalSecretCount}
+                    folderCount={totalFolderCount}
+                  />
+                }
+                className="rounded-b-md border-t border-solid border-t-mineshaft-600"
+                count={totalCount}
+                page={page}
+                perPage={perPage}
+                onChangePage={(newPage) => setPage(newPage)}
+                onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
             <CreateSecretForm
               environment={environment}
               workspaceId={workspaceId}
@@ -467,7 +388,7 @@ export const SecretMainPage = () => {
               environment={environment}
               workspaceId={workspaceId}
               secretPath={secretPath}
-              isSmaller={isNotEmtpy}
+              isSmaller={isNotEmpty}
               environments={currentWorkspace?.environments}
               isProtectedBranch={isProtectedBranch}
             />

frontend/src/views/SecretMainPage/SecretMainPage.types.ts

@@ -1,15 +1,14 @@
 export type Filter = {
   tags: Record<string, boolean>;
   searchFilter: string;
+  include: {
+    [key in RowType]: boolean;
+  };
 };
 
-export enum SortDir {
-  ASC = "asc",
-  DESC = "desc"
-}
-
 export enum RowType {
   Folder = "folder",
+  Import = "import",
   DynamicSecret = "dynamic",
-  Secret = "Secret"
+  Secret = "secret"
 }

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -13,7 +13,9 @@ import {
   faFileImport,
   faFilter,
   faFingerprint,
+  faFolder,
   faFolderPlus,
+  faKey,
   faMagnifyingGlass,
   faMinusSquare,
   faPlus,
@@ -62,7 +64,7 @@ import {
   useSelectedSecretActions,
   useSelectedSecrets
 } from "../../SecretMainPage.store";
-import { Filter } from "../../SecretMainPage.types";
+import { Filter, RowType } from "../../SecretMainPage.types";
 import { CreateDynamicSecretForm } from "./CreateDynamicSecretForm";
 import { CreateSecretImportForm } from "./CreateSecretImportForm";
 import { FolderForm } from "./FolderForm";
@@ -83,7 +85,8 @@ type Props = {
   isSnapshotCountLoading?: boolean;
   onSearchChange: (term: string) => void;
   onToggleTagFilter: (tagId: string) => void;
-  onVisiblilityToggle: () => void;
+  onVisibilityToggle: () => void;
+  onToggleRowType: (rowType: RowType) => void;
   onClickRollbackMode: () => void;
 };
 
@@ -100,8 +103,9 @@ export const ActionBar = ({
   isSnapshotCountLoading,
   onSearchChange,
   onToggleTagFilter,
-  onVisiblilityToggle,
-  onClickRollbackMode
+  onVisibilityToggle,
+  onClickRollbackMode,
+  onToggleRowType
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "addFolder",
@@ -298,7 +302,9 @@ export const ActionBar = ({
                 ariaLabel="Download"
                 className={twMerge(
                   "transition-all",
-                  Object.keys(filter.tags).length && "border-primary/50 text-primary"
+                  (Object.keys(filter.tags).length ||
+                    Object.values(filter.include).filter((include) => !include).length) &&
+                    "border-primary/50 text-primary"
                 )}
               >
                 <FontAwesomeIcon icon={faFilter} />
@@ -306,6 +312,60 @@ export const ActionBar = ({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="p-0">
               <DropdownMenuGroup>Filter By</DropdownMenuGroup>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onToggleRowType(RowType.Import);
+                }}
+                icon={filter?.include[RowType.Import] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faFileImport} className=" text-green-700" />
+                  <span>Imports</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onToggleRowType(RowType.Folder);
+                }}
+                icon={filter?.include[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+                  <span>Folders</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onToggleRowType(RowType.DynamicSecret);
+                }}
+                icon={
+                  filter?.include[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />
+                }
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faFingerprint} className=" text-yellow-700" />
+                  <span>Dynamic Secrets</span>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  onToggleRowType(RowType.Secret);
+                }}
+                icon={filter?.include[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                iconPos="right"
+              >
+                <div className="flex items-center gap-2">
+                  <FontAwesomeIcon icon={faKey} className=" text-bunker-300" />
+                  <span>Secrets</span>
+                </div>
+              </DropdownMenuItem>
               <DropdownSubMenu>
                 <DropdownSubMenuTrigger
                   iconPos="right"
@@ -319,10 +379,10 @@ export const ActionBar = ({
                     <DropdownMenuItem
                       onClick={(evt) => {
                         evt.preventDefault();
-                        onToggleTagFilter(id);
+                        onToggleTagFilter(slug);
                       }}
                       key={id}
-                      icon={filter?.tags[id] && <FontAwesomeIcon icon={faCheckCircle} />}
+                      icon={filter?.tags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
                       iconPos="right"
                     >
                       <div className="flex items-center">
@@ -346,7 +406,7 @@ export const ActionBar = ({
           </IconButton>
         </div>
         <div>
-          <IconButton variant="outline_bg" ariaLabel="Reveal" onClick={onVisiblilityToggle}>
+          <IconButton variant="outline_bg" ariaLabel="Reveal" onClick={onVisibilityToggle}>
             <FontAwesomeIcon icon={isVisible ? faEyeSlash : faEye} />
           </IconButton>
         </div>

frontend/src/views/SecretMainPage/components/DynamicSecretListView/DynamicSecretListView.tsx

@@ -27,7 +27,6 @@ import {
   TDynamicSecret
 } from "@app/hooks/api/dynamicSecret/types";
 
-import { SortDir } from "../../SecretMainPage.types";
 import { CreateDynamicSecretLease } from "./CreateDynamicSecretLease";
 import { DynamicSecretLease } from "./DynamicSecretLease";
 import { EditDynamicSecretForm } from "./EditDynamicSecretForm";
@@ -38,19 +37,17 @@ const formatProviderName = (type: DynamicSecretProviders) => {
 };
 
 type Props = {
-  dynamicSecrets: TDynamicSecret[];
+  dynamicSecrets?: TDynamicSecret[];
   environment: string;
   projectSlug: string;
   secretPath?: string;
-  sortDir: SortDir;
 };
 
 export const DynamicSecretListView = ({
   dynamicSecrets = [],
   environment,
   projectSlug,
-  secretPath = "/",
-  sortDir = SortDir.ASC
+  secretPath = "/"
 }: Props) => {
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "dynamicSecretLeases",
@@ -59,7 +56,6 @@ export const DynamicSecretListView = ({
     "deleteDynamicSecret"
   ] as const);
 
-  
   const deleteDynamicSecret = useDeleteDynamicSecret();
 
   const handleDynamicSecretDelete = async () => {
@@ -90,158 +86,148 @@ export const DynamicSecretListView = ({
 
   return (
     <>
-      {dynamicSecrets
-        .sort((a, b) =>
-          sortDir === SortDir.ASC
-            ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-            : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
-        )
-        .map((secret) => {
-          const isRevocking = secret.status === DynamicSecretStatus.Deleting;
-          return (
-            <Modal
-              key={secret.id}
-              isOpen={
-                popUp.dynamicSecretLeases.isOpen && popUp.dynamicSecretLeases.data === secret.id
-              }
-              onOpenChange={(state) => handlePopUpToggle("dynamicSecretLeases", state)}
+      {dynamicSecrets.map((secret) => {
+        const isRevoking = secret.status === DynamicSecretStatus.Deleting;
+        return (
+          <Modal
+            key={secret.id}
+            isOpen={
+              popUp.dynamicSecretLeases.isOpen && popUp.dynamicSecretLeases.data === secret.id
+            }
+            onOpenChange={(state) => handlePopUpToggle("dynamicSecretLeases", state)}
+          >
+            <div
+              className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+              role="button"
+              tabIndex={0}
+              onKeyDown={(evt) => {
+                if (evt.key === "Enter" && !isRevoking)
+                  handlePopUpOpen("dynamicSecretLeases", secret.id);
+              }}
+              onClick={() => {
+                if (!isRevoking) {
+                  handlePopUpOpen("dynamicSecretLeases", secret.id);
+                }
+              }}
             >
-              <div
-                className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
-                role="button"
-                tabIndex={0}
-                onKeyDown={(evt) => {
-                  if (evt.key === "Enter" && !isRevocking)
-                    handlePopUpOpen("dynamicSecretLeases", secret.id);
-                }}
-                onClick={() => {
-                  if (!isRevocking) {
-                    handlePopUpOpen("dynamicSecretLeases", secret.id);
-                  }
-                }}
-              >
-                <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
-                  <FontAwesomeIcon icon={faFingerprint} />
-                </div>
-                <div
-                  className="flex flex-grow items-center px-4 py-3"
-                  role="button"
-                  tabIndex={0}
-                >
-                  {secret.name}
-                  <Tag className="ml-4 py-0 px-2 text-xs normal-case">
-                    {formatProviderName(secret.type)}
-                  </Tag>
-                  {Boolean(secret.status) && (
-                    <Tooltip content={secret?.statusDetails || secret.status || ""}>
-                      <FontAwesomeIcon
-                        className={
-                          secret.status === DynamicSecretStatus.Deleting
-                            ? "text-yellow-600"
-                            : "text-red-600"
-                        }
-                        icon={faWarning}
-                      />
-                    </Tooltip>
-                  )}
-                </div>
-                <div className="flex items-center space-x-2 px-4 py-2">
-                  <Button
-                    size="xs"
-                    className="m-0 py-0.5 px-2 opacity-0 group-hover:opacity-100"
-                    isDisabled={isRevocking}
-                    onClick={(evt) => {
-                      evt.stopPropagation();
-                      handlePopUpOpen("createDynamicSecretLease", secret);
-                    }}
-                  >
-                    Generate
-                  </Button>
-                  {secret.status === DynamicSecretStatus.FailedDeletion && (
-                    <Tooltip content="This action will remove the secret from internal storage, but it will remain in external systems. Use this option only after you've confirmed that your external leases are handled.">
-                      <Button
-                        size="xs"
-                        className="m-0 py-0.5 px-2"
-                        colorSchema="danger"
-                        isDisabled={isRevocking}
-                        onClick={(evt) => {
-                          evt.stopPropagation();
-                          handlePopUpOpen("deleteDynamicSecret", {
-                            ...secret,
-                            isForced: true
-                          });
-                        }}
-                      >
-                        Force Delete
-                      </Button>
-                    </Tooltip>
-                  )}
-                </div>
-                <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                    renderTooltip
-                    allowedLabel="Edit"
-                  >
-                    {(isAllowed) => (
-                      <IconButton
-                        ariaLabel="edit-dynamic-secret"
-                        variant="plain"
-                        size="sm"
-                        className="p-0 opacity-0 group-hover:opacity-100"
-                        onClick={(evt) => {
-                          evt.stopPropagation();
-                          handlePopUpOpen("updateDynamicSecret", secret);
-                        }}
-                        isDisabled={!isAllowed || isRevocking}
-                      >
-                        <FontAwesomeIcon icon={faPencilSquare} size="lg" />
-                      </IconButton>
-                    )}
-                  </ProjectPermissionCan>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Delete}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                    renderTooltip
-                    allowedLabel="Delete"
-                  >
-                    {(isAllowed) => (
-                      <IconButton
-                        ariaLabel="delete-dynamic-secret"
-                        variant="plain"
-                        size="md"
-                        className="p-0 opacity-0 group-hover:opacity-100"
-                        onClick={(evt) => {
-                          evt.stopPropagation();
-                          handlePopUpOpen("deleteDynamicSecret", secret);
-                        }}
-                        isDisabled={!isAllowed || isRevocking}
-                      >
-                        <FontAwesomeIcon icon={faClose} size="lg" />
-                      </IconButton>
-                    )}
-                  </ProjectPermissionCan>
-                </div>
+              <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
+                <FontAwesomeIcon icon={faFingerprint} />
               </div>
-              <ModalContent
-                title="Dynamic secret leases"
-                subTitle="Revoke or renew your secret leases"
-                className="max-w-3xl"
-              >
-                <DynamicSecretLease
-                  onClickNewLease={() => handlePopUpOpen("createDynamicSecretLease", secret)}
-                  onClose={() => handlePopUpClose("dynamicSecretLeases")}
-                  projectSlug={projectSlug}
-                  key={secret.id}
-                  dynamicSecretName={secret.name}
-                  secretPath={secretPath}
-                  environment={environment}
-                />
-              </ModalContent>
-            </Modal>
-          );
-        })}
+              <div className="flex flex-grow items-center px-4 py-3" role="button" tabIndex={0}>
+                {secret.name}
+                <Tag className="ml-4 py-0 px-2 text-xs normal-case">
+                  {formatProviderName(secret.type)}
+                </Tag>
+                {Boolean(secret.status) && (
+                  <Tooltip content={secret?.statusDetails || secret.status || ""}>
+                    <FontAwesomeIcon
+                      className={
+                        secret.status === DynamicSecretStatus.Deleting
+                          ? "text-yellow-600"
+                          : "text-red-600"
+                      }
+                      icon={faWarning}
+                    />
+                  </Tooltip>
+                )}
+              </div>
+              <div className="flex items-center space-x-2 px-4 py-2">
+                <Button
+                  size="xs"
+                  className="m-0 py-0.5 px-2 opacity-0 group-hover:opacity-100"
+                  isDisabled={isRevoking}
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                    handlePopUpOpen("createDynamicSecretLease", secret);
+                  }}
+                >
+                  Generate
+                </Button>
+                {secret.status === DynamicSecretStatus.FailedDeletion && (
+                  <Tooltip content="This action will remove the secret from internal storage, but it will remain in external systems. Use this option only after you've confirmed that your external leases are handled.">
+                    <Button
+                      size="xs"
+                      className="m-0 py-0.5 px-2"
+                      colorSchema="danger"
+                      isDisabled={isRevoking}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("deleteDynamicSecret", {
+                          ...secret,
+                          isForced: true
+                        });
+                      }}
+                    >
+                      Force Delete
+                    </Button>
+                  </Tooltip>
+                )}
+              </div>
+              <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Edit}
+                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  renderTooltip
+                  allowedLabel="Edit"
+                >
+                  {(isAllowed) => (
+                    <IconButton
+                      ariaLabel="edit-dynamic-secret"
+                      variant="plain"
+                      size="sm"
+                      className="p-0 opacity-0 group-hover:opacity-100"
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("updateDynamicSecret", secret);
+                      }}
+                      isDisabled={!isAllowed || isRevoking}
+                    >
+                      <FontAwesomeIcon icon={faPencilSquare} size="lg" />
+                    </IconButton>
+                  )}
+                </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Delete}
+                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  renderTooltip
+                  allowedLabel="Delete"
+                >
+                  {(isAllowed) => (
+                    <IconButton
+                      ariaLabel="delete-dynamic-secret"
+                      variant="plain"
+                      size="md"
+                      className="p-0 opacity-0 group-hover:opacity-100"
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        handlePopUpOpen("deleteDynamicSecret", secret);
+                      }}
+                      isDisabled={!isAllowed || isRevoking}
+                    >
+                      <FontAwesomeIcon icon={faClose} size="lg" />
+                    </IconButton>
+                  )}
+                </ProjectPermissionCan>
+              </div>
+            </div>
+            <ModalContent
+              title="Dynamic secret leases"
+              subTitle="Revoke or renew your secret leases"
+              className="max-w-3xl"
+            >
+              <DynamicSecretLease
+                onClickNewLease={() => handlePopUpOpen("createDynamicSecretLease", secret)}
+                onClose={() => handlePopUpClose("dynamicSecretLeases")}
+                projectSlug={projectSlug}
+                key={secret.id}
+                dynamicSecretName={secret.name}
+                secretPath={secretPath}
+                environment={environment}
+              />
+            </ModalContent>
+          </Modal>
+        );
+      })}
       <Modal
         isOpen={popUp.createDynamicSecretLease.isOpen}
         onOpenChange={(state) => handlePopUpToggle("createDynamicSecretLease", state)}

frontend/src/views/SecretMainPage/components/FolderListView/FolderListView.tsx

@@ -11,7 +11,6 @@ import { usePopUp } from "@app/hooks";
 import { useDeleteFolder, useUpdateFolder } from "@app/hooks/api";
 import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
 
-import { SortDir } from "../../SecretMainPage.types";
 import { FolderForm } from "../ActionBar/FolderForm";
 
 type Props = {
@@ -19,17 +18,13 @@ type Props = {
   environment: string;
   workspaceId: string;
   secretPath?: string;
-  sortDir: SortDir;
-  searchTerm?: string;
 };
 
 export const FolderListView = ({
   folders = [],
   environment,
   workspaceId,
-  searchTerm,
-  secretPath = "/",
-  sortDir = SortDir.ASC
+  secretPath = "/"
 }: Props) => {
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "updateFolder",
@@ -104,84 +99,77 @@ export const FolderListView = ({
 
   return (
     <>
-      {folders
-        .filter(({ name }) => name.toUpperCase().includes(String(searchTerm?.toUpperCase())))
-        .sort((a, b) =>
-          sortDir === SortDir.ASC
-            ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-            : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
-        )
-        .map(({ name, id }) => (
-          <div
-            key={id}
-            className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
-          >
-            <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
-              <FontAwesomeIcon icon={faFolder} />
-            </div>
-            <div
-              className="flex flex-grow items-center px-4 py-3"
-              role="button"
-              tabIndex={0}
-              onKeyDown={(evt) => {
-                if (evt.key === "Enter") handleFolderClick(name);
-              }}
-              onClick={() => handleFolderClick(name)}
-            >
-              {name}
-            </div>
-            <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={subject(
-                  shouldCheckFolderPermission
-                    ? ProjectPermissionSub.SecretFolders
-                    : ProjectPermissionSub.Secrets,
-                  { environment, secretPath }
-                )}
-                renderTooltip
-                allowedLabel="Edit"
-              >
-                {(isAllowed) => (
-                  <IconButton
-                    ariaLabel="edit-folder"
-                    variant="plain"
-                    size="sm"
-                    className="p-0 opacity-0 group-hover:opacity-100"
-                    onClick={() => handlePopUpOpen("updateFolder", { id, name })}
-                    isDisabled={!isAllowed}
-                  >
-                    <FontAwesomeIcon icon={faPencilSquare} size="lg" />
-                  </IconButton>
-                )}
-              </ProjectPermissionCan>
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Delete}
-                a={subject(
-                  shouldCheckFolderPermission
-                    ? ProjectPermissionSub.SecretFolders
-                    : ProjectPermissionSub.Secrets,
-                  { environment, secretPath }
-                )}
-                renderTooltip
-                allowedLabel="Delete"
-              >
-                {(isAllowed) => (
-                  <IconButton
-                    ariaLabel="delete-folder"
-                    variant="plain"
-                    size="md"
-                    className="p-0 opacity-0 group-hover:opacity-100"
-                    onClick={() => handlePopUpOpen("deleteFolder", { id, name })}
-                    isDisabled={!isAllowed}
-                  >
-                    <FontAwesomeIcon icon={faClose} size="lg" />
-                  </IconButton>
-                )}
-              </ProjectPermissionCan>
-            </div>
+      {folders.map(({ name, id }) => (
+        <div
+          key={id}
+          className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+        >
+          <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
+            <FontAwesomeIcon icon={faFolder} />
           </div>
-        ))}
+          <div
+            className="flex flex-grow items-center px-4 py-3"
+            role="button"
+            tabIndex={0}
+            onKeyDown={(evt) => {
+              if (evt.key === "Enter") handleFolderClick(name);
+            }}
+            onClick={() => handleFolderClick(name)}
+          >
+            {name}
+          </div>
+          <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={subject(
+                shouldCheckFolderPermission
+                  ? ProjectPermissionSub.SecretFolders
+                  : ProjectPermissionSub.Secrets,
+                { environment, secretPath }
+              )}
+              renderTooltip
+              allowedLabel="Edit"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="edit-folder"
+                  variant="plain"
+                  size="sm"
+                  className="p-0 opacity-0 group-hover:opacity-100"
+                  onClick={() => handlePopUpOpen("updateFolder", { id, name })}
+                  isDisabled={!isAllowed}
+                >
+                  <FontAwesomeIcon icon={faPencilSquare} size="lg" />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={subject(
+                shouldCheckFolderPermission
+                  ? ProjectPermissionSub.SecretFolders
+                  : ProjectPermissionSub.Secrets,
+                { environment, secretPath }
+              )}
+              renderTooltip
+              allowedLabel="Delete"
+            >
+              {(isAllowed) => (
+                <IconButton
+                  ariaLabel="delete-folder"
+                  variant="plain"
+                  size="md"
+                  className="p-0 opacity-0 group-hover:opacity-100"
+                  onClick={() => handlePopUpOpen("deleteFolder", { id, name })}
+                  isDisabled={!isAllowed}
+                >
+                  <FontAwesomeIcon icon={faClose} size="lg" />
+                </IconButton>
+              )}
+            </ProjectPermissionCan>
+          </div>
+        </div>
+      ))}
       <Modal
         isOpen={popUp.updateFolder.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("updateFolder", isOpen)}

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -14,9 +14,10 @@ import { Button, Modal, ModalContent } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
-import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/types";
+import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
 import { CopySecretsFromBoard } from "./CopySecretsFromBoard";
@@ -190,6 +191,9 @@ export const SecretDropzone = ({
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(secretApprovalRequestKeys.count({ workspaceId }));
       handlePopUpClose("overlapKeyWarning");
       createNotification({

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx

@@ -291,7 +291,7 @@ export const SecretImportItem = ({
                   <tr>
                     <td style={{ padding: "0.25rem 1rem" }}>Key</td>
                     <td style={{ padding: "0.25rem 1rem" }}>Value</td>
-                    <td style={{ padding: "0.25rem 1rem" }}>Override</td>
+                    {/* <td style={{ padding: "0.25rem 1rem" }}>Override</td> */}
                   </tr>
                 </thead>
                 <tbody>
@@ -304,7 +304,7 @@ export const SecretImportItem = ({
                   )}
                   {importedSecrets
                     .filter((secret) => secret.key.toUpperCase().includes(searchTerm.toUpperCase()))
-                    .map(({ key, value, overriden }, index) => (
+                    .map(({ key, value }, index) => (
                       <tr key={`${id}-${key}-${index + 1}`}>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           {key}
@@ -312,9 +312,9 @@ export const SecretImportItem = ({
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           <SecretInput value={value} isReadOnly />
                         </td>
-                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                        {/* <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
-                        </td>
+                        </td> */}
                       </tr>
                     ))}
                 </tbody>

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportListView.tsx

@@ -90,18 +90,18 @@ type Props = {
   secretPath?: string;
   secretImports?: TSecretImport[];
   isFetching?: boolean;
-  secrets?: SecretV3RawSanitized[];
+  // secrets?: SecretV3RawSanitized[];
   importedSecrets?: TImportedSecrets;
   searchTerm: string;
 };
 
 export const SecretImportListView = ({
-  secretImports = [],
+  secretImports,
   environment,
   workspaceId,
   secretPath,
   importedSecrets,
-  secrets = [],
+  // secrets = [],
   isFetching,
   searchTerm
 }: Props) => {
@@ -117,11 +117,11 @@ export const SecretImportListView = ({
     useSensor(KeyboardSensor, {})
   );
 
-  const [items, setItems] = useState(secretImports);
+  const [items, setItems] = useState(secretImports ?? []);
 
   useEffect(() => {
     if (!isFetching) {
-      setItems(secretImports);
+      setItems(secretImports ?? []);
     }
   }, [isFetching, secretImports]);
 
@@ -170,7 +170,7 @@ export const SecretImportListView = ({
   };
 
   const handleOpenReplicationSecrets = (replicationImportId: string) => {
-    const reservedImport = secretImports.find(
+    const reservedImport = secretImports?.find(
       ({ isReserved, importPath, importEnv }) =>
         importEnv.slug === environment &&
         isReserved &&
@@ -208,8 +208,8 @@ export const SecretImportListView = ({
                 importedSecrets={computeImportedSecretRows(
                   item.importEnv.slug,
                   item.importPath,
-                  importedSecrets,
-                  secrets
+                  importedSecrets
+                  // secrets scott - now that secrets are paginated we are not showing if they are overridden (yet?)
                 )}
                 secretPath={secretPath}
                 environment={environment}

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -7,6 +7,7 @@ import { CreateTagModal } from "@app/components/tags/CreateTagModal";
 import { DeleteActionModal } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
 import { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
@@ -213,6 +214,12 @@ export const SecretListView = ({
           });
           if (cb) cb();
         }
+        queryClient.invalidateQueries(
+          dashboardKeys.getDashboardSecrets({
+            projectId: workspaceId,
+            secretPath
+          })
+        );
         queryClient.invalidateQueries(
           secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
         );
@@ -246,6 +253,9 @@ export const SecretListView = ({
     try {
       await handleSecretOperation("delete", SecretType.Shared, key, { secretId });
       // wrap this in another function and then reuse
+      queryClient.invalidateQueries(
+        dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
+      );
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
       );

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,20 +1,24 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
-import { faCheckCircle, faCircle } from "@fortawesome/free-regular-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
   faArrowDown,
   faArrowUp,
+  faFingerprint,
+  faFolder,
   faFolderBlank,
   faFolderPlus,
+  faKey,
   faList,
   faMagnifyingGlass,
   faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
@@ -55,22 +59,25 @@ import {
   useCreateFolder,
   useCreateSecretV3,
   useDeleteSecretV3,
-  useGetDynamicSecretsOfAllEnv,
-  useGetFoldersByEnv,
   useGetImportedSecretsAllEnvs,
-  useGetProjectSecretsAllEnv,
   useUpdateSecretV3
 } from "@app/hooks/api";
+import { useGetProjectSecretsOverview } from "@app/hooks/api/dashboard/queries";
+import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
 import { SecretType, TSecretFolder } from "@app/hooks/api/types";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { useDynamicSecretOverview, useFolderOverview, useSecretOverview } from "@app/hooks/utils";
+import { SecretOverviewDynamicSecretRow } from "@app/views/SecretOverviewPage/components/SecretOverviewDynamicSecretRow";
+import { SecretOverviewTableRow } from "@app/views/SecretOverviewPage/components/SecretOverviewTableRow";
+import { SecretTableResourceCount } from "@app/views/SecretOverviewPage/components/SecretTableResourceCount";
 
 import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
-import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
-import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 import { SecretV2MigrationSection } from "./components/SecretV2MigrationSection";
 import { SelectionPanel } from "./components/SelectionPanel/SelectionPanel";
 
@@ -82,9 +89,12 @@ export enum EntryType {
 enum RowType {
   Folder = "folder",
   DynamicSecret = "dynamic",
-  Secret = "Secret"
+  Secret = "secret"
 }
 
+type Filter = {
+  [key in RowType]: boolean;
+};
 const INIT_PER_PAGE = 20;
 
 export const SecretOverviewPage = () => {
@@ -96,7 +106,7 @@ export const SecretOverviewPage = () => {
   // coz when overflow the table goes to the right
   const parentTableRef = useRef<HTMLTableElement>(null);
   const [expandableTableWidth, setExpandableTableWidth] = useState(0);
-  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [orderDirection, setOrderDirection] = useState<OrderByDirection>(OrderByDirection.ASC);
   const { permission } = useProjectPermission();
 
   useEffect(() => {
@@ -106,6 +116,7 @@ export const SecretOverviewPage = () => {
   }, [parentTableRef.current]);
 
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
+  const isProjectV3 = currentWorkspace?.version === ProjectVersion.V3;
   const { currentOrg } = useOrganization();
   const workspaceId = currentWorkspace?.id as string;
   const projectSlug = currentWorkspace?.slug as string;
@@ -113,6 +124,12 @@ export const SecretOverviewPage = () => {
   const debouncedSearchFilter = useDebounce(searchFilter);
   const secretPath = (router.query?.secretPath as string) || "/";
 
+  const [filter, setFilter] = useState<Filter>({
+    [RowType.Folder]: true,
+    [RowType.DynamicSecret]: true,
+    [RowType.Secret]: true
+  });
+
   const [selectedEntries, setSelectedEntries] = useState<{
     [EntryType.FOLDER]: Record<string, boolean>;
     [EntryType.SECRET]: Record<string, boolean>;
@@ -173,61 +190,72 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
-  const [visibleEnvs, setVisibleEnvs] = useState(
-    userAvailableEnvs?.filter(({ slug }) =>
-      permission.can(
-        ProjectPermissionActions.Read,
-        subject(ProjectPermissionSub.Secrets, {
-          environment: slug,
-          secretPath
-        })
-      )
+
+  const readableEnvs = userAvailableEnvs?.filter(({ slug }) =>
+    permission.can(
+      ProjectPermissionActions.Read,
+      subject(ProjectPermissionSub.Secrets, {
+        environment: slug,
+        secretPath
+      })
     )
   );
 
+  const [visibleEnvs, setVisibleEnvs] = useState(readableEnvs);
+
   useEffect(() => {
-    setVisibleEnvs(
-      userAvailableEnvs?.filter(({ slug }) =>
-        permission.can(
-          ProjectPermissionActions.Read,
-          subject(ProjectPermissionSub.Secrets, {
-            environment: slug,
-            secretPath
-          })
-        )
-      )
-    );
+    setVisibleEnvs(readableEnvs);
   }, [userAvailableEnvs, secretPath]);
 
-  const {
-    data: secrets,
-    getSecretByKey,
-    secKeys,
-    getEnvSecretKeyCount
-  } = useGetProjectSecretsAllEnv({
-    workspaceId,
-    envs: userAvailableEnvs.map(({ slug }) => slug),
-    secretPath
-  });
-
-  const { folders, folderNames, isFolderPresentInEnv, getFolderByNameAndEnv } = useGetFoldersByEnv({
-    projectId: workspaceId,
-    path: secretPath,
-    environments: userAvailableEnvs.map(({ slug }) => slug)
-  });
-
   const { isImportedSecretPresentInEnv, getImportedSecretByKey } = useGetImportedSecretsAllEnvs({
     projectId: workspaceId,
     path: secretPath,
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
-  const { dynamicSecretNames, dynamicSecrets, isDynamicSecretPresentInEnv } =
-    useGetDynamicSecretsOfAllEnv({
-      projectSlug,
-      environmentSlugs: userAvailableEnvs.map(({ slug }) => slug),
-      path: secretPath
-    });
+  const paginationOffset = (page - 1) * perPage;
+
+  const { isLoading: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
+    {
+      projectId: workspaceId,
+      environments: visibleEnvs.map((env) => env.slug),
+      secretPath,
+      orderDirection,
+      orderBy: DashboardSecretsOrderBy.Name,
+      includeFolders: filter.folder,
+      includeDynamicSecrets: filter.dynamic,
+      includeSecrets: filter.secret,
+      search: debouncedSearchFilter,
+      limit: perPage,
+      offset: paginationOffset
+    },
+    { enabled: isProjectV3 }
+  );
+
+  const {
+    secrets,
+    folders,
+    dynamicSecrets,
+    totalCount = 0,
+    totalFolderCount,
+    totalSecretCount,
+    totalDynamicSecretCount
+  } = overview ?? {};
+
+  const { folderNames, getFolderByNameAndEnv, isFolderPresentInEnv } = useFolderOverview(
+    folders,
+    orderDirection
+  );
+
+  const { dynamicSecretNames, isDynamicSecretPresentInEnv } = useDynamicSecretOverview(
+    dynamicSecrets,
+    orderDirection
+  );
+
+  const { secKeys, getSecretByKey, getEnvSecretKeyCount } = useSecretOverview(
+    secrets,
+    orderDirection
+  );
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
@@ -472,40 +500,23 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  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]);
+    if (totalCount < paginationOffset) setPage(1);
+  }, [totalCount]);
 
-  const isTableLoading =
-    folders?.some(({ isLoading }) => isLoading) ||
-    secrets?.some(({ isLoading }) => isLoading) ||
-    dynamicSecrets?.some(({ isLoading }) => isLoading);
+  const handleToggleRowType = useCallback(
+    (rowType: RowType) =>
+      setFilter((state) => {
+        return {
+          ...state,
+          [rowType]: !state[rowType]
+        };
+      }),
+    []
+  );
 
-  if (isWorkspaceLoading || isTableLoading) {
+  if (isWorkspaceLoading || (isProjectV3 && isOverviewLoading)) {
     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
@@ -524,17 +535,22 @@ export const SecretOverviewPage = () => {
   // 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 isTableEmpty =
-    !(
-      folders?.every(({ isLoading }) => isLoading) &&
-      secrets?.every(({ isLoading }) => isLoading) &&
-      dynamicSecrets?.every(({ isLoading }) => isLoading)
-    ) && rows.length === 0;
+  const isTableEmpty = totalCount === 0;
+
+  const isTableFiltered =
+    Boolean(Object.values(filter).filter((enabled) => !enabled).length) ||
+    visibleEnvs.length !== readableEnvs?.length;
+
+  if (!isProjectV3)
+    return (
+      <div className="container flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+        <SecretV2MigrationSection />
+      </div>
+    );
 
   return (
     <>
       <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-        <SecretV2MigrationSection />
         <div className="relative right-5 ml-4">
           <NavHeader pageName={t("dashboard.title")} isProjectRelated />
         </div>
@@ -591,7 +607,10 @@ export const SecretOverviewPage = () => {
                       ariaLabel="Environments"
                       variant="plain"
                       size="sm"
-                      className="flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
+                      className={twMerge(
+                        "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                        isTableFiltered && "border-primary/50 text-primary"
+                      )}
                     >
                       <Tooltip content="Choose visible environments" className="mb-2">
                         <FontAwesomeIcon icon={faList} />
@@ -600,37 +619,25 @@ export const SecretOverviewPage = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
                     <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs
-                      .filter(({ slug }) =>
-                        permission.can(
-                          ProjectPermissionActions.Read,
-                          subject(ProjectPermissionSub.Secrets, {
-                            environment: slug,
-                            secretPath
-                          })
-                        )
-                      )
-                      .map((availableEnv) => {
-                        const { id: envId, name } = availableEnv;
+                    {readableEnvs.map((availableEnv) => {
+                      const { id: envId, name } = availableEnv;
 
-                        const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
-                        return (
-                          <DropdownMenuItem
-                            onClick={() => handleEnvSelect(envId)}
-                            key={envId}
-                            icon={
-                              isEnvSelected ? (
-                                <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
-                              ) : (
-                                <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
-                              )
-                            }
-                            iconPos="left"
-                          >
-                            <div className="flex items-center">{name}</div>
-                          </DropdownMenuItem>
-                        );
-                      })}
+                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                      return (
+                        <DropdownMenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleEnvSelect(envId);
+                          }}
+                          key={envId}
+                          disabled={visibleEnvs?.length === 1}
+                          icon={isEnvSelected && <FontAwesomeIcon icon={faCheckCircle} />}
+                          iconPos="right"
+                        >
+                          <div className="flex items-center">{name}</div>
+                        </DropdownMenuItem>
+                      );
+                    })}
                     {/* <DropdownMenuItem className="px-1.5" asChild>
                     <Button
                       size="xs"
@@ -643,6 +650,48 @@ export const SecretOverviewPage = () => {
                       Create an environment
                     </Button>
                   </DropdownMenuItem> */}
+                    <DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleToggleRowType(RowType.Folder);
+                      }}
+                      icon={filter[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      <div className="flex items-center gap-2">
+                        <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+                        <span>Folders</span>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleToggleRowType(RowType.DynamicSecret);
+                      }}
+                      icon={
+                        filter[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />
+                      }
+                      iconPos="right"
+                    >
+                      <div className="flex items-center gap-2">
+                        <FontAwesomeIcon icon={faFingerprint} className=" text-yellow-700" />
+                        <span>Dynamic Secrets</span>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleToggleRowType(RowType.Secret);
+                      }}
+                      icon={filter[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                      iconPos="right"
+                    >
+                      <div className="flex items-center gap-2">
+                        <FontAwesomeIcon icon={faKey} className=" text-bunker-300" />
+                        <span>Secrets</span>
+                      </div>
+                    </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
@@ -727,9 +776,17 @@ export const SecretOverviewPage = () => {
                         variant="plain"
                         className="ml-2"
                         ariaLabel="sort"
-                        onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
+                        onClick={() =>
+                          setOrderDirection((prev) =>
+                            prev === OrderByDirection.ASC
+                              ? OrderByDirection.DESC
+                              : OrderByDirection.ASC
+                          )
+                        }
                       >
-                        <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                        <FontAwesomeIcon
+                          icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
+                        />
                       </IconButton>
                     </div>
                   </Th>
@@ -766,7 +823,7 @@ export const SecretOverviewPage = () => {
                 </Tr>
               </THead>
               <TBody>
-                {canViewOverviewPage && isTableLoading && (
+                {canViewOverviewPage && isOverviewLoading && (
                   <TableSkeleton
                     columns={visibleEnvs.length + 1}
                     innerKey="secret-overview-loading"
@@ -808,7 +865,7 @@ export const SecretOverviewPage = () => {
                     </Td>
                   </Tr>
                 )}
-                {isTableEmpty && !isTableLoading && visibleEnvs.length > 0 && (
+                {isTableEmpty && !isOverviewLoading && visibleEnvs.length > 0 && (
                   <Tr>
                     <Td colSpan={visibleEnvs.length + 1}>
                       <EmptyState
@@ -833,60 +890,51 @@ export const SecretOverviewPage = () => {
                     </Td>
                   </Tr>
                 )}
-                {!isTableLoading &&
-                  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;
-                    }
-                  })}
+                {!isOverviewLoading && visibleEnvs.length > 0 && (
+                  <>
+                    {folderNames.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 })
+                        }
+                      />
+                    ))}
+                    {dynamicSecretNames.map((dynamicSecretName, index) => (
+                      <SecretOverviewDynamicSecretRow
+                        dynamicSecretName={dynamicSecretName}
+                        isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
+                        environments={visibleEnvs}
+                        key={`overview-${dynamicSecretName}-${index + 1}`}
+                      />
+                    ))}
+                    {secKeys.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}
+                      />
+                    ))}
+                  </>
+                )}
               </TBody>
               <TFoot>
                 <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
@@ -913,10 +961,17 @@ export const SecretOverviewPage = () => {
                 </Tr>
               </TFoot>
             </Table>
-            {!isTableLoading && rows.length > INIT_PER_PAGE && (
+            {!isOverviewLoading && totalCount > INIT_PER_PAGE && (
               <Pagination
+                startAdornment={
+                  <SecretTableResourceCount
+                    dynamicSecretCount={totalDynamicSecretCount}
+                    secretCount={totalSecretCount}
+                    folderCount={totalFolderCount}
+                  />
+                }
                 className="border-t border-solid border-t-mineshaft-600"
-                count={rows.length}
+                count={totalCount}
                 page={page}
                 perPage={perPage}
                 onChangePage={(newPage) => setPage(newPage)}

frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx

@@ -0,0 +1,45 @@
+import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  folderCount?: number;
+  importCount?: number;
+  secretCount?: number;
+  dynamicSecretCount?: number;
+};
+
+export const SecretTableResourceCount = ({
+  folderCount = 0,
+  dynamicSecretCount = 0,
+  secretCount = 0,
+  importCount = 0
+}: Props) => {
+  return (
+    <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
+      {importCount > 0 && (
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faFileImport} className=" text-green-700" />
+          <span>{importCount}</span>
+        </div>
+      )}
+      {folderCount > 0 && (
+        <div className="flex items-center gap-2 pl-2">
+          <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+          <span>{folderCount}</span>
+        </div>
+      )}
+      {dynamicSecretCount > 0 && (
+        <div className="flex items-center gap-2 pl-2">
+          <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
+          <span>{dynamicSecretCount}</span>
+        </div>
+      )}
+      {secretCount > 0 && (
+        <div className="flex items-center gap-2 pl-2">
+          <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
+          <span>{secretCount}</span>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/index.tsx

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

frontend/src/views/SecretOverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -78,7 +78,7 @@ export const SecretV2MigrationSection = () => {
 
   const isAdmin = membership?.roles.includes(ProjectMembershipRole.Admin);
   return (
-    <div className="mt-4 rounded-lg border border-primary-600 bg-mineshaft-900 p-4">
+    <div className="mt-4 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
       {isUpgrading && (
         <div className="absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
           <Spinner size="lg" className="text-primary" />
@@ -88,18 +88,30 @@ export const SecretV2MigrationSection = () => {
           </div>
         </div>
       )}
-      <p className="mb-2 text-lg font-semibold">Action Required</p>
-      <p className="mb-4 leading-7 text-gray-400">
-        Infisical secrets engine is now 10x faster and allows you to encrypt secrets with your own
-        KMS. Upgrade your project to receive these improvements.
+      <div className="mb-4 flex items-start gap-2">
+        <FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
+        <p className="text-xl font-semibold">
+          Secrets Dashboard no longer supports your project version
+        </p>
+      </div>
+      <p className="mx-1 mb-4 leading-7 text-mineshaft-300">
+        While you can still access your project&apos;s secrets through the API, Infisical encourages
+        you to upgrade your project to continue using the Dashboard experience.
+      </p>
+      <p className="mx-1 mb-4 leading-7 text-mineshaft-300">
+        Upgrading your project uses Infisical&apos;s new secrets engine, which is 10x faster and
+        allows you to encrypt secrets with your own KMS.
+      </p>
+      <p className="mx-1 mb-6 leading-7 text-mineshaft-300">
+        This update should only take a few moments and cannot be ran in the background.
       </p>
       <Button
         onClick={() => handlePopUpOpen("migrationInfo")}
         isDisabled={!isAdmin || isUpgrading}
-        color="mineshaft"
         isLoading={migrateProjectToV3.isLoading}
+        className="w-full "
       >
-        { isAdmin ? "Upgrade Project" : "Upgrade requires admin privilege"}
+        {isAdmin ? "Upgrade Project" : "Upgrade requires admin privilege"}
       </Button>
       {didProjectUpgradeFailed && (
         <p className="mt-2 text-sm leading-7 text-red-400">