works, and looks good

src/components/Flashpack/Add/index.jsx

@@ -1,8 +1,11 @@
 import {
   Button,
+  IconButton,
   TextField
 } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
 import { Redirect } from "react-router";
 import { logger } from "../../../services/monitoring";
 import { useStatusContext } from "../../Contexts/StatusContext";
@@ -31,9 +34,16 @@ const MainForm = () => {
   useEffect(() => {
     setTitle(`Add Flashpack Version`);
     setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/flashpacks",
+      },
+      {
+        label: "Flashpack Versions",
+        link: "/tools/flashpacks",
+      },
       {
         label: `Add Flashpack Version`,
-        link: `/tools/flashpack/add`,
       },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -57,6 +67,7 @@ const MainForm = () => {
 
       const carFlashpackVersions = []
       for (let i = 0; i < mappingInputs.length; i++) {
+        mappingInputs[i] && mappingInputs[i].ecuName && mappingInputs[i].ecuVersion &&
           carFlashpackVersions.push({
             "car_model": carModel,
             "car_year": parseInt(carYear),
@@ -70,7 +81,7 @@ const MainForm = () => {
       if (!result || result.error) return;
 
       setMessage(`Added ${carYear} ${carModel} ${flashpack}`);
-      setRedirect(`/tools/flashpacks`);
+      setRedirect(`/tools/flashpack/${carModel}/${carYear}/${flashpack}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -180,14 +191,27 @@ const MainForm = () => {
                   type="text"
                 />
                 {mappingInputs.length > 1 && (
-                  <button onClick={() => handleDeleteMappingInput(index)}>Delete</button>
+                  <IconButton
+                    onClick={() => handleDeleteMappingInput(index)}
+                    aria-label={`Delete`}
+                    size="small"
+                    color="primary"
+                  >
+                    <DeleteIcon aria-label={`Delete`} />
+                  </IconButton>
                 )}
                 {index === mappingInputs.length - 1 && (
-                  <button onClick={() => handleAddMappingInput()}>Add</button>
+                  <IconButton
+                    onClick={() => handleAddMappingInput()}
+                    aria-label={`Add`}
+                    size="small"
+                    color="primary"
+                  >
+                    <AddCircleIcon aria-label={`Add`} />
+                  </IconButton>
                 )}
               </div>
             ))}
-            <div className="body"> {JSON.stringify(mappingInputs)} </div>
           </div>
         </div>
         <Button

src/components/Flashpack/Details/index.jsx

@@ -49,11 +49,18 @@ const MainForm = () => {
   } = useUserContext();
 
   useEffect(() => {
-    setTitle(`Flashpack ${flashpack}`);
+    setTitle(`${year} ${model} Flashpack Version ${flashpack}`);
     setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/flashpacks",
+      },
+      {
+        label: "Flashpack Versions",
+        link: "/tools/flashpacks",
+      },
       {
         label: `Flashpack ${flashpack}`,
-        link: `/flashpack/${model}/${year}/${flashpack}`,
       },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/Flashpack/index.jsx

@@ -62,12 +62,15 @@ const MainForm = () => {
   } = useUserContext();
 
   useEffect(() => {
-    setTitle("Flashpacks");
+    setTitle("Flashpack Versions");
     setSitePath([
       {
-        label: "Flashpacks",
+        label: "Tools",
         link: "/tools/flashpacks",
       },
+      {
+        label: "Flashpack Versions",
+      },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);