fix: Refactor collection exports to not send email attachment (#2460)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/scenes/CollectionExport.js

@@ -6,7 +6,7 @@ import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
-
+import useToasts from "hooks/useToasts";
 type Props = {
   collection: Collection,
   onSubmit: () => void,
@@ -15,6 +15,7 @@ type Props = {
 function CollectionExport({ collection, onSubmit }: Props) {
   const [isLoading, setIsLoading] = React.useState();
   const { t } = useTranslation();
+  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: SyntheticEvent<>) => {
@@ -23,9 +24,12 @@ function CollectionExport({ collection, onSubmit }: Props) {
       setIsLoading(true);
       await collection.export();
       setIsLoading(false);
+      showToast(
+        t("Export started, you will receive an email when it’s complete.")
+      );
       onSubmit();
     },
-    [collection, onSubmit]
+    [collection, onSubmit, showToast, t]
   );
 
   return (
@@ -33,7 +37,7 @@ function CollectionExport({ collection, onSubmit }: Props) {
       <form onSubmit={handleSubmit}>
         <HelpText>
           <Trans
-            defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be downloaded as a zip of folders with files in Markdown format."
+            defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be a zip of folders with files in Markdown format. Please visit the Export section on settings to get the zip."
             values={{ collectionName: collection.name }}
             components={{ em: <strong /> }}
           />

app/scenes/Settings/ImportExport.js

@@ -11,7 +11,10 @@ import Button from "components/Button";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
 import Notice from "components/Notice";
+import PaginatedList from "components/PaginatedList";
 import Scene from "components/Scene";
+import Subheading from "components/Subheading";
+import FileOperationListItem from "./components/FileOperationListItem";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
@@ -22,7 +25,7 @@ function ImportExport() {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const fileRef = React.useRef();
-  const { collections } = useStores();
+  const { fileOperations, collections } = useStores();
   const { showToast } = useToasts();
   const [isLoading, setLoading] = React.useState(false);
   const [isImporting, setImporting] = React.useState(false);
@@ -178,11 +181,10 @@ function ImportExport() {
           {t("Choose File")}…
         </Button>
       )}
-
       <Heading>{t("Export")}</Heading>
       <HelpText>
         <Trans
-          defaults="A full export might take some time, consider exporting a single document or collection if possible. We’ll put together a zip of all your documents in Markdown format and email it to <em>{{ userEmail }}</em>."
+          defaults="A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – we will email a link to <em>{{ userEmail }}</em> when it's complete."
           values={{ userEmail: user.email }}
           components={{ em: <strong /> }}
         />
@@ -199,6 +201,24 @@ function ImportExport() {
           ? `${t("Requesting Export")}…`
           : t("Export Data")}
       </Button>
+      <br />
+      <br />
+      <PaginatedList
+        items={fileOperations.orderedDataExports}
+        fetch={fileOperations.fetchPage}
+        options={{ type: "export" }}
+        heading={
+          <Subheading>
+            <Trans>Recent exports</Trans>
+          </Subheading>
+        }
+        renderItem={(item) => (
+          <FileOperationListItem
+            key={item.id + item.state}
+            fileOperation={item}
+          />
+        )}
+      />
     </Scene>
   );
 }

app/scenes/Settings/components/FileOperationListItem.js

@@ -0,0 +1,61 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import FileOperation from "models/FileOperation";
+import Button from "components/Button";
+import ListItem from "components/List/Item";
+import Time from "components/Time";
+
+type Props = {|
+  fileOperation: FileOperation,
+|};
+
+const FileOperationListItem = ({ fileOperation }: Props) => {
+  const { t } = useTranslation();
+
+  const stateMapping = {
+    creating: t("Processing"),
+    expired: t("Expired"),
+    uploading: t("Processing"),
+    error: t("Error"),
+  };
+
+  return (
+    <ListItem
+      title={
+        fileOperation.collection
+          ? fileOperation.collection.name
+          : t("All collections")
+      }
+      subtitle={
+        <>
+          {fileOperation.state !== "complete" && (
+            <>{stateMapping[fileOperation.state]}&nbsp;•&nbsp;</>
+          )}
+          {t(`{{userName}} requested`, {
+            userName:
+              fileOperation.id === fileOperation.user.id
+                ? t("You")
+                : fileOperation.user.name,
+          })}
+          &nbsp;
+          <Time dateTime={fileOperation.createdAt} addSuffix shorten />
+          &nbsp;•&nbsp;{fileOperation.sizeInMB}
+        </>
+      }
+      actions={
+        fileOperation.state === "complete" ? (
+          <Button
+            as="a"
+            href={`/api/fileOperations.redirect?id=${fileOperation.id}`}
+            neutral
+          >
+            {t("Download")}
+          </Button>
+        ) : undefined
+      }
+    />
+  );
+};
+
+export default FileOperationListItem;