CEC-2601 (#204)

src/components/Controls/CarUpdatesTable/index.jsx

@@ -6,8 +6,10 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import CancelIcon from "@material-ui/icons/Cancel";
 
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -18,7 +20,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -41,6 +43,10 @@ const tableColumns = [
     id: "updated_at",
     label: "Updated",
   },
+  {
+    id: "",
+    label: "",
+  },
 ];
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
+  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
+    useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
     return "None";
   };
 
+  const sendCancel = async (row) => {
+    try {
+      await cancelUpdate(row.id, token);
+      setMessage(`Sent cancel for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <Table>
       <TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
             <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>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
         <TableRow>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 100]}
-            colSpan={5}
+            colSpan={6}
             count={totalCarUpdates}
             rowsPerPage={pageSize}
             page={pageIndex}