chore: Upgrade to webpack 5, fix conflicting issues with react-router under docusaurus with yarn workspaces

platform/ui/package.json

@@ -32,11 +32,11 @@
     "classnames": "2.2.6",
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
-    "react": "16.11.0",
+    "react": "17.0.2",
     "react-dates": "^21.8.0",
-    "react-dnd": "10.0.2",
-    "react-dnd-html5-backend": "10.0.2",
-    "react-dom": "16.11.0",
+    "react-dnd": "14.0.2",
+    "react-dnd-html5-backend": "14.0.0",
+    "react-dom": "17.0.2",
     "react-draggable": "4.4.3",
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",

platform/ui/src/components/Header/Header.jsx

@@ -2,19 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-// TODO: This may fail if package is split from PWA build
-import { useNavigate } from 'react-router-dom';
 import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
 
-function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabeling }) {
+function Header({ children, menuOptions, isReturnEnabled, onClickReturnButton, isSticky, WhiteLabeling }) {
   const { t } = useTranslation('Header');
-  const navigate = useNavigate();
 
   // TODO: this should be passed in as a prop instead and the react-router-dom
   // dependency should be dropped
-  const onReturnHandler = () => {
-    if (isReturnEnabled) {
-      navigate('/');
+  const onClickReturn = () => {
+    if (isReturnEnabled && onClickReturnButton) {
+      onClickReturnButton()
     }
   };
 
@@ -30,7 +27,7 @@ function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabelin
               // Either injected service? Or context (like react router's `useLocation`?) */}
           <div
             className={classNames("inline-flex items-center mr-3", isReturnEnabled && 'cursor-pointer')}
-            onClick={onReturnHandler}
+            onClick={onClickReturn}
           >
             {isReturnEnabled && <Icon name="chevron-left" className="w-8 text-primary-active" />}
             <div className="ml-4">{WhiteLabeling ? CustomLogo(React) : <Svg name="logo-ohif" />}</div>
@@ -78,6 +75,7 @@ Header.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isReturnEnabled: PropTypes.bool,
   isSticky: PropTypes.bool,
+  onClickReturnButton: PropTypes.func,
   WhiteLabeling: PropTypes.element,
 };
 

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -24,6 +24,7 @@ const Thumbnail = ({
   // this will still allow for "drag", even if there is no drop target for the
   // specified item.
   const [collectedProps, drag, dragPreview] = useDrag({
+    type: "displayset",
     item: { ...dragData },
     canDrag: function(monitor) {
       return Object.keys(dragData).length !== 0;

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -18,6 +18,7 @@ const ThumbnailNoImage = ({
   isActive,
 }) => {
   const [collectedProps, drag, dragPreview] = useDrag({
+    type: "displayset",
     item: { ...dragData },
     canDrag: function(monitor) {
       return Object.keys(dragData).length !== 0;

platform/ui/src/contextProviders/DragAndDropProvider.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
 // import TouchBackend from 'react-dnd-touch-backend';
 
 // TODO: this is false when it should not be :thinking: