feat: Allow deletion of imports (#5907)

app/scenes/Settings/Export.tsx

@@ -10,7 +10,6 @@ import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import ExportDialog from "../../components/ExportDialog";
 import FileOperationListItem from "./components/FileOperationListItem";
 
@@ -18,7 +17,6 @@ function Export() {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const { fileOperations, dialogs } = useStores();
-  const { showToast } = useToasts();
 
   const handleOpenDialog = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -33,20 +31,6 @@ function Export() {
     [dialogs, t]
   );
 
-  const handleDelete = React.useCallback(
-    async (fileOperation: FileOperation) => {
-      try {
-        await fileOperations.delete(fileOperation);
-        showToast(t("Export deleted"));
-      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
-      }
-    },
-    [fileOperations, showToast, t]
-  );
-
   return (
     <Scene title={t("Export")} icon={<DownloadIcon />}>
       <Heading>{t("Export")}</Heading>
@@ -77,11 +61,7 @@ function Export() {
           </h2>
         }
         renderItem={(item: FileOperation) => (
-          <FileOperationListItem
-            key={item.id}
-            fileOperation={item}
-            handleDelete={handleDelete}
-          />
+          <FileOperationListItem key={item.id} fileOperation={item} />
         )}
       />
     </Scene>

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
+        )
       }
     />
   );