Wrap the export json in an accordion; fixes #3440 (#3443)

src/components/WorkspaceExport.js

@@ -3,13 +3,17 @@ import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
 import Typography from '@material-ui/core/Typography';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import CloseIcon from '@material-ui/icons/Close';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 
 /**
  */
@@ -50,7 +54,7 @@ export class WorkspaceExport extends Component {
    */
   render() {
     const {
-      children, container, open, t,
+      children, classes, container, open, t,
     } = this.props;
     const { copied } = this.state;
 
@@ -87,12 +91,24 @@ export class WorkspaceExport extends Component {
         <DialogTitle id="form-dialog-title" disableTypography>
           <Typography variant="h2">{t('downloadExport')}</Typography>
         </DialogTitle>
-        <ScrollIndicatedDialogContent>
+
+        <DialogContent>
+          <Accordion elevation={0}>
+            <AccordionSummary
+              classes={{ root: classes.accordionTitle }}
+              expandIcon={<ExpandMoreIcon />}
+            >
+              <Typography variant="h4">{t('viewWorkspaceConfiguration')}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
               {children}
               <pre>
                 {this.exportedState()}
               </pre>
-        </ScrollIndicatedDialogContent>
+            </AccordionDetails>
+          </Accordion>
+        </DialogContent>
+
         <DialogActions>
           <Button onClick={this.handleClose}>{t('cancel')}</Button>
           <CopyToClipboard
@@ -109,6 +125,7 @@ export class WorkspaceExport extends Component {
 
 WorkspaceExport.propTypes = {
   children: PropTypes.node,
+  classes: PropTypes.objectOf(PropTypes.string),
   container: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   exportableState: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   handleClose: PropTypes.func.isRequired,
@@ -118,6 +135,7 @@ WorkspaceExport.propTypes = {
 
 WorkspaceExport.defaultProps = {
   children: null,
+  classes: {},
   container: null,
   open: false,
   t: key => key,

src/containers/WorkspaceExport.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceExport } from '../components/WorkspaceExport';
@@ -16,8 +17,18 @@ const mapStateToProps = state => ({
   exportableState: getExportableState(state),
 });
 
+/**
+ * Styles for the withStyles HOC
+ */
+const styles = theme => ({
+  accordionTitle: {
+    padding: 0,
+  },
+});
+
 const enhance = compose(
   withTranslation(),
+  withStyles(styles),
   connect(mapStateToProps, {}),
   withPlugins('WorkspaceExport'),
 );

src/locales/en/translation.json

@@ -139,6 +139,7 @@
     "tryAgain": "Try again",
     "untitled": "[Untitled]",
     "view": "View",
+    "viewWorkspaceConfiguration": "View workspace configuration",
     "welcome": "Welcome to Mirador",
     "window": "Window: {{label}}",
     "windowMenu": "Window views & thumbnail display",