feat: add multi-select in secret overview

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}
+      />
+    </>
+  );
+};