Replace react-mosaic with mirador-mosaic

__tests__/src/components/SearchHit.test.js

@@ -82,6 +82,7 @@ describe('SearchHit', () => {
       wrapper.setProps({ selected: true });
       expect(announcer).toHaveBeenCalledWith(
         'pagination The Canvas Label The Annotation Label Light up the moose , and start the chai',
+        'polite',
       );
     });
 

__tests__/src/components/SearchResults.test.js

@@ -30,18 +30,16 @@ describe('SearchResults', () => {
   it('renders a SearchHit for each hit', () => {
     const selectContentSearchAnnotation = jest.fn();
     const wrapper = createWrapper({ selectContentSearchAnnotation });
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
-
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
     expect(searchHits.length).toEqual(1);
-    expect(searchHits[0].type.displayName).toEqual('Connect(WithStyles(WithPlugins(SearchHit)))');
-    expect(searchHits[0].props.index).toEqual(0);
+    expect(searchHits.first().props().index).toEqual(0);
   });
 
   it('can focus on a single item', () => {
     const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
 
-    searchHits[0].props.showDetails();
+    searchHits.first().props().showDetails();
     expect(wrapper.state().focused).toEqual(true);
   });
 
@@ -54,28 +52,20 @@ describe('SearchResults', () => {
     expect(wrapper.state().focused).toEqual(false);
   });
 
-  it('passes announcePolite function to the SearchHits', () => {
-    const announcePolite = jest.fn();
-    const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({ announcePolite });
-
-    expect(searchHits[0].props.announcer).toEqual(announcePolite);
-  });
-
   describe('annotation-only search results', () => {
     it('renders a SearchHit for each annotation', () => {
       const wrapper = createWrapper({
         searchAnnotations: [{ id: 'x' }, { id: 'y' }],
         searchHits: [],
       });
 
-      const searchHits = wrapper.find('LiveMessenger').props().children({});
+      const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
       expect(searchHits.length).toEqual(2);
-      expect(searchHits[0].props.index).toEqual(0);
-      expect(searchHits[0].props.annotationId).toEqual('x');
+      expect(searchHits.get(0).props.index).toEqual(0);
+      expect(searchHits.get(0).props.annotationId).toEqual('x');
 
-      expect(searchHits[1].props.index).toEqual(1);
-      expect(searchHits[1].props.annotationId).toEqual('y');
+      expect(searchHits.get(1).props.index).toEqual(1);
+      expect(searchHits.get(1).props.annotationId).toEqual('y');
     });
   });
 

__tests__/src/components/Workspace.test.js

@@ -1,6 +1,5 @@
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
-import WorkspaceMosaic from '../../../src/containers/WorkspaceMosaic';
 import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
 import { Workspace } from '../../../src/components/Workspace';
@@ -17,7 +16,7 @@ function createWrapper(props) {
       isWorkspaceControlPanelVisible
       windowIds={['1', '2']}
       workspaceId="foo"
-      workspaceType="mosaic"
+      workspaceType="elastic"
       t={k => k}
       {...props}
     />,
@@ -39,20 +38,6 @@ describe('Workspace', () => {
       )).toBe(true);
     });
   });
-  describe('if workspace type is mosaic', () => {
-    it('should render <WorkspaceMosaic/> properly', () => {
-      const wrapper = createWrapper();
-
-      expect(wrapper.matchesElement(
-        <IIIFDropTarget>
-          <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
-            <Typography>miradorViewer</Typography>
-            <WorkspaceMosaic />
-          </div>
-        </IIIFDropTarget>,
-      )).toBe(true);
-    });
-  });
   describe('if workspace type is unknown', () => {
     it('should render <Window/> components as list', () => {
       const wrapper = createWrapper({ workspaceType: 'bubu' });

jest.json

@@ -11,6 +11,9 @@
     "\\.s?css$": "<rootDir>/__mocks__/css.js",
     "^uuid$": "uuid"
   },
+  "transformIgnorePatterns": [
+    "<rootDir>/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)"
+  ],
   "setupFiles": [
     "<rootDir>/setupJest.js"
   ],

package.json

@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
+    "@react-aria/live-announcer": "^3.1.2",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "deepmerge": "^4.2.2",
@@ -46,21 +47,21 @@
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",
+    "mirador-mosaic": "^0.0.1",
     "normalize-url": "^4.5.0",
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
+    "rdndmb-html5-to-touch": "^8.0.0",
     "re-reselect": "^4.0.0",
-    "react-aria-live": "^2.0.5",
     "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-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.0",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0 || ^12.0.0",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^9.0.0",
-    "react-mosaic-component": "^4.0.1",
     "react-redux": "^7.1.0 || ^8.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
@@ -87,6 +88,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "babel-plugin-lodash": "^3.3.4",
@@ -96,7 +98,6 @@
     "chalk": "^4.1.0",
     "core-js": "^3.21.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.0",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.0",
@@ -114,8 +115,8 @@
     "jsdom": "^21.0.0",
     "puppeteer": "^19.0.0",
     "raf": "^3.4.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
@@ -125,7 +126,12 @@
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "overrides": {
+    "babel-plugin-lodash": {
+      "@babel/types": "~7.20.0"
+    }
   }
 }

setupJest.js

@@ -4,7 +4,7 @@ import { JSDOM } from 'jsdom'; // eslint-disable-line import/no-extraneous-depen
 import raf from 'raf'; // eslint-disable-line import/no-extraneous-dependencies
 import fetchMock from 'jest-fetch-mock'; // eslint-disable-line import/no-extraneous-dependencies
 import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
-import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; // eslint-disable-line import/no-extraneous-dependencies
 
 const jsdom = new JSDOM('<!doctype html><html><body><div id="main"></div></body></html>', { url: 'https://localhost' });
 const { window } = jsdom;