Delete confirmation (#809)

* Fix styling * Add DeleteConfirmation to deleting dataset fields and collections * Update changelog * Fix EditDatasetDrawer to take new props * Address PR feedback
ethyca · Jul 28, 2022 · 3b2c1fd · 3b2c1fd
1 parent 8775c86
commit 3b2c1fd
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 56 deletions.
diff --git 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
diff --git a/clients/admin-ui/src/features/common/ConfirmationModal.tsx 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) => (
+  <Modal isOpen={isOpen} onClose={onClose} size="lg">
+    <ModalOverlay />
+    <ModalContent textAlign="center" p={2}>
+      <ModalHeader fontWeight="medium">{title}</ModalHeader>
+      <ModalBody>{message}</ModalBody>
+      <ModalFooter>
+        <SimpleGrid columns={2} width="100%">
+          <Button variant="outline" mr={3} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button colorScheme="primary" onClick={onDelete}>
+            Continue
+          </Button>
+        </SimpleGrid>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+);
+
+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
@@ -116,7 +116,6 @@ export const CustomSelect = ({
             isSearchable={isSearchable ?? false}
             isClearable={isClearable}
           />
-
           {tooltip ? <QuestionTooltip label={tooltip} /> : null}
         </Box>
       </Grid>

diff --git 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={
+        <Text>
+          You are about to permanently delete the collection named{" "}
+          <Text color="complimentary.500" as="span" fontWeight="bold">
+            {collection.name}
+          </Text>{" "}
+          from this dataset. Are you sure you would like to continue?
+        </Text>
+      }
     >
       <EditCollectionOrFieldForm
         values={collection}

diff --git a/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx b/clients/admin-ui/src/features/dataset/EditCollectionOrFieldForm.tsx
@@ -80,30 +80,24 @@ const EditCollectionOrFieldForm = ({
           height="80vh"
         >
           <Stack>
-            <Box>
-              <CustomTextInput
-                name="description"
-                label="Description"
-                tooltip={descriptionTooltip}
-              />
-            </Box>
-            <Box>
-              <CustomSelect
-                name="data_qualifier"
-                label="Identifiability"
-                options={IDENTIFIER_OPTIONS}
-                tooltip={dataQualifierTooltip}
-                isSearchable={false}
-              />
-            </Box>
-            <Box>
-              <DataCategoryInput
-                dataCategories={allDataCategories}
-                checked={checkedDataCategories}
-                onChecked={setCheckedDataCategories}
-                tooltip={dataCategoryTooltip}
-              />
-            </Box>
+            <CustomTextInput
+              name="description"
+              label="Description"
+              tooltip={descriptionTooltip}
+            />
+            <CustomSelect
+              name="data_qualifier"
+              label="Identifiability"
+              options={IDENTIFIER_OPTIONS}
+              tooltip={dataQualifierTooltip}
+              isSearchable={false}
+            />
+            <DataCategoryInput
+              dataCategories={allDataCategories}
+              checked={checkedDataCategories}
+              onChecked={setCheckedDataCategories}
+              tooltip={dataCategoryTooltip}
+            />
           </Stack>
           <Box>
             <Button onClick={onClose} mr={2} size="sm" variant="outline">

diff --git a/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx
@@ -1,4 +1,4 @@
-import { useToast } from "@fidesui/react";
+import { Text, useToast } from "@fidesui/react";
 
 import { errorToastParams, successToastParams } from "../common/toast";
 import { useUpdateDatasetMutation } from "./dataset.slice";
@@ -46,6 +46,16 @@ const EditDatasetDrawer = ({ dataset, isOpen, onClose }: Props) => {
       description={DESCRIPTION}
       header={`Dataset Name: ${dataset.name}`}
       onDelete={() => {}} // TODO #769
+      deleteMessage={
+        <Text>
+          You are about to permanently delete the collection named{" "}
+          <Text color="complimentary.500" as="span" fontWeight="bold">
+            {dataset.name}
+          </Text>{" "}
+          from this dataset. Are you sure you would like to continue?
+        </Text>
+      }
+      deleteTitle="Delete Dataset"
     >
       <EditDatasetForm
         values={dataset}

diff --git a/clients/admin-ui/src/features/dataset/EditDrawer.tsx b/clients/admin-ui/src/features/dataset/EditDrawer.tsx
@@ -8,17 +8,22 @@ import {
   DrawerOverlay,
   IconButton,
   Text,
+  useDisclosure,
 } from "@fidesui/react";
 import { ReactNode } from "react";
 
 import { CloseSolidIcon, TrashCanSolidIcon } from "~/features/common/Icon";
 
+import ConfirmationModal from "../common/ConfirmationModal";
+
 interface Props {
   header: string;
   description: string;
   isOpen: boolean;
   onClose: () => void;
   onDelete: () => void;
+  deleteTitle: string;
+  deleteMessage: ReactNode;
   children: ReactNode;
 }
 
@@ -28,35 +33,54 @@ const EditDrawer = ({
   isOpen,
   onClose,
   onDelete,
+  deleteTitle,
+  deleteMessage,
   children,
-}: Props) => (
-  <Drawer placement="right" isOpen={isOpen} onClose={onClose} size="lg">
-    <DrawerOverlay />
-    <DrawerContent>
-      <Box py={2}>
-        <Box display="flex" justifyContent="flex-end" mr={2}>
-          <Button variant="ghost" onClick={onClose}>
-            <CloseSolidIcon />
-          </Button>
-        </Box>
-        <DrawerHeader py={2} display="flex" alignItems="center">
-          <Text mr="2">{header}</Text>
-          <IconButton
-            aria-label="delete"
-            icon={<TrashCanSolidIcon />}
-            size="xs"
-            onClick={onDelete}
-          />
-        </DrawerHeader>
-        <DrawerBody>
-          <Text fontSize="sm" mb={4}>
-            {description}
-          </Text>
-          {children}
-        </DrawerBody>
-      </Box>
-    </DrawerContent>
-  </Drawer>
-);
+}: Props) => {
+  const {
+    isOpen: deleteIsOpen,
+    onOpen: onDeleteOpen,
+    onClose: onDeleteClose,
+  } = useDisclosure();
+
+  return (
+    <>
+      <Drawer placement="right" isOpen={isOpen} onClose={onClose} size="lg">
+        <DrawerOverlay />
+        <DrawerContent>
+          <Box py={2}>
+            <Box display="flex" justifyContent="flex-end" mr={2}>
+              <Button variant="ghost" onClick={onClose}>
+                <CloseSolidIcon />
+              </Button>
+            </Box>
+            <DrawerHeader py={2} display="flex" alignItems="center">
+              <Text mr="2">{header}</Text>
+              <IconButton
+                aria-label="delete"
+                icon={<TrashCanSolidIcon />}
+                size="xs"
+                onClick={onDeleteOpen}
+              />
+            </DrawerHeader>
+            <DrawerBody>
+              <Text fontSize="sm" mb={4}>
+                {description}
+              </Text>
+              {children}
+            </DrawerBody>
+          </Box>
+        </DrawerContent>
+      </Drawer>
+      <ConfirmationModal
+        isOpen={deleteIsOpen}
+        onClose={onDeleteClose}
+        onDelete={onDelete}
+        title={deleteTitle}
+        message={deleteMessage}
+      />
+    </>
+  );
+};
 
 export default EditDrawer;
diff --git 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={
+        <Text>
+          You are about to permanently delete the field named{" "}
+          <Text color="complimentary.500" as="span" fontWeight="bold">
+            {field.name}
+          </Text>{" "}
+          from this dataset. Are you sure you would like to continue?
+        </Text>
+      }
     >
       <EditCollectionOrFieldForm
         values={field}