refactor(manuscript-details): refactor components

packages/component-faraday-selectors/src/index.js

@@ -16,7 +16,7 @@ const canMakeRecommendationStatuses = [
 export const canMakeRecommendation = (state, collection, fragment = {}) => {
   if (fragment.id !== last(collection.fragments)) return false
   const isHE = isHEToManuscript(state, collection.id)
-  const status = get(collection, 'status')
+  const status = get(collection, 'status', 'draft')
   return isHE && canMakeRecommendationStatuses.includes(status)
 }
 
@@ -74,7 +74,7 @@ export const getHERecommendation = (state, collectionId, fragmentId) => {
 const canMakeDecisionStatuses = ['submitted', 'pendingApproval']
 export const canMakeDecision = (state, collection, fragment = {}) => {
   if (fragment.id !== last(collection.fragments)) return false
-  const status = get(collection, 'status')
+  const status = get(collection, 'status', 'draft')
 
   const isEIC = currentUserIs(state, 'adminEiC')
   return isEIC && canMakeDecisionStatuses.includes(status)
@@ -84,7 +84,7 @@ const canEditManuscriptStatuses = ['draft', 'technicalChecks', 'inQA']
 export const canEditManuscript = (state, collection, fragment = {}) => {
   const isAdmin = currentUserIs(state, 'isAdmin')
   if (!isAdmin || fragment.id !== last(collection.fragments)) return false
-  const status = get(collection, 'status')
+  const status = get(collection, 'status', 'draft')
 
   return canEditManuscriptStatuses.includes(status)
 }
@@ -93,7 +93,7 @@ const canOverrideTechnicalChecksStatuses = ['technicalChecks', 'inQA']
 export const canOverrideTechnicalChecks = (state, collection) => {
   const isAdmin = currentUserIs(state, 'isAdmin')
   if (!isAdmin) return false
-  const status = get(collection, 'status')
+  const status = get(collection, 'status', 'draft')
 
   return canOverrideTechnicalChecksStatuses.includes(status)
 }

packages/component-faraday-ui/src/gridItems/Item.js

@@ -11,7 +11,7 @@ export default styled.div.attrs({
   flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ justify }) => justify || 'initial'};
-  align-items: ${({ alignItems }) => alignItems || 'center'};
+  align-items: ${({ alignItems }) => alignItems || 'initial'};
 
   ${marginHelper};
 `

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

@@ -23,10 +23,10 @@ export { default as WizardAuthors } from './WizardAuthors'
 export { default as WizardFiles } from './WizardFiles'
 export { default as PreviewFile } from './PreviewFile'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
+export { default as ManuscriptVersion } from './ManuscriptVersion'
 
 // Manuscript Details
-export { default as ManuscriptVersion } from './ManuscriptVersion'
-export { default as ManuscriptDetailsTop } from './ManuscriptDetailsTop'
+export * from './manuscriptDetails'
 
 export * from './styledHelpers'
 

packages/component-faraday-ui/src/ManuscriptDetailsTop.js → packages/component-faraday-ui/src/manuscriptDetails/ManuscriptDetailsTop.js

 import React from 'react'
 import { get } from 'lodash'
+import { connect } from 'react-redux'
+import { DateParser } from '@pubsweet/ui'
+import { withRouter } from 'react-router-dom'
+import { compose, withHandlers } from 'recompose'
+import {
+  canMakeDecision,
+  canMakeRecommendation,
+  canEditManuscript,
+  canOverrideTechnicalChecks,
+} from 'pubsweet-component-faraday-selectors/src'
+
 import {
   Row,
   Item,
@@ -10,21 +21,46 @@ import {
   PreviewFile,
   ManuscriptVersion,
 } from 'pubsweet-component-faraday-ui'
-import { DateParser } from '@pubsweet/ui'
 
 const ManuscriptDetailsTop = ({
   history,
   getSignedUrl,
   collection = {},
   fragment = {},
+  goToEdit,
+  canEditManuscript,
+  goToTechnicalCheck,
+  canOverrideTechChecks,
 }) => (
   <Row alignItems="center" mb={1}>
-    <Item justify="flex-start">
+    <Item alignItems="center" justify="flex-start">
       <ActionLink icon="arrow-left" onClick={() => history.push('/')}>
         Dashboard
       </ActionLink>
     </Item>
-    <Item justify="flex-end">
+    <Item alignItems="center" justify="flex-end">
+      {canOverrideTechChecks && (
+        <IconButton
+          data-test-id={`button-qa-manuscript-${fragment.id}`}
+          icon="check-square"
+          iconSize={2}
+          mr={1}
+          onClick={goToTechnicalCheck(collection)}
+          secondary
+          title="Technical Checks"
+        />
+      )}
+      {canEditManuscript && (
+        <IconButton
+          data-test-id={`button-edit-manuscript-${fragment.id}`}
+          icon="edit"
+          iconSize={2}
+          mr={2}
+          onClick={goToEdit(collection, fragment)}
+          secondary
+          title="Edit Manuscript"
+        />
+      )}
       <PreviewFile
         file={get(fragment, 'files.manuscripts[0]', {})}
         getSignedUrl={getSignedUrl}
@@ -44,4 +80,35 @@ const ManuscriptDetailsTop = ({
   </Row>
 )
 
-export default ManuscriptDetailsTop
+export default compose(
+  withRouter,
+  connect((state, { collection, fragment }) => ({
+    canMakeDecision: canMakeDecision(state, collection, fragment),
+    canMakeRecommendation: canMakeRecommendation(state, collection, fragment),
+    canEditManuscript: canEditManuscript(state, collection, fragment),
+    canOverrideTechChecks: canOverrideTechnicalChecks(state, collection),
+  })),
+  withHandlers({
+    goToEdit: ({ history }) => (collection, fragment) => () => {
+      history.push(
+        `/projects/${collection.id}/versions/${fragment.id}/submit`,
+        {
+          editMode: true,
+        },
+      )
+    },
+    goToTechnicalCheck: ({ history }) => collection => () => {
+      const {
+        status,
+        id,
+        customId,
+        technicalChecks: { token = '' },
+      } = collection
+      const stage = status === 'technicalChecks' ? 'eqs' : 'eqa'
+      history.push({
+        pathname: `/${stage}-decision`,
+        search: `?collectionId=${id}&customId=${customId}&token=${token}`,
+      })
+    },
+  }),
+)(ManuscriptDetailsTop)

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

+export { default as ManuscriptDetailsTop } from './ManuscriptDetailsTop'

packages/components-faraday/src/components/index.js

 import { Decision } from './MakeDecision'
 import * as Components from './UIComponents'
-import { Recommendation } from './MakeRecommendation'
 
 export { FormItems } from './UIComponents'
 export { default as withVersion } from './Dashboard/withVersion.js'
@@ -9,5 +8,4 @@ export { default as ChangePasswordPage } from './UserProfile/ChangePasswordPage'
 
 export { Decision }
 export { Components }
-export { Recommendation }
 export { DateParser } from './UIComponents'

packages/styleguide/styleguide.config.js

@@ -17,6 +17,11 @@ module.exports = {
       sectionDepth: 1,
       components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
     },
+    {
+      name: 'Manuscript Details',
+      sectionDepth: 1,
+      components: ['../component-faraday-ui/src/manuscriptDetails/[A-Z]*.js'],
+    },
   ],
   skipComponentsWithoutExample: true,
   pagePerSection: true,