feat(ManuscriptHeader): As user, I want to see the label "You're viewing a...

feat(ManuscriptHeader): As user, I want to see the label "You're viewing a previous version of the m

packages/component-faraday-ui/src/Tag.js

-import styled, { css } from 'styled-components'
+import { has } from 'lodash'
 import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
 
 import { marginHelper } from './styledHelpers'
 
-export const tagCSS = ({ status }) =>
-  status
-    ? css`
-        padding: calc(${th('gridUnit')} / 4) ${th('gridUnit')};
-        height: 24px;
-        font-family: ${th('fontHeading')};
-      `
-    : css`
-        height: 14px;
-        font-size: 85%;
-        padding: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 4) 0px;
-        margin-right: 1px;
-        font-family: ${th('fontInterface')};
-      `
+const tagCSS = props => {
+  if (has(props, 'oldStatus')) {
+    return css`
+      background-color: ${th('tag.statusBackgroundColor')};
+      font-size: 85%;
+      height: 24px;
+      padding: calc(${th('gridUnit')} / 4) ${th('gridUnit')};
+    `
+  }
+
+  if (has(props, `status`)) {
+    return css`
+      background-color: ${th('tag.statusBackgroundColor')};
+      padding: calc(${th('gridUnit')} / 4) ${th('gridUnit')};
+      height: 24px;
+      font-family: ${th('fontHeading')};
+    `
+  }
+
+  return css`
+    background-color: ${th('tag.backgroundColor')};
+    height: 14px;
+    font-size: 85%;
+    padding: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 4) 0px;
+    margin-right: 1px;
+    font-family: ${th('fontInterface')};
+  `
+}
 
 /** @component */
 export default styled.div`
-  background-color: ${({ status }) =>
-    status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
   border-radius: ${th('tag.borderRadius')
     ? th('tag.borderRadius')
     : th('borderRadius')};

packages/component-faraday-ui/src/manuscriptDetails/ManuscriptHeader.js

@@ -23,6 +23,7 @@ const ManuscriptHeader = ({
   manuscriptType = {},
   editorInChief = 'Unassigned',
   collection: { visibleStatus = 'Draft', customId, handlingEditor },
+  latestVersion,
 }) => {
   const { authors = [], metadata = {}, submitted = null } = fragment
   const { title = 'No title', journal = '', type = '' } = metadata
@@ -34,9 +35,13 @@ const ManuscriptHeader = ({
         justify="space-between"
       >
         <H2 mb={1}>{title}</H2>
-        <Tag data-test-id="fragment-status" status>
-          {visibleStatus}
-        </Tag>
+        {latestVersion ? (
+          <Tag data-test-id="fragment-status" status>
+            {visibleStatus}
+          </Tag>
+        ) : (
+          <Tag oldStatus>Viewing an Older Version</Tag>
+        )}
       </Row>
       {authors.length > 0 && (
         <Row

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

@@ -67,6 +67,7 @@ const ManuscriptLayout = ({
   recommendationHandler,
   inviteHandlingEditor,
   versions,
+  latestVersion,
 }) => (
   <Root pb={30}>
     {!isEmpty(collection) && !isEmpty(fragment) ? (
@@ -88,6 +89,7 @@ const ManuscriptLayout = ({
           inviteHE={toggleAssignHE}
           isFetching={isFetchingData.editorsFetching}
           journal={journal}
+          latestVersion={latestVersion}
           resendInvitation={inviteHandlingEditor.assignHE}
           revokeInvitation={inviteHandlingEditor.revokeHE}
           versions={versions}

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

@@ -72,6 +72,7 @@ import {
   redirectToError,
   parseSearchParams,
   getPublonsReviewers,
+  isLatestVersion,
 } from './utils'
 
 import {
@@ -281,12 +282,15 @@ export default compose(
     toggleEditorialComments: toggle,
     editorialCommentsExpanded: expanded,
   })),
-  withProps(({ currentUser, collection, submittedOwnRecommendation }) => ({
-    getSignedUrl,
-    shouldReview:
-      get(currentUser, 'isReviewer', false) &&
-      isUndefined(submittedOwnRecommendation),
-  })),
+  withProps(
+    ({ currentUser, collection, submittedOwnRecommendation, fragment }) => ({
+      getSignedUrl,
+      shouldReview:
+        get(currentUser, 'isReviewer', false) &&
+        isUndefined(submittedOwnRecommendation),
+      latestVersion: isLatestVersion(collection, fragment),
+    }),
+  ),
   withInviteHandlingEditor,
   withInviteReviewer,
   withSubmitRevision,

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

@@ -3,6 +3,7 @@ import {
   has,
   get,
   find,
+  last,
   omit,
   isEmpty,
   debounce,
@@ -74,6 +75,9 @@ export const parseVersion = version => ({
   abstract: get(version, 'metadata.abstract'),
 })
 
+export const isLatestVersion = (collection, fragment) =>
+  get(fragment, 'id') === last(collection.fragments)
+
 export const parseJournalIssue = (journal, metadata) =>
   journal.issueTypes.find(t => t.value === get(metadata, 'issue'))