CEC-4729: add retry button to active car updates (#414) (#417)

* add deploy button

* disable control if inactive

* add cases

(cherry picked from commit 91b2a8c8aab546221db8da8eaed22bca78c4d91f)

Co-authored-by: Tristan Timblin <ttimblin@fiskerinc.com>

src/components/Contexts/CarUpdatesContext.jsx

@@ -55,6 +55,21 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deployUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.deployCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const deployCarUpdates = async (data, token) => {
     let result;
 
@@ -295,6 +310,7 @@ export const CarUpdatesProvider = ({ children }) => {
         totalCarUpdates,
         versions,
         cancelUpdate,
+        deployUpdate,
         deployCarUpdates,
         deployFleetUpdates,
         getCarUpdates,

src/components/Controls/CarUpdatesTable/index.jsx

@@ -1,4 +1,5 @@
 import {
+  IconButton,
   LinearProgress,
   Table,
   TableBody,
@@ -6,9 +7,9 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
-  Tooltip
 } from "@material-ui/core";
 import CancelIcon from "@material-ui/icons/Cancel";
+import ReplayIcon from "@material-ui/icons/Replay";
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -71,6 +72,7 @@ const MainForm = ({ vin, token }) => {
   const [order, setOrder] = useState("desc");
   const {
     cancelUpdate,
+    deployUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -158,6 +160,28 @@ const MainForm = ({ vin, token }) => {
     }
   };
 
+  const sendDeploy = async (row) => {
+    try {
+      await deployUpdate(row.id, token);
+      setMessage(`Sent deploy for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  const isActiveCarUpdate = (status) => {
+    switch (status) {
+      case "manifest_error":
+      case "manifest_rollback":
+      case "manifest_succeeded":
+      case "manifest_cancelled":
+      case "cleanup_succeeded":
+        return false;
+      default:
+        return true;
+    }
+  }
+
   return (
     <Table>
       <TableHeaderSortable
@@ -200,11 +224,22 @@ const MainForm = ({ vin, token }) => {
                 providers={providers}
                 rolesPerProvider={Permissions.FiskerMagnaCreate}
               >
-                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
-                  <Link to="#" onClick={() => sendCancel(row)}>
-                    <CancelIcon />
-                  </Link>
-                </Tooltip>
+                <IconButton
+                  onClick={() => sendCancel(row)}
+                  aria-label={`Send cancel for ${row.vin}`}
+                  size="small"
+                  color="primary"
+                >
+                  <CancelIcon fontSize="inherit" />
+                </IconButton>
+                <IconButton
+                  onClick={() => sendDeploy(row)}
+                  aria-label={`Send deploy for ${row.vin}`}
+                  size="small"
+                  disabled={!isActiveCarUpdate(row.status)}
+                >
+                  <ReplayIcon fontSize="inherit" />
+                </IconButton>
               </RoleWrap>
             </TableCell>
           </TableRow>