ENG-1051 remove drag and drop until we find a good solution for it

apps/roam/package.json

@@ -52,7 +52,6 @@
     "@use-gesture/react": "^10.2.27",
     "@vercel/blob": "^1.1.1",
     "classnames": "^2.3.2",
-    "@hello-pangea/dnd": "^18.0.1",
     "colord": "^2.9.3",
     "core-js": "^3.45.0",
     "cytoscape": "^3.21.0",

apps/roam/src/components/LeftSidebarView.tsx

@@ -7,17 +7,6 @@ import React, {
   useState,
 } from "react";
 import ReactDOM from "react-dom";
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-  DraggableProvided,
-  DraggableStateSnapshot,
-  DroppableProvided,
-  DragStart,
-  DraggableRubric,
-} from "@hello-pangea/dnd";
 import {
   Collapse,
   Icon,
@@ -158,10 +147,8 @@ const SectionChildren = ({
 
 const PersonalSectionItem = ({
   section,
-  activeDragSourceId,
 }: {
   section: LeftSidebarPersonalSectionConfig;
-  activeDragSourceId: string | null;
 }) => {
   const titleRef = parseReference(section.text);
   const blockText = useMemo(
@@ -174,33 +161,6 @@ const PersonalSectionItem = ({
     !!section.settings?.folded.value || false,
   );
 
-  const renderChild = (
-    dragProvided: DraggableProvided,
-    child: { text: string; uid: string },
-  ) => {
-    const ref = parseReference(child.text);
-    const label = truncate(ref.display, truncateAt);
-    const onClick = (e: React.MouseEvent) => {
-      return void openTarget(e, child.text);
-    };
-    return (
-      <div
-        ref={dragProvided.innerRef}
-        {...dragProvided.draggableProps}
-        {...dragProvided.dragHandleProps}
-        style={dragProvided.draggableProps.style}
-        className="pl-8 pr-2.5"
-      >
-        <div
-          className="section-child-item page cursor-pointer rounded-sm leading-normal text-gray-600"
-          onClick={onClick}
-        >
-          {label}
-        </div>
-      </div>
-    );
-  };
-
   const handleChevronClick = () => {
     if (!section.settings) return;
 
@@ -237,162 +197,28 @@ const PersonalSectionItem = ({
         </div>
       </div>
       <Collapse isOpen={isOpen}>
-        <Droppable
-          droppableId={section.uid}
-          type="ITEMS"
-          isDropDisabled={
-            !!activeDragSourceId && activeDragSourceId !== section.uid
-          }
-          renderClone={(
-            provided: DraggableProvided,
-            _: DraggableStateSnapshot,
-            rubric: DraggableRubric,
-          ) => {
-            const child = (section.children || [])[rubric.source.index];
-            return renderChild(provided, child);
-          }}
-        >
-          {(provided: DroppableProvided) => (
-            <div ref={provided.innerRef} {...provided.droppableProps}>
-              {(section.children || []).map((child, index) => (
-                <Draggable
-                  key={child.uid}
-                  draggableId={child.uid}
-                  index={index}
-                  isDragDisabled={(section.children || []).length <= 1}
-                >
-                  {(dragProvided: DraggableProvided) => {
-                    return renderChild(dragProvided, child);
-                  }}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
+        <SectionChildren
+          childrenNodes={section.children || []}
+          truncateAt={truncateAt}
+        />
       </Collapse>
     </>
   );
 };
 
-const PersonalSections = ({
-  config,
-  setConfig,
-}: {
-  config: LeftSidebarConfig;
-  setConfig: Dispatch<SetStateAction<LeftSidebarConfig>>;
-}) => {
+const PersonalSections = ({ config }: { config: LeftSidebarConfig }) => {
   const sections = config.personal.sections || [];
-  const [activeDragSourceId, setActiveDragSourceId] = useState<string | null>(
-    null,
-  );
 
   if (!sections.length) return null;
 
-  const handleDragStart = (start: DragStart) => {
-    if (start.type === "ITEMS") {
-      setActiveDragSourceId(start.source.droppableId);
-    }
-  };
-
-  const handleDragEnd = (result: DropResult) => {
-    setActiveDragSourceId(null);
-    const { source, destination, type } = result;
-
-    if (!destination) return;
-
-    if (type === "SECTIONS") {
-      if (destination.index === source.index) return;
-
-      const newPersonalSections = Array.from(config.personal.sections);
-      const [removed] = newPersonalSections.splice(source.index, 1);
-      newPersonalSections.splice(destination.index, 0, removed);
-
-      setConfig({
-        ...config,
-        personal: { ...config.personal, sections: newPersonalSections },
-      });
-      const finalIndex =
-        destination.index > source.index
-          ? destination.index + 1
-          : destination.index;
-      void window.roamAlphaAPI.moveBlock({
-        location: { "parent-uid": config.personal.uid, order: finalIndex },
-        block: { uid: removed.uid },
-      });
-      return;
-    }
-
-    if (type === "ITEMS") {
-      if (source.droppableId !== destination.droppableId) {
-        return;
-      }
-
-      if (destination.index === source.index) {
-        return;
-      }
-
-      const newConfig = JSON.parse(JSON.stringify(config)) as LeftSidebarConfig;
-      const { personal } = newConfig;
-
-      const listToReorder = personal.sections.find(
-        (s) => s.uid === source.droppableId,
-      );
-      const parentUid = listToReorder?.childrenUid;
-      const listToReorderChildren = listToReorder?.children;
-
-      if (!listToReorderChildren) return;
-
-      const [removedItem] = listToReorderChildren.splice(source.index, 1);
-      listToReorderChildren.splice(destination.index, 0, removedItem);
-
-      setConfig(newConfig);
-      const finalIndex =
-        destination.index > source.index
-          ? destination.index + 1
-          : destination.index;
-      void window.roamAlphaAPI.moveBlock({
-        location: { "parent-uid": parentUid || "", order: finalIndex },
-        block: { uid: removedItem.uid },
-      });
-    }
-  };
   return (
-    <DragDropContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
-      <Droppable droppableId="personal-sections" type="SECTIONS">
-        {(provided: DroppableProvided) => (
-          <div
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-            className="personal-left-sidebar-sections"
-          >
-            {sections.map((section, index) => (
-              <Draggable
-                key={section.uid}
-                draggableId={section.uid}
-                index={index}
-                isDragDisabled={sections.length <= 1}
-              >
-                {(dragProvided: DraggableProvided) => (
-                  <div
-                    ref={dragProvided.innerRef}
-                    {...dragProvided.draggableProps}
-                    {...dragProvided.dragHandleProps}
-                    style={dragProvided.draggableProps.style}
-                  >
-                    <PersonalSectionItem
-                      section={section}
-                      activeDragSourceId={activeDragSourceId}
-                    />
-                  </div>
-                )}
-              </Draggable>
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
+    <div className="personal-left-sidebar-sections">
+      {sections.map((section) => (
+        <div key={section.uid}>
+          <PersonalSectionItem section={section} />
+        </div>
+      ))}
+    </div>
   );
 };
 
@@ -570,13 +396,13 @@ const FavouritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
 };
 
 const LeftSidebarView = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
-  const { config, setConfig } = useConfig();
+  const { config } = useConfig();
 
   return (
     <>
       <FavouritesPopover onloadArgs={onloadArgs} />
       <GlobalSection config={config.global} />
-      <PersonalSections config={config} setConfig={setConfig} />
+      <PersonalSections config={config} />
     </>
   );
 };