CEC-287 Add connection status to vehicles page (#63)

* Add connection status to vehicles page

* ConnectedIcon control

* Handle Style

src/components/Cars/CarSelectionTable/index.jsx

@@ -10,13 +10,13 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 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";
 
 const tableColumns = [
   {
@@ -138,14 +138,10 @@ const CarSelectionTable = (props) => {
                   />
                 </TableCell>
                 <TableCell align="center">
-                  {row.connected && (
+                  <ConnectedIcon
-                    <>
+                    connected={row.connected}
-                      <CheckCircleIcon
+                    style={{ marginRight: 5 }}
-                        style={{ color: "Green", fontSize: 12 }}
+                  />
-                      />
-                      <span>&nbsp;</span>
-                    </>
-                  )}
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                 </TableCell>
                 <TableCell align="center">{row.model}</TableCell>

src/components/Cars/List/index.jsx

@@ -21,6 +21,7 @@ import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
+import ConnectedIcon from "../../Controls/ConnectedIcon";
 
 const tableColumns = [
   {
@@ -132,6 +133,10 @@ const MainForm = () => {
           {vehicles.map((row) => (
             <TableRow key={row.vin}>
               <TableCell align="center">
+                <ConnectedIcon
+                  connected={row.connected}
+                  style={{ marginRight: 5 }}
+                />
                 <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
               </TableCell>
               <TableCell align="center">{row.model}</TableCell>

src/components/Controls/ConnectedIcon/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+
+const ConnectedIcon = (props) => {
+  if (props.connected) {
+    return (
+      <span style={props.style}>
+        <CheckCircleIcon style={{ color: "Green", fontSize: 12 }} />
+      </span>
+    );
+  }
+
+  return null;
+};
+
+ConnectedIcon.propTypes = {
+  connected: PropTypes.bool.isRequired,
+};
+
+export default ConnectedIcon;