Add theme controls to the workspace settings

__tests__/src/components/App.test.js

@@ -4,13 +4,25 @@ import App from '../../../src/components/App';
 
 describe('App', () => {
   it('renders without an error', () => {
-    const wrapper = shallow(<App manifests={[]} workspace={{}} />);
+    const wrapper = shallow(
+      <App
+        manifests={[]}
+        workspace={{}}
+        config={{ theme: 'light' }}
+      />,
+    );
     expect(wrapper.find('div.mirador-app').length).toBe(1);
   });
 
   describe('FullScreen', () => {
-    it('is enabled by the workspace.isFullscreenEnabled state', () => {
-      const wrapper = shallow(<App manifests={[]} workspace={{ isFullscreenEnabled: true }} />);
+    it('is enabled by the workspace.fullscreen state', () => {
+      const wrapper = shallow(
+        <App
+          manifests={[]}
+          workspace={{ isFullscreenEnabled: true }}
+          config={{ theme: 'light' }}
+        />,
+      );
       expect(wrapper.find('FullScreen').first().prop('enabled')).toEqual(true);
     });
   });

__tests__/src/components/WorkspaceSettings.test.js

@@ -5,19 +5,28 @@ import WorkspaceSettings from '../../../src/components/WorkspaceSettings';
 describe('WorkspaceSettings', () => {
   let wrapper;
   let handleClose;
+  let updateConfig;
 
   beforeEach(() => {
     handleClose = jest.fn();
+    updateConfig = jest.fn();
 
     wrapper = shallow(
       <WorkspaceSettings
         open
         handleClose={handleClose}
+        updateConfig={updateConfig}
+        theme="light"
       />,
     );
   });
 
   it('renders without an error', () => {
     expect(wrapper.find('WithStyles(Dialog)').length).toBe(1);
+    expect(wrapper.find('WithStyles(FormControl)').length).toBe(1);
+  });
+  it('calls updateConfig when selected', () => {
+    wrapper.instance().handleThemeChange({ target: { value: 'foo' } });
+    expect(updateConfig).toHaveBeenCalled();
   });
 });

src/components/WorkspaceMenu.js

@@ -9,7 +9,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import ViewHeadlineIcon from '@material-ui/icons/ViewHeadline';
 import PropTypes from 'prop-types';
 import WindowList from '../containers/WindowList';
-import WorkspaceSettings from './WorkspaceSettings';
+import WorkspaceSettings from '../containers/WorkspaceSettings';
 import WorkspaceExport from '../containers/WorkspaceExport';
 
 /**

src/components/WorkspaceSettings.js

@@ -2,24 +2,59 @@ import React, { Component } from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
 import PropTypes from 'prop-types';
 
 /**
  */
 class WorkspaceSettings extends Component {
+  /**
+   * constructor -
+   */
+  constructor(props) {
+    super(props);
+    this.handleThemeChange = this.handleThemeChange.bind(this);
+  }
+
+  /**
+   * Propagate theme selection into the global state
+   */
+  handleThemeChange(event) {
+    const { updateConfig } = this.props;
+
+    updateConfig({ theme: event.target.value });
+  }
+
   /**
    * render
    * @return
    */
   render() {
     const {
-      handleClose, open, children,
+      handleClose, open, children, theme,
     } = this.props;
     return (
       <Dialog id="workspace-settings" open={open} onClose={handleClose}>
         <DialogTitle id="form-dialog-title">Settings</DialogTitle>
         <DialogContent>
           {children}
+          <FormControl>
+            <InputLabel htmlFor="theme-simple">Theme</InputLabel>
+            <Select
+              value={theme}
+              onChange={this.handleThemeChange}
+              inputProps={{
+                name: 'theme',
+                id: 'theme-simple',
+              }}
+            >
+              <MenuItem value="light">Light</MenuItem>
+              <MenuItem value="dark">Dark</MenuItem>
+            </Select>
+          </FormControl>
         </DialogContent>
       </Dialog>
     );
@@ -30,6 +65,8 @@ WorkspaceSettings.propTypes = {
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
+  updateConfig: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };
 
 WorkspaceSettings.defaultProps = {

src/containers/WorkspaceSettings.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import WorkspaceSettings from '../components/WorkspaceSettings';
+import * as actions from '../state/actions';
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof ManifestListItem
+ * @private
+ */
+const mapDispatchToProps = {
+  updateConfig: actions.updateConfig,
+};
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof Workspace
+ * @private
+ */
+const mapStateToProps = state => (
+  {
+    theme: state.config.theme,
+  }
+);
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  // further HOC go here
+);
+
+export default enhance(WorkspaceSettings);