upgrade react-dnd react-dnd-html5-backend

frontend/package-lock.json

@@ -46,8 +46,8 @@
         "react-app-polyfill": "^2.0.0",
         "react-chartjs-2": "5.3.0",
         "react-cookies": "^0.1.0",
-        "react-dnd": "^2.6.0",
+        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^2.6.0",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "18.3.1",
         "react-i18next": "^10.12.2",
         "react-mentions": "4.4.10",
@@ -3106,19 +3106,6 @@
         }
       }
     },
-    "node_modules/@emotion/react/node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/@emotion/react/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/@emotion/serialize": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
@@ -5391,6 +5378,21 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "node_modules/@replit/codemirror-lang-csharp": {
       "version": "6.2.0",
       "resolved": "https://registry.npmmirror.com/@replit/codemirror-lang-csharp/-/codemirror-lang-csharp-6.2.0.tgz",
@@ -11612,12 +11614,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/disposables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/disposables/-/disposables-1.0.2.tgz",
-      "integrity": "sha512-q1XTvs/XGdfubRSemB2+QRhJjIX4PerKkSom+i8Nkw3hCv6xISNrgaN442n2BunyBI4x77Om4ZAzSlqmhM9pwA==",
-      "license": "Apache-2.0"
-    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
@@ -11626,15 +11622,13 @@
       "license": "MIT"
     },
     "node_modules/dnd-core": {
-      "version": "2.6.0",
+      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-2.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
-      "integrity": "sha512-5BfQHIp0XVd4ioF0q4GyUeHQQNCbqP+0SnUiP9TssoQ50wrP1NgSzDqZkjD5pFngsVz9txGin6rvTQD7w0qC3w==",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
-      "license": "BSD-3-Clause",
       "dependencies": {
-        "asap": "^2.0.6",
+        "@react-dnd/asap": "^5.0.1",
-        "invariant": "^2.0.0",
+        "@react-dnd/invariant": "^4.0.1",
-        "lodash": "^4.2.0",
+        "redux": "^4.2.0"
-        "redux": "^3.7.1"
       }
     },
     "node_modules/dns-packet": {
@@ -13510,7 +13504,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -15283,10 +15276,17 @@
       }
     },
     "node_modules/hoist-non-react-statics": {
-      "version": "2.5.5",
+      "version": "3.3.2",
-      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause"
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/hoopy": {
       "version": "0.1.4",
@@ -24069,29 +24069,40 @@
       }
     },
     "node_modules/react-dnd": {
-      "version": "2.6.0",
+      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-2.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
-      "integrity": "sha512-2KHNpeg2SyaxXYq+xO1TM+tOtN9hViI41otJuiYiu6DRYGw+WMvDFDMP4aw7zIKRRm1xd0gizXuKWhb8iJYHBw==",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "license": "BSD-3-Clause",
       "dependencies": {
-        "disposables": "^1.0.1",
+        "@react-dnd/invariant": "^4.0.1",
-        "dnd-core": "^2.6.0",
+        "@react-dnd/shallowequal": "^4.0.1",
-        "hoist-non-react-statics": "^2.1.0",
+        "dnd-core": "^16.0.1",
-        "invariant": "^2.1.0",
+        "fast-deep-equal": "^3.1.3",
-        "lodash": "^4.2.0",
+        "hoist-non-react-statics": "^3.3.2"
-        "prop-types": "^15.5.10"
       },
       "peerDependencies": {
-        "react": "*"
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-dnd-html5-backend": {
-      "version": "2.6.0",
+      "version": "16.0.1",
-      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
-      "integrity": "sha512-8gOfBfqFikWmXvAGSZz1mgoctwkcsKdUC9POt/WGnMoZwGB4ivB0Ex5D6pwHTNjvAs0ixqqWdJKy57CzjDg5Sg==",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "license": "BSD-3-Clause",
       "dependencies": {
-        "lodash": "^4.2.0"
+        "dnd-core": "^16.0.1"
       }
     },
     "node_modules/react-dom": {
@@ -24436,15 +24447,11 @@
       }
     },
     "node_modules/redux": {
-      "version": "3.7.2",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/redux/-/redux-3.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "license": "MIT",
       "dependencies": {
-        "lodash": "^4.2.1",
+        "@babel/runtime": "^7.9.2"
-        "lodash-es": "^4.2.1",
-        "loose-envify": "^1.1.0",
-        "symbol-observable": "^1.0.3"
       }
     },
     "node_modules/reflect.getprototypeof": {
@@ -28510,15 +28517,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",

frontend/package.json

@@ -41,8 +41,8 @@
     "react-app-polyfill": "^2.0.0",
     "react-chartjs-2": "5.3.0",
     "react-cookies": "^0.1.0",
-    "react-dnd": "^2.6.0",
+    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^2.6.0",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",
     "react-i18next": "^10.12.2",
     "react-mentions": "4.4.10",

frontend/src/app.js

@@ -3,6 +3,8 @@ import { createRoot } from 'react-dom/client';
 import { Router, navigate, LocationProvider, globalHistory } from '@gatsbyjs/reach-router';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { siteRoot, siteTitle, mediaUrl, faviconPath } from './utils/constants';
 import { Utils, isMobile } from './utils/utils';
 import SystemNotification from './components/system-notification';
@@ -315,6 +317,7 @@ class App extends Component {
             />
           }
           <div className="main-panel" style={mainPanelStyle}>
+            <DndProvider backend={HTML5Backend}>
               <Router className="reach-router">
                 <Libraries path={siteRoot} />
                 <Libraries path={siteRoot + 'libraries'} />
@@ -353,6 +356,7 @@ class App extends Component {
                   resetTitle={this.resetTitle}
                 />
               </Router>
+            </DndProvider>
           </div>
           <MediaQuery query="(max-width: 767.8px)">
             <Modal zIndex="1030" isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>

frontend/src/metadata/components/popover/groupbys-popover/groupbys/groupby-item.js

@@ -1,7 +1,7 @@
-import React, { Fragment, useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 import CustomizeSelect from '../../../../../components/customize-select';
 import Icon from '../../../../../components/icon';
 import { gettext } from '../../../../../utils/constants';
@@ -9,49 +9,6 @@ import { getColumnByKey } from '../../../../utils/column';
 import { COLUMNS_ICON_CONFIG, SORT_TYPE, SORT_COLUMN_OPTIONS } from '../../../../constants';
 import { getGroupbyGranularityByColumn, isShowGroupCountType, getSelectedCountType, getDefaultCountType } from '../../../../utils/group';
 
-const dragSource = {
-  beginDrag: props => {
-    return { idx: props.index, data: props.groupby, mode: 'sfMetadataGroupbyItem' };
-  },
-  endDrag(props, monitor) {
-    const groupSource = monitor.getItem();
-    const didDrop = monitor.didDrop();
-    let groupTarget = {};
-    if (!didDrop) {
-      return { groupSource, groupTarget };
-    }
-  },
-  isDragging(props) {
-    const { index, dragged } = props;
-    const { idx } = dragged;
-    return idx > index;
-  }
-};
-
-const dropTarget = {
-  drop(props, monitor) {
-    const groupSource = monitor.getItem();
-    const { index: targetIdx } = props;
-    if (targetIdx !== groupSource.idx) {
-      let groupTarget = { idx: targetIdx, data: props.groupby };
-      props.onMove(groupSource, groupTarget);
-    }
-  }
-};
-
-const dragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging(),
-});
-
-const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-  dragged: monitor.getItem(),
-});
-
 /*
   groupby: {
     column_key: 'xxx',
@@ -59,10 +16,39 @@ const dropCollect = (connect, monitor) => ({
     sort_type: 'xxx',
   }
 */
