diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx index fc335baec..28f5fe964 100644 --- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx +++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx @@ -1,3 +1,4 @@ +import { useState, useCallback } from "react"; import { Controller, useForm } from "react-hook-form"; import { subject } from "@casl/ability"; import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons"; @@ -6,7 +7,7 @@ import { twMerge } from "tailwind-merge"; import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; -import { IconButton, Tooltip } from "@app/components/v2"; +import { IconButton, Tooltip, DeleteActionModal } from "@app/components/v2"; import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { useToggle } from "@app/hooks"; @@ -59,6 +60,11 @@ export const SecretEditRow = ({ } }); const [isDeleting, setIsDeleting] = useToggle(); + const [isModalOpen, setIsModalOpen] = useState(false); + + const toggleModal = useCallback(() => { + setIsModalOpen((prev) => !prev) + }, []) const handleFormReset = () => { reset(); @@ -94,18 +100,29 @@ export const SecretEditRow = ({ reset({ value }); }; - const handleDeleteSecret = async () => { + const handleDeleteSecret = useCallback(async () => { setIsDeleting.on(); + setIsModalOpen(false); + try { await onSecretDelete(environment, secretName, secretId); reset({ value: null }); } finally { setIsDeleting.off(); } - }; + }, [onSecretDelete, environment, secretName, secretId, reset, setIsDeleting]); return (
+ + +
diff --git a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx index 3d97228c3..162c193a1 100644 --- a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx +++ b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx @@ -49,8 +49,9 @@ export const SelectionPanel = ({ "bulkDeleteEntries" ] as const); - const selectedCount = - Object.keys(selectedEntries.folder).length + Object.keys(selectedEntries.secret).length; + const selectedFolderCount = Object.keys(selectedEntries.folder).length + const selectedKeysCount = Object.keys(selectedEntries.secret).length + const selectedCount = selectedFolderCount + selectedKeysCount const { currentWorkspace } = useWorkspace(); const workspaceId = currentWorkspace?.id || ""; @@ -68,6 +69,16 @@ export const SelectionPanel = ({ ) ); + const getDeleteModalTitle = () => { + if (selectedFolderCount > 0 && selectedKeysCount > 0) { + return "Do you want to delete the selected secrets and folders across environments?"; + } else if (selectedKeysCount > 0 && selectedFolderCount === 0) { + return "Do you want to delete the selected secrets across environments?"; + } else { + return "Do you want to delete the selected folders across environments?"; + } + } + const handleBulkDelete = async () => { let processedEntries = 0; @@ -180,7 +191,7 @@ export const SelectionPanel = ({ handlePopUpToggle("bulkDeleteEntries", isOpen)} onDeleteApproved={handleBulkDelete} />