CEC-3577: fetch T.Rex log from the cloud (#283)

* CEC-3577: fetch T.Rex log from the cloud

* tabs?

* CSS

* smells

* fix smells and warnings

* suggestions

src/components/Cars/Status/TRexLogsTab.jsx

@@ -0,0 +1,36 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
+import { useParams } from "react-router";
+
+import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import TRexLogsTable from "../../Controls/TRexLogs";
+import useStyles from "../../useStyles";
+
+const MainForm = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" className={classes.labelInline}>
+        T.Rex Logs
+      </Typography>
+      <TRexLogsTable vin={vin} token={token} classes={classes} />
+    </div>
+  );
+};
+
+const TRexLogsTab = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default TRexLogsTab;

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

@@ -135,7 +135,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      ECUs
+                      T.Rex logs
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -153,7 +153,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      Remote Commands
+                      ECUs
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -167,6 +167,24 @@ exports[`CarStatus Render 1`] = `
                     role="tab"
                     tabindex="-1"
                     type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-8"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-8"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="MuiTab-wrapper"
@@ -352,6 +370,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-7"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-8"
+            hidden=""
+            id="tabpanel-8"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -17,6 +17,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
+import TRexLogsTab from "./TRexLogsTab"
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -42,6 +43,10 @@ const TabViews = [
     label: "CAN Signals",
     component: CANSignalsTab,
   },
+  {
+    label: "T.Rex logs",
+    component: TRexLogsTab,
+  },
   {
     label: "ECUs",
     component: ECUsTab,