fix: Archive and trash a document by dropping in the sidebar (#2318)

app/components/Sidebar/Main.js

@@ -1,15 +1,13 @@
 // @flow
 import { observer } from "mobx-react";
 import {
-  ArchiveIcon,
-  HomeIcon,
   EditIcon,
-  SearchIcon,
-  StarredIcon,
-  ShapesIcon,
-  TrashIcon,
+  HomeIcon,
   PlusIcon,
+  SearchIcon,
   SettingsIcon,
+  ShapesIcon,
+  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -23,16 +21,22 @@ import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
+import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
 import TeamButton from "./components/TeamButton";
+import TrashLink from "./components/TrashLink";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
 function MainSidebar() {
   const { t } = useTranslation();
-  const { policies, auth, documents } = useStores();
+  const { policies, documents } = useStores();
+  const team = useCurrentTeam();
+  const user = useCurrentUser();
   const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
   const [
     createCollectionModalOpen,
@@ -71,9 +75,6 @@ function MainSidebar() {
     dndArea,
   ]);
 
-  const { user, team } = auth;
-  if (!user || !team) return null;
-
   const can = policies.abilities(team.id);
 
   return (
@@ -151,27 +152,8 @@ function MainSidebar() {
                       documents.active ? documents.active.template : undefined
                     }
                   />
-                  <SidebarLink
-                    to="/archive"
-                    icon={<ArchiveIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Archive")}
-                    active={
-                      documents.active
-                        ? documents.active.isArchived &&
-                          !documents.active.isDeleted
-                        : undefined
-                    }
-                  />
-                  <SidebarLink
-                    to="/trash"
-                    icon={<TrashIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Trash")}
-                    active={
-                      documents.active ? documents.active.isDeleted : undefined
-                    }
-                  />
+                  <ArchiveLink documents={documents} />
+                  <TrashLink documents={documents} />
                 </>
               )}
               <SidebarLink

app/components/Sidebar/components/ArchiveLink.js

@@ -0,0 +1,43 @@
+// @flow
+import { observer } from "mobx-react";
+import { ArchiveIcon } from "outline-icons";
+import * as React from "react";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
+import useStores from "../../../hooks/useStores";
+import SidebarLink from "./SidebarLink";
+import useToasts from "hooks/useToasts";
+
+function ArchiveLink({ documents }) {
+  const { policies } = useStores();
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+
+  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
+    accept: "document",
+    drop: async (item, monitor) => {
+      const document = documents.get(item.id);
+      await document.archive();
+      showToast(t("Document archived"), { type: "success" });
+    },
+    canDrop: (item, monitor) => policies.abilities(item.id).archive,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });
+
+  return (
+    <div ref={dropToArchiveDocument}>
+      <SidebarLink
+        to="/archive"
+        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
+        exact={false}
+        label={t("Archive")}
+        active={documents.active?.isArchived && !documents.active?.isDeleted}
+        isActiveDrop={isDocumentDropping}
+      />
+    </div>
+  );
+}
+
+export default observer(ArchiveLink);

app/components/Sidebar/components/DocumentLink.js

@@ -133,7 +133,11 @@ function DocumentLink(
       isDragging: !!monitor.isDragging(),
     }),
     canDrag: (monitor) => {
-      return policies.abilities(node.id).move;
+      return (
+        policies.abilities(node.id).move ||
+        policies.abilities(node.id).archive ||
+        policies.abilities(node.id).delete
+      );
     },
   });
 

app/components/Sidebar/components/TrashLink.js

@@ -0,0 +1,62 @@
+// @flow
+import { observer } from "mobx-react";
+import { TrashIcon } from "outline-icons";
+import * as React from "react";
+import { useState } from "react";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
+import DocumentDelete from "scenes/DocumentDelete";
+import Modal from "components/Modal";
+import useStores from "../../../hooks/useStores";
+import SidebarLink from "./SidebarLink";
+
+function TrashLink({ documents }) {
+  const { policies } = useStores();
+  const { t } = useTranslation();
+  const [document, setDocument] = useState();
+
+  const [{ isDocumentDropping }, dropToTrashDocument] = useDrop({
+    accept: "document",
+    drop: (item, monitor) => {
+      const doc = documents.get(item.id);
+      // without setTimeout it was not working in firefox v89.0.2-ubuntu
+      // on dropping mouseup is considered as clicking outside the modal, and it immediately closes
+      setTimeout(() => setDocument(doc), 1);
+    },
+    canDrop: (item, monitor) => policies.abilities(item.id).delete,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });
+
+  return (
+    <>
+      <div ref={dropToTrashDocument}>
+        <SidebarLink
+          to="/trash"
+          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
+          exact={false}
+          label={t("Trash")}
+          active={documents.active?.isDeleted}
+          isActiveDrop={isDocumentDropping}
+        />
+      </div>
+      {document && (
+        <Modal
+          title={t("Delete {{ documentName }}", {
+            documentName: document.noun,
+          })}
+          onRequestClose={() => setDocument(undefined)}
+          isOpen
+        >
+          <DocumentDelete
+            document={document}
+            onSubmit={() => setDocument(undefined)}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default observer(TrashLink);

package.json

@@ -112,7 +112,7 @@
     "mobx-react": "^6.3.1",
     "natural-sort": "^1.0.0",
     "nodemailer": "^6.4.16",
-    "outline-icons": "^1.27.0",
+    "outline-icons": "^1.27.2",
     "oy-vey": "^0.10.0",
     "passport": "^0.4.1",
     "passport-google-oauth2": "^0.2.0",

shared/i18n/locales/en_US/translation.json

@@ -119,11 +119,13 @@
   "Dismiss": "Dismiss",
   "Keyboard shortcuts": "Keyboard shortcuts",
   "Back": "Back",
+  "Document archived": "Document archived",
   "Collections could not be loaded, please reload the app": "Collections could not be loaded, please reload the app",
   "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",
   "Document not supported – try Markdown, Plain text, HTML, or Word": "Document not supported – try Markdown, Plain text, HTML, or Word",
+  "Delete {{ documentName }}": "Delete {{ documentName }}",
   "Home": "Home",
   "Starred": "Starred",
   "Settings": "Settings",
@@ -177,7 +179,6 @@
   "Alphabetical sort": "Alphabetical sort",
   "Manual sort": "Manual sort",
   "Document duplicated": "Document duplicated",
-  "Document archived": "Document archived",
   "Document restored": "Document restored",
   "Document unpublished": "Document unpublished",
   "Document options": "Document options",
@@ -197,7 +198,6 @@
   "Download": "Download",
   "Print": "Print",
   "Move {{ documentName }}": "Move {{ documentName }}",
-  "Delete {{ documentName }}": "Delete {{ documentName }}",
   "Permanently delete {{ documentName }}": "Permanently delete {{ documentName }}",
   "Edit group": "Edit group",
   "Delete group": "Delete group",

yarn.lock

@@ -9817,10 +9817,10 @@ os-name@^3.1.0:
     macos-release "^2.2.0"
     windows-release "^3.1.0"
 
-outline-icons@^1.26.1, outline-icons@^1.27.0:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.27.0.tgz#0d923a0b81fe2f3eac1ee5ffe9617158d41e4c29"
-  integrity sha512-YGm0IjCGO3+dduESI4aU/VMmu5uVJwsbStGn6+fRVZLryv2HEFcfofgF93AvPnc8AdFgF9xwzyYisnzpLjhPbA==
+outline-icons@^1.26.1, outline-icons@^1.27.2:
+  version "1.27.2"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.27.2.tgz#9ff2ba209ba77a94f6a2a19ae0cbee403973d7c2"
+  integrity sha512-cvvJ3Ockcqsj5zphTCK5OzKGBMXmFVCe0OhuiNdtt1gVS+/yAE2fIs93RlW2ERIEIDsAlWrK6oBvDFpIgEHiQw==
 
 oy-vey@^0.10.0:
   version "0.10.0"