Adds button to change parcel status to SCHEDULED for admins

src/components/Parcels/AdminPanel.js

+import React, { useState } from 'react';
+import { Glyphicon, Grid, Row, HelpBlock } from 'react-bootstrap';
+import BasicPanel from './BasicPanel';
+import StatusButton from './StatusButton';
+import { STATUS } from '../../constants/parcelStatuses';
+
+function AdminPanel(props) {
+  const { currentStatus, updateStatus } = props;
+  const [isProcessing, setProcessing] = useState(false);
+
+  return (
+    <BasicPanel title="Admin section" bsStyle="danger">
+      <Grid fluid>
+        <Row>
+          <b>Change the status to: </b>
+          <StatusButton
+            disabled={currentStatus === STATUS.SCHEDULED}
+            onClick={async () => {
+              setProcessing(true);
+              await updateStatus(STATUS.SCHEDULED, {
+                comments: 'Set by admin',
+              });
+              setProcessing(false);
+            }}
+            status="SCHEDULED"
+            bsStyle="danger"
+            isProcessing={isProcessing}
+          />
+        </Row>
+        <Row>
+          <HelpBlock>
+            <Glyphicon glyph="info-sign" /> This will set the parcel back in
+            editable mode but will require safety validation once again.
+          </HelpBlock>
+        </Row>
+        <Row>
+          <HelpBlock>
+            To be used when the user has made mistakes during the parcel
+            preparation and cannot correct them.
+          </HelpBlock>
+        </Row>
+      </Grid>
+    </BasicPanel>
+  );
+}
+
+export default AdminPanel;

src/components/Parcels/ParcelDetails.js

@@ -15,6 +15,7 @@ import StatusDisplay from './StatusDisplay';
 import StatusTable from './StatusTable';
 import styles from './ParcelDetails.module.css';
 import AddressPanel from '../Address/AddressPanel';
+import AdminPanel from './AdminPanel';
 
 function ParcelDetails(props) {
   const { investigationId, parcelId } = props;
@@ -51,6 +52,7 @@ function ParcelDetails(props) {
   const userInvestigations = useSelector(
     (state) => state.myInvestigations.data
   );
+  const user = useSelector((state) => state.user);
 
   const investigation = userInvestigations.find(
     (investigation) => investigation.id === Number(investigationId)
@@ -101,6 +103,17 @@ function ParcelDetails(props) {
     handleCloseModal();
   }
 
+  function updateStatus(status, body) {
+    return editParcelWithRefetch(
+      {
+        investigationId: parcel.investigationId,
+        status,
+        parcelId: parcel._id,
+      },
+      { _id: parcel._id, ...body }
+    );
+  }
+
   return (
     <div className={styles.panelWrapper}>
       {alert && <Alert bsStyle={alert.type}>{alert.message}</Alert>}
@@ -122,19 +135,7 @@ function ParcelDetails(props) {
           </div>
         </div>
         <div className={styles.statusCol}>
-          <ParcelStatusButtons
-            parcel={parcel}
-            updateStatus={(status, body) =>
-              editParcelWithRefetch(
-                {
-                  investigationId: parcel.investigationId,
-                  status,
-                  parcelId: parcel._id,
-                },
-                { _id: parcel._id, ...body }
-              )
-            }
-          />
+          <ParcelStatusButtons parcel={parcel} updateStatus={updateStatus} />
         </div>
       </div>
 
@@ -232,6 +233,10 @@ function ParcelDetails(props) {
           </Row>
         </Grid>
       </BasicPanel>
+
+      {user.isAdministrator && (
+        <AdminPanel currentStatus={parcel.status} updateStatus={updateStatus} />
+      )}
     </div>
   );
 }

src/components/Parcels/StatusButton.js

@@ -6,13 +6,27 @@ import StatusTooltipOverlay from './StatusTooltipOverlay';
 import styles from './StatusButton.module.css';
 
 function StatusButton(props) {
-  const { status, onClick, isProcessing } = props;
+  const {
+    status,
+    onClick,
+    isProcessing,
+    bsStyle = 'primary',
+    disabled = false,
+  } = props;
+
+  if (disabled) {
+    return (
+      <Button bsStyle={bsStyle} disabled={true}>
+        <StatusDisplay status={status} />
+      </Button>
+    );
+  }
 
   return (
     <StatusTooltipOverlay status={status} placement="right" actionTooltip>
       {/* <span> is needed to receive the ref and trigger of StatusTooltipOverlay */}
       <span>
-        <Button bsStyle="primary" onClick={onClick} disabled={isProcessing}>
+        <Button bsStyle={bsStyle} onClick={onClick} disabled={isProcessing}>
           {isProcessing ? (
             <Spinner className={styles.spinner} />
           ) : (