feat: Add button to empty trash (#6772)

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

app/actions/definitions/documents.tsx

@@ -37,11 +37,12 @@ import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
+import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import DuplicateDialog from "~/components/DuplicateDialog";
 import SharePopover from "~/components/Sharing";
 import { createAction } from "~/actions";
-import { DocumentSection } from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
 import history from "~/utils/history";
 import {
@@ -52,6 +53,7 @@ import {
   searchPath,
   documentPath,
   urlify,
+  trashPath,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -828,6 +830,27 @@ export const permanentlyDeleteDocument = createAction({
   },
 });
 
+export const permanentlyDeleteDocumentsInTrash = createAction({
+  name: ({ t }) => t("Empty"),
+  analyticsName: "Empty trash",
+  section: TrashSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ stores }) =>
+    stores.documents.deleted.length > 0 && !!stores.auth.user?.isAdmin,
+  perform: ({ stores, t, location }) => {
+    stores.dialogs.openModal({
+      title: t("Permanently delete documents in trash"),
+      content: (
+        <DeleteDocumentsInTrash
+          onSubmit={stores.dialogs.closeAllModals}
+          shouldRedirect={location.pathname === trashPath()}
+        />
+      ),
+    });
+  },
+});
+
 export const openDocumentComments = createAction({
   name: ({ t }) => t("Comments"),
   analyticsName: "Open comments",
@@ -952,6 +975,7 @@ export const rootDocumentActions = [
   moveDocument,
   openRandomDocument,
   permanentlyDeleteDocument,
+  permanentlyDeleteDocumentsInTrash,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,

app/actions/sections.ts

@@ -20,3 +20,5 @@ export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>
   t("Recent searches");
+
+export const TrashSection = ({ t }: ActionContext) => t("Trash");

app/components/Collection/CollectionForm.tsx

@@ -61,7 +61,7 @@ export const CollectionForm = observer(function CollectionForm_({
   React.useEffect(() => {
     // If the user hasn't picked an icon yet, go ahead and suggest one based on
     // the name of the collection. It's the little things sometimes.
-    if (!hasOpenedIconPicker) {
+    if (!hasOpenedIconPicker && !collection) {
       setValue(
         "icon",
         IconLibrary.findIconByKeyword(values.name) ??
@@ -69,7 +69,7 @@ export const CollectionForm = observer(function CollectionForm_({
           "collection"
       );
     }
-  }, [values.name]);
+  }, [values.name, collection]);
 
   const handleIconPickerChange = React.useCallback(
     (color: string, icon: string) => {

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

@@ -2,18 +2,36 @@ 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")}>
+    <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}

app/stores/DocumentsStore.ts

@@ -765,6 +765,14 @@ export default class DocumentsStore extends Store<Document> {
     });
   };
 
+  @action
+  emptyTrash = async () => {
+    await client.post("/documents.empty_trash");
+
+    const documentIdsSet = new Set(this.deleted.map((doc) => doc.id));
+    this.removeAll((doc: Document) => documentIdsSet.has(doc.id));
+  };
+
   star = (document: Document, index?: string) =>
     this.rootStore.stars.create({
       documentId: document.id,