Setup CollectionDialog to be able to function based on window

__tests__/src/components/CollectionDialog.test.js

@@ -41,4 +41,10 @@ describe('CollectionDialog', () => {
     expect(wrapper.find(DialogActions).find(Button).first().simulate('click'));
     expect(hideCollectionDialog).toHaveBeenCalled();
   });
+  it('clicking the hide button fires hideWindowCollectionDialog in window variant', () => {
+    const hideWindowCollectionDialog = jest.fn();
+    const wrapper = createWrapper({ hideWindowCollectionDialog, variant: 'window' });
+    expect(wrapper.find(DialogActions).find(Button).first().simulate('click'));
+    expect(hideWindowCollectionDialog).toHaveBeenCalled();
+  });
 });

__tests__/src/reducers/windows.test.js

@@ -381,4 +381,38 @@ describe('windows reducer', () => {
       type: ActionTypes.IMPORT_MIRADOR_STATE,
     })).toEqual({ new: 'stuff' });
   });
+
+  describe('SHOW_WINDOW_COLLECTION_DIALOG', () => {
+    it('handles SHOW_WINDOW_COLLECTION_DIALOG by toggling the given window\'s collection dialog', () => {
+      const beforeState = { abc123: { collectionDialogOn: false } };
+      const action = {
+        collectionPath: [], manifestId: 'def456', type: ActionTypes.SHOW_WINDOW_COLLECTION_DIALOG, windowId: 'abc123',
+      };
+      const expectedState = {
+        abc123: { collectionDialogOn: true, collectionManifestId: 'def456', collectionPath: [] },
+      };
+
+      expect(windowsReducer(beforeState, action)).toEqual(expectedState);
+    });
+  });
+
+  describe('HIDE_WINDOW_COLLECTION_DIALOG', () => {
+    it('handles HIDE_WINDOW_COLLECTION_DIALOG by toggling the given window\'s collection dialog', () => {
+      const beforeState = {
+        abc123: {
+          collectionDialogOn: true, collectionManifestId: 'def456', collectionPath: [],
+        },
+      };
+      const action = {
+        type: ActionTypes.HIDE_WINDOW_COLLECTION_DIALOG,
+        windowId: 'abc123',
+      };
+
+      const expectedState = {
+        abc123: { collectionDialogOn: false, collectionManifestId: 'def456', collectionPath: [] },
+      };
+
+      expect(windowsReducer(beforeState, action)).toEqual(expectedState);
+    });
+  });
 });

src/components/CollectionDialog.js

