Added ParcelCondensedView for tables of small width

src/components/Investigation/InvestigationTable.js

@@ -43,7 +43,9 @@ class InvestigationTable extends React.Component {
         </Row>
         <Row className="show-grid">
           <Col xs={12} md={12}>
-            {beamlineFormatter(investigation, investigation.visitId)}
+            <span style={{ fontWeight: 'bold' }}>
+              {beamlineFormatter(investigation, investigation.visitId)}
+            </span>
           </Col>
         </Row>
         <Row className="show-grid">
@@ -183,8 +185,11 @@ class InvestigationTable extends React.Component {
       {
         text: 'Beamline',
         dataField: 'visitId',
-        formatter: (visitId, investigation) =>
-          beamlineFormatter(investigation, visitId),
+        formatter: (visitId, investigation) => (
+          <span style={{ fontWeight: 'bold' }}>
+            {beamlineFormatter(investigation, visitId)}
+          </span>
+        ),
         sort: true,
         responsiveHeaderStyle: {
           xs: { hidden: true },

src/components/Investigation/utils.js

@@ -22,11 +22,7 @@ export function dateFormatter(date) {
 export function beamlineFormatter(investigation, placeHolder = '') {
   const instrumentName = getInstrumentName(investigation);
 
-  return (
-    <span style={{ fontWeight: 'bold' }}>
-      {instrumentName ? instrumentName.toUpperCase() : placeHolder}
-    </span>
-  );
+  return instrumentName ? instrumentName.toUpperCase() : placeHolder;
 }
 
 export function nameFormatter(

src/components/Parcels/MyParcelsSummary.js

@@ -11,14 +11,39 @@ import ParcelTable from './ParcelTable';
 import styles from './MyParcelsSummary.module.css';
 import { itemsFormatter } from '../../helpers';
 import { useAllInvestigations } from '../../helpers/hooks';
+import ParcelCondensedView from './ParcelCondensedView';
 
 function getColumns(investigations) {
   return [
     { text: '', dataField: '_id', hidden: true, searchable: false },
+    {
+      dataField: 'condensedView',
+      text: 'Parcel',
+      isDummyField: true,
+      formatter: (_, parcel, __, investigations) => {
+        const investigation =
+          investigations &&
+          investigations.find((inv) => inv.id === parcel.investigationId);
+        return (
+          <ParcelCondensedView parcel={parcel} investigation={investigation} />
+        );
+      },
+      formatExtraData: investigations,
+      responsiveHeaderStyle: {
+        xs: { width: '100%' },
+        sm: { width: '100%' },
+        md: { hidden: true },
+        lg: { hidden: true },
+      },
+    },
     {
       text: 'Name',
       dataField: 'name',
       sort: true,
+      responsiveHeaderStyle: {
+        xs: { hidden: true },
+        sm: { hidden: true },
+      },
     },
     {
       text: 'Proposal',
@@ -38,7 +63,11 @@ function getColumns(investigations) {
         const investigation =
           investigations &&
           investigations.find((inv) => inv.id === parcel.investigationId);
-        return beamlineFormatter(investigation);
+        return (
+          <span style={{ fontWeight: 'bold' }}>
+            {beamlineFormatter(investigation)}
+          </span>
+        );
       },
       onMatch: (searchText, _, parcel, investigations) => {
         const investigation =

src/components/Parcels/ParcelCondensedView.js

+import React from 'react';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { STATUS_DEFS } from '../../constants/parcelStatuses';
+import { beamlineFormatter } from '../Investigation/utils';
+import { itemsFormatter } from '../../helpers';
+
+function ParcelCondensedView(props) {
+  const { parcel, investigation } = props;
+  const { name, status, items, investigationName } = parcel;
+
+  return (
+    <ListGroup className="condensed-list-group">
+      <ListGroupItem>
+        <span style={{ fontWeight: 'bold' }}>Name: </span>
+        {name}
+      </ListGroupItem>
+      <ListGroupItem>
+        <span style={{ fontWeight: 'bold' }}>Proposal: </span>
+        {investigationName}
+      </ListGroupItem>
+      <ListGroupItem>
+        <span style={{ fontWeight: 'bold' }}>Beamline: </span>
+        {beamlineFormatter(investigation)}
+      </ListGroupItem>
+      <ListGroupItem>
+        <span style={{ fontWeight: 'bold' }}>Status: </span>
+        {STATUS_DEFS[status].label}
+      </ListGroupItem>
+      <ListGroupItem>
+        <span style={{ fontWeight: 'bold' }}>Items: </span>
+        {itemsFormatter(items)}
+      </ListGroupItem>
+    </ListGroup>
+  );
+}
+
+export default ParcelCondensedView;

src/components/Parcels/ParcelHeader.js

@@ -6,6 +6,7 @@ import { isEditable } from '../../helpers/statusUtils';
 import ParcelResource from '../../resources/parcel';
 import DownloadLabelButton from './DownloadLabelButton';
 import styles from './ParcelHeader.module.css';
+import { Link } from 'react-router-dom';
 
 function ParcelHeader(props) {
   const { parcel, setAlert } = props;
@@ -21,7 +22,10 @@ function ParcelHeader(props) {
           Parcel <b>{parcel.name}</b>
         </h2>
         <h4 className={styles.investigation}>
-          Investigation <b>{parcel.investigationName}</b>
+          Investigation{' '}
+          <Link to={`/investigation/${investigationId}/shipping`}>
+            {parcel.investigationName}
+          </Link>
         </h4>
       </div>
       <div>

src/components/Parcels/ParcelTable.js

@@ -25,12 +25,12 @@ function getActionColumn(handleView) {
         }}
       >
         <Glyphicon glyph="eye-open" style={{ marginRight: 5 }} />
-        View
+        <span className={styles.actionLabel}>View</span>
       </Link>
     ),
     responsiveHeaderStyle: {
-      xs: { width: 70 },
-      sm: { width: 70 },
+      xs: { width: 40 },
+      sm: { width: 40 },
       md: { width: 70 },
       lg: { width: 70 },
     },

src/components/Parcels/ParcelTable.module.css

@@ -12,6 +12,12 @@
   }
 }
 
+@media (max-width: 50em) {
+  .actionLabel {
+    display: none;
+  }
+}
+
 .filter {
   display: flex;
 }

src/components/Shipping/ParcelsSection.js

@@ -11,14 +11,34 @@ import ParcelFormModal from '../Parcels/ParcelFormModal';
 import ParcelTable from '../Parcels/ParcelTable';
 import styles from './ParcelSection.module.css';
 import { itemsFormatter } from '../../helpers';
+import ParcelCondensedView from '../Parcels/ParcelCondensedView';
 
 function getColumns(investigation) {
   return [
     { text: '', dataField: '_id', hidden: true, searchable: false },
+    {
+      dataField: 'condensedView',
+      text: 'Parcel',
+      isDummyField: true,
+      formatter: (_, parcel, __, investigation) => (
+        <ParcelCondensedView parcel={parcel} investigation={investigation} />
+      ),
+      formatExtraData: investigation,
+      responsiveHeaderStyle: {
+        xs: { width: '100%' },
+        sm: { width: '100%' },
+        md: { hidden: true },
+        lg: { hidden: true },
+      },
+    },
     {
       text: 'Name',
       dataField: 'name',
       sort: true,
+      responsiveHeaderStyle: {
+        xs: { hidden: true },
+        sm: { hidden: true },
+      },
     },
     {
       text: 'Proposal',
@@ -32,9 +52,11 @@ function getColumns(investigation) {
     {
       text: 'Beamline',
       dataField: 'beamline',
-      formatter: (_, __, ___, investigation) => {
-        return beamlineFormatter(investigation);
-      },
+      formatter: (_, __, ___, investigation) => (
+        <span style={{ fontWeight: 'bold' }}>
+          {beamlineFormatter(investigation)}
+        </span>
+      ),
       formatExtraData: investigation,
       sort: true,
       responsiveHeaderStyle: {