Copy the workspace menu + button as a menu + button for the window

__tests__/src/components/WindowTopMenu.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import WindowTopMenu from '../../../src/components/WindowTopMenu';
+
+describe('WindowTopMenu', () => {
+  let wrapper;
+  let handleClose;
+  beforeEach(() => {
+    handleClose = jest.fn();
+    wrapper = shallow(<WindowTopMenu windowId="xyz" handleClose={handleClose} />).dive();
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('WithStyles(Menu)').length).toBe(1);
+    expect(wrapper.find('Connect(WindowThumbnailSettings)').length).toBe(1);
+  });
+});

__tests__/src/components/WindowTopMenuButton.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import WindowTopMenuButton from '../../../src/components/WindowTopMenuButton';
+
+describe('WindowTopMenuButton', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(
+      <WindowTopMenuButton classes={{}} windowId="xyz" />,
+    ).dive();
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('WithStyles(IconButton)').length).toBe(1);
+  });
+  it('when clicked, updates the state', () => {
+    wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'x' });
+    expect(wrapper.find('Connect(miradorWithPlugins(WithStyles(WindowTopMenu)))').props().anchorEl).toBe('x');
+  });
+});

src/components/WindowTopBar.js

@@ -7,6 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
 import classNames from 'classnames';
+import WindowTopMenuButton from './WindowTopMenuButton';
 import WindowTopBarButtons from '../containers/WindowTopBarButtons';
 import ns from '../config/css-ns';
 
@@ -48,6 +49,7 @@ class WindowTopBar extends Component {
           {this.titleContent()}
         </Typography>
         <WindowTopBarButtons windowId={windowId} />
+        <WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
         <Button color="inherit" className={ns('window-close')} aria-label="Close Window" onClick={removeWindow}>&times;</Button>
       </Toolbar>
     );

src/components/WindowTopMenu.js

+import React, { Component } from 'react';
+import { compose } from 'redux';
+import Menu from '@material-ui/core/Menu';
+import Divider from '@material-ui/core/Divider';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+/**
+ */
+class WindowTopMenu extends Component {
+  /**
+   * constructor -
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  /**
+   * render
+   * @return
+   */
+  render() {
+    const { handleClose, anchorEl, windowId } = this.props;
+    // const {} = this.state;
+
+    return (
+      <>
+        <Menu id={`window-menu_${windowId}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+          <Divider />
+        </Menu>
+      </>
+    );
+  }
+}
+
+WindowTopMenu.propTypes = {
+  windowId: PropTypes.string.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+WindowTopMenu.defaultProps = {
+  anchorEl: null,
+};
+
+/**
+ * @private
+ */
+const styles = theme => ({
+});
+
+const enhance = compose(
+  withStyles(styles),
+  // further HOC go here
+);
+
+export default enhance(WindowTopMenu);

src/components/WindowTopMenuButton.js

+import React, { Component } from 'react';
+import { compose } from 'redux';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import WindowTopMenu from '../containers/WindowTopMenu';
+
+/**
+ */
+class WindowTopMenuButton extends Component {
+  /**
+   * constructor -
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: null,
+    };
+    this.handleMenuClick = this.handleMenuClick.bind(this);
+    this.handleMenuClose = this.handleMenuClose.bind(this);
+  }
+
+  /**
+   * @private
+   */
+  handleMenuClick(event) {
+    this.setState({
+      anchorEl: event.currentTarget,
+    });
+  }
+
+  /**
+   * @private
+   */
+  handleMenuClose() {
+    this.setState({
+      anchorEl: null,
+    });
+  }
+
+  /**
+   * render
+   * @return
+   */
+  render() {
+    const { classes, windowId } = this.props;
+    const { anchorEl } = this.state;
+
+    return (
+      <>
+        <IconButton
+          color="primary"
+          aria-label="Menu"
+          className={classes.ctrlBtn}
+          aria-haspopup="true"
+          onClick={this.handleMenuClick}
+          aria-owns={anchorEl ? `window-menu_${windowId}` : undefined}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <WindowTopMenu
+          windowId={windowId}
+          anchorEl={anchorEl}
+          handleClose={this.handleMenuClose}
+        />
+      </>
+    );
+  }
+}
+
+WindowTopMenuButton.propTypes = {
+  windowId: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+/**
+ * @private
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+});
+
+
+const enhance = compose(
+  withStyles(styles),
+  // further HOC go here
+);
+
+export default enhance(WindowTopMenuButton);

src/containers/WindowTopMenu.js

+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WindowTopMenu from '../components/WindowTopMenu';
+
+export default miradorWithPlugins(WindowTopMenu);