Pull DnDProvider up from react-mosaic to our app

__tests__/src/components/AppProviders.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import Fullscreen from 'react-full-screen';
+import { DndProvider } from 'react-dnd';
 import { AppProviders } from '../../../src/components/AppProviders';
 import settings from '../../../src/config/settings';
 
@@ -28,6 +29,7 @@ describe('AppProviders', () => {
     expect(wrapper.find(ThemeProvider).length).toBe(1);
     expect(wrapper.find(StylesProvider).length).toBe(1);
     expect(wrapper.find(Fullscreen).length).toBe(1);
+    expect(wrapper.find(DndProvider).length).toBe(1);
   });
 
   it('sets up a theme based on the config passed in merged w/ MaterialUI', () => {

__tests__/src/components/WorkspaceMosaic.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import { Mosaic } from 'react-mosaic-component';
+import { MosaicWithoutDragDropContext } from 'react-mosaic-component';
 import MosaicRenderPreview from '../../../src/containers/MosaicRenderPreview';
 import { WorkspaceMosaic } from '../../../src/components/WorkspaceMosaic';
 
@@ -24,9 +24,10 @@ describe('WorkspaceMosaic', () => {
     wrapper = createWrapper({ windows });
   });
   it('should render properly with an initialValue', () => {
-    expect(wrapper.matchesElement(
-      <Mosaic initialValue={{ direction: 'row', first: '1', second: '2' }} />,
-    )).toBe(true);
+    expect(wrapper.find(MosaicWithoutDragDropContext).length).toEqual(1);
+    expect(wrapper.find(MosaicWithoutDragDropContext).prop('initialValue')).toEqual({
+      direction: 'row', first: '1', second: '2',
+    });
   });
   describe('componentDidUpdate', () => {
     it('updates the workspace layout when windows change', () => {

package.json

@@ -55,6 +55,10 @@
     "react-aria-live": "^2.0.5",
     "react-beautiful-dnd": "^11.0.4",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-dnd": "^10.0.2",
+    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd-multi-backend": "^5.0.0",
+    "react-dnd-touch-backend": "^10.0.2",
     "react-full-screen": "^0.2.4",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^10.11.4",

src/components/AppProviders.js

@@ -6,6 +6,9 @@ import { LiveAnnouncer } from 'react-aria-live';
 import {
   ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
+import { DndProvider } from 'react-dnd';
+import MultiBackend from 'react-dnd-multi-backend';
+import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';
@@ -70,7 +73,9 @@ export class AppProviders extends Component {
                 jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
                 generateClassName={generateClassName}
               >
+                <DndProvider backend={MultiBackend} options={HTML5toTouch}>
                   {children}
+                </DndProvider>
               </StylesProvider>
             </ThemeProvider>
           </LiveAnnouncer>

src/components/WorkspaceMosaic.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
+  MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
 } from 'react-mosaic-component';
 import 'react-mosaic-component/react-mosaic-component.css';
 import difference from 'lodash/difference';
@@ -150,7 +150,7 @@ export class WorkspaceMosaic extends React.Component {
   render() {
     const { layout, classes } = this.props;
     return (
-      <Mosaic
+      <MosaicWithoutDragDropContext
         renderTile={this.tileRenderer}
         initialValue={layout || this.determineWorkspaceLayout()}
         onChange={this.mosaicChange}

webpack.config.js

@@ -46,7 +46,13 @@ const baseConfig = mode => ({
       resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies
     }),
   ],
-  resolve: { extensions: ['.js'] },
+  resolve: {
+    alias: {
+      // needs shared global state for context to work
+      'react-dnd': path.resolve(path.join(__dirname, 'node_modules', 'react-dnd')),
+    },
+    extensions: ['.js'],
+  },
 });
 
 module.exports = (env, options) => {