Rework the drag&drop task functionality to get rid of react-dnd

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>

package.json

@@ -38,15 +38,16 @@
     "deploy-storybook": "gh-pages -d storybook-static",
     "build-storybook": "storybook build"
   },
+  "dependencies": {
+    "@floating-ui/dom": "1.1.1",
+    "@floating-ui/react": "0.19.0",
+    "date-fns": "2.29.3"
+  },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dnd": "^16.0.1",
     "react-dom": "^17.0.2",
     "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
-    "@floating-ui/dom": "^1.1.1",
-    "@floating-ui/react": "^0.19.0",
-    "date-fns": "^2.29.3"
+    "@material-ui/icons": "4.11.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-regenerator": "^7.20.5",
@@ -85,8 +86,6 @@
     "postcss-preset-env": "^8.0.1",
     "prettier": "^2.8.3",
     "react": "^17.0.2",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "storybook": "7.6.7",

src/components/task-list/columns/title-column.tsx

@@ -1,9 +1,5 @@
 import React, { useCallback, useMemo } from "react";
 
-import { useDrag } from "react-dnd";
-
-import { ROW_DRAG_TYPE } from "../../../constants";
-
 import { ColumnProps, Icons } from "../../../types/public-types";
 
 import styles from "./title-column.module.css";
@@ -26,10 +22,7 @@ const getExpanderSymbol = (
 
 export const TitleColumn: React.FC<ColumnProps> = ({
   data: {
-    canMoveTasks,
-
     distances: { expandIconWidth, nestedTaskNameOffset },
-
     icons,
     isShowTaskNumbers,
     hasChildren,
@@ -40,19 +33,7 @@ export const TitleColumn: React.FC<ColumnProps> = ({
     onExpanderClick,
   },
 }) => {
-  const { id, comparisonLevel = 1, name } = task;
-
-  const [collected, drag] = useDrag(
-    {
-      type: ROW_DRAG_TYPE,
-      item: task,
-
-      collect: monitor => ({
-        isDragging: monitor.isDragging(),
-      }),
-    },
-    [id, comparisonLevel, task]
-  );
+  const { name } = task;
 
   const expanderSymbol = useMemo(
     () => getExpanderSymbol(hasChildren, isClosed, icons),
@@ -69,15 +50,12 @@ export const TitleColumn: React.FC<ColumnProps> = ({
 
   return (
     <div
-      data-testid={`title-table-cell-${task.name}`}
-      className={`${styles.taskListNameWrapper} ${
-        collected.isDragging ? styles.dragging : ""
-      }`}
+      data-testid={`title-table-cell-${name}`}
+      className={`${styles.taskListNameWrapper}`}
       style={{
         paddingLeft: depth * nestedTaskNameOffset,
       }}
       title={title}
-      ref={canMoveTasks ? drag : undefined}
     >
       <div
         className={`${styles.taskListExpander} ${

src/components/task-list/task-list-table-row.module.css

@@ -2,6 +2,10 @@
   position: relative;
   display: table-row;
   text-overflow: ellipsis;
+  cursor:grab
+}
+.taskListTableRowGrabbing {
+  cursor:grabbing
 }
 
 .cut {
@@ -17,6 +21,10 @@
   text-overflow: ellipsis;
   padding-left: 5px;
 }
+.taskListCellInner {
+  display: flex;
+  align-items: center;
+}
 
 .dropAfter {
   position: absolute;
@@ -49,7 +57,7 @@
   align-items: center;
   top:0px;
   width: 100%;
-  height: 10px;
+  height: 8px;
   color: transparent;
 }