-const GroupbyItem = ({
+const GroupbyItem = ({ showDragBtn, index, readOnly, groupby, columns, onDelete, onUpdate, onMove }) => {
-  isOver, isDragging, canDrop, connectDragSource, connectDragPreview, connectDropTarget,
+  const ref = useRef(null);
-  showDragBtn, index, readOnly, groupby, columns, onDelete, onUpdate
+
-}) => {
+  // drag and drop
+  const [{ isDragging }, drag] = useDrag({
+    type: 'sfMetadataGroupbyItem',
+    item: () => ({
+      idx: index,
+      data: groupby,
+    }),
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: 'sfMetadataGroupbyItem',
+    hover: (item) => {
+      if (item.idx !== index) {
+        onMove(
+          { idx: item.idx, data: item.data },
+          { idx: index, data: groupby }
+        );
+        item.idx = index;
+      }
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    })
+  });
+  const dragDropRef = drag(drop(ref));
+
   const column = useMemo(() => {
     return getColumnByKey(columns, groupby.column_key);
   }, [groupby, columns]);
@@ -165,9 +151,9 @@ const GroupbyItem = ({
     onUpdate(newGroupby, index);
   }, [groupby, index, onUpdate]);
 
-  return connectDropTarget(
+  return (
-    connectDragPreview(
     <div
+      ref={dragDropRef}
       className={classnames('groupby-item',
         { 'group-can-drop-top': isOver && canDrop && isDragging },
         { 'group-can-drop': isOver && canDrop && !isDragging }
@@ -211,13 +197,12 @@ const GroupbyItem = ({
           )}
         </div>
       </div>
-        {!readOnly && showDragBtn && connectDragSource(
+      {!readOnly && showDragBtn && (
         <div className="groupby-drag">
           <Icon symbol="drag" />
         </div>
       )}
     </div>
-    )
   );
 
 };
@@ -229,16 +214,7 @@ GroupbyItem.propTypes = {
   columns: PropTypes.array,
   onDelete: PropTypes.func,
   onUpdate: PropTypes.func,
-
+  onMove: PropTypes.func,
-  // drag
-  isDragging: PropTypes.bool,
-  isOver: PropTypes.bool,
-  canDrop: PropTypes.bool,
-  connectDropTarget: PropTypes.func,
-  connectDragSource: PropTypes.func,
-  connectDragPreview: PropTypes.func,
 };
 
-export default DropTarget('sfMetadataGroupbyItem', dropTarget, dropCollect)(
+export default GroupbyItem;
-  DragSource('sfMetadataGroupbyItem', dragSource, dragCollect)(GroupbyItem)
-);

frontend/src/metadata/components/popover/groupbys-popover/groupbys/index.js

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { DropTarget } from 'react-dnd';
+import { useDrop } from 'react-dnd';
-import html5DragDropContext from '../../../../../pages/wiki2/wiki-nav/html5DragDropContext';
 import GroupbyItem from './groupby-item';
 import { gettext } from '../../../../../utils/constants';
 
@@ -17,8 +16,20 @@ const Groupbys = ({ readOnly, groupbys, columns, onDelete, onUpdate, onMove }) =
     return groupbys.length > 1;
   }, [readOnly, groupbys]);
 
+  const [, drop] = useDrop({
+    accept: 'sfMetadataGroupbyItem',
+    drop: (item, monitor) => {
+      if (!monitor.didDrop()) {
+        onMove(item, { idx: groupbys.length });
+      }
+    },
+    collect: monitor => ({
+      isOver: monitor.isOver(),
+    }),
+  });
+
   return (
-    <div className={classnames('groupbys-list', { 'empty-groupbys-container': isEmpty })}>
+    <div ref={drop} className={classnames('groupbys-list', { 'empty-groupbys-container': isEmpty })}>
       {isEmpty && <div className="empty-groupbys-list">{gettext('No groupings applied to this view.')}</div>}
       {!isEmpty && groupbys.map((groupby, index) => {
         return (
@@ -47,8 +58,4 @@ Groupbys.propTypes = {
   onMove: PropTypes.func,
 };
 
-const DndGroupbysContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
+export default Groupbys;
-  connectDropTarget: connect.dropTarget()
-}))(Groupbys);
-
-export default html5DragDropContext(DndGroupbysContainer);

frontend/src/metadata/components/popover/options-popover/option/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 import classnames from 'classnames';
 import Icon from '../../../../../components/icon';
 import IconBtn from '../../../../../components/icon-btn';
@@ -9,56 +9,73 @@ import Name from './name';
 
 import './index.css';
 
-const dragSource = {
+// const dragSource = {
-  beginDrag: props => {
+//   beginDrag: props => {
-    return { idx: props.index, data: props.option, mode: 'sfMetadataSingleSelectOption' };
+//     return { idx: props.index, data: props.option, mode: 'sfMetadataSingleSelectOption' };
-  },
+//   },
-  endDrag(props, monitor) {
+//   endDrag(props, monitor) {
-    const optionSource = monitor.getItem();
+//     const optionSource = monitor.getItem();
-    const didDrop = monitor.didDrop();
+//     const didDrop = monitor.didDrop();
-    let optionTarget = {};
+//     let optionTarget = {};
-    if (!didDrop) {
+//     if (!didDrop) {
-      return { optionSource, optionTarget };
+//       return { optionSource, optionTarget };
-    }
+//     }
-  },
+//   },
-  isDragging(props, monitor) {
+//   isDragging(props, monitor) {
-    const { index, dragged } = props;
+//     const { index, dragged } = props;
-    const { idx } = dragged;
+//     const { idx } = dragged;
-    return idx > index;
+//     return idx > index;
-  }
+//   }
-};
+// };
 
-const dragCollect = (connect, monitor) => ({
+// const dragCollect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
+//   connectDragSource: connect.dragSource(),
-  connectDragPreview: connect.dragPreview(),
+//   connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging()
+//   isDragging: monitor.isDragging()
-});
+// });
 
-const dropTarget = {
+// const dropTarget = {
-  drop(props, monitor) {
+//   drop(props, monitor) {
-    const optionSource = monitor.getItem();
+//     const optionSource = monitor.getItem();
-    const { index: targetIdx } = props;
+//     const { index: targetIdx } = props;
-    if (targetIdx !== optionSource.idx) {
+//     if (targetIdx !== optionSource.idx) {
-      const optionTarget = { idx: targetIdx, data: props.option };
+//       const optionTarget = { idx: targetIdx, data: props.option };
-      props.onMove(optionSource, optionTarget);
+//       props.onMove(optionSource, optionTarget);
-    }
+//     }
-  }
+//   }
-};
+// };
 
-const dropCollect = (connect, monitor) => ({
+// const dropCollect = (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
+//   connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
+//   isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
+//   canDrop: monitor.canDrop(),
-  dragged: monitor.getItem()
+//   dragged: monitor.getItem()
-});
+// });
 
 const Option = ({
-  isOver, isDragging, canDrop, connectDragSource, connectDragPreview, connectDropTarget,
   isViewing, isDeleting, isEditing, isPredefined,
   option,
   onDelete: propsDelete, onUpdate,
   onMouseLeave, onMouseEnter: propsMouseEnter, onToggleFreeze, onOpenNameEditor, onCloseNameEditor,
 }) => {
+  const [{ isDragging }, drag] = useDrag({
+    type: 'sfMetadataSingleSelectOption',
+    item: () => ({
+      idx: option.id,
+      data: option,
+    }),
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: 'sfMetadataSingleSelectOption',
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    })
+  });
 
   const onDelete = useCallback((event) => {
     event.nativeEvent.stopImmediatePropagation();
@@ -69,9 +86,9 @@ const Option = ({
     propsMouseEnter(option.id);
   }, [option, propsMouseEnter]);
 
-  return connectDropTarget(
+  return (
-    connectDragPreview(
     <div
+      ref={(node) => drag(drop(node))}
       className={classnames('sf-metadata-edit-option-container', {
         'sf-metadata-edit-option-can-drop': isOver && canDrop && !isDragging,
         'sf-metadata-edit-deleting-option': isDeleting,
@@ -83,11 +100,9 @@ const Option = ({
       onMouseEnter={() => onMouseEnter()}
       onMouseLeave={onMouseLeave}
     >
-        {connectDragSource(
       <div className="sf-metadata-edit-option-drag-container">
         <Icon symbol="drag" />
       </div>
-        )}
       <div className="sf-metadata-edit-option-content">
         <Color option={option} onChange={onUpdate} isViewing={isViewing} isPredefined={isPredefined} />
         <Name
@@ -106,7 +121,6 @@ const Option = ({
         )}
       </div>
     </div>
-    )
   );
 };
 
@@ -127,15 +141,13 @@ Option.propTypes = {
   onOpenNameEditor: PropTypes.func.isRequired,
   onCloseNameEditor: PropTypes.func.isRequired,
 
-  // drag
+  // // drag
-  isOver: PropTypes.bool,
+  // isOver: PropTypes.bool,
-  canDrop: PropTypes.bool,
+  // canDrop: PropTypes.bool,
-  dragged: PropTypes.object,
+  // dragged: PropTypes.object,
-  connectDragSource: PropTypes.func.isRequired,
+  // connectDragSource: PropTypes.func.isRequired,
-  connectDropTarget: PropTypes.func.isRequired,
+  // connectDropTarget: PropTypes.func.isRequired,
-  connectDragPreview: PropTypes.func.isRequired,
+  // connectDragPreview: PropTypes.func.isRequired,
 };
 
-export default DropTarget('sfMetadataSingleSelectOption', dropTarget, dropCollect)(
+export default Option;
-  DragSource('sfMetadataSingleSelectOption', dragSource, dragCollect)(Option)
-);

frontend/src/metadata/components/popover/options-popover/options-container.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropTarget } from 'react-dnd';
-import html5DragDropContext from '../../../../pages/wiki2/wiki-nav/html5DragDropContext';
 
 const OptionsContainer = ({ inputRef, options }) => {
   if (!Array.isArray(options) || options.length === 0) return null;
@@ -17,8 +15,4 @@ OptionsContainer.propTypes = {
   options: PropTypes.array
 };
 
-const DndOptionsContainer = DropTarget('sfMetadataSingleSelectOption', {}, connect => ({
+export default OptionsContainer;
-  connectDropTarget: connect.dropTarget()
-}))(OptionsContainer);
-
-export default html5DragDropContext(DndOptionsContainer);

frontend/src/pages/wiki2/wiki-nav/html5DragDropContext.js

@@ -1,4 +1,4 @@
-import { DragDropContext } from 'react-dnd';
+// import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+// import HTML5Backend from 'react-dnd-html5-backend';
 
-export default DragDropContext(HTML5Backend);
+// export default DragDropContext(HTML5Backend);

frontend/src/pages/wiki2/wiki-nav/pages/dragged-page-item.js

@@ -1,4 +1,4 @@
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 import PageItem from './page-item';
 import wikiAPI from '../../../../utils/wiki-api';
 import { wikiId, gettext } from '../../../../utils/constants';
@@ -77,6 +77,4 @@ const dropCollect = (connect, monitor) => ({
   draggedPage: monitor.getItem()
 });
 
-export default DropTarget('WikiNav', dropTarget, dropCollect)(
+export default PageItem;
-  DragSource('WikiNav', dragSource, dragCollect)(PageItem)
-);

frontend/src/pages/wiki2/wiki-nav/wiki-nav.js

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
-import { DropTarget, DragLayer } from 'react-dnd';
+import { useDragLayer, useDrop } from 'react-dnd';
-import html5DragDropContext from './html5DragDropContext';
 import DraggedPageItem from './pages/dragged-page-item';
 import { gettext, wikiPermission } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
@@ -158,14 +157,14 @@ class WikiNav extends Component {
   };
 
   render() {
-    const StructureBody = html5DragDropContext(
+    // const StructureBody = html5DragDropContext(
-      DropTarget('WikiNav', {}, connect => ({
+    //   DropTarget('WikiNav', {}, connect => ({
-        connectDropTarget: connect.dropTarget()
+    //     connectDropTarget: connect.dropTarget()
-      }))(DragLayer(this.collect)(this.renderStructureBody))
+    //   }))(DragLayer(this.collect)(this.renderStructureBody))
-    );
+    // );
     return (
       <div className='wiki-nav'>
-        <StructureBody />
+        {this.renderStructureBody()}
       </div>
     );
   }