Spike to convert the window top bar to the material framework; part of …

…#1631

__tests__/integration/mirador/basic.test.js

@@ -7,11 +7,13 @@ describe('Basic end to end Mirador', () => {
     expect(title).toBe('Mirador');
   });
   it('loads a manifest and displays it', async () => {
+    await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
     // TODO: Refactor the app so we get rid of the wait
     await page.waitFor(1000);
     await expect(page).toMatchElement('li', { text: 'http://localhost:5000/api/sn904cj3439' });
+    await expect(page).toClick('li button');
     await expect(page).toMatchElement(
       'h3',
       "Peter's San Francisco Locator. The Birds-Eye-View Map of the Exposition City. Published by Locator Publishing Co",

__tests__/integration/mirador/invalid-api-response.test.js

@@ -3,6 +3,7 @@ describe('Mirador Invalid API Response Handler Test', () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
   });
   it('breaks Mirador', async () => {
+    await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/invalid');
     await expect(page).toClick('#fetchBtn');
     await page.waitFor(1000);

__tests__/integration/mirador/plugins.test.js

@@ -3,6 +3,7 @@
 describe('Mirador plugin use', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins.html');
+    await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
     // TODO: Refactor the app so we get rid of the wait

__tests__/integration/mirador/thumbnail-navigation.test.js

@@ -3,11 +3,13 @@
 describe('Thumbnail navigation', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
+    await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/019');
     await expect(page).toClick('#fetchBtn');
     // TODO: Refactor the app so we get rid of the wait
     await page.waitFor(1000);
     await expect(page).toClick('li button');
+    await page.waitFor(1000);
   });
   it('navigates a manifest using thumbnail navigation', async () => {
     await expect(page).toMatchElement('.mirador-thumb-navigation');

__tests__/integration/mirador/window_actions.test.js

@@ -3,13 +3,16 @@ describe('Window actions', () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
   });
   it('opens a window and closes it', async () => {
+    await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
     await expect(page).toClick('#fetchBtn');
     // TODO: Refactor the app so we get rid of the wait
     await page.waitFor(1000);
     await expect(page).toClick('li button');
     await expect(page).toMatchElement('.mirador-window');
+    await page.waitFor(1000);
     await expect(page).toClick('.mirador-window-close');
+    await page.waitFor(1000);
     await expect(page).not.toMatchElement('.mirador-window');
   });
 });

__tests__/src/components/WindowSideBar.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { store } from '../../../src/store';
+import { WindowSideBar } from '../../../src/components/WindowSideBar';
+
+describe('WindowSideBar', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<WindowSideBar store={store} windowId="1" classes={{}} />);
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('WithStyles(Drawer)').length).toBe(1);
+  });
+});

__tests__/src/components/WindowSideBarButtons.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { store } from '../../../src/store';
+import { WindowSideBarButtons } from '../../../src/components/WindowSideBarButtons';
+
+describe('WindowSideBarButtons', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<WindowSideBarButtons store={store} />);
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('Fragment').length).toBe(1);
+  });
+});

__tests__/src/components/WindowTopBar.test.js

@@ -18,18 +18,23 @@ describe('WindowTopBar', () => {
         manifest={manifestFixture}
         windowId="foo"
         removeWindow={mockRemoveWindow}
+        classes={{}}
       />,
     );
   });
 
   it('renders without an error', () => {
-    expect(topBar.find('div.mirador-window-top-bar h3')
+    expect(topBar.dive().find('WithStyles(Toolbar)')
+      .dive()
+      .find('WithStyles(Typography)')
+      .dive()
+      .dive()
       .text()).toBe('Fixture Label');
-    expect(topBar.find('button.mirador-window-close'));
+    expect(topBar.find('WithStyles(Button).mirador-window-close'));
   });
 
   it('calls the removeWindow prop when the close button is clicked', () => {
-    topBar.find('button').simulate('click');
+    topBar.find('WithStyles(Button)').simulate('click');
     expect(mockRemoveWindow).toHaveBeenCalledTimes(1);
     expect(mockRemoveWindow).toHaveBeenCalledWith('foo');
   });

__tests__/src/components/WindowTopBarButtons.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { store } from '../../../src/store';
+import { WindowTopBarButtons } from '../../../src/components/WindowTopBarButtons';
+
+describe('WindowTopBarButtons', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<WindowTopBarButtons store={store} />);
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('Fragment').length).toBe(1);
+  });
+});

__tests__/src/components/WorkspaceControlPanel.test.js

@@ -9,18 +9,30 @@ describe('WorkspaceControlPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     store.dispatch(actions.receiveManifest('bar', fixture));
-    wrapper = shallow(<WorkspaceControlPanel store={store} />).dive();
+    wrapper = shallow(<WorkspaceControlPanel store={store} />).dive().dive();
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('div.mirador-workspace-control-panel').length).toBe(1);
+    expect(wrapper.find('WithStyles(Drawer)').length).toBe(1);
   });
 
   it('renders a list item for each manifest in the state', () => {
     expect(wrapper.find('ul Connect(ManifestListItem)').length).toBe(2);
   });
 