@@ -29,7 +29,7 @@ function asArray(value) {
 }
 
 /**
- * a simple dialog providing the possibility to switch the theme
+ * a dialog providing the possibility to select the collection
  */
 export class CollectionDialog extends Component {
   /** */
@@ -46,6 +46,7 @@ export class CollectionDialog extends Component {
     super(props);
 
     this.state = { filter: null };
+    this.hideDialog = this.hideDialog.bind(this);
   }
 
   /** */
@@ -53,23 +54,40 @@ export class CollectionDialog extends Component {
     this.setState({ filter });
   }
 
+  /** */
+  hideDialog() {
+    const {
+      hideCollectionDialog, hideWindowCollectionDialog, variant, windowId,
+    } = this.props;
+    if (variant === 'window') {
+      hideWindowCollectionDialog(windowId);
+    } else {
+      hideCollectionDialog();
+    }
+  }
+
+  /** */
+  showCollectionDialog(...args) {
+    const { showCollectionDialog, showWindowCollectionDialog, variant } = this.props;
+    return variant === 'window' ? showWindowCollectionDialog(...args) : showCollectionDialog(...args);
+  }
+
   /** */
   selectCollection(c) {
     const {
       collectionPath,
       manifestId,
-      showCollectionDialog,
       windowId,
     } = this.props;
 
-    showCollectionDialog(c.id, [...collectionPath, manifestId], windowId);
+    this.showCollectionDialog(c.id, [...collectionPath, manifestId], windowId);
   }
 
   /** */
   goToPreviousCollection() {
-    const { collectionPath, showCollectionDialog, windowId } = this.props;
+    const { collectionPath, windowId } = this.props;
 
-    showCollectionDialog(
+    this.showCollectionDialog(
       collectionPath[collectionPath.length - 1],
       collectionPath.slice(0, -1),
       windowId,
@@ -81,7 +99,6 @@ export class CollectionDialog extends Component {
     const {
       addWindow,
       collectionPath,
-      hideCollectionDialog,
       manifestId,
       setWorkspaceAddVisibility,
       updateWindow,
@@ -96,21 +113,21 @@ export class CollectionDialog extends Component {
       addWindow({ collectionPath: [...collectionPath, manifestId], manifestId: m.id });
     }
 
-    hideCollectionDialog();
+    this.hideDialog();
     setWorkspaceAddVisibility(false);
   }
 
   /** */
   placeholder() {
-    const { classes, containerId, hideCollectionDialog, windowId } = this.props;
+    const { classes, containerId, windowId } = this.props;
 
     return (
       <Dialog
         className={classes.dialog}
-        onClose={hideCollectionDialog}
+        onClose={this.hideDialog}
         open
         container={document.querySelector(`#${containerId} #${windowId}`)}
-        BackdropProps={{ classes: classes.dialog }}
+        BackdropProps={this.backdropProps()}
       >
         <DialogTitle id="select-collection" disableTypography>
           <Skeleton className={classes.placeholder} variant="text" />
@@ -123,6 +140,12 @@ export class CollectionDialog extends Component {
     );
   }
 
+  /** */
+  backdropProps() {
+    const { classes } = this.props;
+    return { classes: { root: classes.dialog } };
+  }
+
   /** */
   render() {
     const {
@@ -130,7 +153,6 @@ export class CollectionDialog extends Component {
       collection,
       containerId,
       error,
-      hideCollectionDialog,
       isMultipart,
       manifest,
       ready,
@@ -158,9 +180,9 @@ export class CollectionDialog extends Component {
     return (
       <Dialog
         className={classes.dialog}
-        onClose={hideCollectionDialog}
+        onClose={this.hideDialog}
         container={document.querySelector(`#${containerId} #${windowId}`)}
-        BackdropProps={{ classes: { root: classes.dialog }}}
+        BackdropProps={this.backdropProps()}
         open
       >
         <DialogTitle id="select-collection" disableTypography>
@@ -195,7 +217,7 @@ export class CollectionDialog extends Component {
                   <>
                     <Typography variant="subtitle2" component="dt">{t('rights')}</Typography>
                     { rights.map(v => (
-                      <Typography variant="body1" component="dd">
+                      <Typography variant="body1" component="dd" key={v}>
                         <Link target="_blank" rel="noopener noreferrer" href={v}>
                           {v}
                         </Link>
@@ -238,7 +260,7 @@ export class CollectionDialog extends Component {
           )}
         </ScrollIndicatedDialogContent>
         <DialogActions>
-          <Button onClick={hideCollectionDialog}>
+          <Button onClick={this.hideDialog}>
             {t('close')}
           </Button>
         </DialogActions>
@@ -252,16 +274,20 @@ CollectionDialog.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   collectionPath: PropTypes.arrayOf(PropTypes.string),
+  containerId: PropTypes.string,
   error: PropTypes.string,
   hideCollectionDialog: PropTypes.func.isRequired,
+  hideWindowCollectionDialog: PropTypes.func.isRequired,
   isMultipart: PropTypes.bool,
   manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   manifestId: PropTypes.string.isRequired,
   ready: PropTypes.bool,
   setWorkspaceAddVisibility: PropTypes.func.isRequired,
   showCollectionDialog: PropTypes.func.isRequired,
+  showWindowCollectionDialog: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   updateWindow: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['window', 'workspace']),
   windowId: PropTypes.string,
 };
 
@@ -272,5 +298,6 @@ CollectionDialog.defaultProps = {
   error: null,
   isMultipart: false,
   ready: false,
+  variant: 'workspace',
   windowId: null,
 };

src/components/PrimaryWindow.js

@@ -5,6 +5,7 @@ import WindowSideBar from '../containers/WindowSideBar';
 import WindowViewer from '../containers/WindowViewer';
 import GalleryView from '../containers/GalleryView';
 import CompanionArea from '../containers/CompanionArea';
+import CollectionDialog from '../containers/CollectionDialog';
 import ns from '../config/css-ns';
 
 const SelectCollection = lazy(() => import('../containers/SelectCollection'));
@@ -22,13 +23,16 @@ export class PrimaryWindow extends Component {
    */
   renderViewer() {
     const {
-      isCollection, isFetching, view, windowId,
+      isCollection, isCollectionDialogVisible, isFetching, view, windowId,
     } = this.props;
     if (isCollection) {
       return (
+        <>
+          { isCollectionDialogVisible && <CollectionDialog variant="window" windowId={windowId} /> }
           <SelectCollection
             windowId={windowId}
           />
+        </>
       );
     }
     if (isFetching === false) {
@@ -66,6 +70,7 @@ export class PrimaryWindow extends Component {
 PrimaryWindow.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   isCollection: PropTypes.bool,
+  isCollectionDialogVisible: PropTypes.bool,
   isFetching: PropTypes.bool,
   view: PropTypes.string,
   windowId: PropTypes.string.isRequired,
@@ -73,6 +78,7 @@ PrimaryWindow.propTypes = {
 
 PrimaryWindow.defaultProps = {
   isCollection: false,
+  isCollectionDialogVisible: false,
   isFetching: false,
   view: undefined,
 };

src/components/SelectCollection.js

@@ -19,9 +19,9 @@ export class SelectCollection extends Component {
   /** */
   openCollectionDialog() {
     const {
-      collectionPath, manifestId, showCollectionDialog, windowId,
+      collectionPath, manifestId, showWindowCollectionDialog, windowId,
     } = this.props;
-    showCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
+    showWindowCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
   }
 
   /** */
@@ -54,7 +54,7 @@ export class SelectCollection extends Component {
 SelectCollection.propTypes = {
   collectionPath: PropTypes.arrayOf(PropTypes.string),
   manifestId: PropTypes.string,
-  showCollectionDialog: PropTypes.func.isRequired,
+  showWindowCollectionDialog: PropTypes.func.isRequired,
   t: PropTypes.func,
   windowId: PropTypes.string,
 };

src/containers/CollectionDialog.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
-  getContainerId, getManifest, getManifestoInstance, getSequenceBehaviors,
+  getContainerId, getManifest, getManifestoInstance, getSequenceBehaviors, getWindow,
 } from '../state/selectors';
 import { CollectionDialog } from '../components/CollectionDialog';
 
@@ -17,8 +17,10 @@ import { CollectionDialog } from '../components/CollectionDialog';
 const mapDispatchToProps = {
   addWindow: actions.addWindow,
   hideCollectionDialog: actions.hideCollectionDialog,
+  hideWindowCollectionDialog: actions.hideWindowCollectionDialog,
   setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility,
   showCollectionDialog: actions.showCollectionDialog,
+  showWindowCollectionDialog: actions.showWindowCollectionDialog,
   updateWindow: actions.updateWindow,
 };
 
@@ -27,8 +29,10 @@ const mapDispatchToProps = {
  * @memberof CollectionDialog
  * @private
  */
-const mapStateToProps = (state) => {
-  const { collectionPath, collectionManifestId: manifestId } = state.workspace;
+const mapStateToProps = (state, { variant, windowId }) => {
+  const { collectionPath, collectionManifestId: manifestId } = variant === 'window'
+    ? getWindow(state, { windowId })
+    : state.workspace;
   const manifest = getManifest(state, { manifestId });
 
   const collectionId = collectionPath && collectionPath[collectionPath.length - 1];
@@ -44,7 +48,7 @@ const mapStateToProps = (state) => {
     manifestId,
     open: state.workspace.collectionDialogOn,
     ready: manifest && !!manifest.json,
-    windowId: state.workspace.collectionUpdateWindowId,
+    windowId: state.workspace.collectionUpdateWindowId || windowId,
   };
 };
 

src/containers/PrimaryWindow.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
-import { getManifestoInstance } from '../state/selectors';
+import { getManifestoInstance, getWindow } from '../state/selectors';
 import { PrimaryWindow } from '../components/PrimaryWindow';
 
 /** */
@@ -10,6 +10,7 @@ const mapStateToProps = (state, { windowId }) => {
   const manifestoInstance = getManifestoInstance(state, { windowId });
   return {
     isCollection: manifestoInstance && manifestoInstance.isCollection(),
+    isCollectionDialogVisible: getWindow(state, { windowId }).collectionDialogOn,
   };
 };
 

src/containers/SelectCollection.js

@@ -20,7 +20,7 @@ const mapStateToProps = (state, { windowId }) => {
 };
 
 const mapDispatchToProps = {
-  showCollectionDialog: actions.showCollectionDialog,
+  showWindowCollectionDialog: actions.showWindowCollectionDialog,
 };
 /** */
 const styles = (theme) => ({

src/state/actions/action-types.js

@@ -72,6 +72,8 @@ const ActionTypes = {
   REMOVE_RESOURCE: 'mirador/REMOVE_RESOURCE',
   SHOW_COLLECTION_DIALOG: 'mirador/SHOW_COLLECTION_DIALOG',
   HIDE_COLLECTION_DIALOG: 'mirador/HIDE_COLLECTION_DIALOG',
+  SHOW_WINDOW_COLLECTION_DIALOG: 'mirador/SHOW_WINDOW_COLLECTION_DIALOG',
+  HIDE_WINDOW_COLLECTION_DIALOG: 'mirador/HIDE_WINDOW_COLLECTION_DIALOG',
 };
 
 export default ActionTypes;

src/state/actions/window.js

@@ -186,3 +186,21 @@ export function setWindowViewType(windowId, viewType) {
     windowId,
   };
 }
+
+/** */
+export function showWindowCollectionDialog(manifestId, collectionPath = [], windowId) {
+  return {
+    collectionPath,
+    manifestId,
+    type: ActionTypes.SHOW_WINDOW_COLLECTION_DIALOG,
+    windowId,
+  };
+}
+
+/** */
+export function hideWindowCollectionDialog(windowId) {
+  return {
+    type: ActionTypes.HIDE_WINDOW_COLLECTION_DIALOG,
+    windowId,
+  };
+}

src/state/reducers/windows.js

@@ -150,6 +150,24 @@ export const windowsReducer = (state = {}, action) => {
           suggestedSearches: undefined,
         },
       };
+    case ActionTypes.SHOW_WINDOW_COLLECTION_DIALOG:
+      return {
+        ...state,
+        [action.windowId]: {
+          ...state[action.windowId],
+          collectionDialogOn: true,
+          collectionManifestId: action.manifestId,
+          collectionPath: action.collectionPath,
+        },
+      };
+    case ActionTypes.HIDE_WINDOW_COLLECTION_DIALOG:
+      return {
+        ...state,
+        [action.windowId]: {
+          ...state[action.windowId],
+          collectionDialogOn: false,
+        },
+      };
     default:
       return state;
   }

src/state/sagas/app.js

@@ -53,5 +53,6 @@ export default function* appSaga() {
     takeEvery(ActionTypes.IMPORT_MIRADOR_STATE, importState),
     takeEvery(ActionTypes.IMPORT_CONFIG, importConfig),
     takeEvery(ActionTypes.SHOW_COLLECTION_DIALOG, fetchCollectionManifests),
+    takeEvery(ActionTypes.SHOW_WINDOW_COLLECTION_DIALOG, fetchCollectionManifests),
   ]);
 }

src/state/sagas/windows.js

@@ -13,7 +13,7 @@ import {
   fetchSearch,
   receiveManifest,
   fetchInfoResponse,
-  showCollectionDialog,
+  showWindowCollectionDialog,
 } from '../actions';
 import {
   getSearchForWindow, getSearchAnnotationsForCompanionWindow,
@@ -237,7 +237,7 @@ export function* determineAndShowCollectionDialog(manifestId, windowId) {
   const manifestoInstance = yield select(getManifestoInstance, { manifestId });
   const isCollection = manifestoInstance.isCollection();
   if (isCollection) {
-    yield put(showCollectionDialog(manifestId, [], windowId));
+    yield put(showWindowCollectionDialog(manifestId, [], windowId));
   }
 }