CEC-2601 (#204)

src/components/Manifest/Status/index.jsx

@@ -10,7 +10,9 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
+import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 
 import {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
-const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -38,6 +40,7 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {
+    cancelUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const sendCancel = async ({ id, vin }) => {
+    try {
+      await cancelUpdate(id, token);
+      setMessage(`Sent cancel for ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
             <TableCell align="center">Status</TableCell>
             <TableCell align="center">Created</TableCell>
             <TableCell align="center">Updated</TableCell>
+            <TableCell align="center"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
               <TableCell align="center">
                 {LocalDateTimeString(row.updated)}
               </TableCell>
+              <TableCell>
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
+              colSpan={6}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}