deps: migrate-to-pragmatic-drag-and-drop-react-beautiful-dnd-migration

package.json

@@ -32,6 +32,7 @@
     "node": ">=18.0"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.4",
     "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha3",
     "@mantine/core": "^7.12.1",
     "@reduxjs/toolkit": "^2.4.0",
@@ -61,7 +62,6 @@
     "moment-timezone": "^0.5.46",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.1.3",
     "react-redux": "^9.1.2",

src/web/components/sortable/emptyrow.jsx

@@ -7,22 +7,18 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import {Droppable} from 'react-beautiful-dnd';
+import {Droppable} from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
 
 import PropTypes from 'web/utils/proptypes';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Theme from 'web/utils/theme';
 
-const EmptyGridRow = styledExcludeProps(styled.div, [
-  'active',
-  'isDraggingOver',
-])`
+const EmptyGridRow = styled.div`
   margin: 8px 0px;
   min-height: 50px;
-  display: ${props => (props.active ? 'flex' : 'none')};
+  display: ${props => (props.$active ? 'flex' : 'none')};
   border: 1px dashed ${Theme.lightGray};
-  background: ${props => (props.isDraggingOver ? Theme.lightBlue : 'none')};
+  background: ${props => (props.$isDraggingOver ? Theme.lightBlue : 'none')};
   height: ${props => props.height}px;
 `;
 
@@ -31,10 +27,10 @@ const EmptyRow = ({children, active = false, height}) => (
     {(provided, snapshot) => (
       <EmptyGridRow
         data-testid="empty-grid-row"
-        active={active}
+        $active={active}
         height={height}
         ref={provided.innerRef}
-        isDraggingOver={snapshot.isDraggingOver}
+        $isDraggingOver={snapshot.isDraggingOver}
       >
         {children}
         {provided.placeholder}
@@ -44,10 +40,9 @@ const EmptyRow = ({children, active = false, height}) => (
 );
 
 EmptyRow.propTypes = {
+  children: PropTypes.node,
   active: PropTypes.bool,
   height: PropTypes.number.isRequired,
 };
 
 export default EmptyRow;
-
-// vim: set ts=2 sw=2 tw=80: