feat: Allow deletion of imports (#5907)

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -10,21 +10,26 @@ import {
 } from "@shared/types";
 import FileOperation from "~/models/FileOperation";
 import { Action } from "~/components/Actions";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
 import ListItem from "~/components/List/Item";
 import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import FileOperationMenu from "~/menus/FileOperationMenu";
 
 type Props = {
   fileOperation: FileOperation;
-  handleDelete?: (fileOperation: FileOperation) => Promise<void>;
 };
 
-const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
+const FileOperationListItem = ({ fileOperation }: Props) => {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const theme = useTheme();
+  const { dialogs, fileOperations } = useStores();
+  const { showToast } = useToasts();
+
   const stateMapping = {
     [FileOperationState.Creating]: t("Processing"),
     [FileOperationState.Uploading]: t("Processing"),
@@ -55,6 +60,46 @@ const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
       ? fileOperation.name
       : t("All collections");
 
+  const handleDelete = React.useCallback(async () => {
+    try {
+      await fileOperations.delete(fileOperation);
+
+      if (fileOperation.type === FileOperationType.Import) {
+        showToast(t("Import deleted"));
+      } else {
+        showToast(t("Export deleted"));
+      }
+    } catch (err) {
+      showToast(err.message, {
+        type: "error",
+      });
+    }
+  }, [fileOperation, fileOperations, showToast, t]);
+
+  const handleConfirmDelete = React.useCallback(async () => {
+    dialogs.openModal({
+      isCentered: true,
+      title: t("Are you sure you want to delete this import?"),
+      content: (
+        <ConfirmationDialog
+          onSubmit={handleDelete}
+          submitText={t("I’m sure")}
+          savingText={`${t("Deleting")}…`}
+          danger
+        >
+          {t(
+            "Deleting this import will also delete all collections and documents that were created from it. This cannot be undone."
+          )}
+        </ConfirmationDialog>
+      ),
+    });
+  }, [dialogs, t, handleDelete]);
+
+  const showMenu =
+    (fileOperation.type === FileOperationType.Export &&
+      fileOperation.state === FileOperationState.Complete) ||
+    fileOperation.type === FileOperationType.Import;
+
   return (
     <ListItem
       title={title}
@@ -76,17 +121,18 @@ const FileOperationListItem = ({ fileOperation, handleDelete }: Props) => {
         </>
       }
       actions={
-        fileOperation.state === FileOperationState.Complete && handleDelete ? (
+        showMenu && (
           <Action>
             <FileOperationMenu
-              id={fileOperation.id}
-              onDelete={async (ev) => {
-                ev.preventDefault();
-                await handleDelete(fileOperation);
-              }}
+              fileOperation={fileOperation}
+              onDelete={
+                fileOperation.type === FileOperationType.Import
+                  ? handleConfirmDelete
+                  : handleDelete
+              }
             />
           </Action>
-        ) : undefined
+        )
       }
     />
   );