Refactor control-panel div from App into a WorkspaceControlPanel component.

Rationale being that issues like #1586 and #1587 will be able to build on top of this and not have to all work in the top-level App component.

__tests__/src/components/WorkspaceControlPanel.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { actions, store } from '../../../src/store';
+import WorkspaceControlPanel from '../../../src/components/WorkspaceControlPanel';
+import fixture from '../../fixtures/2.json';
+
+describe('WorkspaceControlPanel', () => {
+  let wrapper;
+  beforeEach(() => {
+    store.dispatch(actions.receiveManifest('foo', fixture));
+    store.dispatch(actions.receiveManifest('bar', fixture));
+    wrapper = shallow(<WorkspaceControlPanel store={store} />).dive();
+  });
+
+  it('renders without an error', () => {
+    expect(wrapper.find('div.mirador-workspace-control-panel').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);
+  });
+});

src/components/App.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { actions } from '../store';
-import Display from './Display';
-import ConnectedManifestForm from './ManifestForm';
-import ConnectedManifestListItem from './ManifestListItem';
+import WorkspaceControlPanel from './WorkspaceControlPanel';
 import Workspace from './Workspace';
 import ns from '../config/css-ns';
 
@@ -13,84 +10,20 @@ import ns from '../config/css-ns';
  * @prop {Object} manifests
  */
 export class App extends Component {
-  /**
-   * constructor -
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      lastRequested: '',
-    };
-
-    this.setLastRequested = this.setLastRequested.bind(this);
-  }
-
-  /**
-   * setLastRequested - Sets the state lastRequested
-   *
-   * @private
-   */
-  setLastRequested(requested) {
-    this.setState({
-      lastRequested: requested,
-    });
-  }
-
-  /**
-   * computedContent - computes the content to be displayed based on logic
-   *
-   * @return {type}  description
-   * @private
-   */
-  computedContent() {
-    const { manifests } = this.props;
-    const { lastRequested } = this.state;
-    const manifest = manifests[lastRequested];
-    if (manifest) {
-      if (manifest.isFetching) {
-        return '☕';
-      }
-      if (manifest.error) {
-        return manifest.error.message;
-      }
-      return JSON.stringify(manifest.json, 0, 2);
-    }
-    return 'Nothing Selected Yet';
-  }
-
   /**
    * render
    * @return {String} - HTML markup for the component
    */
   render() {
-    const { manifests } = this.props;
-    const { lastRequested } = this.state;
-    const manifestList = Object.keys(manifests).map(manifest => (
-      <ConnectedManifestListItem
-        key={manifest}
-        manifest={manifest}
-      />
-    ));
     return (
       <div className={ns('app')}>
         <Workspace />
-        <div className={ns('control-panel')}>
-          <ConnectedManifestForm setLastRequested={this.setLastRequested} />
-          <ul>{manifestList}</ul>
-
-          <Display
-            manifest={manifests[lastRequested]}
-          />
-        </div>
+        <WorkspaceControlPanel />
       </div>
     );
   }
 }
 
-App.propTypes = {
-  manifests: PropTypes.instanceOf(Object).isRequired,
-};
-
 /**
  * mapStateToProps - to hook up connect
  * @memberof App

src/components/WorkspaceControlPanel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Display from './Display';
+import ConnectedManifestForm from './ManifestForm';
+import ConnectedManifestListItem from './ManifestListItem';
+import ns from '../config/css-ns';
+
+/**
+ * Provides the panel responsible for controlling the entire workspace
+ */
+class WorkspaceControlPanel extends Component {
+  /**
+   * constructor -
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      lastRequested: '',
+    };
+
+    this.setLastRequested = this.setLastRequested.bind(this);
+  }
+
+  /**
+   * setLastRequested - Sets the state lastRequested
+   *
+   * @private
+   */
+  setLastRequested(requested) {
+    this.setState({
+      lastRequested: requested,
+    });
+  }
+
+  /**
+   * render
+   * @return {String} - HTML markup for the component
+   */
+  render() {
+    const { manifests } = this.props;
+    const { lastRequested } = this.state;
+    const manifestList = Object.keys(manifests).map(manifest => (
+      <ConnectedManifestListItem
+        key={manifest}
+        manifest={manifest}
+      />
+    ));
+    return (
+      <div className={ns('workspace-control-panel')}>
+        <ConnectedManifestForm setLastRequested={this.setLastRequested} />
+        <ul>{manifestList}</ul>
+
+        <Display
+          manifest={manifests[lastRequested]}
+        />
+      </div>
+    );
+  }
+}
+
+WorkspaceControlPanel.propTypes = {
+  manifests: PropTypes.instanceOf(Object).isRequired,
+};
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof WorkspaceControlPanel
+ * @private
+ */
+const mapStateToProps = state => (
+  {
+    manifests: state.manifests,
+  }
+);
+
+export default connect(mapStateToProps)(WorkspaceControlPanel);

src/styles/index.scss

@@ -4,7 +4,7 @@ body {
 }
 
 .mirador {
-  &-control-panel {
+  &-workspace-control-panel {
     position: absolute;
     box-sizing: border-box;
     padding: 15px;