CEC-6016: add trim to fleet (#523)

* CEC-6016: add trim to fleet

* update snapshot

src/components/Controls/CarSelectionTable/index.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import {
   Checkbox,
@@ -17,9 +16,9 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
-import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
 import { useLocalStorage } from "../../useLocalStorage";
+import { VehicleTeaser } from "../../VehicleTeaser";
 
 const tableColumns = [
   {
@@ -164,12 +163,11 @@ const CarSelectionTable = (props) => {
                   </TableCell>
                 )}
                 <TableCell align="center">
-                  <ConnectedIcon
+                  <VehicleTeaser
-                    connected={row.connected}
+                    vin={row.vin}
-                    connectedHMI={row.connectedHMI}
+                    trex={row.connected}
-                    style={{ marginRight: 3 }}
+                    icc={row.connectedHMI}
                   />
-                  <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                   {row.ecu_list && (
                     <>
                       <br />

src/components/Controls/ConnectedIcon/index.jsx

@@ -1,36 +1,78 @@
 import React from "react";
 import PropTypes from "prop-types";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import DoneAllIcon from "@material-ui/icons/DoneAll";
-import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import ClearIcon from "@material-ui/icons/Clear";
+import DoneIcon from "@material-ui/icons/Done";
 import { Tooltip } from "@material-ui/core";
 
 const ConnectedIcon = (props) => {
-  if (props.connected || props.connectedHMI) {
+  let title = tooltip(props.connected, props.connectedHMI);
+
+  const content = () => {
+    if (props.connected && props.connectedHMI) {
       return (
-      <span style={props.style}>
+        <Tooltip title={title}>
-        {props.connected && (
+          <DoneAllIcon
-          <Tooltip title="TBOX">
+            fontSize="small"
-            <CheckCircleIcon
+            style={{ color: "green" }}
-              style={{ color: "Green", fontSize: 12, marginRight: 3 }}
           />
         </Tooltip>
-        )}
-        {props.connectedHMI && (
-          <Tooltip title="ICC">
-            <CheckBoxIcon
-              style={{ color: "Blue", fontSize: 12, marginRight: 3 }}
-            />
-          </Tooltip>
-        )}
-      </span>
       );
     }
 
-  return null;
+    if (props.connected || props.connectedHMI) {
+      let color = "blue";
+      if (props.connected) {
+        color = "green"
+      }
+
+      return (
+        <Tooltip title={title}>
+          <DoneIcon
+            fontSize="small"
+            style={{ color }}
+          />
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Tooltip title={title}>
+        <ClearIcon
+          fontSize="small"
+          style={{ color: "red" }}
+        />
+      </Tooltip>
+    );
+  };
+
+  return (
+    <span style={props.style}>
+      {content()}
+    </span>
+  )
 };
 
 ConnectedIcon.propTypes = {
   connected: PropTypes.bool.isRequired,
 };
 
+function tooltip(trex, icc) {
+  const status = [];
+
+  if (trex) {
+    status.push("TREX");
+  }
+
+  if (icc) {
+    status.push("ICC");
+  }
+
+  if (!status.length) {
+    return "OFFLINE";
+  }
+
+  return status.join(" & ");
+}
+
 export default ConnectedIcon;

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

@@ -191,7 +191,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                       role="button"
                       tabindex="0"
                     >
-                      VIN
+                      Vehicle
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"

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

@@ -23,18 +23,19 @@ import {
 } from "../../../../Contexts/FleetContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
+import { VehicleProvider } from "../../../../Contexts/VehicleContext";
 import SearchField from "../../../../Controls/SearchField";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
-import ConnectedIcon from "../../../../Controls/ConnectedIcon";
 import BulkActions from "../../../../BulkActions";
 import Battery from "../../../../Battery";
+import { VehicleTeaserController as VehicleTeaser } from "../../../../VehicleTeaser";
 import useStyles from "../../../../useStyles";
 
 const tableColumns = [
   {
-    id: "vin",
+    id: "vehicle",
-    label: "VIN",
+    label: "Vehicle",
   },
   {
     id: "trex_version",
@@ -213,6 +214,7 @@ const MainForm = ({ name }) => {
           selectCount={selected.length}
           rowCount={fleetVehicles.length}
         />
+        <VehicleProvider>
           <TableBody>
             {fleetVehicles && fleetVehicles.map((car) => {
               const isSelected = selected.includes(car.vin);
@@ -224,15 +226,12 @@ const MainForm = ({ name }) => {
                   />
                 </TableCell>
                 <TableCell key={"cell" + car.vin} align="center">
-                {(car.connected || car.connectedHMI) &&
+                  <VehicleTeaser
-                  <ConnectedIcon
+                    vin={car.vin}
-                    key={"icon" + car.vin}
+                    icc={car.connectedHMI}
-                    connected={car.connected}
+                    trex={car.connected}
-                    connectedHMI={car.connectedHMI}
+                    token={token}
-                    style={{ marginRight: 3 }}
                   />
-                }
-                <Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
                 </TableCell>
                 <TableCell key={"cell2" + car.vin} align="center">{car.trex_version}</TableCell>
                 <TableCell key={"cell3" + car.car_update_name}>
@@ -261,6 +260,7 @@ const MainForm = ({ name }) => {
               )
             })}
           </TableBody>
+        </VehicleProvider>
         <TableFooter>
           <TableRow>
             <TablePagination

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

@@ -190,7 +190,7 @@ exports[`VehiclesTab Render 1`] = `
                   role="button"
                   tabindex="0"
                 >
-                  VIN
+                  Vehicle
                   <svg
                     aria-hidden="true"
                     class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"

src/components/VehicleTeaser/index.jsx

@@ -0,0 +1,72 @@
+import { useRef, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import ConnectedIcon from "../Controls/ConnectedIcon";
+import { useVehicleContext } from "../Contexts/VehicleContext";
+import useStyles from "../useStyles";
+import { useIntersectObserver } from "../../hooks";
+
+// Prevent fetching missing data by not including `token` prop
+
+export function VehicleTeaserController(props) {
+  const el = useRef(null);
+  const isVisible = useIntersectObserver(el, "0px", true);
+  const [isMissingData, setIsMissingData] = useState(false);
+
+  const { getVehicle, vehicle } = useVehicleContext();
+
+  const classes = useStyles();
+
+  useEffect(() => {
+    if (props.trim === undefined) {
+      setIsMissingData(true);
+    }
+  }, [isVisible, props.trim]);
+
+  useEffect(() => {
+    if (isVisible && props.token) {
+      getVehicle(props.vin, props.token)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMissingData, isVisible, props.vin, props.token]);
+
+  if (!props.vin) {
+    return (
+      <div className={classes.alignBaseline}>
+        Missing VIN
+      </div>
+    );
+  }
+
+  return (
+    <div ref={el}>
+      <VehicleTeaser
+        vin={props.vin}
+        trex={props.trex}
+        icc={props.icc}
+        trim={props.trim || vehicle.trim}
+      />
+    </div>
+  );
+}
+
+export function VehicleTeaser(props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.alignBaseline}>
+      <ConnectedIcon
+        connected={props.trex}
+        connectedHMI={props.icc}
+        style={{ display: "flex", marginRight: 3 }}
+      />
+      <Link to={`/vehicle-status/${props.vin}`}>
+        {props.vin}
+      </Link>
+      <Stack direction="row" spacing={1} style={{ marginLeft: 3 }}>
+        {props.trim && <Chip label={props.trim} size="small" />}
+      </Stack>
+    </div>
+  )
+}

src/hooks/index.js

@@ -1,2 +1,4 @@
 export { useTimeoutState } from "./useTimeoutState";
 export { useUpdateManifest } from "./useUpdateManifest";
+export { useIntersectObserver } from "./useIntersectObserver";
+

src/hooks/useIntersectObserver.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIntersectObserver(element, offset, once) {
+  const [isInViewport, setIsInViewport] = useState(false);
+
+  useEffect(() => {
+    const current = element?.current;
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsInViewport(entry.isIntersecting);
+      if (entry.isIntersecting && once) {
+        observer.unobserve(current);
+      }
+    }, { rootMargin: offset });
+
+    current && observer.observe(current);
+
+    return () => current && observer.unobserve(current);
+  }, [element, offset, once]);
+
+  return isInViewport;
+}