Merge pull request #330 from mineralsfree/MEN-7833-dnd

MEN-7833-chore(gui): switched to supported library for dnd functionality
mendersoftware · Jan 9, 2025 · 0435e0c · 0435e0c
2 parents b7a2dfc + bc1441b
commit 0435e0c
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 114 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@hello-pangea/dnd": "^17.0.0",
     "@mdi/js": "7.4.47",
     "@monaco-editor/react": "4.6.0",
     "@mui/icons-material": "6.3.1",
@@ -28,7 +29,6 @@
     "msgpack5": "6.0.2",
     "pluralize": "8.0.0",
     "react": "^18.3.1",
-    "react-beautiful-dnd": "13.1.1",
     "react-big-calendar": "1.16.3",
     "react-copy-to-clipboard": "5.1.0",
     "react-dom": "^18.3.1",

diff --git a/frontend/src/js/components/devices/dialogs/CustomColumnsDialogContent.tsx b/frontend/src/js/components/devices/dialogs/CustomColumnsDialogContent.tsx
@@ -12,12 +12,12 @@
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 // material ui
 import { Clear as ClearIcon, DragHandle as DragHandleIcon } from '@mui/icons-material';
 import { DialogContent, FormControl, IconButton, ListItem } from '@mui/material';
 
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { ATTRIBUTE_SCOPES } from '@northern.tech/store/constants';
 
 import AttributeAutoComplete, { getOptionLabel } from '../widgets/AttributeAutocomplete';
@@ -117,16 +117,14 @@ const Content = ({ attributes, columnHeaders, idAttribute, selectedAttributes, s
       <p>You can select columns of inventory data to display in the device list table. Drag to change the order.</p>
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="droppable-list" direction="vertical">
-          {provided => {
-            return (
-              <div ref={provided.innerRef} {...provided.droppableProps} {...props}>
-                {selectedAttributes.map((item, index) => (
-                  <DraggableListItem item={item} index={index} key={item.key} onRemove={onRemove} />
-                ))}
-                {provided.placeholder}
-              </div>
-            );
-          }}
+          {provided => (
+            <div ref={provided.innerRef} {...provided.droppableProps} {...props}>
+              {selectedAttributes.map((item, index) => (
+                <DraggableListItem item={item} index={index} key={item.key} onRemove={onRemove} />
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
         </Droppable>
       </DragDropContext>
       <FormControl>

diff --git a/.../src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap b/.../src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap
@@ -704,13 +704,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-14:focus::-ms-input-
     You can select columns of inventory data to display in the device list table. Drag to change the order.
   </p>
   <div
-    data-rbd-droppable-context-id="0"
-    data-rbd-droppable-id="droppable-list"
+    data-rfd-droppable-context-id=":r0:"
+    data-rfd-droppable-id="droppable-list"
   >
     <li
       class="MuiListItem-root MuiListItem-gutters MuiListItem-padding flexbox space-between margin-right-large emotion-1"
-      data-rbd-draggable-context-id="0"
-      data-rbd-draggable-id="name"
+      data-rfd-draggable-context-id=":r0:"
+      data-rfd-draggable-id="name"
     >
       <div>
         Name
@@ -720,10 +720,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-14:focus::-ms-input-
         style="width: 80px;"
       >
         <div
-          aria-describedby="rbd-hidden-text-0-hidden-text-0"
+          aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
           class="flexbox centered"
-          data-rbd-drag-handle-context-id="0"
-          data-rbd-drag-handle-draggable-id="name"
+          data-rfd-drag-handle-context-id=":r0:"
+          data-rfd-drag-handle-draggable-id="name"
           draggable="false"
           role="button"
           tabindex="0"
@@ -761,8 +761,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-14:focus::-ms-input-
     </li>
     <li
       class="MuiListItem-root MuiListItem-gutters MuiListItem-padding flexbox space-between margin-right-large emotion-1"
-      data-rbd-draggable-context-id="0"
-      data-rbd-draggable-id="id"
+      data-rfd-draggable-context-id=":r0:"
+      data-rfd-draggable-id="id"
     >
       <div>
         Device ID
@@ -772,10 +772,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-14:focus::-ms-input-
         style="width: 80px;"
       >
         <div
-          aria-describedby="rbd-hidden-text-0-hidden-text-0"
+          aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
           class="flexbox centered"
-          data-rbd-drag-handle-context-id="0"
-          data-rbd-drag-handle-draggable-id="id"
+          data-rfd-drag-handle-context-id=":r0:"
+          data-rfd-drag-handle-draggable-id="id"
           draggable="false"
           role="button"
           tabindex="0"

diff --git a/frontend/tests/licenses/directDependencies.csv b/frontend/tests/licenses/directDependencies.csv
@@ -6,6 +6,7 @@
 "@emotion/jest","MIT","https://github.com/emotion-js/emotion.git#main"
 "@emotion/react","MIT","https://github.com/emotion-js/emotion.git#main"
 "@emotion/styled","MIT","https://github.com/emotion-js/emotion.git#main"
+"@hello-pangea/dnd","Apache-2.0","https://github.com/hello-pangea/dnd"
 "@mdi/js","Apache-2.0","https://github.com/Templarian/MaterialDesign-JS"
 "@monaco-editor/react","MIT","https://github.com/suren-atoyan/monaco-react"
 "@mui/icons-material","MIT","https://github.com/mui/material-ui"
@@ -73,7 +74,6 @@
 "postcss","MIT","https://github.com/postcss/postcss"
 "prettier","MIT","https://github.com/prettier/prettier"
 "process","MIT","https://github.com/shtylman/node-process"
-"react-beautiful-dnd","Apache-2.0","https://github.com/atlassian/react-beautiful-dnd"
 "react-big-calendar","MIT","https://github.com/jquense/react-big-calendar"
 "react-copy-to-clipboard","MIT","https://github.com/nkbt/react-copy-to-clipboard"
 "react-dom","MIT","https://github.com/facebook/react"