-  it('renders a Display component', () => {
-    expect(wrapper.find('Display').length).toBe(1);
+  describe('handleClose', () => {
+    it('resets the anchor state', () => {
+      wrapper.instance().handleClose();
+
+      expect(wrapper.dive().find('WithStyles(Menu)').props().open).toBe(false);
+    });
+  });
+
+  describe('handleClick', () => {
+    it('sets the anchor state', () => {
+      wrapper.instance().handleClick({ currentTarget: true });
+
+      expect(wrapper.dive().find('WithStyles(Menu)').props().open).toBe(true);
+    });
   });
 });

__tests__/src/components/WorkspaceControlPanelButtons.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { store } from '../../../src/store';
+import { WorkspaceControlPanelButtons } from '../../../src/components/WorkspaceControlPanelButtons';
+
+describe('WorkspaceControlPanelButtons', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<WorkspaceControlPanelButtons store={store} />);
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('Fragment').length).toBe(1);
+  });
+});

package.json

@@ -21,6 +21,9 @@
   ],
   "repository": "https://github.com/ProjectMirador/mirador",
   "dependencies": {
+    "@material-ui/core": "^3.9.0",
+    "@material-ui/icons": "^3.0.2",
+    "classnames": "^2.2.6",
     "css-ns": "^1.2.2",
     "deepmerge": "^3.1.0",
     "manifesto.js": "^3.0.9",

src/components/App.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+
+import CssBaseline from '@material-ui/core/CssBaseline';
 import { actions } from '../store';
 import WorkspaceControlPanel from './WorkspaceControlPanel';
 import ConnectedWorkspace from './Workspace';
@@ -18,6 +20,7 @@ export class App extends Component {
   render() {
     return (
       <div className={ns('app')}>
+        <CssBaseline />
         <ConnectedWorkspace />
         <WorkspaceControlPanel />
       </div>

src/components/CompanionWindow.js

@@ -0,0 +1,79 @@
+import React, { Component, Fragment } from 'react';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+
+/**
+ * CompanionWindow
+ */
+class CompanionWindow extends Component {
+  /**
+   * render
+   * @return
+   */
+  render() {
+    const { windowId, classes, anchor } = this.props;
+
+    return (
+      <Drawer
+        variant="permanent"
+        className={classNames(classes.drawer)}
+        classes={{ paper: classNames(classes.drawer) }}
+        open
+        anchor={anchor}
+        PaperProps={{ style: { position: 'absolute' } }}
+        BackdropProps={{ style: { position: 'absolute' } }}
+        ModalProps={{
+          container: document.getElementById(windowId),
+          style: { position: 'absolute' },
+        }}
+      >
+        <div className={classes.toolbar} />
+        <Fragment />
+      </Drawer>
+    );
+  }
+}
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof ManifestListItem
+ * @private
+ */
+const mapDispatchToProps = dispatch => ({
+});
+
+CompanionWindow.propTypes = {
+  windowId: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
+  anchor: PropTypes.string,
+};
+
+CompanionWindow.defaultProps = {
+  anchor: 'left',
+};
+
+/**
+  Override drawer styles to make a companion window
+  @private
+ */
+const styles = theme => ({
+  drawer: {
+    overflowX: 'hidden',
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+    zIndex: theme.zIndex.appBar - 2,
+    paddingLeft: 60,
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  toolbar: theme.mixins.toolbar,
+});
+
+export default connect(null, mapDispatchToProps)(miradorWithPlugins(
+  withStyles(styles)(CompanionWindow),
+));

src/components/ManifestListItem.js

@@ -24,9 +24,9 @@ const handleOpenButtonClick = (event, manifest, addWindow) => {
  * @memberof ManifestListItem
  * @private
  */
-export const ManifestListItem = ({ manifest, addWindow }) => (
+export const ManifestListItem = ({ manifest, addWindow, handleClose }) => (
   <li className={ns('manifest-list-item')}>
-    <button type="button" onClick={event => handleOpenButtonClick(event, manifest, addWindow)}>
+    <button type="button" onClick={(event) => { handleOpenButtonClick(event, manifest, addWindow); handleClose(); }}>
       {manifest}
     </button>
   </li>
@@ -35,6 +35,11 @@ export const ManifestListItem = ({ manifest, addWindow }) => (
 ManifestListItem.propTypes = {
   manifest: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types
   addWindow: PropTypes.func.isRequired,
+  handleClose: PropTypes.func,
+};
+
+ManifestListItem.defaultProps = {
+  handleClose: () => {},
 };
 
 /**

src/components/Window.js

@@ -4,7 +4,9 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ns from '../config/css-ns';
 import ConnectedWindowTopBar from './WindowTopBar';
+import ConnectedWindowSideBar from './WindowSideBar';
 import WindowViewer from './WindowViewer';
+import ConnectedCompanionWindow from './CompanionWindow';
 
 /**
  * Represents a Window in the mirador workspace
@@ -48,6 +50,14 @@ export class Window extends Component {
           windowId={window.id}
           manifest={manifest}
         />
+        <ConnectedCompanionWindow
+          windowId={window.id}
+          manifest={manifest}
+        />
+        <ConnectedWindowSideBar
+          windowId={window.id}
+          manifest={manifest}
+        />
         {this.renderViewer()}
       </div>
     );