feat: add topic and label columns

app/components/component-manuscripts/src/Manuscript.js

@@ -12,6 +12,8 @@ import {
   Primary,
   Secondary,
   UserInfo,
+  StyledTopic,
+  StyledTableLabel,
   // SuccessStatus,
   // ErrorStatus,
   // NormalStatus,
@@ -20,6 +22,7 @@ import {
 } from './style'
 
 import { convertTimestampToDate } from '../../../shared/time-formatting'
+import { convertCamelCaseToText } from '../../../shared/convertCamelCaseToText'
 import { articleStatuses } from '../../../globals'
 import { publishManuscriptMutation } from '../../component-review/src/components/queries'
 
@@ -70,9 +73,25 @@ const User = ({ manuscriptId, manuscript, submitter }) => {
       )}
       <Cell>{convertTimestampToDate(manuscript.created)}</Cell>
       <Cell>{convertTimestampToDate(manuscript.updated)}</Cell>
+      {process.env.INSTANCE_NAME === 'ncrc' && 
+        <Cell>
+          {manuscript.submission.topics.map((topic, index) => {
+            return <StyledTopic key={index} title={convertCamelCaseToText(topic)}>
+                {convertCamelCaseToText(topic)}
+              </StyledTopic>
+          })}
+        </Cell>
+      }
       <Cell>
         <StatusBadge status={manuscript.status} />
       </Cell>
+      {process.env.INSTANCE_NAME === 'ncrc' && 
+      <Cell>
+        <StyledTableLabel>
+          {manuscript.submission && convertCamelCaseToText(manuscript.submission.labels)}
+        </StyledTableLabel>
+      </Cell>
+      }
       <Cell>
         {submitter && (
           <UserCombo>

app/components/component-manuscripts/src/Manuscripts.jsx

@@ -80,6 +80,13 @@ const GET_MANUSCRIPTS = gql`
 
 const Manuscripts = ({ history, ...props }) => {
   const SortHeader = ({ thisSortName, children }) => {
+    if(!thisSortName) {
+      return (
+        <th>
+          {children}
+        </th>
+      )
+    }
     const changeSort = () => {
       if (sortName !== thisSortName) {
         setSortName(thisSortName)
@@ -163,7 +170,13 @@ const Manuscripts = ({ history, ...props }) => {
               )}
               <SortHeader thisSortName="created">Created</SortHeader>
               <SortHeader thisSortName="updated">Updated</SortHeader>
+              {process.env.INSTANCE_NAME === 'ncrc' &&
+                <SortHeader>Topic</SortHeader>
+              }
               <SortHeader thisSortName="status">Status</SortHeader>
+              {process.env.INSTANCE_NAME === 'ncrc' &&
+                <SortHeader thisSortName="submission:labels">Label</SortHeader>
+              }
               <SortHeader thisSortName="submitterId">Author</SortHeader>
               <th />
             </tr>

app/components/component-manuscripts/src/style.js

@@ -31,3 +31,24 @@ export {
 export const UserAction = styled(Action)`
   font-size: inherit;
 `
+
+export const StyledTopic = styled.p`
+  background-color: red;
+  padding: 0 10px;
+  margin-bottom: 5px;
+  border-radius: 7px;
+  color: white;
+  width: fit-content;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 150px;
+`
+
+export const StyledTableLabel = styled.p`
+  background-color: #ccc;
+  padding: 0 10px;
+  text-align: center;
+  border-radius: 7px;
+  white-space: nowrap;
+`
\ No newline at end of file

app/shared/convertCamelCaseToText.js

+export function convertCamelCaseToText (text) {
+    const result = text.replace( /([A-Z])/g, " $1" )
+    const finalResult = result.charAt(0) + result.slice(1)
+    return finalResult.toLowerCase()
+  }
\ No newline at end of file

app/storage/forms-ncrc/submit.json

@@ -68,8 +68,8 @@
             "value": "randomizedControlTrial"
           },
           {
-            "label": "Non-Rnadomized Trial",
-            "value": "nonRnadomizedTrial"
+            "label": "Non-Randomized Trial",
+            "value": "nonRandomizedTrial"
           },
           {
             "label": "Modeling/Simulation",