CEC-3672 Add SUMS to car updates table (#280)

src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap

@@ -80,6 +80,12 @@ exports[`CarUpdatesTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  SUMS
+                </th>
                 <th
                   class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                   scope="col"
@@ -187,8 +193,11 @@ exports[`CarUpdatesTab Render 1`] = `
               <tr
                 class="MuiTableRow-root MuiTableRow-footer"
               >
-                <td>
+                <td
-                  No Car Updates found
+                  class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
+                  colspan="7"
+                >
+                  No Car Updates
                 </td>
               </tr>
             </tfoot>

src/components/Controls/CarUpdatesTable/index.jsx

@@ -35,6 +35,10 @@ const tableColumns = [
     id: "update_package_id",
     label: "Name",
   },
+  {
+    id: "",
+    label: "SUMS",
+  },
   {
     id: "username",
     label: "Username",
@@ -164,14 +168,17 @@ const MainForm = ({ vin, token }) => {
         onSortRequest={handleSort}
       />
       <TableBody>
-        {carUpdates.map((row) => (
+        {carUpdates.map((row, index) => (
-          <TableRow key={row.id}>
+          <TableRow key={index}>
             <TableCell align="center">{row.id}</TableCell>
             <TableCell align="center">
               <Link to={`/vehicle-status/${row.vin}/${row.id}`}>
                 {updateName(row)}
               </Link>
             </TableCell>
+            <TableCell align="center">
+              {row.updatemanifest?.sums}
+            </TableCell>
             <TableCell align="center">
               {row.username}
             </TableCell>
@@ -206,11 +213,11 @@ const MainForm = ({ vin, token }) => {
       <TableFooter>
         <TableRow>
           {totalCarUpdates === 0 ? (
-            <td>No Car Updates found</td>
+            <TableCell colSpan={7} align="center">No Car Updates</TableCell>
           ) : (
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={6}
+              colSpan={7}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}

src/components/Table/HeaderSortable/index.jsx

@@ -1,12 +1,12 @@
-import React from "react";
-import PropTypes from "prop-types";
 import {
   Checkbox,
   TableCell,
   TableHead,
   TableRow,
-  TableSortLabel,
+  TableSortLabel
 } from "@material-ui/core";
+import PropTypes from "prop-types";
+import React from "react";
 
 const HeaderSortable = (props) => {
   const {
@@ -75,9 +75,9 @@ const HeaderSortable = (props) => {
             />
           </TableCell>
         )}
-        {columnData.map((column) => (
+        {columnData.map((column, index) => (
           <TableCell
-            key={column.id}
+            key={index}
             align={column.numeric ? "right" : "center"}
             padding={column.disablePadding ? "none" : "normal"}
             sortDirection={orderBy === column.id ? order : false}