Changed labels of StatusButton to actions

src/components/Parcels/ParcelStatusButtons.js

@@ -72,7 +72,7 @@ function ParcelStatusButtons(props) {
       )}
       {allowedActions.length > 0 && (
         <div className={styles.buttonGroup}>
-          <div className={styles.label}>Change to:</div>
+          <div className={styles.label}>Actions:</div>
           {allowedActions.map((status) => (
             <div className={styles.button} key={status}>
               <StatusButton

src/components/Parcels/StatusButton.js

@@ -23,14 +23,14 @@ function StatusButton(props) {
   }
 
   return (
-    <StatusTooltipOverlay status={status} placement="right" actionTooltip>
+    <StatusTooltipOverlay status={status} placement="right">
       {/* <span> is needed to receive the ref and trigger of StatusTooltipOverlay */}
       <span>
         <Button bsStyle={bsStyle} onClick={onClick} disabled={isProcessing}>
           {isProcessing ? (
             <Spinner className={styles.spinner} />
           ) : (
-            <StatusDisplay status={status} />
+            <StatusDisplay status={status} action />
           )}
         </Button>
       </span>

src/components/Parcels/StatusDisplay.js

@@ -3,11 +3,11 @@ import { Glyphicon } from 'react-bootstrap';
 import { STATUS_DEFS } from '../../constants/parcelStatuses';
 
 function StatusDisplay(props) {
-  const { status, ref, ...triggerHandler } = props;
+  const { status, ref, action, ...triggerHandler } = props;
   return (
     <span ref={ref} {...triggerHandler}>
       <Glyphicon glyph={STATUS_DEFS[status].icon} style={{ marginRight: 10 }} />{' '}
-      {STATUS_DEFS[status].label}
+      {action ? STATUS_DEFS[status].action.label : STATUS_DEFS[status].label}
     </span>
   );
 }

src/components/Parcels/StatusTooltipOverlay.js

@@ -3,7 +3,7 @@ import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { STATUS_DEFS } from '../../constants/parcelStatuses';
 
 function StatusTooltipOverlay(props) {
-  const { status, placement = 'top', actionTooltip = false, children } = props;
+  const { status, placement = 'top', children } = props;
 
   return (
     <OverlayTrigger
@@ -12,11 +12,9 @@ function StatusTooltipOverlay(props) {
       overlay={
         <Popover
           id="popover-trigger-hover-focus"
-          title={STATUS_DEFS[status].label}
+          title={STATUS_DEFS[status].action.label}
         >
-          {actionTooltip
-            ? STATUS_DEFS[status].action.desc
-            : STATUS_DEFS[status].desc}
+          {STATUS_DEFS[status].action.desc}
         </Popover>
       }
     >

src/constants/parcelStatuses.js

@@ -22,7 +22,6 @@ export const STATUS_DEFS = {
     editable: true,
     inactiveParcel: false,
     sendable: false,
-    action: { desc: 'Create parcel' },
     allowedActions: () => [STATUS.SCHEDULED],
   },
   [STATUS.SCHEDULED]: {
@@ -32,7 +31,10 @@ export const STATUS_DEFS = {
     editable: true,
     inactiveParcel: false,
     sendable: false,
-    action: { desc: 'Associate the parcel with an experimental session' },
+    action: {
+      label: 'SCHEDULED',
+      desc: 'Associate the parcel with an experimental session',
+    },
     allowedActions: (parcel) => (parcel.items.length > 0 ? [STATUS.READY] : []),
   },
   [STATUS.READY]: {
@@ -43,7 +45,8 @@ export const STATUS_DEFS = {
     inactiveParcel: false,
     sendable: false,
     action: {
-      desc: 'Request safety approval for this parcel',
+      label: 'REQUEST SAFETY CHECK',
+      desc: 'Safety approval must be requested for the parcel to be sent.',
       requiresInput: true,
     },
     allowedActions: () => [STATUS.APPROVED, STATUS.REFUSED, STATUS.INPUT],
@@ -55,7 +58,12 @@ export const STATUS_DEFS = {
     editable: false,
     inactiveParcel: false,
     sendable: true,
-    action: { desc: 'Approve the parcel', safety: true, requiresInput: true },
+    action: {
+      label: 'APPROVE',
+      desc: 'Approve the parcel',
+      safety: true,
+      requiresInput: true,
+    },
     allowedActions: () => [STATUS.SENT],
   },
   [STATUS.REFUSED]: {
@@ -65,7 +73,12 @@ export const STATUS_DEFS = {
     editable: true,
     inactiveParcel: false,
     sendable: false,
-    action: { desc: 'Refuse the parcel', safety: true, requiresInput: true },
+    action: {
+      label: 'REFUSE',
+      desc: 'Refuse the parcel',
+      safety: true,
+      requiresInput: true,
+    },
     allowedActions: (parcel) => (parcel.items.length > 0 ? [STATUS.READY] : []),
   },
   [STATUS.INPUT]: {
@@ -76,6 +89,7 @@ export const STATUS_DEFS = {
     inactiveParcel: false,
     sendable: false,
     action: {
+      label: 'ASK FOR INFORMATION',
       desc: 'Ask user for more information',
       safety: true,
       requiresInput: true,
@@ -89,7 +103,10 @@ export const STATUS_DEFS = {
     editable: false,
     inactiveParcel: false,
     sendable: true,
-    action: { desc: 'Notify that the parcel has been shipped to the facility' },
+    action: {
+      label: 'Mark as SENT',
+      desc: 'Notify that the parcel has been shipped to the facility',
+    },
     allowedActions: () => [STATUS.STORES],
   },
   [STATUS.STORES]: {
@@ -100,19 +117,23 @@ export const STATUS_DEFS = {
     inactiveParcel: false,
     sendable: true,
     action: {
+      label: 'Mark as RECEIVED IN STORES',
       desc: 'Notify that the parcel has arrived at the stores',
       safety: true,
     },
     allowedActions: () => [STATUS.BEAMLINE],
   },
   [STATUS.BEAMLINE]: {
-    desc: 'Parcel has arrived to the beamline',
+    desc: 'Arrived at the beamline',
     label: 'BEAMLINE',
     icon: 'thumbs-up',
     editable: false,
     inactiveParcel: false,
     sendable: true,
-    action: { desc: 'Notify that the parcel has arrived at the beamline' },
+    action: {
+      label: 'Mark as RECEIVED AT BEAMLINE',
+      desc: 'Notify that the parcel has arrived at the beamline',
+    },
     allowedActions: () => [STATUS.BACK_STORES],
   },
   [STATUS.BACK_STORES]: {
@@ -123,6 +144,7 @@ export const STATUS_DEFS = {
     inactiveParcel: true,
     sendable: true,
     action: {
+      label: 'Mark as RETURNED TO STORES',
       desc: 'Notify that the parcel has been returned to the stores',
       safety: true,
     },
@@ -138,6 +160,7 @@ export const STATUS_DEFS = {
     inactiveParcel: true,
     sendable: true,
     action: {
+      label: 'Mark as SENT BACK TO THE USER',
       desc: 'Notify that the parcel has been shipped back to the user',
     },
     allowedActions: () => [],
@@ -149,7 +172,11 @@ export const STATUS_DEFS = {
     editable: false,
     inactiveParcel: true,
     sendable: true,
-    action: { desc: 'Notify that the parcel has been destroyed', safety: true },
+    action: {
+      label: 'Mark as DESTROYED',
+      desc: 'Notify that the parcel has been destroyed',
+      safety: true,
+    },
     allowedActions: () => [],
   },
 };