dashboard: migrate dnd behavior to dnd-kit (#42543)

Migrates from react-dnd to dnd-kit for better previews and smoother drag and drop experiences.
Also spruces up the previews when dragging columns + the preview when resizing (not dnd behavior, but related visual experience)

GitOrigin-RevId: a710d6618a15faae00f2b1a3fea3b1ea706feb69

Author: atrakh

npm-packages/common/config/rush/pnpm-lock.yaml

@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@convex-dev/design-system": "workspace:*",
+    "@dnd-kit/core": "~6.3.1",
+    "@dnd-kit/sortable": "~10.0.0",
     "@floating-ui/react": "^0.27.0",
     "@headlessui/react": "1.7.19",
     "@heroicons/react": "2.2.0",

npm-packages/dashboard-common/package.json

@@ -6,8 +6,8 @@ import {
 import classNames from "classnames";
 import { GenericDocument } from "convex/server";
 import { HeaderGroup } from "react-table";
-import { useDrop, useDrag } from "react-dnd";
-import { useRef, useState } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { useRef, useState, RefObject } from "react";
 import omit from "lodash/omit";
 import { useContextMenuTrigger } from "@common/features/data/lib/useContextMenuTrigger";
 import { useTableDensity } from "@common/features/data/lib/useTableDensity";
@@ -29,17 +29,16 @@ type ColumnHeaderProps = {
   hasFilters: boolean;
   isSelectionExhaustive: boolean;
   toggleAll: () => void;
-  reorder(item: { index: number }, newIndex: number): void;
   isResizingColumn?: string;
   isLastColumn: boolean;
   openContextMenu: DataCellProps["onOpenContextMenu"];
   sort?: "asc" | "desc";
   activeSchema: any | null;
   tableName: string;
+  tableContainerRef: RefObject<HTMLDivElement>;
 };
 
 export function ColumnHeader({
-  reorder,
   column,
   columnIndex,
   allRowsSelected = false,
@@ -52,14 +51,27 @@ export function ColumnHeader({
   sort,
   activeSchema,
   tableName,
+  tableContainerRef,
 }: ColumnHeaderProps) {
   const canDragOrDrop = columnIndex !== 0 && !isResizingColumn;
 
   const headerNode = useRef<HTMLDivElement | null>(null);
 
-  const { isDragging, isHovering, direction, drop, drag, dragPreview } =
-    useColumnDragAndDrop(column, columnIndex, reorder, canDragOrDrop);
   const columnName = column.Header as string;
+  const columnId = column.id;
+
+  const { attributes, listeners, setNodeRef, isDragging, isOver, active } =
+    useSortable({
+      id: columnId,
+      disabled: !canDragOrDrop,
+    });
+
+  // Always drop to the right of the hovered column
+  const direction =
+    isOver && !isDragging && active && active.id !== columnId
+      ? "right"
+      : undefined;
+  const isHovering = isOver && !isDragging && active?.id !== columnId;
   useContextMenuTrigger(
     headerNode,
     (pos) =>
@@ -87,43 +99,43 @@ export function ColumnHeader({
     <div
       key={column.getHeaderProps().key}
       {...omit(column.getHeaderProps({ style: { width } }), "key")}
+      ref={setNodeRef}
       className={classNames(
-        isDragging && "cursor-grabbing",
+        isDragging && "opacity-50",
         "font-semibold text-left text-xs bg-background-secondary text-content-secondary tracking-wider",
         "select-none duration-300 transition-colors",
-        !isLastColumn && "border-r",
-        isResizingColumn === columnName && "border-r-util-accent",
+        "border-r",
         "relative",
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Show a border on the side the column will be dropped */}
-      {!isDragging && isHovering && direction && (
+      {/* Show a vertical line on the right side where the column will be dropped */}
+      {isHovering && direction && (
         <div
-          className={classNames(
-            "absolute top-px h-full w-px bg-util-accent",
-            direction === "left" ? "left-0" : "right-0",
-          )}
+          className="absolute top-0 right-0 z-10 w-0.5 bg-util-accent"
+          style={{
+            height: tableContainerRef.current?.offsetHeight || "100%",
+          }}
+        />
+      )}
+      {/* Show a vertical line when resizing this column */}
+      {isResizingColumn === columnName && (
+        <div
+          className="absolute top-0 right-0 z-10 w-0.5 bg-util-accent"
+          style={{
+            height: tableContainerRef.current?.offsetHeight || "100%",
+          }}
         />
       )}
       <ValidatorTooltip
         fieldSchema={fieldSchema}
         columnName={columnName}
-        disableTooltip={!!isResizingColumn}
+        disableTooltip={!!isResizingColumn || isDragging}
       >
         <div
-          ref={(node) => {
-            headerNode.current = node;
-            if (node) {
-              drop(node);
-              dragPreview(node);
-            }
-          }}
-          className={cn(
-            "flex w-full items-center justify-between space-x-2",
-            isDragging && "cursor-grabbing",
-          )}
+          ref={headerNode}
+          className="flex w-full items-center space-x-2"
           style={{
             padding: `${densityValues.paddingY}px ${columnIndex === 0 ? "12" : densityValues.paddingX}px`,
             width,
@@ -173,9 +185,8 @@ export function ColumnHeader({
           </div>
           {canDragOrDrop && isHovered && (
             <Button
-              ref={(node) => {
-                node && drag(node);
-              }}
+              {...attributes}
+              {...listeners}
               className={cn(
                 "absolute right-1.5 animate-fadeInFromLoading cursor-grab items-center bg-background-secondary/50 text-content-secondary backdrop-blur-[2px]",
                 isDragging && "cursor-grabbing",
@@ -184,12 +195,6 @@ export function ColumnHeader({
               variant="neutral"
               inline
               size="xs"
-              onKeyDown={(e) => {
-                if (e.key === " " || e.key === "Enter") {
-                  e.preventDefault();
-                  // Optionally, trigger drag start here if needed for keyboard users
-                }
-              }}
               icon={<DragHandleDots2Icon />}
             />
           )}
@@ -210,39 +215,3 @@ export function ColumnHeader({
     </div>
   );
 }
-
-export function useColumnDragAndDrop(
-  column: HeaderGroup<GenericDocument>,
-  columnIndex: number,
-  reorder: (item: { index: number }, newIndex: number) => void,
-  canDragOrDrop: boolean,
-) {
-  const { id } = column;
-  const [{ isHovering, offset }, drop] = useDrop({
-    accept: "column",
-    canDrop: () => canDragOrDrop,
-    drop: (item: { index: number }) => {
-      reorder(item, columnIndex);
-    },
-    collect: (monitor) => ({
-      isHovering: canDragOrDrop && monitor.isOver({ shallow: true }),
-      offset: monitor.getDifferenceFromInitialOffset(),
-    }),
-  });
-
-  const direction = offset?.x ? (offset.x > 0 ? "right" : "left") : undefined;
-
-  const [{ isDragging }, drag, dragPreview] = useDrag({
-    type: "column",
-    canDrag: canDragOrDrop,
-    item: () => ({
-      id,
-      index: columnIndex,
-    }),
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  return { isDragging, isHovering, direction, drop, drag, dragPreview };
-}

npm-packages/dashboard-common/src/features/data/components/Table/ColumnHeader.tsx

@@ -2,7 +2,7 @@ import { GenericId, Value } from "convex/values";
 import { GenericDocument } from "convex/server";
 import classNames from "classnames";
 import React, { memo, useRef, useState } from "react";
-import { useClickAway, useHoverDirty } from "react-use";
+import { useClickAway } from "react-use";
 import { areEqual } from "react-window";
 import { usePopper } from "react-popper";
 import { ColumnInstance } from "react-table";
@@ -87,7 +87,7 @@ function DataCellImpl({
   // Derive all the information needed to render the cell
   const columnName = column.Header as string;
   const stringValue = typeof value === "string" ? value : stringifyValue(value);
-  const isHoveringCell = useHoverDirty(cellRef);
+  const [isHoveringCell, setIsHoveringCell] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const isSystemField = columnName?.startsWith("_");
   const isEditable = !isSystemField && canManageTable;
@@ -202,6 +202,8 @@ function DataCellImpl({
         }}
         className="relative flex h-full w-full items-center hover:bg-background-tertiary/75"
         style={{ width }}
+        onMouseEnter={() => setIsHoveringCell(true)}
+        onMouseLeave={() => setIsHoveringCell(false)}
       >
         {/* We do not use Button here because it's expensive and this table needs to be fast */}
         {/* eslint-disable-next-line react/forbid-elements */}

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCell.tsx

@@ -13,7 +13,6 @@ import { Row } from "react-table";
 import classNames from "classnames";
 import { useFirstMountState, usePrevious } from "react-use";
 import { areEqual } from "react-window";
-import { cn } from "@ui/cn";
 import omit from "lodash/omit";
 import { useContextMenuTrigger } from "@common/features/data/lib/useContextMenuTrigger";
 import { Target } from "@common/features/data/components/ContextMenu";
@@ -120,7 +119,7 @@ function DataRowLoaded({ index, style, data }: DataRowProps) {
     onCloseContextMenu,
     canManageTable,
     activeSchema,
-    resizingColumn,
+    resizingColumn: _resizingColumn,
     onEditDocument,
     contextMenuColumn,
     contextMenuRow,
@@ -183,13 +182,7 @@ function DataRowLoaded({ index, style, data }: DataRowProps) {
           <div
             {...cell.getCellProps({ style: { width } })}
             key={cell.getCellProps().key}
-            className={cn(
-              columnIndex < row.cells.length - 1
-                ? "border-r transition-colors duration-300"
-                : "transition-colors duration-300",
-              resizingColumn === (cell.column.Header as string) &&
-                "border-r-util-accent",
-            )}
+            className="border-r transition-colors duration-300"
           >
             {columnIndex === 0 ? (
               <TableCheckbox