Merge pull request #1982 from ProjectMirador/1856-draggable-windows

Updates react-mosaic and makes WindowTopBar draggable

__tests__/src/components/Window.test.js

@@ -5,8 +5,14 @@ import WindowTopBar from '../../../src/containers/WindowTopBar';
 import WindowMiddleContent from '../../../src/containers/WindowMiddleContent';
 
 /** create wrapper */
-function createWrapper(window) {
-  return shallow(<Window window={window} />);
+function createWrapper(props, context) {
+  return shallow(
+    <Window
+      window={window}
+      {...props}
+    />,
+    { context },
+  );
 }
 
 describe('Window', () => {
@@ -17,19 +23,27 @@ describe('Window', () => {
     expect(wrapper.find('.mirador-window')).toHaveLength(0);
   });
   it('should render outer element', () => {
-    wrapper = createWrapper(window);
+    wrapper = createWrapper({ window });
     expect(wrapper.find('.mirador-window')).toHaveLength(1);
   });
   it('should render <WindowTopBar>', () => {
-    wrapper = createWrapper(window);
+    wrapper = createWrapper({ window });
     expect(wrapper.find(WindowTopBar)).toHaveLength(1);
   });
   it('should render <WindowMiddleContent>', () => {
-    wrapper = createWrapper(window);
+    wrapper = createWrapper({ window });
     expect(wrapper.find(WindowMiddleContent)).toHaveLength(1);
   });
   it('should render bottom companions window areas', () => {
-    wrapper = createWrapper(window);
+    wrapper = createWrapper({ window });
     expect(wrapper.find('.mirador-companion-bottom')).toHaveLength(1);
   });
+  describe('when workspaceType is mosaic', () => {
+    it('calls the context mosaicWindowActions connectDragSource method to make WindowTopBar draggable', () => {
+      const connectDragSource = jest.fn(component => component);
+      wrapper = createWrapper({ window, workspaceType: 'mosaic' }, { mosaicWindowActions: { connectDragSource } });
+      expect(wrapper.find(WindowTopBar)).toHaveLength(1);
+      expect(connectDragSource).toHaveBeenCalled();
+    });
+  });
 });

__tests__/src/components/WorkspaceMosaic.test.js

@@ -50,7 +50,21 @@ describe('WorkspaceMosaic', () => {
   });
   describe('tileRenderer', () => {
     it('when window is available', () => {
-      expect(wrapper.instance().tileRenderer('1')).not.toBeNull();
+      const renderedTile = wrapper.instance().tileRenderer('1', 'foo');
+      expect(renderedTile).not.toBeNull();
+      expect(shallow(renderedTile).find('DropTarget(DragSource(InternalMosaicWindow))').length).toEqual(1);
+      expect(shallow(renderedTile).props()).toEqual(expect.objectContaining({
+        toolbarControls: [],
+        additionalControls: [],
+        path: 'foo',
+      }));
+      expect(shallow(shallow(renderedTile).props().renderPreview()).matchesElement(
+        <div className="mosaic-preview">
+          <div className="mosaic-window-body">
+            <h4>previewWindowTitle</h4>
+          </div>
+        </div>,
+      )).toBe(true);
     });
     it('when window is not available', () => {
       expect(wrapper.instance().tileRenderer('bar')).toBeNull();

locales/de/translation.json

@@ -32,6 +32,7 @@
     "openWindows": "Fenster öffnen",
     "openInCompanionWindow": "In Hilfsfenster öffnen",
     "position": "Position",
+    "previewWindowTitle": "Mirador",
     "right": "Rechts",
     "single": "Einzeln",
     "settings": "Einstellungen",

locales/en/translation.json

@@ -34,6 +34,7 @@
     "openWindows": "Open windows",
     "openInCompanionWindow": "Open in companion window",
     "position": "Position",
+    "previewWindowTitle": "Mirador",
     "right": "Right",
     "single": "Single",
     "settings": "Settings",

package.json

@@ -48,7 +48,7 @@
     "react-dom": "^16.8.3",
     "react-fullscreen-crossbrowser": "^1.0.9",
     "react-i18next": "^10.2.0",
-    "react-mosaic-component": "^2.0.2",
+    "react-mosaic-component": "^2.1.0",
     "react-placeholder": "^3.0.1",
     "react-redux": "^6.0.0",
     "react-virtualized": "^9.21.0",

src/components/Window.js

@@ -10,19 +10,36 @@ import ThumbnailNavigation from '../containers/ThumbnailNavigation';
  * @param {object} window
  */
 export class Window extends Component {
+  /**
+   * wrappedTopBar - will conditionally wrap a WindowTopBar for needed
+   * additional functionality based on workspace type
+   */
+  wrappedTopBar() {
+    const { manifest, window, workspaceType } = this.props;
+    const { mosaicWindowActions } = this.context;
+    const topBar = (
+      <div>
+        <WindowTopBar
+          windowId={window.id}
+          manifest={manifest}
+        />
+      </div>
+    );
+    if (workspaceType !== 'mosaic') return topBar;
+    return mosaicWindowActions.connectDragSource(
+      topBar,
+    );
+  }
+
   /**
    * Renders things
    */
   render() {
     const { manifest, window } = this.props;
     if (!window) return <></>;
-
     return (
       <div id={window.id} className={ns('window')}>
-        <WindowTopBar
-          windowId={window.id}
-          manifest={manifest}
-        />
+        {this.wrappedTopBar()}
         <WindowMiddleContent
           window={window}
           manifest={manifest}
@@ -39,12 +56,21 @@ export class Window extends Component {
   }
 }
 
+Window.contextTypes = {
+  mosaicWindowActions: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
 Window.propTypes = {
   window: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  workspaceType: PropTypes.string,
 };
 
 Window.defaultProps = {
   window: null,
   manifest: null,
+  workspaceType: null,
 };

src/components/WorkspaceMosaic.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Mosaic, getLeaves, createBalancedTreeFromLeaves,
+  Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
 } from 'react-mosaic-component';
 import 'react-mosaic-component/react-mosaic-component.css';
 import Window from '../containers/Window';
@@ -65,14 +65,28 @@ export class WorkspaceMosaic extends React.Component {
    * Render a tile (Window) in the Mosaic.
    */
   tileRenderer(id, path) {
-    const { windows } = this.props;
+    const { windows, t } = this.props;
     const window = windows[id];
     if (!window) return null;
     return (
+      <MosaicWindow
+        toolbarControls={[]}
+        additionalControls={[]}
+        path={path}
+        windowId={window.id}
+        renderPreview={() => (
+          <div className="mosaic-preview">
+            <div className="mosaic-window-body">
+              <h4>{t('previewWindowTitle')}</h4>
+            </div>
+          </div>
+        )}
+      >
         <Window
           key={window.id}
           window={window}
         />
+      </MosaicWindow>
     );
   }
 
@@ -101,7 +115,12 @@ export class WorkspaceMosaic extends React.Component {
 }
 
 WorkspaceMosaic.propTypes = {
+  t: PropTypes.func,
   updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
   windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
+
+WorkspaceMosaic.defaultProps = {
+  t: key => key,
+};

src/containers/Window.js

@@ -7,9 +7,10 @@ import { Window } from '../components/Window';
  * @memberof Window
  * @private
  */
-const mapStateToProps = ({ manifests, windows }, props) => ({
+const mapStateToProps = ({ manifests, windows, config }, props) => ({
   manifest: manifests[props.window.manifestId],
   window: windows[props.window.id],
+  workspaceType: config.workspace.type,
 });
 
 const enhance = compose(

src/containers/WorkspaceMosaic.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
 import * as actions from '../state/actions';
 import { WorkspaceMosaic } from '../components/WorkspaceMosaic';
 
@@ -23,6 +24,7 @@ const mapStateToProps = state => (
 const mapDispatchToProps = { updateWorkspaceMosaicLayout: actions.updateWorkspaceMosaicLayout };
 
 const enhance = compose(
+  withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   // further HOC go here
 );

src/styles/index.scss

@@ -5,6 +5,16 @@
     height: 100%;
     position: relative;
     width: 100%;
+
+    .mosaic-window-toolbar {
+      display: none;
+    }
+
+    .mosaic-window-body {
+      .mirador-window-top-bar {
+        cursor: move;
+      }
+    }
   }
 
   &-workspace {