1773 canvas navigation click and canvas change (#1913)

* adds click handler and canvas changes behaviour

* #1773: fix merge conflicts

* #1773: refactor test

* fix tests

__tests__/integration/mirador/window_sidebar.test.js

@@ -3,16 +3,16 @@
 describe('Window Sidebars', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-  });
 
-  it('renders and updates canvas level metadata', async () => {
     await expect(page).toClick('#addBtn');
     await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
     await expect(page).toClick('#fetchBtn');
 
     await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/001"] button');
     await expect(page).toClick('[data-manifestid="http://localhost:5000/api/001"] button');
+  });
 
+  it('renders and updates canvas level metadata', async () => {
     await expect(page).toMatchElement(
       'h3',
       { text: 'Bodleian Library Human Freaks 2 (33)' },
@@ -31,4 +31,19 @@ describe('Window Sidebars', () => {
 
     await expect(page).toMatchElement(`#${windowId} button[aria-label="Open information companion window"]`);
   });
+
+  it('renders canvas navigation and updates canvas after clicking a navigation item', async () => {
+    const windows = await page.evaluate(() => (
+      miradorInstance.store.getState().windows
+    ));
+
+    const windowId = Object.values(windows)
+      .find(window => window.manifestId === 'http://localhost:5000/api/001')
+      .id;
+
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Toggle window sidebar"]`);
+    await expect(page).toClick(`#${windowId} button[aria-label="Toggle window sidebar"]`);
+
+    await expect(page).toMatchElement(`#${windowId} button[aria-label="Open canvas navigation companion window"]`);
+  });
 });

__tests__/src/components/WindowSideBarCanvasPanel.test.js

@@ -7,6 +7,7 @@ import WindowSideBarCanvasPanel from '../../../src/components/WindowSideBarCanva
 
 describe('WindowSideBarCanvasPanel', () => {
   let wrapper;
+  let setCanvas;
   const canvasesIdAndLabel = [
     {
       id: 'testid1',
@@ -19,12 +20,15 @@ describe('WindowSideBarCanvasPanel', () => {
   ];
 
   beforeEach(() => {
+    setCanvas = jest.fn();
+
     wrapper = shallow(
       <WindowSideBarCanvasPanel
         canvasesIdAndLabel={canvasesIdAndLabel}
         classes={{}}
         t={key => key}
         windowId="xyz"
+        setCanvas={setCanvas}
       />,
     ).dive();
   });
@@ -51,4 +55,9 @@ describe('WindowSideBarCanvasPanel', () => {
       .render()
       .text()).toBe(canvasesIdAndLabel[1].label);
   });
+
+  it('should call the onClick handler', () => {
+    wrapper.find(Typography).at(1).simulate('click');
+    expect(setCanvas).toHaveBeenCalledTimes(1);
+  });
 });

locales/en/translation.json

@@ -12,6 +12,7 @@
     "canvasIndex": "Index",
     "closeCompanionWindow": "Close this companion window",
     "closeInfoCompanionWindow": "Close information companion window",
+    "closeCanvasNavigationCompanionWindow": "Close canvas navigation companion window",
     "closeMenu": "Close Menu",
     "closeWindow": "Close window",
     "dark": "Dark",
@@ -24,6 +25,7 @@
     "menu": "Menu",
     "off": "Off",
     "openInfoCompanionWindow": "Open information companion window",
+    "openCanvasNavigationCompanionWindow": "Open canvas navigation companion window",
     "openWindows": "Open windows",
     "openInCompanionWindow": "Open in companion window",
     "position": "Position",

src/components/WindowSideBarCanvasPanel.js

@@ -13,15 +13,24 @@ class WindowSideBarCanvasPanel extends Component {
    * render
    */
   render() {
-    const { canvasesIdAndLabel, classes, t } = this.props;
+    const {
+      canvasesIdAndLabel, setCanvas, windowId, classes, t,
+    } = this.props;
+
     return (
       <>
         <Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>
         <List>
           {
-            canvasesIdAndLabel.map(canvas => (
+            canvasesIdAndLabel.map((canvas, canvasIndex) => (
               <ListItem key={canvas.id}>
-                <Typography variant="body2">{canvas.label}</Typography>
+                <Typography
+                  className={classes.clickable}
+                  variant="body2"
+                  onClick={() => { setCanvas(windowId, canvasIndex); }}
+                >
+                  {canvas.label}
+                </Typography>
               </ListItem>
             ))
           }
@@ -32,17 +41,22 @@ class WindowSideBarCanvasPanel extends Component {
 }
 
 WindowSideBarCanvasPanel.propTypes = {
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  windowId: PropTypes.string.isRequired,
   canvasesIdAndLabel: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  setCanvas: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   t: PropTypes.func.isRequired,
 };
 
 /**
  * @private
+ * custom style definitions
  */
 const styles = theme => ({
   windowSideBarH2: theme.typography.h5,
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export default withStyles(styles)(WindowSideBarCanvasPanel);

src/containers/WindowSideBarCanvasPanel.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import * as actions from '../state/actions';
 import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel';
 import {
   getManifestCanvases,
@@ -19,8 +20,10 @@ const mapStateToProps = (state, { windowId }) => {
   };
 };
 
+const mapDispatchToProps = { setCanvas: actions.setCanvas };
+
 const enhance = compose(
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
 );
 

src/state/actions/workspace.js

@@ -33,7 +33,7 @@ export function updateWorkspaceMosaicLayout(layout) {
 /**
  * updateWorkspaceMosaicLayout - action creator
  *
- * @param  {Object} layout
+ * @param  {Object} isWorkspaceAddVisible
  * @memberof ActionCreators
  */
 export function setWorkspaceAddVisibility(isWorkspaceAddVisible) {