Replace react-dragula with dnd-kit (#1451)

* Replace react-dragula package with dnd-kit * Refactor to function component * Remove @types/dragula as well * Move * Initial implementation * Ditch DragOverlay * Fix function name * Fix handling drag * Fix scrolling issue * Create gorgeous-meals-glow.md * Fix app test * Fix extension test * Fix styling
reduxjs · Aug 18, 2023 · 14a7957 · 14a7957
1 parent 176a6cc
commit 14a7957
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 230 deletions.
diff --git a/.changeset/gorgeous-meals-glow.md b/.changeset/gorgeous-meals-glow.md
@@ -0,0 +1,5 @@
+---
+'@redux-devtools/inspector-monitor': patch
+---
+
+Replace react-dragula with dnd-kit
diff --git a/extension/test/app/containers/App.spec.js b/extension/test/app/containers/App.spec.js
@@ -37,8 +37,6 @@ describe('App container', () => {
       </Provider>,
     );
     const actionList = screen.getByTestId('actionList');
-    expect(
-      within(actionList).getByTestId('actionListRows'),
-    ).toBeEmptyDOMElement();
+    expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();
   });
 });
diff --git a/packages/redux-devtools-app/test/app.spec.tsx b/packages/redux-devtools-app/test/app.spec.tsx
@@ -45,9 +45,7 @@ describe('App container', () => {
       </Provider>,
     );
     const actionList = screen.getByTestId('actionList');
-    expect(
-      within(actionList).getByTestId('actionListRows'),
-    ).toBeEmptyDOMElement();
+    expect(within(actionList).queryByRole('button')).not.toBeInTheDocument();
   });
 });
 

diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json
@@ -36,7 +36,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "@types/dragula": "^3.7.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "@types/lodash": "^4.14.196",
     "@types/prop-types": "^15.7.5",
     "@types/redux-devtools-themes": "^1.0.0",
@@ -50,7 +53,6 @@
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.8.1",
     "react-base16-styling": "^0.9.1",
-    "react-dragula": "^1.1.17",
     "react-json-tree": "^0.18.0",
     "redux-devtools-themes": "^1.0.0"
   },
@@ -68,7 +70,6 @@
     "@types/history": "^4.7.11",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react": "^18.2.18",
-    "@types/react-dragula": "^1.1.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.46.0",