CEC-425 Added Delete Verification Prompt (#198)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

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

@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -43,6 +44,7 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
@@ -132,11 +134,15 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <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)} />
+          </div>
+
         );
       }
     });
@@ -151,7 +157,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>