fix: Documents in deleted collection should appear in trash (#1362)

* fix: Documents from deleted collection should show in trash * improve messaging * test: Add documents.move tests feat: Add ability to restore trashed documents from deleted collection * update store * fix * ui * lint * fix: Improve breadcrumb
2020-09-07 11:51:09 -07:00
parent c5de2da115
commit 4de3f69474
12 changed files with 258 additions and 50 deletions
--- a/app/components/Breadcrumb.js
+++ b/app/components/Breadcrumb.js
@@ -1,11 +1,13 @@
 // @flow
 import { observer, inject } from "mobx-react";
 import {
-  PadlockIcon,
+  ArchiveIcon,
+  EditIcon,
  GoToIcon,
  MoreIcon,
+  PadlockIcon,
  ShapesIcon,
-  EditIcon,
+  TrashIcon,
 } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -25,11 +27,73 @@ type Props = {
  onlyText: boolean,
 };

-const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
-  const collection = collections.get(document.collectionId);
-  if (!collection) return <div />;
+function Icon({ document }) {
+  if (document.isDeleted) {
+    return (
+      <>
+        <CollectionName to="/trash">
+          <TrashIcon color="currentColor" />
+          &nbsp;
+          <span>Trash</span>
+        </CollectionName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isArchived) {
+    return (
+      <>
+        <CollectionName to="/archive">
+          <ArchiveIcon color="currentColor" />
+          &nbsp;
+          <span>Archive</span>
+        </CollectionName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isDraft) {
+    return (
+      <>
+        <CollectionName to="/drafts">
+          <EditIcon color="currentColor" />
+          &nbsp;
+          <span>Drafts</span>
+        </CollectionName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isTemplate) {
+    return (
+      <>
+        <CollectionName to="/templates">
+          <ShapesIcon color="currentColor" />
+          &nbsp;
+          <span>Templates</span>
+        </CollectionName>
+        <Slash />
+      </>
+    );
+  }
+  return null;
+}

-  const path = collection.pathToDocument(document).slice(0, -1);
+const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
+  let collection = collections.get(document.collectionId);
+  if (!collection) {
+    if (!document.deletedAt) return <div />;
+
+    collection = {
+      id: document.collectionId,
+      name: "Deleted Collection",
+      color: "currentColor",
+    };
+  }
+
+  const path = collection.pathToDocument
+    ? collection.pathToDocument(document).slice(0, -1)
+    : [];

  if (onlyText === true) {
    return (
@@ -50,34 +114,13 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
    );
  }

-  const isTemplate = document.isTemplate;
-  const isDraft = !document.publishedAt && !isTemplate;
  const isNestedDocument = path.length > 1;
  const lastPath = path.length ? path[path.length - 1] : undefined;
  const menuPath = isNestedDocument ? path.slice(0, -1) : [];

  return (
    <Wrapper justify="flex-start" align="center">
-      {isTemplate && (
-        <>
-          <CollectionName to="/templates">
-            <ShapesIcon color="currentColor" />
-            &nbsp;
-            <span>Templates</span>
-          </CollectionName>
-          <Slash />
-        </>
-      )}
-      {isDraft && (
-        <>
-          <CollectionName to="/drafts">
-            <EditIcon color="currentColor" />
-            &nbsp;
-            <span>Drafts</span>
-          </CollectionName>
-          <Slash />
-        </>
-      )}
+      <Icon document={document} />
      <CollectionName to={collectionUrl(collection.id)}>
        <CollectionIcon collection={collection} expanded />
        &nbsp;
--- a/app/components/CollectionIcon.js
+++ b/app/components/CollectionIcon.js
@@ -18,7 +18,7 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
  // If the chosen icon color is very dark then we invert it in dark mode
  // otherwise it will be impossible to see against the dark background.
  const color =
-    ui.resolvedTheme === "dark"
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
      ? getLuminance(collection.color) > 0.12
        ? collection.color
        : "currentColor"
--- a/app/menus/DocumentMenu.js
+++ b/app/menus/DocumentMenu.js
@@ -11,7 +11,12 @@ import Document from "models/Document";
 import DocumentDelete from "scenes/DocumentDelete";
 import DocumentShare from "scenes/DocumentShare";
 import DocumentTemplatize from "scenes/DocumentTemplatize";
-import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
+import CollectionIcon from "components/CollectionIcon";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  Header,
+} from "components/DropdownMenu";
 import Modal from "components/Modal";
 import {
  documentHistoryUrl,
@@ -100,8 +105,11 @@ class DocumentMenu extends React.Component<Props> {
    this.props.ui.showToast("Document archived");
  };

-  handleRestore = async (ev: SyntheticEvent<>) => {
-    await this.props.document.restore();
+  handleRestore = async (
+    ev: SyntheticEvent<>,
+    options?: { collectionId: string }
+  ) => {
+    await this.props.document.restore(options);
    this.props.ui.showToast("Document restored");
  };

@@ -154,6 +162,7 @@ class DocumentMenu extends React.Component<Props> {
      showPrint,
      showPin,
      auth,
+      collections,
      onOpen,
      onClose,
    } = this.props;
@@ -161,6 +170,7 @@ class DocumentMenu extends React.Component<Props> {
    const can = policies.abilities(document.id);
    const canShareDocuments = can.share && auth.team && auth.team.sharing;
    const canViewHistory = can.read && !can.restore;
+    const collection = collections.get(document.collectionId);

    return (
      <>
@@ -170,11 +180,45 @@ class DocumentMenu extends React.Component<Props> {
          onOpen={onOpen}
          onClose={onClose}
        >
-          {(can.unarchive || can.restore) && (
+          {can.unarchive && (
            <DropdownMenuItem onClick={this.handleRestore}>
              Restore
            </DropdownMenuItem>
          )}
+          {can.restore &&
+            (collection ? (
+              <DropdownMenuItem onClick={this.handleRestore}>
+                Restore
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenu
+                label={<DropdownMenuItem>Restore…</DropdownMenuItem>}
+                style={{
+                  left: -170,
+                  position: "relative",
+                  top: -40,
+                }}
+                hover
+              >
+                <Header>Choose a collection</Header>
+                {collections.orderedData.map((collection) => {
+                  const can = policies.abilities(collection.id);
+
+                  return (
+                    <DropdownMenuItem
+                      key={collection.id}
+                      onClick={(ev) =>
+                        this.handleRestore(ev, { collectionId: collection.id })
+                      }
+                      disabled={!can.update}
+                    >
+                      <CollectionIcon collection={collection} />
+                      &nbsp;{collection.name}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenu>
+            ))}
          {showPin &&
            (document.pinned
              ? can.unpin && (
--- a/app/menus/RevisionMenu.js
+++ b/app/menus/RevisionMenu.js
@@ -24,7 +24,7 @@ type Props = {
 class RevisionMenu extends React.Component<Props> {
  handleRestore = async (ev: SyntheticEvent<>) => {
    ev.preventDefault();
-    await this.props.document.restore(this.props.revision);
+    await this.props.document.restore({ revisionId: this.props.revision.id });
    this.props.ui.showToast("Document restored");
    this.props.history.push(this.props.document.url);
  };
--- a/app/models/Document.js
+++ b/app/models/Document.js
@@ -6,7 +6,6 @@ import parseTitle from "shared/utils/parseTitle";
 import unescape from "shared/utils/unescape";
 import DocumentsStore from "stores/DocumentsStore";
 import BaseModel from "models/BaseModel";
-import Revision from "models/Revision";
 import User from "models/User";

 type SaveOptions = {
@@ -141,8 +140,8 @@ export default class Document extends BaseModel {
    return this.store.archive(this);
  };

-  restore = (revision: Revision) => {
-    return this.store.restore(this, revision);
+  restore = (options) => {
+    return this.store.restore(this, options);
  };

  unpublish = () => {
--- a/app/scenes/CollectionDelete.js
+++ b/app/scenes/CollectionDelete.js
@@ -46,8 +46,9 @@ class CollectionDelete extends React.Component<Props> {
        <form onSubmit={this.handleSubmit}>
          <HelpText>
            Are you sure about that? Deleting the{" "}
-            <strong>{collection.name}</strong> collection is permanent and will
-            also delete all of the documents within it, so be extra careful.
+            <strong>{collection.name}</strong> collection is permanent and
+            cannot be restored, however documents within will be moved to the
+            trash.
          </HelpText>
          <Button type="submit" disabled={this.isDeleting} autoFocus danger>
            {this.isDeleting ? "Deleting…" : "I’m sure – Delete"}
--- a/app/stores/DocumentsStore.js
+++ b/app/stores/DocumentsStore.js
@@ -12,11 +12,9 @@ import {
 } from "lodash";
 import { observable, action, computed, runInAction } from "mobx";
 import naturalSort from "shared/utils/naturalSort";
-
 import BaseStore from "stores/BaseStore";
 import RootStore from "stores/RootStore";
 import Document from "models/Document";
-import Revision from "models/Revision";
 import type { FetchOptions, PaginationParams, SearchResult } from "types";
 import { client } from "utils/ApiClient";

@@ -435,6 +433,7 @@ export default class DocumentsStore extends BaseStore<Document> {

    res.data.documents.forEach(this.add);
    res.data.collections.forEach(this.rootStore.collections.add);
+    this.addPolicies(res.policies);
  };

  @action
@@ -527,10 +526,10 @@ export default class DocumentsStore extends BaseStore<Document> {
  };

  @action
-  restore = async (document: Document, revision?: Revision) => {
+  restore = async (document: Document, options = {}) => {
    const res = await client.post("/documents.restore", {
      id: document.id,
-      revisionId: revision ? revision.id : undefined,
+      ...options,
    });
    runInAction("Document#restore", () => {
      invariant(res && res.data, "Data should be available");