From bb0006eed6ebf3e0660eebe64d3e0b0ff3fea457 Mon Sep 17 00:00:00 2001
From: Tristan Timblin <ttimblin@fiskerinc.com>
Date: Thu, 31 Aug 2023 09:15:40 -0700
Subject: [PATCH] CEC-4926: use new vehicles_count field (#423)

* use new vehicles_count field

* fix affected tests
---
 .../Contexts/__mocks__/FleetContext.jsx       | 10 ++-
 .../Controls/FleetSelectionTable/index.jsx    | 70 ++++++++++---------
 .../Fleets/Status/Details/index.jsx           |  2 +-
 3 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/components/Contexts/__mocks__/FleetContext.jsx b/src/components/Contexts/__mocks__/FleetContext.jsx
index 2c825a8..9d49e37 100644
--- a/src/components/Contexts/__mocks__/FleetContext.jsx
+++ b/src/components/Contexts/__mocks__/FleetContext.jsx
@@ -18,25 +18,29 @@ let fleet = {
   log_level: "info",
   canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: fleetCANFilters },
   vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"],
+  vehicles_count: 3,
 }
 let fleets = [
   {
     name: "US-WEST",
     log_level: "info",
     canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: fleetCANFilters },
-    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"],
+    vehicles_count: 3,
   },
   {
     name: "US-CENTRAL",
     log_level: "warning",
     canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
-    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"],
+    vehicles_count: 3,
   },
   {
     name: "US-EAST",
     log_level: "error",
     canbus: { enabled: true },
-    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"],
+    vehicles_count: 3,
   },
 ];
 let totalFleets = 3;
diff --git a/src/components/Controls/FleetSelectionTable/index.jsx b/src/components/Controls/FleetSelectionTable/index.jsx
index e75df0e..53546aa 100644
--- a/src/components/Controls/FleetSelectionTable/index.jsx
+++ b/src/components/Controls/FleetSelectionTable/index.jsx
@@ -1,13 +1,13 @@
-import React, {useEffect, useState} from "react";
-import {Link} from 'react-router-dom';
-import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+import { Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core";
 import clsx from "clsx";
 
 import TableHeaderSortable from "../../Table/HeaderSortable";
-import {useStatusContext} from "../../Contexts/StatusContext";
-import {useFleetContext} from "../../Contexts/FleetContext"
-import {logger} from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useFleetContext } from "../../Contexts/FleetContext"
+import { logger } from "../../../services/monitoring";
+import { useLocalStorage } from "../../useLocalStorage";
 import PropTypes from "prop-types";
 
 const tableColumns = [
@@ -105,10 +105,12 @@ const FleetSelectionTable = (props) => {
 
 
   useEffect(() => {
-    const options = { search: searchTerm,
-        limit: pageSize,
-        offset: pageSize * pageIndex,
-        order: `${orderBy} ${order}`,
+    const options = {
+      search: searchTerm,
+      limit: pageSize,
+      offset: pageSize * pageIndex,
+      order: `${orderBy} ${order}`,
+      ignore: ["vehicles"],
     };
     (async () => {
       try {
@@ -138,29 +140,29 @@ const FleetSelectionTable = (props) => {
         />
         <TableBody>
           {fleets.map((row) => {
-              const isSelected = selected
-                ? selected.indexOf(row.name) !== -1
-                : false;
-              return (
-                <TableRow key={row.name}>
-                  {multiSelect && (
-                    <TableCell padding="checkbox">
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={(event) => handleSelect(event, row.name)}
-                      />
-                    </TableCell>
-                  )}
-                  <TableCell align="center">
-                    <Link to={`/fleet/${row.name}`}>{row.name}</Link>
+            const isSelected = selected
+              ? selected.indexOf(row.name) !== -1
+              : false;
+            return (
+              <TableRow key={row.name}>
+                {multiSelect && (
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={(event) => handleSelect(event, row.name)}
+                    />
                   </TableCell>
-                  <TableCell align="center">{row.log_level}</TableCell>
-                  <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
-                  <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
-                  <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
-                  <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
-                </TableRow>)
-            }
+                )}
+                <TableCell align="center">
+                  <Link to={`/fleet/${row.name}`}>{row.name}</Link>
+                </TableCell>
+                <TableCell align="center">{row.log_level}</TableCell>
+                <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
+                <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
+                <TableCell align="center">{row.vehicles_count || 0}</TableCell>
+                <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
+              </TableRow>)
+          }
           )}
         </TableBody>
         <TableFooter>
@@ -172,7 +174,7 @@ const FleetSelectionTable = (props) => {
               rowsPerPage={pageSize}
               page={pageIndex}
               SelectProps={{
-                inputProps: {"aria-label": "rows per page"},
+                inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
               onPageChange={handleChangePageIndex}
diff --git a/src/components/Fleets/Status/Details/index.jsx b/src/components/Fleets/Status/Details/index.jsx
index ef4a3cc..441c437 100644
--- a/src/components/Fleets/Status/Details/index.jsx
+++ b/src/components/Fleets/Status/Details/index.jsx
@@ -60,7 +60,7 @@ const MainForm = ({ name }) => {
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={12} className={classes.textCenterAlign}>
           <p><b>Name</b>: {name}</p>
-          <p><b>Vehicles</b>: {fleet.vehicles ? fleet.vehicles.length : 0}</p>
+          <p><b>Vehicles</b>: {fleet.vehicles_count || 0}</p>
           {fleet.log_level != null && (
             <p><b>Log Level</b>: {fleet.log_level}</p>
           )}