Delete datasets (#827)

* Fix styling

* Add DeleteConfirmation to deleting dataset fields and collections

* Update changelog

* Fix EditDatasetDrawer to take new props

* Add delete functionality to datasets

* Invalidate tags properly

* Update changelog

* merge main

* Remove DeleteConfirmation

CHANGELOG.md

@@ -19,6 +19,7 @@ The types of changes are:
 
 ### Added
 * Add delete confirmation when deleting a field or collection from a dataset [808](https://github.com/ethyca/fides/issues/808)
+* Add ability to delete datasets from the UI
 * Initial configuration wizard UI view
   * System scanning step: AWS credentials form and initial `generate` API usage.
 * CustomInput type "password" with show/hide icon.

clients/admin-ui/src/features/common/ConfirmationModal.tsx

@@ -13,14 +13,14 @@ import { ReactNode } from "react";
 interface Props {
   isOpen: boolean;
   onClose: () => void;
-  onDelete: () => void;
+  onConfirm: () => void;
   title: string;
   message: ReactNode;
 }
 const ConfirmationModal = ({
   isOpen,
   onClose,
-  onDelete,
+  onConfirm,
   title,
   message,
 }: Props) => (
@@ -34,7 +34,7 @@ const ConfirmationModal = ({
           <Button variant="outline" mr={3} onClick={onClose}>
             Cancel
           </Button>
-          <Button colorScheme="primary" onClick={onDelete}>
+          <Button colorScheme="primary" onClick={onConfirm}>
             Continue
           </Button>
         </SimpleGrid>

clients/admin-ui/src/features/common/form/inputs.tsx

@@ -169,7 +169,9 @@ export const CustomMultiSelect = ({
 }: SelectProps & FieldHookConfig<string[]>) => {
   const [field, meta] = useField(props);
   const isInvalid = !!(meta.touched && meta.error);
-  const selected = options.filter((o) => field.value.indexOf(o.value) >= 0);
+  const selected = field.value
+    ? options.filter((o) => field.value.indexOf(o.value) >= 0)
+    : [];
   // note: for Multiselect we have to do setFieldValue instead of field.onChange
   // because field.onChange only accepts strings or events right now, not string[]
   // https://github.com/jaredpalmer/formik/issues/1667

clients/admin-ui/src/features/dataset/EditDatasetDrawer.tsx

@@ -1,7 +1,12 @@
 import { Text, useToast } from "@fidesui/react";
+import { useRouter } from "next/router";
 
 import { errorToastParams, successToastParams } from "../common/toast";
-import { useUpdateDatasetMutation } from "./dataset.slice";
+import {
+  setActiveDataset,
+  useDeleteDatasetMutation,
+  useUpdateDatasetMutation,
+} from "./dataset.slice";
 import EditDatasetForm from "./EditDatasetForm";
 import EditDrawer from "./EditDrawer";
 import { Dataset } from "./types";
@@ -15,28 +20,46 @@ interface Props {
 }
 const EditDatasetDrawer = ({ dataset, isOpen, onClose }: Props) => {
   const [updateDataset] = useUpdateDatasetMutation();
+  const [deleteDataset] = useDeleteDatasetMutation();
+  const router = useRouter();
   const toast = useToast();
 
   const handleSubmit = async (values: Partial<Dataset>) => {
-    if (dataset) {
-      const updatedDataset = { ...dataset, ...values };
-      try {
-        const result = await updateDataset(updatedDataset);
-        // TODO: we should systematically coerce errors into their types (see fidesops)
-        if ("error" in result && "data" in result.error) {
-          if ("data" in result.error) {
-            toast(errorToastParams(result.error.data as string));
-          } else {
-            toast(errorToastParams("An unknown error occurred"));
-          }
+    const updatedDataset = { ...dataset, ...values };
+    try {
+      const result = await updateDataset(updatedDataset);
+      // TODO: we should systematically coerce errors into their types (#803)
+      if ("error" in result && "data" in result.error) {
+        if ("data" in result.error) {
+          toast(errorToastParams(result.error.data as string));
         } else {
-          toast(successToastParams("Successfully modified dataset"));
+          toast(errorToastParams("An unknown error occurred"));
         }
-      } catch (error) {
-        toast(errorToastParams(error as string));
+      } else {
+        toast(successToastParams("Successfully modified dataset"));
       }
-      onClose();
+    } catch (error) {
+      toast(errorToastParams(error as string));
     }
+    onClose();
+  };
+
+  const handleDelete = async () => {
+    const { fides_key: fidesKey } = dataset;
+    const result = await deleteDataset(fidesKey);
+    // TODO: we should systematically coerce errors into their types (#803)
+    if ("error" in result && "data" in result.error) {
+      if ("data" in result.error) {
+        toast(errorToastParams(result.error.data as string));
+      } else {
+        toast(errorToastParams("An unknown error occurred"));
+      }
+    } else {
+      toast(successToastParams("Successfully deleted dataset"));
+    }
+    setActiveDataset(null);
+    router.push("/dataset");
+    onClose();
   };
 
   return (
@@ -45,14 +68,14 @@ const EditDatasetDrawer = ({ dataset, isOpen, onClose }: Props) => {
       onClose={onClose}
       description={DESCRIPTION}
       header={`Dataset Name: ${dataset.name}`}
-      onDelete={() => {}} // TODO #769
+      onDelete={handleDelete}
       deleteMessage={
         <Text>
-          You are about to permanently delete the collection named{" "}
+          You are about to permanently delete the dataset named{" "}
           <Text color="complimentary.500" as="span" fontWeight="bold">
             {dataset.name}
-          </Text>{" "}
-          from this dataset. Are you sure you would like to continue?
+          </Text>
+          . Are you sure you would like to continue?
         </Text>
       }
       deleteTitle="Delete Dataset"

clients/admin-ui/src/features/dataset/EditDrawer.tsx

@@ -75,7 +75,7 @@ const EditDrawer = ({
       <ConfirmationModal
         isOpen={deleteIsOpen}
         onClose={onDeleteClose}
-        onDelete={onDelete}
+        onConfirm={onDelete}
         title={deleteTitle}
         message={deleteMessage}
       />

clients/admin-ui/src/features/dataset/dataset.slice.ts

@@ -22,16 +22,21 @@ const initialState: State = {
   activeFieldIndex: null,
 };
 
+interface DatasetDeleteResponse {
+  message: string;
+  resource: Dataset;
+}
+
 export const datasetApi = createApi({
   reducerPath: "datasetApi",
   baseQuery: fetchBaseQuery({
     baseUrl: process.env.NEXT_PUBLIC_FIDESCTL_API,
   }),
-  tagTypes: ["Dataset"],
+  tagTypes: ["Dataset", "Datasets"],
   endpoints: (build) => ({
     getAllDatasets: build.query<Dataset[], void>({
       query: () => ({ url: `dataset/` }),
-      providesTags: () => ["Dataset"],
+      providesTags: () => ["Datasets"],
     }),
     getDatasetByKey: build.query<Dataset, FidesKey>({
       query: (key) => ({ url: `dataset/${key}` }),
@@ -49,13 +54,22 @@ export const datasetApi = createApi({
       }),
       invalidatesTags: ["Dataset"],
     }),
+    deleteDataset: build.mutation<DatasetDeleteResponse, FidesKey>({
+      query: (key) => ({
+        url: `dataset/${key}`,
+        params: { resource_type: "dataset" },
+        method: "DELETE",
+      }),
+      invalidatesTags: ["Datasets"],
+    }),
   }),
 });
 
 export const {
   useGetAllDatasetsQuery,
   useGetDatasetByKeyQuery,
   useUpdateDatasetMutation,
+  useDeleteDatasetMutation,
 } = datasetApi;
 
 export const datasetSlice = createSlice({