From bf0f0630f1593cc02bc3032c86fed4d00f4a5694 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Sat, 11 Feb 2023 09:53:56 -0800
Subject: [PATCH] CEC-3672 Add SUMS to car updates table (#280)

---
 .../__snapshots__/CarUpdatesTab.test.jsx.snap     | 13 +++++++++++--
 src/components/Controls/CarUpdatesTable/index.jsx | 15 +++++++++++----
 src/components/Table/HeaderSortable/index.jsx     | 10 +++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 62cdde9..95dda22 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/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>
-                  No Car Updates found
+                <td
+                  class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
+                  colspan="7"
+                >
+                  No Car Updates
                 </td>
               </tr>
             </tfoot>
diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx
index 81d89eb..c8eef07 100644
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/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) => (
-          <TableRow key={row.id}>
+        {carUpdates.map((row, index) => (
+          <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}
diff --git a/src/components/Table/HeaderSortable/index.jsx b/src/components/Table/HeaderSortable/index.jsx
index 7eb043e..2b297e8 100644
--- a/src/components/Table/HeaderSortable/index.jsx
+++ b/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}