Add SnapshotsDropdown to Documents component and fix navigateDashboard action

Author: jochenklar

rdmo/projects/assets/js/project/actions/projectActions.js

@@ -7,7 +7,7 @@ import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 
 import { projectId } from '../utils/meta'
-import { updateLocation } from '../utils/location'
+import { locationKeys, updateLocation } from '../utils/location'
 
 import ProjectApi from '../api/ProjectApi'
 
@@ -21,7 +21,7 @@ export function navigateDashboard(location) {
     updateLocation(location)
 
     // update the location in the config store
-    Object.keys(location).forEach(key => dispatch(updateConfig(key, location[key], false)))
+    locationKeys.forEach(key => dispatch(updateConfig(key, location[key] ?? null, false)))
 
     if (!isNil(location.viewId)) {
       dispatch(fetchView(location.snapshotId, location.viewId))

rdmo/projects/assets/js/project/components/Main.js

@@ -12,7 +12,7 @@ import Plugins from './areas/Plugins'
 import View from './helper/View'
 
 const Main = () => {
-  const { area } = useSelector((state) => state.config)
+  const { area, snapshotId } = useSelector((state) => state.config)
   const { project, currentView } = useSelector((state) => state.project)
 
   const renderArea = () => {
@@ -24,7 +24,7 @@ const Main = () => {
       case 'documents':
         return currentView ? <View /> : <Documents />
       case 'snapshots':
-        return currentView ? <View /> : <Snapshots />
+        return currentView ? <View /> : (snapshotId ? <Documents /> : <Snapshots />)
       case 'information':
         return <Information />
       case 'memberships':

rdmo/projects/assets/js/project/components/areas/Documents.js

@@ -1,19 +1,32 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { isNil } from 'lodash'
 
 import { downloadView, downloadAnswers, navigateDashboard } from '../../actions/projectActions'
 
+import SnapshotsDropdown from '../helper/SnapshotsDropdown'
 import ViewTile from '../helper/ViewTile'
 
 const Documents = () => {
   const dispatch = useDispatch()
 
+  const { snapshotId, viewId, detail } = useSelector((state) => state.config)
   const { views } = useSelector((state) => state.project.project) ?? {}
+  const area = snapshotId ? 'snapshots' : 'documents'
+
+  const handleSnapshotChange = (snapshot) => {
+    if (isNil(snapshot)) {
+      dispatch(navigateDashboard({ area, viewId, detail }))
+    } else {
+      dispatch(navigateDashboard({ area, snapshotId: snapshot.id, viewId, detail }))
+    }
+  }
 
   return (
     <div className="project-documents">
       <div className="d-flex justify-content-between align-items-center mb-5">
         <h1 className="mb-0">{gettext('Documents')}</h1>
+        <SnapshotsDropdown onChange={handleSnapshotChange}/>
       </div>
 
       <h2>{gettext('Data management plans')}</h2>
@@ -24,7 +37,7 @@ const Documents = () => {
               <ViewTile
                   title={view.title}
                   help={view.help}
-                  onClick={() => dispatch(navigateDashboard({ area: 'documents', viewId: view.id }))}
+                  onClick={() => dispatch(navigateDashboard({ area, snapshotId, viewId: view.id }))}
                   onExport={(format) => dispatch(downloadView(null, view.id, format))}
               />
             </div>
@@ -38,15 +51,15 @@ const Documents = () => {
           <ViewTile
             title={gettext('List all questions')}
             help={gettext('Overview of all questions')}
-            onClick={() => dispatch(navigateDashboard({ area: 'documents', detail: 'questions' }))}
+            onClick={() => dispatch(navigateDashboard({ area, snapshotId, detail: 'questions' }))}
             onExport={(format) => {console.log(format)}}
           />
         </div>
         <div className="col-lg-6">
           <ViewTile
             title={gettext('List all answers')}
             help={gettext('Overview of all questions and answers')}
-            onClick={() => dispatch(navigateDashboard({ area: 'documents', detail: 'answers' }))}
+            onClick={() => dispatch(navigateDashboard({ area, snapshotId, detail: 'answers' }))}
             onExport={(format) => dispatch(downloadAnswers(null, format))}
           />
         </div>

rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotTable.js

@@ -21,7 +21,7 @@ const SnapshotTable = ({ snapshots }) => {
   const [selectedSnapshot, setSelectedSnapshot] = useState(null)
 
   const handleShowAnswers = (snapshotId) => {
-    dispatch(navigateDashboard({ area: 'snapshots', snapshotId, detail: 'answers' }))
+    dispatch(navigateDashboard({ area: 'snapshots', snapshotId }))
   }
 
   const openRollbackModal = (snapshot) => {

rdmo/projects/assets/js/project/components/helper/SnapshotsDropdown.js

@@ -9,6 +9,9 @@ const SnapshotsDropdown = ({ onChange }) => {
   const { snapshotId } = useSelector((state) => state.config)
   const { snapshots } = useSelector((state) => state.project?.project)
 
+  const currentLabel = gettext('Current data')
+  const currentSnapshot = snapshots.find(snapshot => snapshot.id == snapshotId)
+
   const handleClick = (event, snapshot) => {
     event.stopPropagation()
 
@@ -31,13 +34,14 @@ const SnapshotsDropdown = ({ onChange }) => {
         onClick={(event) => event.stopPropagation()}
         title={gettext('Snapshots')}
       >
-        {gettext('Snapshot')} <i className="bi bi-caret-down-fill ms-1" />
+        <span>{currentSnapshot ? currentSnapshot?.title : currentLabel}</span>
+        <i className="bi bi-caret-down-fill ms-1" />
       </button>
 
       <ul className="dropdown-menu">
         <button className={classNames('dropdown-item', { active: isNil(snapshotId) })}
                 onClick={(event) => handleClick(event, null)}>
-          {gettext('Current')}
+          {currentLabel}
         </button>
         {
           snapshots.map((snapshot) => (

rdmo/projects/assets/js/project/components/helper/View.js

@@ -35,7 +35,7 @@ const View = () => {
     if (isNil(snapshotId)) {
       dispatch(navigateDashboard({ area: 'documents' }))
     } else {
-      dispatch(navigateDashboard({ area: 'snapshots' }))
+      dispatch(navigateDashboard({ area: 'snapshots', snapshotId }))
     }
   }
 

rdmo/projects/assets/js/project/utils/location.js

@@ -2,6 +2,8 @@ import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 import { projectId } from '../utils/meta'
 import { isNil } from 'lodash'
 
+export const locationKeys = ['area', 'snapshotId', 'viewId', 'detail']
+
 export const parseLocation = () => {
   let pathname = window.location.pathname
   let location = {
@@ -15,6 +17,7 @@ export const parseLocation = () => {
   const patterns = [
     /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)\/views\/(?<viewId>\d+)[/]*$/,
     /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)\/(?<detail>[a-z-]+)[/]*$/,
+    /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)[/]*$/,
     /\/projects\/\d+\/(?<area>[a-z-]+)\/views\/(?<viewId>\d+)[/]*$/,
     /\/projects\/\d+\/(?<area>[a-z-]+)\/(?<detail>[a-z-]+)[/]*$/,
     /\/projects\/\d+\/(?<area>[a-z-]+)[/]*$/