Fixes from review

src/components/Contexts/VehicleContext.jsx

@@ -292,13 +292,13 @@ export const VehicleProvider = ({ children }) => {
   };
 
   const getAllFlashpacks = async (options, token) => {
-    let result;
     try {
       setBusy(true);
 
-      result = await api.getAllFlashpacks(options, token);
+      const result = await api.getAllFlashpacks(options, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get all flashpacks error. ${result.message}`);
+      }
 
       setFlashpacks(result.data);
       if (options && options.offset === 0 && result.total) {
@@ -312,13 +312,13 @@ export const VehicleProvider = ({ children }) => {
   };
 
   const getFlashpackECUMappings = async (model, year, flashpack, options, token) => {
-    let result;
     try {
       setBusy(true);
 
-      result = await api.getFlashpackECUMappings(model, year, flashpack, options, token);
+      const result = await api.getFlashpackECUMappings(model, year, flashpack, options, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get flashpack ecu mappings error. ${result.message}`);
+      }
 
       setFlashpackECUMappings(result.data);
       if (options && options.offset === 0 && result.total) {
@@ -343,8 +343,9 @@ export const VehicleProvider = ({ children }) => {
       }
 
       const result = await api.addFlashpackVersion(data, token)
-      if (result.error)
+      if (result.error) {
         throw new Error(`Add flashpack version error. ${result.message}`);
+      }
 
       return result;
     } finally {
@@ -353,7 +354,6 @@ export const VehicleProvider = ({ children }) => {
   }
 
   const deleteFlashpackVersion = async (model, year, flashpack, token) => {
-    let result;
     try {
       setBusy(true);
 
@@ -363,9 +363,10 @@ export const VehicleProvider = ({ children }) => {
         "flashpack": flashpack,
       }
 
-      result = await api.deleteFlashpackVersion(data, token);
+      const result = await api.deleteFlashpackVersion(data, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Delete flashpack ecu mappings error. ${result.message}`);
+      }
 
       return result;
     } finally {

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -187,6 +187,44 @@ export const useVehicleContext = () => ({
       total: 2,
     }
   }),
+  getAllFlashpacks: jest.fn((options, token) => {
+    return {
+      data: [
+        {
+          flashpack: "44.4",
+          car_model: "Ocean",
+          car_year: "2023",
+        },
+        {
+          flashpack: "38.4",
+          car_model: "Ocean",
+          car_year: "2023",
+        },
+      ],
+      total: 2,
+    }
+  }),
+  getFlashpackECUMappings: jest.fn((model, year, flashpack, options, token) => {
+    return {
+      data: [
+        {
+          flashpack: "44.4",
+          car_model: "Ocean",
+          car_year: "2023",
+          car_ecu_name: "ADAS",
+          car_ecu_version: "99",
+        },
+        {
+          flashpack: "44.4",
+          car_model: "Ocean",
+          car_year: "2023",
+          car_ecu_name: "PDI",
+          car_ecu_version: "11",
+        },
+      ],
+      total: 2,
+    }
+  }),
 });
 
 export const setBusy = (val) => {

src/components/Flashpack/Details/index.jsx

@@ -146,7 +146,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={1}
+                colSpan={2}
                 count={totalFlashpackECUMappings}
                 rowsPerPage={pageSize}
                 page={pageIndex}

src/components/Flashpack/__snapshots__/index.test.jsx.snap

@@ -122,6 +122,29 @@ exports[`Flashpack Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Delete
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                 </tr>
               </thead>
               <tbody

src/components/Flashpack/index.jsx

@@ -36,6 +36,10 @@ const tableColumns = [
     id: "car_year",
     label: "Year",
   },
+  {
+    id: "delete",
+    label: "Delete",
+  },
 ];
 
 const PAGE_SIZE = "FLASHPACKS_TABLE_PAGE_SIZE";
@@ -144,7 +148,7 @@ const MainForm = () => {
         />
         <TableBody>
           {flashpacks && flashpacks.map((row, index) => (
-            <TableRow key={index}>
+            <TableRow key={row.flashpack + row.car_model}>
               <TableCell align="center">
                 <Link to={`/tools/flashpack/${row.car_model}/${row.car_year}/${row.flashpack}`}>
                   {row.flashpack}
@@ -156,7 +160,7 @@ const MainForm = () => {
               <TableCell align="center">
                 {row.car_year}
               </TableCell>
-              <TableCell>
+              <TableCell align="center">
                 <RoleWrap
                   groups={groups}
                   providers={providers}
@@ -182,7 +186,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={1}
+                colSpan={4}
                 count={totalFlashpacks}
                 rowsPerPage={pageSize}
                 page={pageIndex}