CEC-4883: update api shape and display trex version on fleets (#418)

src/components/Contexts/FleetContext.jsx

@@ -113,18 +113,20 @@ export const FleetProvider = ({ children }) => {
         throw new Error(`Get fleet vehicles error. ${result.message}`);
       }
 
-      const connectionsResult = await vehiclesAPI.getConnections({ "VINs": result.data }, token)
+      const vins = result.data.map(vehicle => vehicle.vin);
+      const connectionsResult = await vehiclesAPI.getConnections({ "VINs": vins }, token)
       if (result.error) {
         setFleetVehicles([])
         throw new Error(`Get vehicles connections error. ${result.message}`);
       }
 
       var cars = []
-      result.data.forEach((vin) => {
+      result.data.forEach((vehicle) => {
         cars.push({
-          vin: vin,
+          vin: vehicle.vin,
-          connected: connectionsResult[vin] || false,
+          connected: connectionsResult[vehicle.vin] || false,
-          connectedHMI: connectionsResult[`2:${vin}`] || false
+          connectedHMI: connectionsResult[`2:${vehicle.vin}`] || false,
+          trex_version: vehicle.carstate?.trex_version || "",
         })
       })
 

src/components/Contexts/FleetContext.test.jsx

@@ -347,8 +347,7 @@ describe("FleetContext", () => {
   describe("getFleetVehicles", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const { busy, error, fleetVehicles, getFleetVehicles } =
+        const { busy, error, fleetVehicles, getFleetVehicles } = useFleetContext();
-          useFleetContext();
 
         return (
           <>
@@ -805,16 +804,19 @@ const expectedFleetVehiclesData = [
     vin: "USWESTVIN12345678",
     connected: true,
     connectedHMI: false,
+    trex_version: "",
   },
   {
     vin: "USWESTVIN12345679",
     connected: true,
     connectedHMI: false,
+    trex_version: "",
   },
   {
     vin: "USWESTVIN12345670",
     connected: true,
     connectedHMI: false,
+    trex_version: "",
   },
 ];
 

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -67,17 +67,20 @@ export const useFleetContext = () => ({
       {
         vin: "USWESTVIN12345678",
         connected: false,
-        connectedHMI: false
+        connectedHMI: false,
+        trex_version: "",
       },
       {
         vin: "USWESTVIN12345679",
         connected: true,
-        connectedHMI: true
+        connectedHMI: true,
+        trex_version: "",
       },
       {
         vin: "USWESTVIN12345670",
         connected: false,
-        connectedHMI: false
+        connectedHMI: false,
+        trex_version: "",
       },
     ];
     return Promise.resolve(result);

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -127,6 +127,29 @@ exports[`FleetVehiclesTable 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"
+                    >
+                      T.REX Version
+                      <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>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -34,6 +34,10 @@ const tableColumns = [
     id: "vin",
     label: "VIN",
   },
+  {
+    id: "trex_version",
+    label: "T.REX Version",
+  },
   {
     id: "",
     label: "Actions",
@@ -204,7 +208,8 @@ const MainForm = ({ name }) => {
                 }
                 <Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
               </TableCell>
-              <TableCell key={"cell2" + car.vin} align="center">{Actions(car.vin)}</TableCell>
+              <TableCell key={"cell2" + car.vin} align="center">{car.trex_version}</TableCell>
+              <TableCell key={"cell3" + car.vin} align="center">{Actions(car.vin)}</TableCell>
             </TableRow>
             )
           ))}

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -126,6 +126,29 @@ exports[`VehiclesTab 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"
+                >
+                  T.REX Version
+                  <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>
               <th
                 class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                 scope="col"

src/services/__mocks__/fleetsAPI.js

@@ -34,7 +34,26 @@ const fleets = [
   },
 ];
 
-const vehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+const vehicles = [
+  {
+    vin: "USWESTVIN12345678",
+    connected: false,
+    connectedHMI: false,
+    trex_version: "",
+  },
+  {
+    vin: "USWESTVIN12345679",
+    connected: true,
+    connectedHMI: true,
+    trex_version: "",
+  },
+  {
+    vin: "USWESTVIN12345670",
+    connected: false,
+    connectedHMI: false,
+    trex_version: "",
+  },
+];
 
 const fleetsAPI = {
   addFleet: async (fleet) => {
@@ -63,11 +82,16 @@ const fleetsAPI = {
     return { data: vehicles };
   },
   addFleetVehicles: async (_name, payload) => {
-    payload.vins && vehicles.push(...payload.vins);
+    payload.vins && vehicles.push(...payload.vins.map((vin => ({
+      vin,
+      connected: false,
+      connectedHMI: false,
+      trex_version: "",
+    }))));
     return payload;
   },
   deleteFleetVehicle: async (_name, vehicle) => {
-    const index = vehicles.findIndex(element => element === vehicle.vin);
+    const index = vehicles.findIndex(element => element.vin === vehicle.vin);
     if (index >= 0) vehicles.splice(index, 1);
     return vehicle.vin;
   },