feat(details): add version dropdown

packages/component-manuscript/src/components/ManuscriptLayout.js

 import React from 'react'
 
 import ManuscriptHeader from './ManuscriptHeader'
+import ManuscriptVersion from './ManuscriptVersion'
 import {
   Root,
   BreadCrumbs,
@@ -8,6 +9,8 @@ import {
   ManuscriptId,
   Container,
   SideBar,
+  LeftDetails,
+  RightDetails,
 } from '../atoms'
 
 const ManuscriptLayout = ({
@@ -20,11 +23,16 @@ const ManuscriptLayout = ({
   <Root>
     <Container flex={3}>
       <Header>
-        <BreadCrumbs>
-          <span>Dashboard</span>
-          <span>Manuscript Details</span>
-        </BreadCrumbs>
-        <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+        <LeftDetails>
+          <BreadCrumbs>
+            <span>Dashboard</span>
+            <span>Manuscript Details</span>
+          </BreadCrumbs>
+          <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+        </LeftDetails>
+        <RightDetails>
+          <ManuscriptVersion project={project} />
+        </RightDetails>
       </Header>
       <ManuscriptHeader journal={journal} project={project} version={version} />
     </Container>

packages/component-manuscript/src/components/ManuscriptVersion.js

+import React from 'react'
+import { get } from 'lodash'
+import { Menu } from '@pubsweet/ui'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { selectFragments } from 'xpub-selectors'
+import { withRouter } from 'react-router-dom'
+
+import { parseVersionOptions } from './utils'
+
+const ManuscriptVersion = ({ project, fragments, history, match }) => (
+  <Menu
+    inline
+    onChange={v =>
+      history.push(`/projects/${project.id}/versions/${v}/details`)
+    }
+    options={parseVersionOptions(fragments)}
+    value={get(match, 'params.version')}
+  />
+)
+
+export default compose(
+  withRouter,
+  connect((state, { project }) => ({
+    fragments: selectFragments(state, project.fragments),
+  })),
+)(ManuscriptVersion)

packages/component-manuscript/src/components/utils.js

@@ -63,6 +63,14 @@ export const parseSearchParams = url => {
   return parsedObject
 }
 
+export const parseVersionOptions = fragments =>
+  fragments.map(f => ({
+    value: f.id,
+    label: `Version ${f.version} - updated on ${moment(f.submitted).format(
+      'DD.MM.YYYY',
+    )}`,
+  }))
+
 const alreadyAnswered = `You have already answered this invitation.`
 export const redirectToError = redirectFn => err => {
   const errorText = get(JSON.parse(err.response), 'error')