merg

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

 import React from 'react'
+import { get } from 'lodash'
 import {
   Row,
   Item,
@@ -6,24 +7,34 @@ import {
   ActionLink,
   IconButton,
   DownloadZipFiles,
+  PreviewFile,
   ManuscriptVersion,
 } from 'pubsweet-component-faraday-ui'
 import { DateParser } from '@pubsweet/ui'
 
-const ManuscriptDetailsTop = ({ history, collection = {}, fragment = {} }) => (
+const ManuscriptDetailsTop = ({
+  history,
+  getSignedUrl,
+  collection = {},
+  fragment = {},
+}) => (
   <Row alignItems="center" mb={1}>
-    <Item alignItems="center" justify="flex-start">
+    <Item justify="flex-start">
       <ActionLink icon="arrow-left" onClick={() => history.push('/')}>
         Dashboard
       </ActionLink>
     </Item>
-    <Item alignItems="center" justify="flex-end">
+    <Item justify="flex-end">
+      <PreviewFile
+        file={get(fragment, 'files.manuscripts[0]', {})}
+        getSignedUrl={getSignedUrl}
+      />
       <DownloadZipFiles
         archiveName={`ID-${collection.customId}`}
         collectionId={collection.id}
         fragmentId={fragment.id}
       >
-        <IconButton icon="download" />
+        <IconButton icon="download" iconSize={2} mr={3} secondary />
       </DownloadZipFiles>
       <DateParser durationThreshold={0} timestamp={fragment.submitted || ''}>
         {timestamp => <Text mr={1}>Updated on {timestamp}</Text>}

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

+import React, { Fragment } from 'react'
+import { last } from 'lodash'
+import { withProps, withHandlers, compose } from 'recompose'
+
+import { IconButton } from './'
+import { withFilePreview } from './helpers'
+
+const hasPreview = (name = '') => {
+  const extension = last(name.split('.')).toLocaleLowerCase()
+  return ['pdf', 'png', 'jpg'].includes(extension)
+}
+
+const PreviewFile = ({ onPreview, hasPreview }) => (
+  <Fragment>
+    {hasPreview && (
+      <IconButton
+        icon="eye"
+        iconSize={2}
+        ml={1}
+        mr={1}
+        onClick={onPreview}
+        secondary
+      />
+    )}
+  </Fragment>
+)
+
+export default compose(
+  withFilePreview,
+  withProps(({ file: { name } }) => ({
+    hasPreview: hasPreview(name),
+  })),
+  withHandlers({
+    onPreview: ({ previewFile, file }) => () => {
+      typeof previewFile === 'function' && previewFile(file)
+    },
+  }),
+)(PreviewFile)

packages/component-faraday-ui/src/PreviewFile.md

+Preview file in browser if possible
+
+```js
+const file = {};
+
+<PreviewFile file={file} />
+```

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

@@ -11,6 +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 || 'flex-start'};
+  align-items: ${({ alignItems }) => alignItems || 'center'};
+
   ${marginHelper};
 `

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

@@ -21,6 +21,7 @@ export { default as Tag } from './Tag'
 export { default as Text } from './Text'
 export { default as WizardAuthors } from './WizardAuthors'
 export { default as WizardFiles } from './WizardFiles'
+export { default as PreviewFile } from './PreviewFile'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
 
 // Manuscript Details

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

@@ -6,6 +6,7 @@ import { Text, ManuscriptDetailsTop, Row } from 'pubsweet-component-faraday-ui'
 const ManuscriptLayout = ({
   journal,
   history,
+  getSignedUrl,
   currentUser,
   editorInChief,
   canMakeRevision,
@@ -20,6 +21,7 @@ const ManuscriptLayout = ({
         <ManuscriptDetailsTop
           collection={project}
           fragment={version}
+          getSignedUrl={getSignedUrl}
           history={history}
         />
         <Row justify="flex-start">Aici header</Row>

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

 import React, { Fragment } from 'react'
-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
 import { withProps } from 'recompose'
 import { th } from '@pubsweet/ui-toolkit'
 import styled, { css } from 'styled-components'
@@ -17,6 +17,11 @@ const ResponseToReviewers = ({
           <Text>{comments}</Text>
         </Fragment>
       )}
+      {!isEmpty(files) && (
+        <Fragment>
+          <Label>Files</Label>
+        </Fragment>
+      )}
     </Expandable>
   </Root>
 )

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

-import React from 'react'
-import { compose, withHandlers } from 'recompose'
-import { Icon } from '@pubsweet/ui'
-import { connect } from 'react-redux'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { withRouter } from 'react-router-dom'
-import ZipFiles from 'pubsweet-components-faraday/src/components/Files/ZipFiles'
-import {
-  Decision,
-  Recommendation,
-} from 'pubsweet-components-faraday/src/components'
-
-import {
-  canMakeDecision,
-  canMakeRecommendation,
-  canEditManuscript,
-  canOverrideTechnicalChecks,
-} from 'pubsweet-component-faraday-selectors/src'
-
-const SideBarActions = ({
-  project,
-  version,
-  goToEdit,
-  canMakeDecision,
-  canEditManuscript,
-  goToTechnicalCheck,
-  canOverrideTechChecks,
-  canMakeRecommendation,
-}) => (
-  <Root>
-    {canMakeDecision && (
-      <Decision
-        collectionId={project.id}
-        fragmentId={version.id}
-        modalKey={`decide-${version.id}`}
-        status={project.status}
-      />
-    )}
-    {canMakeRecommendation && (
-      <Recommendation
-        collectionId={project.id}
-        fragmentId={version.id}
-        modalKey={`recommend-${version.id}`}
-      />
-    )}
-    {canOverrideTechChecks && (
-      <ClickableIcon
-        data-test="button-technical-checks"
-        onClick={goToTechnicalCheck(project)}
-        title="Technical Checks"
-      >
-        <Icon>check-square</Icon>
-      </ClickableIcon>
-    )}
-    {canEditManuscript && (
-      <ClickableIcon
-        data-test="button-edit-manuscript"
-        onClick={goToEdit(project, version)}
-        title="Edit Manuscript"
-      >
-        <Icon>edit</Icon>
-      </ClickableIcon>
-    )}
-    <ZipFiles
-      archiveName={`ID-${project.customId}`}
-      collectionId={project.id}
-      fragmentId={version.id}
-    >
-      <ClickableIcon>
-        <Icon>download</Icon>
-      </ClickableIcon>
-    </ZipFiles>
-  </Root>
-)
-
-export default compose(
-  withRouter,
-  connect((state, { project, version }) => ({
-    canMakeDecision: canMakeDecision(state, project, version),
-    canMakeRecommendation: canMakeRecommendation(state, project, version),
-    canEditManuscript: canEditManuscript(state, project, version),
-    canOverrideTechChecks: canOverrideTechnicalChecks(state, project),
-  })),
-  withHandlers({
-    goToEdit: ({ history }) => (project, version) => () => {
-      history.push(`/projects/${project.id}/versions/${version.id}/submit`, {
-        editMode: true,
-      })
-    },
-    goToTechnicalCheck: ({ history }) => project => () => {
-      const { status, id, customId, technicalChecks: { token = '' } } = project
-      const stage = status === 'technicalChecks' ? 'eqs' : 'eqa'
-      history.push({
-        pathname: `/${stage}-decision`,
-        search: `?collectionId=${id}&customId=${customId}&token=${token}`,
-      })
-    },
-  }),
-)(SideBarActions)
-
-// #region styled-components
-const Root = styled.div`
-  border-bottom: ${th('borderDefault')};
-  display: flex;
-  justify-content: flex-end;
-  padding: ${th('subGridUnit')};
-`
-
-const ClickableIcon = styled.div`
-  margin: 0 ${th('subGridUnit')};
-  &:hover {
-    opacity: 0.7;
-  }
-`
-// #endregion

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

-export { default as Files } from './Files'
 export { default as Authors } from './Authors'
 export { default as ShowMore } from './ShowMore'
 export { default as SideBarRoles } from './SideBarRoles'
 export { default as ManuscriptPage } from './ManuscriptPage'
-export { default as SideBarActions } from './SideBarActions'
 export { default as SubmitRevision } from './SubmitRevision'
 export { default as EditorialComment } from './EditorialComment'
 export { default as ReviewReportCard } from './ReviewReportCard'

packages/components-faraday/src/components/Dashboard/DashboardFilters.js

@@ -12,7 +12,7 @@ const DashboardFilters = ({
     <Text mr={1} pb={1} secondary>
       Filters
     </Text>
-    <Item flex={0} mr={1} vertical>
+    <Item alignItems="flex-start" flex={0} mr={1} vertical>
       <Label>Priority</Label>
       <Menu
         inline
@@ -21,7 +21,7 @@ const DashboardFilters = ({
         value={getDefaultFilterValue('priority')}
       />
     </Item>
-    <Item flex={0} vertical>
+    <Item alignItems="flex-start" flex={0} vertical>
       <Label>Order</Label>
       <Menu
         inline

packages/components-faraday/src/components/Reviewers/ReviewerForm.js

@@ -23,6 +23,7 @@ const ReviewerForm = ({
     <Row>
       <ReviewersSelect onSelect={selectReviewer} values={filteredUsers()} />
     </Row>
+
     {reviewerError && (
       <CenterRow>
         <Err>{reviewerError}</Err>