Merge pull request #2501 from ProjectMirador/window-prop

Address additional components that received full objects from state

__tests__/src/components/CompanionArea.test.js

@@ -12,16 +12,7 @@ function createWrapper(props) {
       windowId="abc123"
       position="right"
       companionAreaOpen
-      companionWindows={[
-        {
-          id: 'foo',
-          position: 'right',
-        },
-        {
-          id: 'baz',
-          position: 'right',
-        },
-      ]}
+      companionWindowIds={['foo', 'baz']}
       t={key => key}
       {...props}
     />,

__tests__/src/components/ErrorDialog.test.js

@@ -18,25 +18,25 @@ describe('ErrorDialog', () => {
   let wrapper;
 
   it('renders properly', () => {
-    const errors = { testid123: { id: 'testid123', message: '' } };
+    const error = { id: 'testid123', message: '' };
 
-    wrapper = createWrapper({ errors });
+    wrapper = createWrapper({ error });
     expect(wrapper.find('WithStyles(Dialog)').length).toBe(1);
   });
 
   it('shows up error message correctly', () => {
     const errorMessage = 'error testMessage 123';
-    const errors = { testid123: { id: 'testid123', message: errorMessage } };
+    const error = { id: 'testid123', message: errorMessage };
 
-    wrapper = createWrapper({ errors });
+    wrapper = createWrapper({ error });
     expect(wrapper.find('WithStyles(DialogContentText)[variant="body2"]').render().text()).toBe(errorMessage);
   });
 
   it('triggers the handleClick prop when clicking the ok button', () => {
-    const errors = { testid123: { id: 'testid123', message: '' } };
+    const error = { id: 'testid123', message: '' };
     const mockHandleClick = jest.fn();
 
-    wrapper = createWrapper({ errors, removeError: mockHandleClick });
+    wrapper = createWrapper({ error, removeError: mockHandleClick });
     wrapper.find('WithStyles(Button)').simulate('click');
     expect(mockHandleClick).toHaveBeenCalledTimes(1);
   });

__tests__/src/components/WindowList.test.js

@@ -9,19 +9,17 @@ describe('WindowList', () => {
   let handleClose;
   let focusWindow;
   let titles;
-  let windows;
   beforeEach(() => {
     handleClose = jest.fn();
     focusWindow = jest.fn();
     titles = {};
-    windows = {};
 
     wrapper = shallow(
       <WindowList
         containerId="mirador"
         anchorEl={{}}
         titles={titles}
-        windows={windows}
+        windowIds={[]}
         handleClose={handleClose}
         focusWindow={focusWindow}
       />,
@@ -34,14 +32,12 @@ describe('WindowList', () => {
 
   describe('with a window without a matching manifest', () => {
     beforeEach(() => {
-      windows = { xyz: { id: 'xyz', manifestId: 'abc' } };
-
       wrapper = shallow(
         <WindowList
           containerId="mirador"
           anchorEl={{}}
           titles={titles}
-          windows={windows}
+          windowIds={['xyz']}
           handleClose={handleClose}
           focusWindow={focusWindow}
         />,
@@ -62,7 +58,6 @@ describe('WindowList', () => {
 
   describe('with a window with a matching manifest', () => {
     beforeEach(() => {
-      windows = { xyz: { id: 'xyz', manifestId: 'abc' } };
       titles = { xyz: 'Some title' };
 
       wrapper = shallow(
@@ -70,7 +65,7 @@ describe('WindowList', () => {
           containerId="mirador"
           anchorEl={{}}
           titles={titles}
-          windows={windows}
+          windowIds={['xyz']}
           handleClose={handleClose}
           focusWindow={focusWindow}
         />,
@@ -88,10 +83,6 @@ describe('WindowList', () => {
 
   describe('with multiple windows', () => {
     beforeEach(() => {
-      windows = {
-        xyz: { id: 'xyz', manifestId: 'abc' },
-        zyx: { id: 'zyx', manifestId: '123' },
-      };
       titles = { xyz: 'Some title' };
 
       wrapper = shallow(
@@ -99,7 +90,7 @@ describe('WindowList', () => {
           containerId="mirador"
           anchorEl={{}}
           titles={titles}
-          windows={windows}
+          windowIds={['xyz', 'zyx']}
           handleClose={handleClose}
           focusWindow={focusWindow}
         />,

__tests__/src/components/Workspace.test.js

@@ -6,9 +6,6 @@ import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
 import { Workspace } from '../../../src/components/Workspace';
 
-const windows = { 1: { id: 1 }, 2: { id: 2 } };
-const maximizedWindows = { 1: { id: 1, maximized: true }, 2: { id: 2, maximized: false } };
-
 /**
  * Utility function to create a Worksapce
  * component with all required props set
@@ -17,7 +14,7 @@ function createWrapper(props) {
   return shallow(
     <Workspace
       isWorkspaceControlPanelVisible
-      windows={windows}
+      windowIds={['1', '2']}
       workspaceId="foo"
       workspaceType="mosaic"
       t={k => k}
@@ -46,7 +43,7 @@ describe('Workspace', () => {
       expect(wrapper.matchesElement(
         <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
           <Typography>miradorViewer</Typography>
-          <WorkspaceMosaic windows={windows} />
+          <WorkspaceMosaic />
         </div>,
       )).toBe(true);
     });
@@ -65,7 +62,7 @@ describe('Workspace', () => {
   });
   describe('if any windows are maximized', () => {
     it('should render only maximized <Window/> components', () => {
-      const wrapper = createWrapper({ windows: maximizedWindows });
+      const wrapper = createWrapper({ maximizedWindowIds: ['1'] });
       expect(wrapper.matchesElement(
         <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
           <Typography>miradorViewer</Typography>
@@ -77,7 +74,7 @@ describe('Workspace', () => {
 
   describe('if there are no windows', () => {
     it('should render placeholder content', () => {
-      const wrapper = createWrapper({ windows: {} });
+      const wrapper = createWrapper({ windowIds: [] });
 
       expect(wrapper.find(Typography).at(1).matchesElement(
         <Typography>welcome</Typography>,

__tests__/src/components/WorkspaceMosaic.test.js

@@ -9,7 +9,7 @@ function createWrapper(props) {
   return shallow(
     <WorkspaceMosaic
       windows={{}}
-      workspace={{}}
+      workspaceId="foo"
       updateWorkspaceMosaicLayout={() => {}}
       {...props}
     />,
@@ -42,11 +42,9 @@ describe('WorkspaceMosaic', () => {
     it('updates the workspace layout when windows are removed', () => {
       const updateWorkspaceMosaicLayout = jest.fn();
       wrapper = createWrapper({
+        layout: { first: 1, second: 2 },
         updateWorkspaceMosaicLayout,
         windows,
-        workspace: {
-          layout: { first: 1, second: 2 },
-        },
       });
       wrapper.instance().windowPaths = { 2: ['second'] };
       wrapper.setProps({ windows: { 1: { id: 1 } } });
@@ -70,21 +68,21 @@ describe('WorkspaceMosaic', () => {
   });
   describe('determineWorkspaceLayout', () => {
     it('when window ids do not match workspace layout', () => {
-      wrapper = createWrapper({ windows, workspace: { layout: 'foo' } });
+      wrapper = createWrapper({ layout: {}, windows });
       expect(wrapper.instance().determineWorkspaceLayout()).toMatchObject({
         direction: 'row', first: '1', second: '2',
       });
     });
     it('by default use workspace.layout', () => {
-      wrapper = createWrapper({ windows: { foo: 'bar' }, workspace: { layout: 'foo' } });
+      wrapper = createWrapper({ layout: {}, windows: { foo: 'bar' } });
       expect(wrapper.instance().determineWorkspaceLayout()).toEqual('foo');
     });
     it('generates a new layout if windows do not match current layout', () => {
-      wrapper = createWrapper({ windows: { foo: 'bar' }, workspace: { layout: { first: 'foo', second: 'bark' } } });
+      wrapper = createWrapper({ layout: { first: 'foo', second: 'bark' }, windows: { foo: 'bar' } });
       expect(wrapper.instance().determineWorkspaceLayout()).toEqual('foo');
     });
     it('when window ids match workspace layout', () => {
-      wrapper = createWrapper({ windows: { foo: { id: 'foo' } }, workspace: { layout: 'foo' } });
+      wrapper = createWrapper({ layout: {}, windows: { foo: { id: 'foo' } } });
       expect(wrapper.instance().determineWorkspaceLayout()).toBe('foo');
     });
   });
@@ -99,7 +97,7 @@ describe('WorkspaceMosaic', () => {
         toolbarControls: [],
       }));
 
-      expect(shallow(shallow(renderedTile).props().renderPreview()).matchesElement(
+      expect(shallow(shallow(renderedTile).props().renderPreview({ windowId: 1 })).matchesElement(
         <div className="mosaic-preview">
           <MosaicRenderPreview windowId={1} />
         </div>,

__tests__/src/selectors/windows.test.js

@@ -7,15 +7,47 @@ import {
   getThumbnailNavigationPosition,
   getWindowViewType,
   getCompanionWindow,
-  getCompanionWindowForPosition,
+  getCompanionWindowsForPosition,
   getCompanionWindowsOfWindow,
   getViewer,
   getWindowDraggability,
   selectCompanionWindowDimensions,
   getCanvasIndex,
   getWindowManifests,
+  getWindows,
+  getMaximizedWindows,
 } from '../../../src/state/selectors/windows';
 
+describe('getWindows', () => {
+  it('should return windows from state', () => {
+    const state = {
+      windows: {
+        a: { manifestId: 'amanifest' },
+        b: { manifestId: 'bmanifest' },
+      },
+    };
+
+    const received = getWindows(state);
+
+    expect(received).toEqual(state.windows);
+  });
+});
+
+describe('getMaximizedWindows', () => {
+  it('filters windows to only those maximized', () => {
+    const state = {
+      windows: {
+        a: { manifestId: 'amanifest', maximized: true },
+        b: { manifestId: 'bmanifest' },
+      },
+    };
+
+    const received = getMaximizedWindows(state);
+
+    expect(received.length).toEqual(1);
+    expect(received[0].manifestId).toEqual('amanifest');
+  });
+});
 
 describe('getWindowTitles', () => {
   it('should return manifest titles for the open windows', () => {
@@ -136,7 +168,7 @@ describe('getWindowViewType', () => {
   });
 });
 
-describe('getCompanionWindowForPosition', () => {
+describe('getCompanionWindowsForPosition', () => {
   const state = {
     companionWindows: {
       abc: { id: 'abc', position: 'right' },
@@ -146,30 +178,30 @@ describe('getCompanionWindowForPosition', () => {
   };
 
   it('the companion window type based on the given position', () => {
-    const received = getCompanionWindowForPosition(state, {
+    const received = getCompanionWindowsForPosition(state, {
       position: 'right',
       windowId: 'a',
     });
-
-    expect(received.id).toEqual('abc');
+    expect(received.length).toBe(1);
+    expect(received[0].id).toEqual('abc');
   });
 
   it('returns undefined if the given window does not exist', () => {
-    const received = getCompanionWindowForPosition(state, {
+    const received = getCompanionWindowsForPosition(state, {
       position: 'right',
       windowId: 'c',
     });
 
-    expect(received).toBeUndefined();
+    expect(received).toEqual([]);
   });
 
   it('returns undefined if a companion window at the given position does not exist', () => {
-    const received = getCompanionWindowForPosition(state, {
+    const received = getCompanionWindowsForPosition(state, {
       position: 'bottom',
       windowId: 'a',
     });
 
-    expect(received).toBeUndefined();
+    expect(received).toEqual([]);
   });
 });
 

src/components/CompanionArea.js

@@ -21,14 +21,14 @@ export class CompanionArea extends Component {
   /** */
   render() {
     const {
-      classes, companionWindows, companionAreaOpen, setCompanionAreaOpen,
+      classes, companionWindowIds, companionAreaOpen, setCompanionAreaOpen,
       position, sideBarOpen, t, windowId,
     } = this.props;
 
     return (
       <div className={[classes.root, this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' ')}>
         {
-          setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindows.length > 0
+          setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindowIds.length > 0
           && (
             <MiradorMenuButton
               aria-label={companionAreaOpen ? t('collapseSidePanel') : t('expandSidePanel')}
@@ -49,8 +49,8 @@ export class CompanionArea extends Component {
         <Slide in={companionAreaOpen} direction="right">
           <div className={[ns('companion-windows'), this.areaLayoutClass()].join(' ')} style={{ display: companionAreaOpen ? 'flex' : 'none' }}>
             {
-              companionWindows.map(cw => (
-                <CompanionWindowFactory id={cw.id} key={cw.id} windowId={windowId} />
+              companionWindowIds.map(id => (
+                <CompanionWindowFactory id={id} key={id} windowId={windowId} />
               ))
             }
           </div>
@@ -63,7 +63,7 @@ export class CompanionArea extends Component {
 CompanionArea.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
   companionAreaOpen: PropTypes.bool.isRequired,
-  companionWindows: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   position: PropTypes.string.isRequired,
   setCompanionAreaOpen: PropTypes.func,
   sideBarOpen: PropTypes.bool,

src/components/ErrorDialog.js

@@ -5,12 +5,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import PropTypes from 'prop-types';
 import { DialogActions, DialogContentText, Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
-import {
-  first,
-  isUndefined,
-  omit,
-  values,
-} from 'lodash';
+import { isUndefined } from 'lodash';
 
 /**
  */
@@ -21,11 +16,9 @@ export class ErrorDialog extends Component {
    */
   render() {
     const {
-      errors, removeError, t,
+      error, removeError, t,
     } = this.props;
 
-    /* extract 'items' value and get first key-value-pair (an error) */
-    const error = first(values(omit(errors, 'items')));
     const hasError = !isUndefined(error);
 
     return error ? (
@@ -54,13 +47,16 @@ export class ErrorDialog extends Component {
 }
 
 ErrorDialog.propTypes = {
-  errors: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  error: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.string,
+  }),
   removeError: PropTypes.func,
   t: PropTypes.func,
 };
 
 ErrorDialog.defaultProps = {
-  errors: null,
+  error: null,
   removeError: () => {},
   t: key => key,
 };

src/components/WindowList.js

@@ -13,10 +13,10 @@ export class WindowList extends Component {
    * Get the title for a window from its manifest title
    * @private
    */
-  titleContent(window) {
+  titleContent(windowId) {
     const { titles, t } = this.props;
 
-    return titles[window.id] || t('untitled');
+    return titles[windowId] || t('untitled');
   }
 
   /**
@@ -25,7 +25,7 @@ export class WindowList extends Component {
    */
   render() {
     const {
-      containerId, handleClose, anchorEl, windows, focusWindow, t,
+      containerId, handleClose, anchorEl, windowIds, focusWindow, t,
     } = this.props;
 
     return (
@@ -48,15 +48,15 @@ export class WindowList extends Component {
           {t('openWindows')}
         </ListSubheader>
         {
-          Object.values(windows).map((window, i) => (
+          windowIds.map((windowId, i) => (
             <MenuItem
-              key={window.id}
+              key={windowId}
               selected={i === 0}
-              onClick={(e) => { focusWindow(window.id, true); handleClose(e); }}
+              onClick={(e) => { focusWindow(windowId, true); handleClose(e); }}
             >
               <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
                 {
-                  this.titleContent(window)
+                  this.titleContent(windowId)
                 }
               </ListItemText>
             </MenuItem>
@@ -73,8 +73,8 @@ WindowList.propTypes = {
   focusWindow: PropTypes.func.isRequired,
   handleClose: PropTypes.func.isRequired,
   t: PropTypes.func,
-  titles: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  titles: PropTypes.objectOf(PropTypes.string),
+  windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 WindowList.defaultProps = {

src/components/Workspace.js

@@ -18,20 +18,20 @@ export class Workspace extends React.Component {
    * Determine which workspace to render by configured type
    */
   workspaceByType() {
-    const { workspaceId, workspaceType, windows } = this.props;
+    const { workspaceId, workspaceType, windowIds } = this.props;
     if (this.maximizedWindows()) {
       return this.maximizedWindows();
     }
 
-    if (Object.keys(windows).length === 0) return this.zeroWindows();
+    if (windowIds.length === 0) return this.zeroWindows();
 
     switch (workspaceType) {
       case 'elastic':
         return <WorkspaceElastic />;
       case 'mosaic':
-        return <WorkspaceMosaic windows={windows} />;
+        return <WorkspaceMosaic />;
       default:
-        return Object.keys(windows).map(windowId => (
+        return windowIds.map(windowId => (
           <Window
             key={`${windowId}-${workspaceId}`}
             windowId={windowId}
@@ -72,12 +72,10 @@ export class Workspace extends React.Component {
    * Determine whether or not there are maximized windows
    */
   maximizedWindows() {
-    const { windows, workspaceId } = this.props;
-    const windowKeys = Object.keys(windows).sort();
-    const maximizedWindows = windowKeys
-      .filter(windowId => windows[windowId].maximized === true);
-    if (maximizedWindows.length) {
-      return maximizedWindows.map(windowId => (
+    const { maximizedWindowIds, workspaceId } = this.props;
+
+    if (maximizedWindowIds.length > 0) {
+      return maximizedWindowIds.map(windowId => (
         <Window
           key={`${windowId}-${workspaceId}`}
           windowId={windowId}
@@ -112,8 +110,14 @@ export class Workspace extends React.Component {
 
 Workspace.propTypes = {
   isWorkspaceControlPanelVisible: PropTypes.bool.isRequired,
+  maximizedWindowIds: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func.isRequired,
-  windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  windowIds: PropTypes.arrayOf(PropTypes.string),
   workspaceId: PropTypes.string.isRequired,
   workspaceType: PropTypes.string.isRequired,
 };
+
+Workspace.defaultProps = {
+  maximizedWindowIds: [],
+  windowIds: [],
+};

src/components/WorkspaceMosaic.js

@@ -26,6 +26,8 @@ export class WorkspaceMosaic extends React.Component {
     this.determineWorkspaceLayout = this.determineWorkspaceLayout.bind(this);
     this.zeroStateView = <div />;
     this.windowPaths = {};
+    this.toolbarControls = [];
+    this.additionalControls = [];
   }
 
   /** */
@@ -38,7 +40,7 @@ export class WorkspaceMosaic extends React.Component {
 
   /** */
   componentDidUpdate(prevProps) {
-    const { windows, workspace, updateWorkspaceMosaicLayout } = this.props;
+    const { windows, layout, updateWorkspaceMosaicLayout } = this.props;
     const prevWindows = Object.keys(prevProps.windows);
     const currentWindows = Object.keys(windows);
     // Handles when Windows are removed from the state
@@ -50,15 +52,15 @@ export class WorkspaceMosaic extends React.Component {
       }
 
       const removedWindows = difference(prevWindows, currentWindows);
-      const layout = new MosaicLayout(workspace.layout);
-      layout.removeWindows(removedWindows, this.windowPaths);
-      updateWorkspaceMosaicLayout(layout.layout);
+      const newLayout = new MosaicLayout(layout);
+      newLayout.removeWindows(removedWindows, this.windowPaths);
+      updateWorkspaceMosaicLayout(newLayout.layout);
     }
     // Handles when Windows are added (not via Add Resource UI)
     // TODO: If a window is added, add it in a better way #2380
     if (!currentWindows.every(e => prevWindows.includes(e))) {
       const newLayout = this.determineWorkspaceLayout();
-      if (newLayout !== workspace.layout) updateWorkspaceMosaicLayout(newLayout);
+      if (newLayout !== layout) updateWorkspaceMosaicLayout(newLayout);
     }
   }
 
@@ -75,10 +77,10 @@ export class WorkspaceMosaic extends React.Component {
    * Used to determine whether or not a "new" layout should be autogenerated.
    */
   determineWorkspaceLayout() {
-    const { windows, workspace } = this.props;
+    const { windows, layout } = this.props;
     const sortedWindows = toPairs(windows)
       .sort((a, b) => a.layoutOrder - b.layoutOrder).map(val => val[0]);
-    const leaveKeys = getLeaves(workspace.layout);
+    const leaveKeys = getLeaves(layout);
     // Windows were added
     if (!sortedWindows.every(e => leaveKeys.includes(e))) {
       // No current layout, so just generate a new one
@@ -87,40 +89,45 @@ export class WorkspaceMosaic extends React.Component {
       }
       // Add new windows to layout
       const addedWindows = difference(sortedWindows, leaveKeys);
-      const layout = new MosaicLayout(workspace.layout);
-      layout.addWindows(addedWindows);
-      return layout.layout;
+      const newLayout = new MosaicLayout(layout);
+      newLayout.addWindows(addedWindows);
+      return newLayout.layout;
     }
     // Windows were removed (perhaps in a different Workspace). We don't have a
     // way to reconfigure.. so we have to random generate
     if (!leaveKeys.every(e => sortedWindows.includes(e))) {
       return createBalancedTreeFromLeaves(sortedWindows);
     }
-    return workspace.layout;
+    return layout;
+  }
+
+  /** */
+  static renderPreview(mosaicProps) {
+    return (
+      <div className="mosaic-preview">
+        <MosaicRenderPreview windowId={mosaicProps.windowId} />
+      </div>
+    );
   }
 
   /**
    * Render a tile (Window) in the Mosaic.
    */
   tileRenderer(id, path) {
-    const { windows, workspace } = this.props;
+    const { windows, workspaceId } = this.props;
     const window = windows[id];
     if (!window) return null;
     this.bookkeepPath(window.id, path);
     return (
       <MosaicWindow
-        toolbarControls={[]}
-        additionalControls={[]}
+        toolbarControls={this.toolbarControls}
+        additionalControls={this.additionalControls}
         path={path}
         windowId={window.id}
-        renderPreview={() => (
-          <div className="mosaic-preview">
-            <MosaicRenderPreview windowId={window.id} />
-          </div>
-        )}
+        renderPreview={WorkspaceMosaic.renderPreview}
       >
         <Window
-          key={`${window.id}-${workspace.id}`}
+          key={`${window.id}-${workspaceId}`}
           windowId={window.id}
         />
       </MosaicWindow>
@@ -138,11 +145,11 @@ export class WorkspaceMosaic extends React.Component {
   /**
    */
   render() {
-    const { workspace } = this.props;
+    const { layout } = this.props;
     return (
       <Mosaic
         renderTile={this.tileRenderer}
-        initialValue={workspace.layout || this.determineWorkspaceLayout()}
+        initialValue={layout || this.determineWorkspaceLayout()}
         onChange={this.mosaicChange}
         className="mirador-mosaic"
         zeroStateView={this.zeroStateView}
@@ -152,7 +159,12 @@ export class WorkspaceMosaic extends React.Component {
 }
 
 WorkspaceMosaic.propTypes = {
+  layout: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
   windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  workspaceId: PropTypes.string.isRequired,
+};
+
+WorkspaceMosaic.defaultProps = {
+  layout: undefined,
 };

src/containers/CompanionArea.js

@@ -3,15 +3,14 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend';
-import { getCompanionWindowsOfWindow, getCompanionAreaVisibility, getWindow } from '../state/selectors';
+import { getCompanionWindowsForPosition, getCompanionAreaVisibility, getWindow } from '../state/selectors';
 import * as actions from '../state/actions';
 import { CompanionArea } from '../components/CompanionArea';
 
 /** */
 const mapStateToProps = (state, { windowId, position }) => ({
   companionAreaOpen: getCompanionAreaVisibility(state, { position, windowId }),
-  companionWindows: getCompanionWindowsOfWindow(state, { windowId })
-    .filter(cw => cw && cw.position === position),
+  companionWindowIds: getCompanionWindowsForPosition(state, { position, windowId }).map(w => w.id),
   sideBarOpen: (getWindow(state, { windowId }) || {}).sideBarOpen,
 });
 

src/containers/ErrorDialog.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
+import {
+  first,
+  omit,
+  values,
+} from 'lodash';
 import { withPlugins } from '../extend';
 import { ErrorDialog } from '../components/ErrorDialog';
 import * as actions from '../state/actions';
@@ -11,7 +16,8 @@ import * as actions from '../state/actions';
  * @private
  */
 const mapStateToProps = state => ({
-  errors: state.errors,
+  /* extract 'items' value and get first key-value-pair (an error) */
+  errors: first(values(omit(state.errors, 'items'))),
 });
 
 /**

src/containers/WindowList.js

@@ -24,7 +24,7 @@ const mapStateToProps = state => (
   {
     containerId: getContainerId(state),
     titles: getWindowTitles(state),
-    windows: state.windows,
+    windowIds: Object.keys(state.windows),
   }
 );
 

src/containers/WindowSideBarButtons.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend';
 import * as actions from '../state/actions';
 import {
-  getCompanionWindowForPosition,
+  getCompanionWindowsForPosition,
   getAnnotationResourcesByMotivation,
 } from '../state/selectors';
 import { WindowSideBarButtons } from '../components/WindowSideBarButtons';
@@ -31,7 +31,7 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
 const mapStateToProps = (state, { windowId }) => ({
   hasAnnotations: getAnnotationResourcesByMotivation(state, { motivations: ['oa:commenting', 'sc:painting'], windowId }).length > 0,
   hideAnnotationsPanel: state.config.window.hideAnnotationsPanel,
-  sideBarPanel: (getCompanionWindowForPosition(state, { position: 'left', windowId }) || {}).content,
+  sideBarPanel: ((getCompanionWindowsForPosition(state, { position: 'left', windowId }))[0] || {}).content,
 });
 
 /** */

src/containers/Workspace.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend';
 import { Workspace } from '../components/Workspace';
-import { getWorkspaceType } from '../state/selectors';
+import { getMaximizedWindows, getWorkspaceType } from '../state/selectors';
 
 /**
  * mapStateToProps - to hook up connect
@@ -13,7 +13,8 @@ import { getWorkspaceType } from '../state/selectors';
 const mapStateToProps = state => (
   {
     isWorkspaceControlPanelVisible: state.config.workspaceControlPanel.enabled,
-    windows: state.windows,
+    maximizedWindowIds: Object.keys(getMaximizedWindows(state)),
+    windowIds: Object.keys(state.windows),
     workspaceId: state.workspace.id,
     workspaceType: getWorkspaceType(state),
   }

src/containers/WorkspaceMosaic.js

@@ -11,7 +11,9 @@ import { WorkspaceMosaic } from '../components/WorkspaceMosaic';
  */
 const mapStateToProps = state => (
   {
-    workspace: state.workspace,
+    layout: state.workspace.layout,
+    windows: state.windows,
+    workspaceId: state.workspace.id,
   }
 );
 

src/state/selectors/windows.js

@@ -10,7 +10,7 @@ import { getWorkspaceType } from './config';
 export function getWindowTitles(state) {
   const result = {};
 
-  Object.keys(state.windows).forEach((windowId) => {
+  Object.keys(getWindows(state)).forEach((windowId) => {
     result[windowId] = getManifestTitle(state, { windowId });
   });
 
@@ -26,9 +26,19 @@ export function getWindowManifests(state) {
   return Object.values(state.windows).map(window => window.manifestId);
 }
 
+/** */
+export function getWindows(state) {
+  return state.windows || {};
+}
+
+/** */
+export function getMaximizedWindows(state) {
+  return Object.values(getWindows(state)).filter(window => window.maximized === true);
+}
+
 /** */
 export function getWindow(state, { windowId }) {
-  return state.windows && state.windows[windowId];
+  return getWindows(state)[windowId];
 }
 
 /** Return the canvas index for a certain window.
@@ -109,9 +119,9 @@ export const getCompanionWindowsOfWindow = createSelector(
 * @param {String} position
 * @return {String}
 */
-export const getCompanionWindowForPosition = createSelector(
+export const getCompanionWindowsForPosition = createSelector(
   [getCompanionWindowsOfWindow, (state, { position }) => position],
-  (companionWindows, position) => companionWindows.find(cw => cw.position === position),
+  (companionWindows, position) => companionWindows.filter(cw => cw.position === position),
 );
 
 export const getViewer = createSelector(