From fd2d83ef529d90a8628a300d8091743942be41b1 Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Wed, 7 Feb 2024 11:09:56 -0500
Subject: [PATCH 1/4] CEC-5715 - Show which ECUs need to be updated for next
 flashpack number

---
 src/components/Cars/Status/CarUpdatesTab.jsx  |   7 +-
 .../__snapshots__/CarUpdatesTab.test.jsx.snap |  24 ++++
 src/components/Contexts/VehicleContext.jsx    |  17 ++-
 .../Controls/FlashpackInfoTable/index.jsx     | 124 ++++++++++++++++++
 src/services/vehiclesAPI.js                   |  11 ++
 5 files changed, 180 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Controls/FlashpackInfoTable/index.jsx

diff --git a/src/components/Cars/Status/CarUpdatesTab.jsx b/src/components/Cars/Status/CarUpdatesTab.jsx
index 273288a..17823ed 100644
--- a/src/components/Cars/Status/CarUpdatesTab.jsx
+++ b/src/components/Cars/Status/CarUpdatesTab.jsx
@@ -6,9 +6,10 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarUpdatesTable from "../../Controls/CarUpdatesTable";
 import CarVersionLogTable from "../../Controls/CarVersionLogTable";
+import FlashpackInfoTable from "../../Controls/FlashpackInfoTable";
 import useStyles from "../../useStyles";
 
