CEC-425 Added Delete Verification Prompt (#198)

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

src/components/Fleets/Status/Details/index.jsx

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleet, getFleet, deleteFleet } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${name}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };