Add a WindowThumbnailSettings control to the window's menu

__tests__/src/components/WindowThumbnailSettings.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import WindowThumbnailSettings from '../../../src/components/WindowThumbnailSettings';
+
+describe('WindowThumbnailSettings', () => {
+  let wrapper;
+  const setWindowThumbnailPosition = jest.fn();
+  beforeEach(() => {
+    wrapper = shallow(
+      <WindowThumbnailSettings
+        windowId="xyz"
+        setWindowThumbnailPosition={setWindowThumbnailPosition}
+        thumbnailNavigationPosition="bottom"
+      />,
+    );
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('WithStyles(Typography)').dive().dive().text()).toBe('Thumbnails');
+    expect(wrapper.find('RadioGroup').props().value).toBe('bottom');
+  });
+
+  it('updates state when the thumbnail config selection changes', () => {
+    wrapper.find('RadioGroup').first().simulate('change', { target: { value: 'off' } });
+    expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'off');
+  });
+});

src/components/WindowThumbnailSettings.js

+import React, { Component } from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ */
+export default class WindowThumbnailSettings extends Component {
+  /**
+   * constructor -
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  /**
+   * @private
+   */
+  handleChange(event) {
+    const { windowId, setWindowThumbnailPosition } = this.props;
+
+    setWindowThumbnailPosition(windowId, event.target.value);
+  }
+
+  /**
+   * render
+   *
+   * @return {type}  description
+   */
+  render() {
+    const { thumbnailNavigationPosition } = this.props;
+
+    return (
+      <>
+        <Typography>Thumbnails</Typography>
+        <RadioGroup aria-label="position" name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
+          <FormControlLabel
+            value="off"
+            control={<Radio color="primary" />}
+            label="Off"
+            labelPlacement="bottom"
+          />
+          <FormControlLabel
+            value="bottom"
+            control={<Radio color="primary" />}
+            label="Bottom"
+            labelPlacement="bottom"
+          />
+          <FormControlLabel
+            value="right"
+            control={<Radio color="primary" />}
+            label="Right"
+            labelPlacement="bottom"
+          />
+        </RadioGroup>
+      </>
+    );
+  }
+}
+
+WindowThumbnailSettings.propTypes = {
+  windowId: PropTypes.string.isRequired,
+  setWindowThumbnailPosition: PropTypes.func.isRequired,
+  thumbnailNavigationPosition: PropTypes.string.isRequired,
+};

src/components/WindowTopMenu.js

 import React, { Component } from 'react';
 import { compose } from 'redux';
+import ListItem from '@material-ui/core/ListItem';
 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';
+import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
 
 /**
  */
@@ -28,6 +30,9 @@ class WindowTopMenu extends Component {
     return (
       <>
         <Menu id={`window-menu_${windowId}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+          <ListItem>
+            <WindowThumbnailSettings windowId={windowId} />
+          </ListItem>
           <Divider />
         </Menu>
       </>

src/containers/WindowThumbnailSettings.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from '../state/actions';
+import WindowThumbnailSettings from '../components/WindowThumbnailSettings';
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof ManifestListItem
+ * @private
+ */
+const mapDispatchToProps = { setWindowThumbnailPosition: actions.setWindowThumbnailPosition };
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof WindowViewer
+ * @private
+ */
+const mapStateToProps = (state, props) => (
+  {
+    thumbnailNavigationPosition: state.windows[props.windowId].thumbnailNavigationPosition,
+  }
+);
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  // further HOC go here
+);
+
+export default enhance(WindowThumbnailSettings);