feat: Add button to empty trash (#6772)

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

app/scenes/Trash/components/DeleteDocumentsInTrash.tsx

@@ -0,0 +1,43 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Flex from "~/components/Flex";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  onSubmit: () => void;
+  shouldRedirect: boolean;
+};
+
+function DeleteDocumentsInTrash({ onSubmit, shouldRedirect }: Props) {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const history = useHistory();
+
+  const handleSubmit = async () => {
+    await documents.emptyTrash();
+    toast.success(t("Trash emptied"));
+    onSubmit();
+    if (shouldRedirect) {
+      history.push("/home");
+    }
+  };
+
+  return (
+    <Flex column>
+      <ConfirmationDialog
+        submitText={t("I’m sure – Delete")}
+        savingText={`${t("Deleting")}…`}
+        onSubmit={handleSubmit}
+        danger
+      >
+        <Trans defaults="Are you sure you want to permanently delete all the documents in Trash? This action is immediate and cannot be undone." />
+      </ConfirmationDialog>
+    </Flex>
+  );
+}
+
+export default observer(DeleteDocumentsInTrash);

app/scenes/Trash/index.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+import { TrashIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Button from "~/components/Button";
+import Empty from "~/components/Empty";
+import Heading from "~/components/Heading";
+import PaginatedDocumentList from "~/components/PaginatedDocumentList";
+import Scene from "~/components/Scene";
+import Subheading from "~/components/Subheading";
+import { permanentlyDeleteDocumentsInTrash } from "~/actions/definitions/documents";
+import useActionContext from "~/hooks/useActionContext";
+import useStores from "~/hooks/useStores";
+
+function Trash() {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const context = useActionContext();
+  return (
+    <Scene
+      icon={<TrashIcon />}
+      title={t("Trash")}
+      actions={
+        documents.deleted.length > 0 && (
+          <Button
+            neutral
+            action={permanentlyDeleteDocumentsInTrash}
+            context={context}
+          >
+            Empty
+          </Button>
+        )
+      }
+    >
+      <Heading>{t("Trash")}</Heading>
+      <PaginatedDocumentList
+        documents={documents.deleted}
+        fetch={documents.fetchDeleted}
+        heading={<Subheading sticky>{t("Recently deleted")}</Subheading>}
+        empty={<Empty>{t("Trash is empty at the moment.")}</Empty>}
+        showCollection
+        showTemplate
+      />
+    </Scene>
+  );
+}
+
+export default observer(Trash);