feat: select all on page for secrets tables and fix multipage select behavior for actions

frontend/src/views/SecretMainPage/SecretMainPage.store.tsx

@@ -2,29 +2,33 @@ import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
 import { createStore, StateCreator, StoreApi, useStore } from "zustand";
 
+import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+
 // akhilmhdh: Don't remove this file if ur thinking why use zustand just for selected selects state
 // This is first step and the whole secret crud will be moved to this global page scope state
 // this will allow more stuff like undo grouping stuffs etc
 type SelectedSecretState = {
-  selectedSecret: Record<string, boolean>;
+  selectedSecret: Record<string, SecretV3RawSanitized>;
   action: {
-    toggle: (id: string) => void;
+    toggle: (secret: SecretV3RawSanitized) => void;
     reset: () => void;
+    set: (secrets: Record<string, SecretV3RawSanitized>) => void;
   };
 };
 const createSelectedSecretStore: StateCreator<SelectedSecretState> = (set) => ({
   selectedSecret: {},
   action: {
-    toggle: (id) =>
+    toggle: (secret) =>
       set((state) => {
-        const isChecked = Boolean(state.selectedSecret?.[id]);
+        const isChecked = Boolean(state.selectedSecret?.[secret.id]);
         const newChecks = { ...state.selectedSecret };
         // remove selection if its present else add it
-        if (isChecked) delete newChecks[id];
-        else newChecks[id] = true;
+        if (isChecked) delete newChecks[secret.id];
+        else newChecks[secret.id] = secret;
         return { selectedSecret: newChecks };
       }),
-    reset: () => set({ selectedSecret: {} })
+    reset: () => set({ selectedSecret: {} }),
+    set: (secrets) => set({ selectedSecret: secrets })
   }
 });
 

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
@@ -9,7 +9,7 @@ import { twMerge } from "tailwind-merge";
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
-import { ContentLoader, Pagination } from "@app/components/v2";
+import { Checkbox, ContentLoader, Pagination, Tooltip } from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -39,7 +39,11 @@ import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
 import { SecretListView } from "./components/SecretListView";
 import { SnapshotView } from "./components/SnapshotView";
