CEC-5367: add vin: prefix and implement in fleets (#478)

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -8,7 +8,8 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
-  Tooltip
+  Tooltip,
+  IconButton,
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -17,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { logger } from "../../../../../services/monitoring";
-import { hasRole, Permissions } from "../../../../../utils/roles";
 import {
   FleetProvider,
   useFleetContext
@@ -25,7 +25,6 @@ import {
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
 import SearchField from "../../../../Controls/SearchField";
-import DeleteConfirmation from "../../../../DeleteConfirmation";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
 import ConnectedIcon from "../../../../Controls/ConnectedIcon";
@@ -76,7 +75,6 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selected, setSelected] = useState([]);
   const classes = useStyles();
   const { setMessage } = useStatusContext();
@@ -91,8 +89,6 @@ const MainForm = ({ name }) => {
     token: {
       idToken: { jwtToken: token },
     },
-    groups,
-    providers,
   } = useUserContext();
 
   const handleSearch = (query) => {
@@ -174,46 +170,6 @@ const MainForm = ({ name }) => {
     }
   };
 
-  const Actions = (vin) => {
-    let actions = [];
-    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
-      actions.push({
-        tip: `Delete "${vin}"`,
-        id: vin,
-        icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
-      });
-    }
-    if (actions.length === 0) return ["No actions"];
-
-    return actions.map((action) => {
-      if (action.link != null) {
-        return (
-          <Tooltip key={action.link} title={action.tip}>
-            <Link to={action.link} style={{ margin: 5 }}>
-              {action.icon}
-            </Link>
-          </Tooltip>
-        );
-      } else {
-        return (
-          <span key={`delete-${action.id}-of-div`}>
-            <Tooltip key={`delete-${action.id}`} title={action.tip}>
-              <Link to="#" onClick={() => onDelete(action.id)}>
-                {action.icon}
-              </Link>
-            </Tooltip>
-            <DeleteConfirmation
-              message={action.id}
-              open={showDeleteModal}
-              close={() => setShowDeleteModal(false)}
-              deleteFunction={() => onDelete(action.id)}
-            />
-          </span>
-        );
-      }
-    });
-  };
-
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
@@ -285,7 +241,13 @@ const MainForm = ({ name }) => {
               <TableCell key={"cell7" + car.vin}>
                 {car.park ? "Yes" : "No"}
               </TableCell>
-              <TableCell key={"cell8" + car.vin} align="center">{Actions(car.vin)}</TableCell>
+              <TableCell key={"cell8" + car.vin} align="center">
+                <Tooltip key={`delete-${car.vin}`} title={`Delete "${car.vin}"`}>
+                  <IconButton onClick={() => onDelete(car.vin)}>
+                    <DeleteIcon aria-label={`Delete ${car.vin}`} />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
             </TableRow>
             )
           })}