Merge branch 'develop' into release/0.0.3

package-lock.json

@@ -33,6 +33,7 @@
         "react-router-dom": "^5.3.0",
         "react-router-hash-link": "^2.4.3",
         "react-scripts": "5.0.0",
+        "usehooks-ts": "^2.7.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -16432,6 +16433,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
+      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -29270,6 +29284,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "usehooks-ts": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
+      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-router-dom": "^5.3.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.0",
+    "usehooks-ts": "^2.7.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -67,9 +68,9 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 45,
+        "functions": 47,
-        "lines": 50,
+        "lines": 55,
-        "statements": 49
+        "statements": 55
       }
     },
     "coverageReporters": [

src/components/App/__snapshots__/App.test.js.snap

@@ -3311,7 +3311,7 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <div>
+                      <span>
                         <a
                           class=""
                           href="/packages"
@@ -3329,7 +3329,7 @@ exports[`App Route /packages authenticated 1`] = `
                             />
                           </svg>
                         </a>
-                      </div>
+                      </span>
                     </td>
                   </tr>
                 </tbody>
@@ -6015,7 +6015,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
-                          value="warn"
+                          value="warning"
                         />
                         <div
                           class="PrivateRadioButtonIcon-root-0"
@@ -6049,7 +6049,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                     >
-                      Warn
+                      Warning
                     </span>
                   </label>
                   <label

src/components/Cars/Add/__snapshots__/index.test.jsx.snap

@@ -388,7 +388,7 @@ exports[`VehicleAddForm Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -422,7 +422,7 @@ exports[`VehicleAddForm Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label

src/components/Cars/Add/index.jsx

@@ -180,7 +180,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>

src/components/Cars/CANSignals/index.jsx

@@ -45,7 +45,7 @@ const Main = ({ vin }) => {
 };
 
 const CANSignals = (props) => (
-  <CANSignalProvider>
+  <CANSignalProvider {...{token:props.token}}>
     <Main {...props} />
   </CANSignalProvider>
 );

src/components/Cars/Status/CANSignalsTab.test.jsx

@@ -0,0 +1,39 @@
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import CANSignalsTab from "./CANSignalsTab";
+import {setToken} from "../../Contexts/UserContext";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+
+const renderCANSignalsTab = async () => {
+  const { container } = render(
+    <BrowserRouter>
+      <CANSignalsTab vin="TESTVIN1234567890" token="token"/>
+    </BrowserRouter>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("CANSignalsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderCANSignalsTab();
+    expect(container).toMatchSnapshot();
+  });
+});
+

src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CANSignalsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-vehicleprovider"
+  >
+    <div
+      class="makeStyles-paper-0 makeStyles-tableSize-0"
+    >
+      <h6
+        class="MuiTypography-root MuiTypography-h6"
+        style="padding-bottom: 10px;"
+      >
+        CAN Signals
+      </h6>
+      <h3>
+        Loading...
+      </h3>
+    </div>
+  </div>
+</div>
+`;

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

@@ -1,3 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DigitalTwinTab Render 1`] = `<div />`;
+exports[`DigitalTwinTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-vehicleprovider"
+      >
+        <div
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6"
+            style="padding-bottom: 10px;"
+          >
+            Digital Twin
+          </h6>
+          <div>
+            <b>
+              Connected
+            </b>
+            : 
+            false
+          </div>
+          <div>
+            <b>
+              ICC Connected
+            </b>
+            : 
+            true
+          </div>
+          <div>
+            <p>
+              <b>
+                Battery
+              </b>
+              : 
+              95%
+            </p>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Doors
+              </h3>
+              <p>
+                <b>
+                  hood
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  trunk
+                </b>
+                : 
+                closed
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Location
+              </h3>
+              <p>
+                <b>
+                  altitude
+                </b>
+                : 
+                17
+              </p>
+              <p>
+                <b>
+                  longitude
+                </b>
+                : 
+                -122.414°
+              </p>
+              <p>
+                <b>
+                  latitude
+                </b>
+                : 
+                37.764°
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <p>
+                <b>
+                  Trex Version
+                </b>
+                : 
+                1000000
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <p>
+                <b>
+                  Updated at
+                </b>
+                : 
+                7/26/2022 12:26:38 AM
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Cars/Update/__snapshots__/index.test.jsx.snap

@@ -390,7 +390,7 @@ exports[`VehicleUpdate Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -424,7 +424,7 @@ exports[`VehicleUpdate Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label

src/components/Cars/Update/index.jsx

@@ -208,7 +208,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>

src/components/Contexts/CANSignalsContext.jsx

@@ -1,8 +1,8 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, {useContext, useState} from "react";
 
 import api from "../../services/vehiclesAPI";
-import { useUserContext } from "./UserContext";
 import { LocalDateTimeString } from "../../utils/dates";
+import {useInterval} from "usehooks-ts";
 
 const CANSignalContext = React.createContext();
 
@@ -15,41 +15,26 @@ const BlankSignal = (msg) => ({
 const transformSignals = (signals) =>
   signals
     .map((signal) => {
-      const { Timestamp, ...Settings } = signal;
+      const { timestamp, value, name } = signal;
-      const keys = Object.keys(Settings);
 
-      return keys.map((key) => ({
+      return {
-        timestamp: LocalDateTimeString(Timestamp),
+        timestamp: LocalDateTimeString(timestamp),
-        signal: key,
+        signal: name,
-        value: Settings[key],
+        value: value,
-      }));
+      };
     })
     .flat();
 
-export const CANSignalProvider = ({ children }) => {
+export const CANSignalProvider = ({ token, children }) => {
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
   const [vin, setVIN] = useState(null);
   const [signals, setSignals] = useState([]);
-  let delay = 500;
+  const [delay, setDelay] = useState(500);
 
-  useEffect(() => {
+  useInterval(
-    getCANSignals();
+    () => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      getCANSignals()
-  }, [vin]);
+    }, vin?delay:null
-
+  )
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      getCANSignals();
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signals]);
 
   const getCANSignals = async () => {
     try {
@@ -62,10 +47,10 @@ export const CANSignalProvider = ({ children }) => {
       const items = transformSignals(result.data);
 
       if (items.length > 0) {
-        delay = 500;
+        setDelay(500);
         setSignals(items);
       } else {
-        delay = 1000;
+        setDelay(1000);
         setSignals([BlankSignal("No signals")]);
       }
     } catch (e) {

src/components/Contexts/CANSignalsContext.test.jsx

@@ -0,0 +1,75 @@
+jest.mock("../../services/vehiclesAPI");
+
+import {
+  render,
+  cleanup,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import {CANSignalProvider, useCANSignalContext} from "./CANSignalsContext";
+
+const checkSignalsResults = (filters) => {
+  expect(screen.getByTestId("signals").innerHTML).toEqual(filters);
+};
+
+describe("CANSignalsContext", () => {
+  describe("getSignals", () => {
+    beforeEach(() => {
+      jest.useFakeTimers("setInterval");
+      const TestComp = () => {
+        const { signals, setVIN } = useCANSignalContext();
+
+        return (
+          <>
+            <div data-testid="signals">{JSON.stringify(signals)}</div>
+            <button
+              data-testid="getSignals"
+              onClick={()=>{setVIN("TESTVIN1234567890")}}
+            />
+          </>
+        );
+      };
+      render(
+        <CANSignalProvider>
+          <TestComp />
+        </CANSignalProvider>
+      );
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkSignalsResults("[]");
+    });
+
+    it("getSignals", async () => {
+      // eslint-disable-next-line testing-library/no-unnecessary-act
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("getSignals"));
+        await waitFor(() =>
+          expect(screen.getByTestId("signals").innerHTML).toBe("[]")
+        );
+        jest.advanceTimersByTime(501);
+      })
+
+      await waitFor(() => {
+        return expect(screen.getByTestId("signals").innerHTML).not.toBe("[]");
+      } );
+
+      checkSignalsResults(JSON.stringify(expectedSignalsData));
+    });
+  });
+});
+
+const expectedSignalsData = [
+  {
+    timestamp: "7/14/2021 8:09:40 PM",
+    signal: "signal",
+    value: 123
+  },
+];

src/components/Contexts/FleetContext.test.jsx

@@ -139,7 +139,7 @@ describe("FleetContext", () => {
               onClick={() =>
                 add({
                   name: "EU-WEST",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }
@@ -219,7 +219,7 @@ describe("FleetContext", () => {
               onClick={() =>
                 update({
                   name: "EU-WEST",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }
@@ -782,7 +782,7 @@ const expectedFleetsData = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: {
       enabled: false,
       data_logger_enabled: false,

src/components/Contexts/VehicleContext.test.jsx

@@ -253,7 +253,7 @@ describe("VehicleContext", () => {
               onClick={() =>
                 update({
                   vin: "3C4PDCBG0ET127145",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -28,7 +28,7 @@ let fleets = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
     vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
   },

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -35,6 +35,7 @@ let vehicle = {
 let vehicleState = {
   data: {
     online: false,
+    online_hmi: true,
     battery: {
       percent: 95,
     },

src/components/Controls/SendCommand/Parameters.jsx

@@ -1,36 +1,6 @@
 import PropTypes from "prop-types";
 import {FormControl} from "@material-ui/core";
 import useStyles from "../../useStyles";
-import {MuiPickersUtilsProvider} from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-
-export const Dates = (
-  {
-    startDateFunc,
-    endDateFunc,
-    startDate,
-    handleStartChange,
-    endDate,
-    handleEndChange,
-  }) => {
-  if (startDateFunc && endDateFunc) {
-    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
-      {startDateFunc(startDate, handleStartChange)}
-      {endDateFunc(endDate, handleEndChange, startDate)}
-    </MuiPickersUtilsProvider>);
-  }
-
-  return null;
-}
-
-Dates.propTypes = {
-  startDateFunc: PropTypes.func,
-  endDateFunc: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
-}
 
 export const Parameters = (props) => {
   const {params} = props;
@@ -42,22 +12,12 @@ export const Parameters = (props) => {
   }
 
   const {data, handleDataChange} = props;
-  const {startDate, handleStartChange} = props;
-  const {endDate, handleEndChange} = props;
 
   return (
     <FormControl size="small" className={classes.formControl}>
       <div style={{width: "300px", marginTop: "1em"}}>
         {params.dataFunc(data, handleDataChange)}
       </div>
-      <Dates
-        startDateFunc={params.startDateFunc}
-        endDateFunc={params.endDateFunc}
-        startDate={startDate}
-        handleStartChange={handleStartChange}
-        endDate={endDate}
-        handleEndChange={handleEndChange}
-      ></Dates>
     </FormControl>
   )
 }
@@ -66,8 +26,4 @@ Parameters.propTypes = {
   params: PropTypes.any,
   data: PropTypes.any,
   handleDataChange: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
 };

src/components/Controls/SendCommand/Parameters.test.jsx

@@ -1,75 +1,10 @@
-jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
-
-
 import {render, waitFor} from "@testing-library/react";
-import {Dates, Parameters} from "./Parameters";
+import {Parameters} from "./Parameters";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
-
-const date = Date.parse("2011-10-10T14:48:00")
-
-const renderDates = async (empty) => {
-  if (empty) {
-    await waitFor(() => {
-      /* render */
-    });
-    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
-
-    return container;
-  }
-
-
-  const [start, setStart] = [date, (_) => {}];
-  const [end, setEnd] = [date, (_) => {}];
-
-  const handleStartChange = (val) => {
-    setStart(val)
-  }
-
-  const handleEndChange = (val) => {
-    setEnd(val)
-  }
-
-  await waitFor(() => {
-    /* render */
-  });
-
-  const {container} = render(
-    <div>
-      <Dates
-        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
-        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
-        startDate={start}
-        endDate={end}
-        handleStartChange={handleStartChange}
-        handleEndChange={handleEndChange}
-      />
-    </div>
-  )
-
-  return container
-}
-
-describe("Dates", () => {
-  beforeAll(() => {
-    addSnapshotSerializer(expect);
-  })
-
-  it("Render empty", async () => {
-    const container = await renderDates(true);
-    expect(container).toMatchSnapshot();
-  })
-
-  it("Render filled", async () => {
-    const container = await renderDates(false);
-    expect(container).toMatchSnapshot();
-  })
-})
-
 const renderState = {
   EMPTY: 0,
   JUST_DATA: 1,
-  WITH_DATE: 2,
 }
 
 const renderParameters = async (rs) => {
@@ -94,27 +29,6 @@ const renderParameters = async (rs) => {
 
     return container;
   }
-
-  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
-  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
-
-  const [start, handleStartChange] = [date, (_)=>{}];
-  const [end, handleEndChange] = [date, (_)=>{}];
-
-  if (rs===renderState.WITH_DATE) {
-    const {container} = render(<Parameters
-        params={params}
-        data={data}
-        handleDataChange={handleDataChange}
-        start={start}
-        handleStartChange={handleStartChange}
-        end={end}
-        handleEndChange={handleEndChange}
-      />
-    )
-
-    return container
-  }
 }
 
 
@@ -129,12 +43,7 @@ describe("Params", () => {
   })
 
   it("Render just data", async () => {
-    const container = await renderDates(renderState.JUST_DATA);
+    const container = await renderParameters(renderState.JUST_DATA);
-    expect(container).toMatchSnapshot();
-  })
-
-  it("Render with date", async () => {
-    const container = await renderDates(renderState.WITH_DATE);
     expect(container).toMatchSnapshot();
   })
 })

src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap

@@ -1,24 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dates Render empty 1`] = `<div />`;
+exports[`Params Render empty 1`] = `<div />`;
 
-exports[`Dates Render filled 1`] = `
+exports[`Params Render just data 1`] = `
 <div>
-  <div>
+  <div
-    <div>
+    class="MuiFormControl-root makeStyles-formControl-0"
-      1318258080000
+  >
-    </div>
+    <div
-    <div>
+      style="width: 300px; margin-top: 1em;"
-      1318258080000
+    >
-      , 
+      <div>
-      1318258080000
+        val.toString()
+      </div>
     </div>
   </div>
 </div>
 `;
-
-exports[`Params Render empty 1`] = `<div />`;
-
-exports[`Params Render just data 1`] = `<div />`;
-
-exports[`Params Render with date 1`] = `<div />`;

src/components/Fleets/Add/__snapshots__/index.test.jsx.snap

@@ -248,7 +248,7 @@ exports[`FleetAddForm Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -282,7 +282,7 @@ exports[`FleetAddForm Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label

src/components/Fleets/Add/index.jsx

@@ -129,7 +129,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>

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

@@ -153,7 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -172,7 +172,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -190,7 +190,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -209,7 +209,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -227,7 +227,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -246,7 +246,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
               </tbody>

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

@@ -134,14 +134,14 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <div>
+          <span key={`delete-${action.id}-of-div`}>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => onDelete(action.id)}>
                 {action.icon}
               </Link>
             </Tooltip>
             <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
-          </div>
+          </span>
 
         );
       }

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

@@ -152,7 +152,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -171,7 +171,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
             <tr
@@ -189,7 +189,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -208,7 +208,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
             <tr
@@ -226,7 +226,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -245,7 +245,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
           </tbody>

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

@@ -304,7 +304,7 @@ exports[`FleetTable Render 1`] = `
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
-                      warn
+                      warning
                     </td>
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"

src/components/Fleets/Update/__snapshots__/index.test.jsx.snap

@@ -248,7 +248,7 @@ exports[`FleetUpdate Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -282,7 +282,7 @@ exports[`FleetUpdate Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label

src/components/Fleets/Update/index.jsx

@@ -167,7 +167,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel
             value="critical"

src/components/Manifest/List/index.jsx

@@ -190,13 +190,13 @@ const MainForm = () => {
         );
       } else {
         return (
-          <div>
+          <span key={`delete-${action.id}-of-key`}>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => setDeletePopup(action.id, row)}>
                 {action.icon}
               </Link>
             </Tooltip>
-          </div>
+          </span>
         );
       }
     });

src/components/VehicleMap/index.jsx

@@ -74,12 +74,16 @@ const Component = () => {
 
   useEffect(() => {
     if (!token) return;
-    if (markers.length > 0) {
+
-      const vins = markers.map((marker) => marker[2]);
+    const vins = markers
-      getConnections(vins, token).then((conns) => {
+      .filter((marker) => marker[2].length > 0)
-        setConnections(conns);
+      .map((marker) => marker[2]);
-      });
+
-    }
+    if (vins.length === 0) return;
+
+    getConnections(vins, token).then((conns) => {
+      setConnections(conns);
+    });
     // eslint-disable-next-line
   }, [markers, token]);
 

src/services/__mocks__/fleetsAPI.js

@@ -22,7 +22,7 @@ const fleets = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
     vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
   },

src/services/__mocks__/vehiclesAPI.js

@@ -50,6 +50,14 @@ const ecusData = [
   },
 ];
 
+const signals = {data:[
+  {
+    timestamp: "2021-07-14T20:09:40.98187Z",
+    name: "signal",
+    value: 123
+  },
+]};
+
 const vehiclesAPI = {
   addVehicle: async (vehicle) => {
     data.push(vehicle);
@@ -105,6 +113,9 @@ const vehiclesAPI = {
     const index = data.findIndex(element => element.vin === vin);
     if (index >= 0) data[index] = vehicle;
     return vehicle;
+  },
+  getCANSignals: async (vin, vehicle) => {
+   return signals;
   }
 };