-const MainForm = ({vin}) => {
+const MainForm = ({ vin }) => {
   const classes = useStyles();
   const {
     token: {
@@ -22,11 +23,13 @@ const MainForm = ({vin}) => {
       <CarUpdatesTable vin={vin} token={token} classes={classes} />
       <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
       <CarVersionLogTable vin={vin} token={token} classes={classes} />
+      <Typography variant="h6" className={classes.labelInline}>Flashpack Version Progress</Typography>
+      <FlashpackInfoTable vin={vin} token={token} classes={classes} />
     </div>
   );
 };
 
-const CarUpdatesTab = ({vin}) => (
+const CarUpdatesTab = ({ vin }) => (
   <VehicleProvider>
     <MainForm vin={vin} />
   </VehicleProvider>
diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 3b464e5..2350de1 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
@@ -463,6 +463,30 @@ exports[`CarUpdatesTab Render 1`] = `
               </tfoot>
             </table>
           </div>
+          <h6
+            class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
+          >
+            Flashpack Version Progress
+          </h6>
+          <div
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
+          >
+            <div
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <p>
+                  From Flashpack Version 
+                  (none yet)
+                   to Next Flashpack Version 
+                  (none yet)
+                </p>
+              </div>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index d34137a..713aba5 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -372,9 +372,23 @@ export const VehicleProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-
   };
 
+  const getCarFlashpackVersionInfo = async (vin, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getCarFlashpackVersionInfo(vin, token);
+      if (result.error) {
+        throw new Error(`Get car flashpack version info error. ${result.message}`);
+      }
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <VehicleContext.Provider
       value={{
@@ -412,6 +426,7 @@ export const VehicleProvider = ({ children }) => {
         getFlashpackECUMappings,
         addFlashpackVersion,
         deleteFlashpackVersion,
+        getCarFlashpackVersionInfo,
       }}
     >
       {children}
diff --git a/src/components/Controls/FlashpackInfoTable/index.jsx b/src/components/Controls/FlashpackInfoTable/index.jsx
new file mode 100644
index 0000000..ee0308d
--- /dev/null
+++ b/src/components/Controls/FlashpackInfoTable/index.jsx
@@ -0,0 +1,124 @@
+import {
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow
+} from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
+
+const tableColumns = [
+  {
+    id: "car_ecu_name",
+    label: "ECU",
+  },
+  {
+    id: "car_ecu_version",
+    label: "ECU Supplier Software Version Needed for Next Flashpack Version",
+  },
+];
+
+const PAGE_SIZE = "ECU_VERSIONS_NEEDED_TABLE_PAGE_SIZE";
+
+const FlashpackInfoTable = ({ vin, token, classes }) => {
+  const { setMessage } = useStatusContext();
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [ecuVersions, setECUVersions] = useState([]);
+  const [totalECUVersions, setTotalECUVersions] = useState(0);
+  const [flashpackNumber, setFlashpackNumber] = useState("");
+  const [nextFlashpackNumber, setNextFlashpackNumber] = useState("");
+  const { getCarFlashpackVersionInfo } = useVehicleContext();
+
+  useEffect(() => {
+    loadCarFlashpackVersionInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, token, pageIndex, pageSize]);
+
+  const loadCarFlashpackVersionInfo = async () => {
+    try {
+      if (!vin || !token) return;
+      await getCarFlashpackVersionInfo(vin, token)
+        .then((result) => {
+          setECUVersions(result.data.ecu_versions ? result.data.ecu_versions.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize) : []);
+          setTotalECUVersions(result.data.ecu_versions ? result.data.ecu_versions.length : 0)
+          setFlashpackNumber(result.data.flashpack);
+          setNextFlashpackNumber(result.data.next_flashpack);
+        });
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+    loadCarFlashpackVersionInfo();
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+    loadCarFlashpackVersionInfo();
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <p>
+            From Flashpack Version {flashpackNumber ? flashpackNumber : "(none yet)"} to Next Flashpack Version {nextFlashpackNumber ? nextFlashpackNumber : "(none yet)"}
+          </p>
+        </Grid>
+      </Grid>
+      {nextFlashpackNumber && (<Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={"car_ecu_name"}
+          order={"asc"}
+          columnData={tableColumns}
+          onSortRequest={() => { return null }}
+        />
+        <TableBody>
+          {ecuVersions && ecuVersions.map((row, i) => (
+            <TableRow key={`row${i}`}>
+              <TableCell align="center">{row.car_ecu_name}</TableCell>
+              <TableCell align="center">{row.car_ecu_version}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            {!ecuVersions || ecuVersions.length === 0 ? (
+              <TableCell colSpan={8} align="center">No ECU Versions to Update for Next Flashpack Version</TableCell>
+            ) : (
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, 100]}
+                colSpan={4}
+                count={totalECUVersions}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handleChangePageIndex}
+                onRowsPerPageChange={handleChangePageSize}
+              />)}
+          </TableRow>
+        </TableFooter>
+      </Table>)}
+    </div>
+  );
+};
+
+export default FlashpackInfoTable;
\ No newline at end of file
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index 1ad68ec..cc485bc 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -306,6 +306,17 @@ const vehiclesAPI = {
     }).then(fetchRespHandler)
       .catch(errorHandler)
   },
+
+  getCarFlashpackVersionInfo: async (vin, token) => {
+    return fetch(`${API_ENDPOINT}/flashpack_version_info/${vin}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler)
+      .catch(errorHandler)
+  },
 };
 
 export default vehiclesAPI;

From 010d8881da69b34c8ad9376491c0d3dfcc26eff0 Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Wed, 7 Feb 2024 17:42:52 -0500
Subject: [PATCH 2/4] Dense table

---
 src/components/Controls/FlashpackInfoTable/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Controls/FlashpackInfoTable/index.jsx b/src/components/Controls/FlashpackInfoTable/index.jsx
index ee0308d..61eab8b 100644
--- a/src/components/Controls/FlashpackInfoTable/index.jsx
+++ b/src/components/Controls/FlashpackInfoTable/index.jsx
@@ -80,7 +80,7 @@ const FlashpackInfoTable = ({ vin, token, classes }) => {
           </p>
         </Grid>
       </Grid>
-      {nextFlashpackNumber && (<Table>
+      {nextFlashpackNumber && (<Table size="small" >
         <TableHeaderSortable
           classes={classes}
           orderBy={"car_ecu_name"}

From b387830d243dffe07139a442e27e0ebbc2ec1565 Mon Sep 17 00:00:00 2001
From: Paul Adamsen <padamsen@fiskerinc.com>
Date: Mon, 12 Feb 2024 17:01:45 -0500
Subject: [PATCH 3/4] Update
 src/components/Controls/FlashpackInfoTable/index.jsx

Co-authored-by: Tristan Timblin <ttimblin@fiskerinc.com>
---
 src/components/Controls/FlashpackInfoTable/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Controls/FlashpackInfoTable/index.jsx b/src/components/Controls/FlashpackInfoTable/index.jsx
index 61eab8b..f0b2c12 100644
--- a/src/components/Controls/FlashpackInfoTable/index.jsx
+++ b/src/components/Controls/FlashpackInfoTable/index.jsx
@@ -90,7 +90,7 @@ const FlashpackInfoTable = ({ vin, token, classes }) => {
         />
         <TableBody>
           {ecuVersions && ecuVersions.map((row, i) => (
-            <TableRow key={`row${i}`}>
+            <TableRow key={${row.car_ecu_name}-${row.car_ecu_version}}>
               <TableCell align="center">{row.car_ecu_name}</TableCell>
               <TableCell align="center">{row.car_ecu_version}</TableCell>
             </TableRow>

From 5f0c1873da2477ae8c53cdf9f34dfee6ed20938a Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Mon, 12 Feb 2024 17:09:57 -0500
Subject: [PATCH 4/4] fix

---
 src/components/Controls/FlashpackInfoTable/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Controls/FlashpackInfoTable/index.jsx b/src/components/Controls/FlashpackInfoTable/index.jsx
index f0b2c12..1b9603d 100644
--- a/src/components/Controls/FlashpackInfoTable/index.jsx
+++ b/src/components/Controls/FlashpackInfoTable/index.jsx
@@ -90,7 +90,7 @@ const FlashpackInfoTable = ({ vin, token, classes }) => {
         />
         <TableBody>
           {ecuVersions && ecuVersions.map((row, i) => (
-            <TableRow key={${row.car_ecu_name}-${row.car_ecu_version}}>
+            <TableRow key={`${row.car_ecu_name}-${row.car_ecu_version}`}>
               <TableCell align="center">{row.car_ecu_name}</TableCell>
               <TableCell align="center">{row.car_ecu_version}</TableCell>
             </TableRow>