Hide the canvas navigation controls unless the window is focused; fixes #2160

__tests__/src/components/WindowCanvasNavigationControls.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import Typography from '@material-ui/core/Typography';
+import { WindowCanvasNavigationControls } from '../../../src/components/WindowCanvasNavigationControls';
+import ViewerNavigation from '../../../src/containers/ViewerNavigation';
+import ZoomControls from '../../../src/containers/ZoomControls';
+
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
+    <WindowCanvasNavigationControls
+      canvases={[]}
+      canvasLabel="label"
+      window={{}}
+      {...props}
+    />,
+  );
+}
+
+describe('WindowCanvasNavigationControls', () => {
+  let wrapper;
+
+  it('renders properly', () => {
+    wrapper = createWrapper();
+    expect(wrapper.matchesElement(
+      <div>
+        <ZoomControls />
+        <ViewerNavigation />
+        <Typography>label</Typography>
+      </div>,
+    )).toBe(true);
+  });
+
+  it('renders nothing when visible=false', () => {
+    wrapper = createWrapper({ visible: false });
+    expect(wrapper.matchesElement(<></>)).toBe(true);
+  });
+});

__tests__/src/components/WindowViewer.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import manifesto from 'manifesto.js';
-import Typography from '@material-ui/core/Typography';
 import { WindowViewer } from '../../../src/components/WindowViewer';
 import OSDViewer from '../../../src/containers/OpenSeadragonViewer';
-import ViewerNavigation from '../../../src/containers/ViewerNavigation';
-import ZoomControls from '../../../src/containers/ZoomControls';
+import WindowCanvasNavigationControls from '../../../src/containers/WindowCanvasNavigationControls';
 import fixture from '../../fixtures/version-2/019.json';
 import emptyCanvasFixture from '../../fixtures/version-2/emptyCanvas.json';
 import otherContentFixture from '../../fixtures/version-2/299843.json';
@@ -44,11 +42,7 @@ describe('WindowViewer', () => {
     expect(wrapper.matchesElement(
       <>
         <OSDViewer>
-          <div>
-            <ZoomControls />
-            <ViewerNavigation />
-            <Typography>label</Typography>
-          </div>
+          <WindowCanvasNavigationControls />
         </OSDViewer>
       </>,
     )).toBe(true);

src/components/WindowCanvasNavigationControls.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import ZoomControls from '../containers/ZoomControls';
+import ViewerNavigation from '../containers/ViewerNavigation';
+import ns from '../config/css-ns';
+
+/**
+ * Represents the viewer controls in the mirador workspace.
+ */
+export class WindowCanvasNavigationControls extends Component {
+  /** */
+  render() {
+    const {
+      canvases, canvasLabel, visible, window,
+    } = this.props;
+
+    if (!visible) return (<></>);
+
+    return (
+      <div className={ns('canvas-nav')}>
+        <ZoomControls windowId={window.id} />
+        <ViewerNavigation window={window} canvases={canvases} />
+        {
+          canvasLabel && (
+            <Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+
+WindowCanvasNavigationControls.propTypes = {
+  canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  canvasLabel: PropTypes.string,
+  visible: PropTypes.bool,
+};
+
+WindowCanvasNavigationControls.defaultProps = {
+  canvasLabel: undefined,
+  visible: true,
+};

src/components/WindowViewer.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
 import OSDViewer from '../containers/OpenSeadragonViewer';
-import ZoomControls from '../containers/ZoomControls';
-import ViewerNavigation from '../containers/ViewerNavigation';
+import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
 import ManifestoCanvas from '../lib/ManifestoCanvas';
 import CanvasGroupings from '../lib/CanvasGroupings';
-import ns from '../config/css-ns';
 
 /**
  * Represents a WindowViewer in the mirador workspace. Responsible for mounting
@@ -124,7 +121,7 @@ export class WindowViewer extends Component {
    * Renders things
    */
   render() {
-    const { canvasLabel, window } = this.props;
+    const { window } = this.props;
     return (
       <>
         <OSDViewer
@@ -132,15 +129,7 @@ export class WindowViewer extends Component {
           currentCanvases={this.currentCanvases()}
           windowId={window.id}
         >
-          <div className={ns('canvas-nav')}>
-            <ZoomControls windowId={window.id} />
-            <ViewerNavigation window={window} canvases={this.canvases} />
-            {
-              canvasLabel && (
-                <Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
-              )
-            }
-          </div>
+          <WindowCanvasNavigationControls windowId={window.id} canvases={this.canvases} />
         </OSDViewer>
       </>
     );
@@ -153,9 +142,4 @@ WindowViewer.propTypes = {
   fetchInfoResponse: PropTypes.func.isRequired,
   manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  canvasLabel: PropTypes.string,
-};
-
-WindowViewer.defaultProps = {
-  canvasLabel: undefined,
 };

src/containers/WindowCanvasNavigationControls.js

+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  getCanvasLabel,
+  getSelectedCanvas,
+} from '../state/selectors';
+import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
+
+/** */
+const mapStateToProps = (state, { windowId }) => ({
+  window: state.windows[windowId],
+  canvasLabel: getCanvasLabel(
+    getSelectedCanvas(state, windowId),
+    state.windows[windowId].canvasIndex,
+  ),
+  visible: state.workspace.focusedWindowId === windowId,
+});
+
+const enhance = compose(
+  connect(mapStateToProps),
+);
+
+export default enhance(WindowCanvasNavigationControls);

src/containers/WindowViewer.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from '../state/actions';
-import {
-  getCanvasLabel,
-  getSelectedCanvas,
-} from '../state/selectors';
 import { WindowViewer } from '../components/WindowViewer';
 
 /**
@@ -14,10 +10,6 @@ import { WindowViewer } from '../components/WindowViewer';
  */
 const mapStateToProps = (state, { window }) => (
   {
-    canvasLabel: getCanvasLabel(
-      getSelectedCanvas(state, window.id),
-      state.windows[window.id].canvasIndex,
-    ),
     infoResponses: state.infoResponses,
   }
 );