diff --git a/CHANGELOG.md b/CHANGELOG.md index e64632d79b..69f5075aa1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ The types of changes are: ## [1.7.1](https://github.com/ethyca/fides/compare/1.6.1...1.7.1) - 2022-07-28 ### Added +* Add delete confirmation when deleting a field or collection from a dataset [808](https://github.com/ethyca/fides/issues/808) ### Fixed diff --git a/clients/admin-ui/cypress/videos/datasets.cy.ts.mp4 b/clients/admin-ui/cypress/videos/datasets.cy.ts.mp4 new file mode 100644 index 0000000000..d9ad650b13 Binary files /dev/null and b/clients/admin-ui/cypress/videos/datasets.cy.ts.mp4 differ diff --git a/clients/admin-ui/src/features/common/ConfirmationModal.tsx b/clients/admin-ui/src/features/common/ConfirmationModal.tsx new file mode 100644 index 0000000000..c15ee1033f --- /dev/null +++ b/clients/admin-ui/src/features/common/ConfirmationModal.tsx @@ -0,0 +1,46 @@ +import { + Button, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + SimpleGrid, +} from "@fidesui/react"; +import { ReactNode } from "react"; + +interface Props { + isOpen: boolean; + onClose: () => void; + onDelete: () => void; + title: string; + message: ReactNode; +} +const ConfirmationModal = ({ + isOpen, + onClose, + onDelete, + title, + message, +}: Props) => ( + + + + {title} + {message} + + + + + + + + +); + +export default ConfirmationModal; diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx index 6419525594..d4253c3a6c 100644 --- a/clients/admin-ui/src/features/common/form/inputs.tsx +++ b/clients/admin-ui/src/features/common/form/inputs.tsx @@ -116,7 +116,6 @@ export const CustomSelect = ({ isSearchable={isSearchable ?? false} isClearable={isClearable} /> - {tooltip ? : null} diff --git a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx index c5146cf77f..25fa8c9b49 100644 --- a/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx +++ b/clients/admin-ui/src/features/dataset/EditCollectionDrawer.tsx @@ -1,4 +1,4 @@ -import { useToast } from "@fidesui/react"; +import { Text, useToast } from "@fidesui/react"; import { useSelector } from "react-redux"; import { errorToastParams, successToastParams } from "../common/toast"; @@ -78,6 +78,16 @@ const EditCollectionDrawer = ({ collection, isOpen, onClose }: Props) => { description={DESCRIPTION} header={`Collection Name: ${collection.name}`} onDelete={handleDelete} + deleteTitle="Delete Collection" + deleteMessage={ + + You are about to permanently delete the collection named{" "} + + {collection.name} + {" "} + from this dataset. Are you sure you would like to continue? + + } > - - - - - - - - - + + + - - - {header} - } - size="xs" - onClick={onDelete} - /> - - - - {description} - - {children} - - - - -); +}: Props) => { + const { + isOpen: deleteIsOpen, + onOpen: onDeleteOpen, + onClose: onDeleteClose, + } = useDisclosure(); + + return ( + <> + + + + + + + + + {header} + } + size="xs" + onClick={onDeleteOpen} + /> + + + + {description} + + {children} + + + + + + + ); +}; export default EditDrawer; diff --git a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx index ddb4a8b670..6aed52c396 100644 --- a/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx +++ b/clients/admin-ui/src/features/dataset/EditFieldDrawer.tsx @@ -1,3 +1,4 @@ +import { Text } from "@fidesui/react"; import { useSelector } from "react-redux"; import { @@ -65,6 +66,16 @@ const EditFieldDrawer = ({ field, isOpen, onClose }: Props) => { header={`Field Name: ${field.name}`} description={DESCRIPTION} onDelete={handleDelete} + deleteTitle="Delete Field" + deleteMessage={ + + You are about to permanently delete the field named{" "} + + {field.name} + {" "} + from this dataset. Are you sure you would like to continue? + + } >