feat: Allow moving draft documents (#4652)

* feat: Allow moving draft documents

* Allow drag-n-drop move of draft documents

* fix: Allow moving draft without a collection

* fix: Allow moving draft without a collection

app/components/DocumentBreadcrumb.tsx

@@ -77,8 +77,9 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   }
 
   const path = React.useMemo(
-    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
-    [collection, document]
+    () => collection?.pathToDocument(document.id).slice(0, -1) || [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collection, document, document.collectionId, document.parentDocumentId]
   );
 
   const items = React.useMemo(() => {

app/components/Sidebar/components/CollectionLink.tsx

@@ -27,7 +27,7 @@ import { useStarredContext } from "./StarredContext";
 type Props = {
   collection: Collection;
   expanded?: boolean;
-  onDisclosureClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+  onDisclosureClick: (ev?: React.MouseEvent<HTMLButtonElement>) => void;
   activeDocument: Document | undefined;
   isDraggingAnyCollection?: boolean;
 };
@@ -62,7 +62,7 @@ const CollectionLink: React.FC<Props> = ({
   // Drop to re-parent document
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: "document",
-    drop: (item: DragObject, monitor) => {
+    drop: async (item: DragObject, monitor) => {
       const { id, collectionId } = item;
       if (monitor.didDrop()) {
         return;
@@ -81,7 +81,8 @@ const CollectionLink: React.FC<Props> = ({
       if (
         prevCollection &&
         prevCollection.permission === null &&
-        prevCollection.permission !== collection.permission
+        prevCollection.permission !== collection.permission &&
+        !document?.isDraft
       ) {
         itemRef.current = item;
 
@@ -97,7 +98,11 @@ const CollectionLink: React.FC<Props> = ({
           ),
         });
       } else {
-        documents.move(id, collection.id);
+        await documents.move(id, collection.id);
+
+        if (!expanded) {
+          onDisclosureClick();
+        }
       }
     },
     canDrop: () => canUpdate,

app/components/Sidebar/components/DocumentLink.tsx

@@ -105,8 +105,7 @@ function InnerDocumentLink(
 
   const handleDisclosureClick = React.useCallback(
     (ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
+      ev?.preventDefault();
       setExpanded(!expanded);
     },
     [expanded]
@@ -150,14 +149,10 @@ function InnerDocumentLink(
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    canDrag: () => {
-      return (
-        !isDraft &&
-        (policies.abilities(node.id).move ||
-          policies.abilities(node.id).archive ||
-          policies.abilities(node.id).delete)
-      );
-    },
+    canDrag: () =>
+      policies.abilities(node.id).move ||
+      policies.abilities(node.id).archive ||
+      policies.abilities(node.id).delete,
   });
 
   const hoverExpanding = React.useRef<ReturnType<typeof setTimeout>>();
@@ -174,19 +169,18 @@ function InnerDocumentLink(
   // Drop to re-parent
   const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
     accept: "document",
-    drop: (item: DragObject, monitor) => {
+    drop: async (item: DragObject, monitor) => {
       if (monitor.didDrop()) {
         return;
       }
       if (!collection) {
         return;
       }
-      documents.move(item.id, collection.id, node.id);
+      await documents.move(item.id, collection.id, node.id);
+      setExpanded(true);
     },
     canDrop: (_item, monitor) =>
-      !isDraft &&
-      !!pathToNode &&
-      !pathToNode.includes(monitor.getItem<DragObject>().id),
+      !!pathToNode && !pathToNode.includes(monitor.getItem<DragObject>().id),
     hover: (_item, monitor) => {
       // Enables expansion of document children when hovering over the document
       // for more than half a second.

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -91,7 +91,7 @@ function DraggableCollectionLink({
   }, [collection.id, ui.activeCollectionId, locationStateStarred]);
 
   const handleDisclosureClick = React.useCallback((ev) => {
-    ev.preventDefault();
+    ev?.preventDefault();
     setExpanded((e) => !e);
   }, []);