Shared data model

deploy to staging

app/components/activity/helper/events.jsx

 import React from 'react'
 import styled from 'styled-components'
+import { Icon } from '@pubsweet/ui'
+import { th } from '@pubsweet/ui-toolkit'
 
-const EmailMeta = styled.span`
+const NoteEvent = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`
+
+const NoteTo = styled.div`
+  font-weight: bold;
+  width: 100%;
+`
+
+const NoteSubject = styled.div`
   font-weight: bold;
-  display: block;
+  width: 90%;
+`
+
+const NoteBodyControl = styled.div`
+  width: 10%;
+  text-align: right;
+  align-self: flex-end;
 `
 
 const MetaContent = styled.span`
   font-weight: normal;
 `
 
-const EmailBody = styled.p`
+const EmailBody = styled.div`
   white-space: pre-wrap;
   font-style: italic;
+  width: 100%;
+  padding-top: calc(${th('gridUnit')} * 2);
 `
 
 const capitalizeFirstLetter = string =>
@@ -29,7 +50,7 @@ const toWho = (manuscript, userId) => {
       team.teamMembers[0].alias.name
     ) {
       const { name } = team.teamMembers[0].alias
-      who = `${who && ', '} ${capitalizeFirstLetter(team.role)} ${
+      who = `${who && `${who}, `} ${capitalizeFirstLetter(team.role)} ${
         name.givenNames
       } ${name.surname}`
     }
@@ -38,10 +59,14 @@ const toWho = (manuscript, userId) => {
   return who
 }
 
-export const obtainEventDescription = (
-  { objectType, changes, user },
-  manuscript,
-) => {
+const toggleHidden = elements => {
+  elements.forEach(element => {
+    element.classList.toggle('hidden')
+  })
+}
+
+export const obtainEventDescription = (audit, manuscript) => {
+  const { originalData, objectType, changes, user } = audit
   if (objectType === 'manuscript') {
     if (changes.status) {
       return `Manuscript ${changes.status}`
@@ -77,15 +102,47 @@ export const obtainEventDescription = (
     const content = JSON.parse(changes.content)
     if (content && content.to) {
       return (
-        <div>
-          <EmailMeta>
+        <NoteEvent>
+          <NoteTo>
             To: <MetaContent>{toWho(manuscript, content.to)}</MetaContent>
-          </EmailMeta>
-          <EmailMeta>
+          </NoteTo>
+          <NoteSubject>
             Subject: <MetaContent>{content.subject}</MetaContent>
-          </EmailMeta>
-          <EmailBody>{content.message}</EmailBody>
-        </div>
+          </NoteSubject>
+          <NoteBodyControl
+            onClick={e => toggleHidden([e.currentTarget.nextElementSibling])}
+          >
+            <Icon
+              color="currentColor"
+              onClick={e =>
+                toggleHidden([
+                  e.currentTarget,
+                  e.currentTarget.nextElementSibling,
+                ])
+              }
+              size={3}
+            >
+              chevron-right
+            </Icon>
+            <Icon
+              className="hidden"
+              color="currentColor"
+              onClick={e =>
+                toggleHidden([
+                  e.currentTarget,
+                  e.currentTarget.previousElementSibling,
+                ])
+              }
+              size={3}
+            >
+              chevron-down
+            </Icon>
+          </NoteBodyControl>
+          <EmailBody className="hidden">
+            <hr />
+            {content.message}
+          </EmailBody>
+        </NoteEvent>
       )
     }
 
@@ -105,6 +162,17 @@ export const obtainEventDescription = (
     if (changes.type === 'manuscript') {
       return `Manuscript file uploaded: ${changes.filename}`
     }
+    if (changes.filename) {
+      return `File ${changes.filename} of mime type ${
+        changes.mime_type
+      } uploaded`
+    }
+    if (changes.type) {
+      return `File ${originalData.filename}'s type set to ${changes.type}`
+    }
+    if (changes.label) {
+      return `File ${originalData.filename}'s label set to ${changes.label}`
+    }
   }
 
   return ''