feat: add multi-select in secret overview

frontend/src/pages/project/[id]/secrets/overview.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import Head from "next/head";
 
 import { SecretOverviewPage } from "@app/views/SecretOverviewPage";
+import { StoreProvider } from "@app/views/SecretOverviewPage/SecretOverviewPage.store";
 
 const Dashboard = () => {
   const { t } = useTranslation();
@@ -16,7 +17,9 @@ const Dashboard = () => {
         <meta name="og:description" content={String(t("dashboard.og-description"))} />
       </Head>
       <div className="h-full">
-        <SecretOverviewPage />
+        <StoreProvider>
+          <SecretOverviewPage />
+        </StoreProvider>
       </div>
     </>
   );

frontend/src/views/SecretOverviewPage/SecretOverviewPage.store.tsx

@@ -0,0 +1,78 @@
+import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
+import { useRouter } from "next/router";
+import { createStore, StateCreator, StoreApi, useStore } from "zustand";
+
+export enum EntryType {
+  FOLDER = "folder",
+  SECRET = "secret"
+}
+
+type SelectedEntriesState = {
+  selectedEntries: {
+    [EntryType.FOLDER]: Record<string, boolean>;
+    [EntryType.SECRET]: Record<string, boolean>;
+  };
+  action: {
+    toggle: (type: EntryType, key: string) => void;
+    reset: () => void;
+  };
+};
+
+const createSelectedSecretStore: StateCreator<SelectedEntriesState> = (set) => ({
+  selectedEntries: {
+    [EntryType.FOLDER]: {},
+    [EntryType.SECRET]: {}
+  },
+  action: {
+    toggle: (type: EntryType, key: string) =>
+      set((state) => {
+        const isChecked = Boolean(state.selectedEntries[type]?.[key]);
+        const newChecks = { ...state.selectedEntries };
+        // remove selection if its present else add it
+        if (isChecked) delete newChecks[type][key];
+        else newChecks[type][key] = true;
+        return { selectedEntries: newChecks };
+      }),
+    reset: () =>
+      set({
+        selectedEntries: {
+          [EntryType.FOLDER]: {},
+          [EntryType.SECRET]: {}
+        }
+      })
+  }
+});
+
+const StoreContext = createContext<StoreApi<SelectedEntriesState> | null>(null);
+export const StoreProvider = ({ children }: { children: ReactNode }) => {
+  const storeRef = useRef<StoreApi<SelectedEntriesState>>();
+  const router = useRouter();
+  if (!storeRef.current) {
+    storeRef.current = createStore<SelectedEntriesState>((...a) => ({
+      ...createSelectedSecretStore(...a)
+    }));
+  }
+
+  useEffect(() => {
+    const onRouteChangeStart = () => {
+      const state = storeRef.current?.getState();
+      state?.action.reset();
+    };
+
+    router.events.on("routeChangeStart", onRouteChangeStart);
+    return () => {
+      router.events.off("routeChangeStart", onRouteChangeStart);
+    };
+  }, []);
+
+  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
+};
+
+const useStoreContext = <T extends unknown>(selector: (state: SelectedEntriesState) => T): T => {
+  const ctx = useContext(StoreContext);
+  if (!ctx) throw new Error("Missing ");
+  return useStore(ctx, selector);
+};
+
+export const useSelectedEntries = () => useStoreContext((state) => state.selectedEntries);
+export const useSelectedEntryActions = () => useStoreContext((state) => state.action);

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -70,6 +70,8 @@ import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSect
 import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
+import { SelectionPanel } from "./components/SelectionPanel/SelectionPanel";
+import { EntryType, useSelectedEntries, useSelectedEntryActions } from "./SecretOverviewPage.store";
 
 export const SecretOverviewPage = () => {
   const { t } = useTranslation();
@@ -105,6 +107,9 @@ export const SecretOverviewPage = () => {
   const [searchFilter, setSearchFilter] = useState("");
   const secretPath = (router.query?.secretPath as string) || "/";
 
+  const selectedEntries = useSelectedEntries();
+  const { toggle: toggleSelectedEntry } = useSelectedEntryActions();
+
   useEffect(() => {
     if (!isWorkspaceLoading && !workspaceId && router.isReady) {
       router.push(`/org/${currentOrg?.id}/overview`);
@@ -543,6 +548,7 @@ export const SecretOverviewPage = () => {
             </div>
           </div>
         </div>
+        <SelectionPanel secretPath={secretPath} />
         <div className="thin-scrollbar mt-4" ref={parentTableRef}>
           <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
             <Table>
@@ -666,6 +672,8 @@ export const SecretOverviewPage = () => {
                     <SecretOverviewFolderRow
                       folderName={folderName}
                       isFolderPresentInEnv={isFolderPresentInEnv}
+                      isSelected={selectedEntries.folder[folderName]}
+                      onToggleFolderSelect={() => toggleSelectedEntry(EntryType.FOLDER, folderName)}
                       environments={visibleEnvs}
                       key={`overview-${folderName}-${index + 1}`}
                       onClick={handleFolderClick}
@@ -684,6 +692,8 @@ export const SecretOverviewPage = () => {
                   visibleEnvs?.length > 0 &&
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
+                      isSelected={selectedEntries.secret[key]}
+                      onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
                       secretPath={secretPath}
                       isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                       onSecretCreate={handleSecretCreate}

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

@@ -2,20 +2,23 @@ import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Td, Tr } from "@app/components/v2";
+import { Checkbox, Td, Tr } from "@app/components/v2";
 
 type Props = {
   folderName: string;
   environments: { name: string; slug: string }[];
   isFolderPresentInEnv: (name: string, env: string) => boolean;
   onClick: (path: string) => void;
+  isSelected: boolean;
+  onToggleFolderSelect: (folderName: string) => void;
 };
 
 export const SecretOverviewFolderRow = ({
   folderName,
   environments = [],
   isFolderPresentInEnv,
-
+  isSelected,
+  onToggleFolderSelect,
   onClick
 }: Props) => {
   return (
@@ -23,7 +26,21 @@ export const SecretOverviewFolderRow = ({
       <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
         <div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
           <div className="text-yellow-700">
-            <FontAwesomeIcon icon={faFolder} />
+            <Checkbox
+              id={`checkbox-${folderName}`}
+              isChecked={isSelected}
+              onCheckedChange={() => {
+                onToggleFolderSelect(folderName);
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+            />
+            <FontAwesomeIcon
+              className={twMerge("block group-hover:hidden", isSelected && "hidden")}
+              icon={faFolder}
+            />
           </div>
           <div>{folderName}</div>
         </div>

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

@@ -11,7 +11,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
+import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 
@@ -23,6 +23,8 @@ type Props = {
   secretPath: string;
   environments: { name: string; slug: string }[];
   expandableColWidth: number;
+  isSelected: boolean;
+  onToggleSecretSelect: (key: string) => void;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
@@ -39,7 +41,9 @@ export const SecretOverviewTableRow = ({
   onSecretCreate,
   onSecretDelete,
   isImportedSecretPresentInEnv,
-  expandableColWidth
+  expandableColWidth,
+  onToggleSecretSelect,
+  isSelected
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
   const totalCols = environments.length + 1; // secret key row
@@ -56,7 +60,21 @@ export const SecretOverviewTableRow = ({
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
               <div className="text-blue-300/70">
-                <FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
+                <Checkbox
+                  id={`checkbox-${secretKey}`}
+                  isChecked={isSelected}
+                  onCheckedChange={() => {
+                    onToggleSecretSelect(secretKey);
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+                />
+                <FontAwesomeIcon
+                  className={twMerge("block group-hover:hidden", isSelected && "hidden")}
+                  icon={isFormExpanded ? faAngleDown : faKey}
+                />
               </div>
               <div title={secretKey}>{secretKey}</div>
             </div>

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

@@ -0,0 +1,78 @@
+import { subject } from "@casl/ability";
+import { faMinusSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { Button, DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { usePopUp } from "@app/hooks";
+
+import { useSelectedEntries, useSelectedEntryActions } from "../../SecretOverviewPage.store";
+
+type Props = {
+  secretPath: string;
+};
+
+export const SelectionPanel = ({ secretPath }: Props) => {
+  const { permission } = useProjectPermission();
+
+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "bulkDeleteEntries"
+  ] as const);
+
+  const selectedEntries = useSelectedEntries();
+  const { reset: resetSelectedEntries } = useSelectedEntryActions();
+  const selectedCount =
+    Object.keys(selectedEntries.folder).length + Object.keys(selectedEntries.secret).length;
+
+  const isMultiSelectActive = selectedCount > 0;
+
+  // TODO: REVISIT RBAC
+  const shouldShowDelete = permission.can(
+    ProjectPermissionActions.Delete,
+    subject(ProjectPermissionSub.Secrets, { environment: "", secretPath })
+  );
+
+  const handleBulkDelete = async () => {
+    handlePopUpClose("bulkDeleteEntries");
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "h-0 flex-shrink-0 overflow-hidden transition-all",
+          isMultiSelectActive && "h-16"
+        )}
+      >
+        <div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-bunker-300">
+          <Tooltip content="Clear">
+            <IconButton variant="plain" ariaLabel="clear-selection" onClick={resetSelectedEntries}>
+              <FontAwesomeIcon icon={faMinusSquare} size="lg" />
+            </IconButton>
+          </Tooltip>
+          <div className="ml-4 flex-grow px-2 text-sm">{selectedCount} Selected</div>
+          {shouldShowDelete && (
+            <Button
+              variant="outline_bg"
+              colorSchema="danger"
+              leftIcon={<FontAwesomeIcon icon={faTrash} />}
+              className="ml-4"
+              onClick={() => handlePopUpOpen("bulkDeleteEntries")}
+              size="xs"
+            >
+              Delete
+            </Button>
+          )}
+        </div>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.bulkDeleteEntries.isOpen}
+        deleteKey="delete"
+        title="Do you want to delete the selected secrets and folders across envs?"
+        onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
+        onDeleteApproved={handleBulkDelete}
+      />
+    </>
+  );
+};