Merge pull request #1801 from ProjectMirador/1787-export-modal

Add JSON to the download/export modal; fixes #1787

__tests__/src/components/WorkspaceExport.test.js

@@ -5,14 +5,17 @@ import WorkspaceExport from '../../../src/components/WorkspaceExport';
 describe('WorkspaceExport', () => {
   let wrapper;
   let handleClose;
+  let mockState;
 
   beforeEach(() => {
     handleClose = jest.fn();
+    mockState = { windows: { }, config: { }, manifests: { } };
 
     wrapper = shallow(
       <WorkspaceExport
         open
         handleClose={handleClose}
+        state={mockState}
       />,
     );
   });
@@ -20,4 +23,13 @@ describe('WorkspaceExport', () => {
   it('renders without an error', () => {
     expect(wrapper.find('WithStyles(Dialog)').length).toBe(1);
   });
+
+  it('renders an exportable version of state', () => {
+    expect(wrapper.find('pre').length).toBe(1);
+    console.log(wrapper.find('pre').debug());
+    debugger; // eslint-disable-line
+    expect(wrapper.find('pre').text()).toMatch('"config":');
+    expect(wrapper.find('pre').text()).toMatch('"windows":');
+    expect(wrapper.find('pre').text()).not.toMatch('"manifests":');
+  });
 });

src/components/WorkspaceExport.js

@@ -7,6 +7,19 @@ import PropTypes from 'prop-types';
 /**
  */
 class WorkspaceExport extends Component {
+  /**
+   * @private
+   */
+  exportableState() {
+    const { state } = this.props;
+    const { config, windows } = state;
+
+    return JSON.stringify({
+      config,
+      windows,
+    }, null, 2);
+  }
+
   /**
    * render
    * @return
@@ -20,6 +33,9 @@ class WorkspaceExport extends Component {
         <DialogTitle id="form-dialog-title">Download/Export</DialogTitle>
         <DialogContent>
           {children}
+          <pre>
+            {this.exportableState()}
+          </pre>
         </DialogContent>
       </Dialog>
     );
@@ -30,6 +46,7 @@ WorkspaceExport.propTypes = {
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
+  state: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 WorkspaceExport.defaultProps = {

src/components/WorkspaceMenu.js

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

src/containers/WorkspaceExport.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import WorkspaceExport from '../components/WorkspaceExport';
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof Workspace
+ * @private
+ */
+const mapStateToProps = state => ({ state });
+
+const enhance = compose(
+  connect(mapStateToProps, {}),
+  // further HOC go here
+);
+
+export default enhance(WorkspaceExport);