-import { StoreProvider } from "./SecretMainPage.store";
+import {
+  StoreProvider,
+  useSelectedSecretActions,
+  useSelectedSecrets
+} from "./SecretMainPage.store";
 import { Filter, RowType } from "./SecretMainPage.types";
 
 const LOADER_TEXT = [
@@ -48,7 +52,7 @@ const LOADER_TEXT = [
   "Getting secret import links..."
 ];
 
-export const SecretMainPage = () => {
+const SecretMainPageContent = () => {
   const { t } = useTranslation();
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const router = useRouter();
@@ -283,6 +287,33 @@ export const SecretMainPage = () => {
     }
   }, [secretPath]);
 
+  const selectedSecrets = useSelectedSecrets();
+  const selectedSecretActions = useSelectedSecretActions();
+
+  const allRowsSelectedOnPage = useMemo(() => {
+    if (secrets?.every((secret) => selectedSecrets[secret.id]))
+      return { isChecked: true, isIndeterminate: false };
+
+    if (secrets?.some((secret) => selectedSecrets[secret.id]))
+      return { isChecked: true, isIndeterminate: true };
+
+    return { isChecked: false, isIndeterminate: false };
+  }, [selectedSecrets, secrets]);
+
+  const toggleSelectAllRows = () => {
+    const newChecks = { ...selectedSecrets };
+
+    secrets?.forEach((secret) => {
+      if (allRowsSelectedOnPage.isChecked) {
+        delete newChecks[secret.id];
+      } else {
+        newChecks[secret.id] = secret;
+      }
+    });
+
+    selectedSecretActions.set(newChecks);
+  };
+
   if (isDetailsLoading) {
     return <ContentLoader text={LOADER_TEXT} />;
   }
@@ -300,169 +331,193 @@ export const SecretMainPage = () => {
   };
 
   return (
-    <StoreProvider>
-      <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
-            pageName={t("dashboard.title")}
-            currentEnv={environment}
-            userAvailableEnvs={currentWorkspace?.environments}
-            isFolderMode
+    <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
+          pageName={t("dashboard.title")}
+          currentEnv={environment}
+          userAvailableEnvs={currentWorkspace?.environments}
+          isFolderMode
+          secretPath={secretPath}
+          isProjectRelated
+          onEnvChange={handleEnvChange}
+          isProtectedBranch={isProtectedBranch}
+          protectionPolicyName={boardPolicy?.name}
+        />
+      </div>
+      {!isRollbackMode ? (
+        <>
+          <ActionBar
+            environment={environment}
+            workspaceId={workspaceId}
+            projectSlug={projectSlug}
             secretPath={secretPath}
-            isProjectRelated
-            onEnvChange={handleEnvChange}
-            isProtectedBranch={isProtectedBranch}
-            protectionPolicyName={boardPolicy?.name}
+            isVisible={isVisible}
+            filter={filter}
+            tags={tags}
+            onVisibilityToggle={handleToggleVisibility}
+            onSearchChange={handleSearchChange}
+            onToggleTagFilter={handleTagToggle}
+            snapshotCount={snapshotCount || 0}
+            isSnapshotCountLoading={isSnapshotCountLoading}
+            onToggleRowType={handleToggleRowType}
+            onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
           />
-        </div>
-        {!isRollbackMode ? (
-          <>
-            <ActionBar
-              secrets={secrets}
-              environment={environment}
-              workspaceId={workspaceId}
-              projectSlug={projectSlug}
-              secretPath={secretPath}
-              isVisible={isVisible}
-              filter={filter}
-              tags={tags}
-              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 rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
-              <div className="flex flex-col" id="dashboard">
-                {isNotEmpty && (
+          <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">
+              {isNotEmpty && (
+                <div
+                  className={twMerge(
+                    "sticky top-0 flex border-b border-mineshaft-600 bg-mineshaft-800 font-medium"
+                  )}
+                >
                   <div
-                    className={twMerge(
-                      "sticky top-0 flex border-b border-mineshaft-600 bg-mineshaft-800 font-medium"
-                    )}
+                    className="flex w-80 flex-shrink-0 items-center border-r border-mineshaft-600 px-4 py-2"
+                    role="button"
+                    tabIndex={0}
+                    onClick={handleSortToggle}
+                    onKeyDown={(evt) => {
+                      if (evt.key === "Enter") handleSortToggle();
+                    }}
                   >
-                    <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"
-                      role="button"
-                      tabIndex={0}
-                      onClick={handleSortToggle}
-                      onKeyDown={(evt) => {
-                        if (evt.key === "Enter") handleSortToggle();
-                      }}
+                    <Tooltip
+                      className="max-w-[20rem] whitespace-nowrap"
+                      content={
+                        totalCount > 0
+                          ? `${
+                              !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
+                            } all secrets on page`
+                          : ""
+                      }
                     >
-                      Key
-                      <FontAwesomeIcon
-                        icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
-                        className="ml-2"
-                      />
-                    </div>
-                    <div className="flex-grow px-4 py-2">Value</div>
+                      <div>
+                        <Checkbox
+                          isDisabled={totalCount === 0}
+                          id="checkbox-select-all-rows"
+                          onClick={(e) => e.stopPropagation()}
+                          isChecked={allRowsSelectedOnPage.isChecked}
+                          isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
+                          onCheckedChange={toggleSelectAllRows}
+                        />
+                      </div>
+                    </Tooltip>
+                    <div className="mx-2 h-4 w-[1px] bg-mineshaft-400" />
+                    Key
+                    <FontAwesomeIcon
+                      icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
+                      className="ml-2"
+                    />
                   </div>
-                )}
-                {canReadSecret && imports?.length && (
-                  <SecretImportListView
-                    searchTerm={debouncedSearchFilter}
-                    secretImports={imports}
-                    isFetching={isDetailsFetching}
-                    environment={environment}
-                    workspaceId={workspaceId}
-                    secretPath={secretPath}
-                    importedSecrets={importedSecrets}
-                  />
-                )}
-                {folders?.length && (
-                  <FolderListView
-                    folders={folders}
-                    environment={environment}
-                    workspaceId={workspaceId}
-                    secretPath={secretPath}
-                    onNavigateToFolder={handleResetFilter}
-                  />
-                )}
-                {canReadSecret && dynamicSecrets?.length && (
-                  <DynamicSecretListView
-                    environment={environment}
-                    projectSlug={projectSlug}
-                    secretPath={secretPath}
-                    dynamicSecrets={dynamicSecrets}
-                  />
-                )}
-                {canReadSecret && secrets?.length && (
-                  <SecretListView
-                    secrets={secrets}
-                    tags={tags}
-                    isVisible={isVisible}
-                    environment={environment}
-                    workspaceId={workspaceId}
-                    secretPath={secretPath}
-                    isProtectedBranch={isProtectedBranch}
-                  />
-                )}
-                {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
-              </div>
+                  <div className="flex-grow px-4 py-2">Value</div>
+                </div>
+              )}
+              {canReadSecret && imports?.length && (
+                <SecretImportListView
+                  searchTerm={debouncedSearchFilter}
+                  secretImports={imports}
+                  isFetching={isDetailsFetching}
+                  environment={environment}
+                  workspaceId={workspaceId}
+                  secretPath={secretPath}
+                  importedSecrets={importedSecrets}
+                />
+              )}
+              {folders?.length && (
+                <FolderListView
+                  folders={folders}
+                  environment={environment}
+                  workspaceId={workspaceId}
+                  secretPath={secretPath}
+                  onNavigateToFolder={handleResetFilter}
+                />
+              )}
+              {canReadSecret && dynamicSecrets?.length && (
+                <DynamicSecretListView
+                  environment={environment}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  dynamicSecrets={dynamicSecrets}
+                />
+              )}
+              {canReadSecret && secrets?.length && (
+                <SecretListView
+                  secrets={secrets}
+                  tags={tags}
+                  isVisible={isVisible}
+                  environment={environment}
+                  workspaceId={workspaceId}
+                  secretPath={secretPath}
+                  isProtectedBranch={isProtectedBranch}
+                />
+              )}
+              {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
             </div>
-            {!isDetailsLoading && totalCount > 0 && (
-              <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}
-              secretPath={secretPath}
-              autoCapitalize={currentWorkspace?.autoCapitalization}
-              isProtectedBranch={isProtectedBranch}
+          </div>
+          {!isDetailsLoading && totalCount > 0 && (
+            <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)}
             />
-            <SecretDropzone
-              secrets={secrets}
-              environment={environment}
-              workspaceId={workspaceId}
-              secretPath={secretPath}
-              isSmaller={isNotEmpty}
-              environments={currentWorkspace?.environments}
-              isProtectedBranch={isProtectedBranch}
-            />
-            <PitDrawer
-              secretSnaphots={snapshotList}
-              snapshotId={snapshotId}
-              isDrawerOpen={popUp.snapshots.isOpen}
-              onOpenChange={(isOpen) => handlePopUpToggle("snapshots", isOpen)}
-              hasNextPage={hasNextSnapshotListPage}
-              fetchNextPage={fetchNextSnapshotList}
-              onSelectSnapshot={handleSelectSnapshot}
-              isFetchingNextPage={isFetchingNextSnapshotList}
-            />
-          </>
-        ) : (
-          <SnapshotView
-            snapshotId={snapshotId || ""}
+          )}
+          <CreateSecretForm
             environment={environment}
             workspaceId={workspaceId}
             secretPath={secretPath}
-            secrets={secrets}
-            folders={folders}
-            snapshotCount={snapshotCount}
-            onGoBack={handleResetSnapshot}
-            onClickListSnapshot={() => handlePopUpToggle("snapshots", true)}
+            autoCapitalize={currentWorkspace?.autoCapitalization}
+            isProtectedBranch={isProtectedBranch}
           />
-        )}
-      </div>
-    </StoreProvider>
+          <SecretDropzone
+            secrets={secrets}
+            environment={environment}
+            workspaceId={workspaceId}
+            secretPath={secretPath}
+            isSmaller={isNotEmpty}
+            environments={currentWorkspace?.environments}
+            isProtectedBranch={isProtectedBranch}
+          />
+          <PitDrawer
+            secretSnaphots={snapshotList}
+            snapshotId={snapshotId}
+            isDrawerOpen={popUp.snapshots.isOpen}
+            onOpenChange={(isOpen) => handlePopUpToggle("snapshots", isOpen)}
+            hasNextPage={hasNextSnapshotListPage}
+            fetchNextPage={fetchNextSnapshotList}
+            onSelectSnapshot={handleSelectSnapshot}
+            isFetchingNextPage={isFetchingNextSnapshotList}
+          />
+        </>
+      ) : (
+        <SnapshotView
+          snapshotId={snapshotId || ""}
+          environment={environment}
+          workspaceId={workspaceId}
+          secretPath={secretPath}
+          secrets={secrets}
+          folders={folders}
+          snapshotCount={snapshotCount}
+          onGoBack={handleResetSnapshot}
+          onClickListSnapshot={() => handlePopUpToggle("snapshots", true)}
+        />
+      )}
+    </div>
   );
 };
+
+export const SecretMainPage = () => (
+  <StoreProvider>
+    <SecretMainPageContent />
+  </StoreProvider>
+);

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

@@ -54,7 +54,7 @@ import {
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch, useMoveSecrets } from "@app/hooks/api";
 import { fetchProjectSecrets } from "@app/hooks/api/secrets/queries";
-import { SecretType, SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
+import { SecretType, WsTag } from "@app/hooks/api/types";
 
 import {
   PopUpNames,
@@ -69,8 +69,7 @@ import { FolderForm } from "./FolderForm";
 import { MoveSecretsModal } from "./MoveSecretsModal";
 
 type Props = {
-  secrets?: SecretV3RawSanitized[];
-  // swtich the secrets type as it gets decrypted after api call
+  // switch the secrets type as it gets decrypted after api call
   environment: string;
   // @depreciated will be moving all these details to zustand
   workspaceId: string;
@@ -89,7 +88,6 @@ type Props = {
 };
 
 export const ActionBar = ({
-  secrets = [],
   environment,
   workspaceId,
   projectSlug,
@@ -202,7 +200,7 @@ export const ActionBar = ({
   };
 
   const handleSecretBulkDelete = async () => {
-    const bulkDeletedSecrets = secrets.filter(({ id }) => Boolean(selectedSecrets?.[id]));
+    const bulkDeletedSecrets = Object.values(selectedSecrets);
     try {
       await deleteBatchSecretV3({
         secretPath,
@@ -235,7 +233,7 @@ export const ActionBar = ({
     shouldOverwrite: boolean;
   }) => {
     try {
-      const secretsToMove = secrets.filter(({ id }) => Boolean(selectedSecrets?.[id]));
+      const secretsToMove = Object.values(selectedSecrets);
       const { isDestinationUpdated, isSourceUpdated } = await moveSecrets({
         projectSlug,
         shouldOverwrite,

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

@@ -56,7 +56,7 @@ type Props = {
   onDetailViewSecret: (sec: SecretV3RawSanitized) => void;
   isVisible?: boolean;
   isSelected?: boolean;
-  onToggleSecretSelect: (id: string) => void;
+  onToggleSecretSelect: (secret: SecretV3RawSanitized) => void;
   tags: WsTag[];
   onCreateTag: () => void;
   environment: string;
@@ -218,7 +218,7 @@ export const SecretItem = memo(
                 <Checkbox
                   id={`checkbox-${secret.id}`}
                   isChecked={isSelected}
-                  onCheckedChange={() => onToggleSecretSelect(secret.id)}
+                  onCheckedChange={() => onToggleSecretSelect(secret)}
                   className={twMerge("ml-3 hidden group-hover:flex", isSelected && "flex")}
                 />
                 <FontAwesomeSymbol

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

@@ -304,7 +304,7 @@ export const SecretListView = ({
           environment={environment}
           secretPath={secretPath}
           tags={wsTags}
-          isSelected={selectedSecrets?.[secret.id]}
+          isSelected={Boolean(selectedSecrets?.[secret.id])}
           onToggleSecretSelect={toggleSelectedSecret}
           isVisible={isVisible}
           secret={secret}