From 8a3a78bce123228a7cac5349d3e77d05c8ba7dbe Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Sat, 20 Jun 2020 07:39:41 -0700
Subject: [PATCH] Use the minimal window as the mosaic drag preview; part of
 #1981

---
 .../components/MosaicRenderPreview.test.js    |  5 ++--
 src/components/MinimalWindow.js               | 26 ++++++++++++++++---
 src/components/MosaicRenderPreview.js         | 10 +++----
 src/containers/MinimalWindow.js               |  6 +++++
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/__tests__/src/components/MosaicRenderPreview.test.js b/__tests__/src/components/MosaicRenderPreview.test.js
index 6dd35aba6..3f925ce87 100644
--- a/__tests__/src/components/MosaicRenderPreview.test.js
+++ b/__tests__/src/components/MosaicRenderPreview.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import MinimalWindow from '../../../src/containers/MinimalWindow';
 import { MosaicRenderPreview } from '../../../src/components/MosaicRenderPreview';
 
 describe('MosaicRenderPreview', () => {
@@ -12,9 +13,9 @@ describe('MosaicRenderPreview', () => {
       />,
     );
 
-    expect(wrapper.find('.mosaic-window-body').length).toBe(1);
+    expect(wrapper.find(MinimalWindow).length).toBe(1);
     expect(
-      wrapper.find('.mosaic-window-body').children().text(),
+      wrapper.find(MinimalWindow).prop('label'),
     ).toEqual('previewWindowTitle The Title Prop');
   });
 });
diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js
index 3ee7430e7..7db511ac7 100644
--- a/src/components/MinimalWindow.js
+++ b/src/components/MinimalWindow.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import MenuIcon from '@material-ui/icons/MenuSharp';
 import cn from 'classnames';
 import Paper from '@material-ui/core/Paper';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/CloseSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
@@ -14,6 +16,7 @@ export class MinimalWindow extends Component {
   render() {
     const {
       allowClose,
+      allowWindowSideBar,
       children,
       classes,
       label,
@@ -28,7 +31,7 @@ export class MinimalWindow extends Component {
         elevation={1}
         id={windowId}
         className={
-          cn(classes.window, ns('window'))}
+          cn(classes.window, ns('placeholder-window'))}
         aria-label={t('window', { label })}
       >
         <AppBar position="relative" color="default">
@@ -40,7 +43,18 @@ export class MinimalWindow extends Component {
             )}
             variant="dense"
           >
-            {allowClose && (
+            {allowWindowSideBar && (
+              <MiradorMenuButton
+                aria-label={t('toggleWindowSideBar')}
+                disabled
+              >
+                <MenuIcon />
+              </MiradorMenuButton>
+            )}
+            <Typography variant="h2" noWrap color="inherit" className={classes.title}>
+              {label}
+            </Typography>
+            {allowClose && removeWindow && (
               <MiradorMenuButton
                 aria-label={t('closeWindow')}
                 className={cn(classes.button, ns('window-close'))}
@@ -59,17 +73,21 @@ export class MinimalWindow extends Component {
 
 MinimalWindow.propTypes = {
   allowClose: PropTypes.bool,
+  allowWindowSideBar: PropTypes.bool,
   children: PropTypes.node,
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  classes: PropTypes.objectOf(PropTypes.string),
   label: PropTypes.string,
-  removeWindow: PropTypes.func.isRequired,
+  removeWindow: PropTypes.func,
   t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
 
 MinimalWindow.defaultProps = {
   allowClose: true,
+  allowWindowSideBar: true,
   children: null,
+  classes: {},
   label: '',
+  removeWindow: () => {},
   t: key => key,
 };
diff --git a/src/components/MosaicRenderPreview.js b/src/components/MosaicRenderPreview.js
index a66f781ed..c196a19bc 100644
--- a/src/components/MosaicRenderPreview.js
+++ b/src/components/MosaicRenderPreview.js
@@ -1,31 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import MinimalWindow from '../containers/MinimalWindow';
 
 /**
  * MosaicRenderPreview is used to for the preview when dragging a mosaic window/tile
 */
 export function MosaicRenderPreview(props) {
   const {
-    classes, t, title,
+    t, title, windowId,
   } = props;
 
   return (
-    <div className={classNames('mosaic-window-body', classes.preview)}>
-      {t('previewWindowTitle', { title })}
-    </div>
+    <MinimalWindow windowId={`${windowId}-preview`} label={t('previewWindowTitle', { title })} />
   );
 }
 
 MosaicRenderPreview.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string),
   t: PropTypes.func,
   title: PropTypes.string,
   windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };
 
 MosaicRenderPreview.defaultProps = {
-  classes: {},
   t: k => k,
   title: '',
 };
diff --git a/src/containers/MinimalWindow.js b/src/containers/MinimalWindow.js
index 13cc46837..20351e144 100644
--- a/src/containers/MinimalWindow.js
+++ b/src/containers/MinimalWindow.js
@@ -9,6 +9,7 @@ import { MinimalWindow } from '../components/MinimalWindow';
 /** mapStateToProps */
 const mapStateToProps = (state, { windowId }) => ({
   allowClose: state.config.window.allowClose,
+  allowWindowSideBar: state.config.window.allowWindowSideBar,
 });
 
 /**
@@ -29,6 +30,11 @@ const styles = theme => ({
   button: {
     marginLeft: 'auto',
   },
+  title: {
+    ...theme.typography.h6,
+    flexGrow: 1,
+    paddingLeft: theme.spacing(0.5),
+  },
   window: {
     backgroundColor: theme.palette.shades.dark,
     borderRadius: 0,
-- 
GitLab