CEC-1450 Show Trex version (#169)

* CEC-1450 Show Trex version

* Code smells

* Clean up

* Fixes

* Optimize test

src/components/Cars/Status/index.jsx

@@ -7,15 +7,12 @@ import { Box, Tab, Tabs } from "@material-ui/core";
 import CarDetailsTab from "./DetailsTab";
 import CarUpdatesTab from "./CarUpdatesTab";
 import CANFiltersTab from "./CANFiltersTab";
+import DigitalTwinTab from "./DigitalTwinTab";
 import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 
-const tabHashes = [
-  "details",
-  "updates",
-  "filters"
-]
+const tabHashes = ["details", "updates", "filters"];
 
 const CarStatus = () => {
   const { vin } = useParams();
@@ -25,8 +22,8 @@ const CarStatus = () => {
   const [tabIndex, setTabIndex] = React.useState(0);
 
   useEffect(() => {
-    const key = hash.replace("#", "")
-    const index = tabHashes.findIndex(element => element === key);
+    const key = hash.replace("#", "");
+    const index = tabHashes.findIndex((element) => element === key);
     if (index >= 0) setTabIndex(index);
   }, [hash]);
 
@@ -51,11 +48,20 @@ const CarStatus = () => {
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
-      <Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
+      <Box
+        className={classes.tableToolbar}
+        sx={{ borderBottom: 1, borderColor: "divider" }}
+      >
+        <Tabs
+          value={tabIndex}
+          onChange={handleTabChange}
+          aria-label="car tabs"
+          indicatorColor="secondary"
+        >
           <Tab label="Details" {...tabProps(0)} />
           <Tab label="Car Updates" {...tabProps(1)} />
           <Tab label="CAN Filters" {...tabProps(2)} />
+          <Tab label="Digital Twin" {...tabProps(3)} />
         </Tabs>
       </Box>
 
@@ -70,14 +76,18 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={2}>
         <CANFiltersTab />
       </TabPanel>
-    </div >
+
+      <TabPanel value={tabIndex} index={3}>
+        <DigitalTwinTab vin={vin} />
+      </TabPanel>
+    </div>
   );
 };
 
 function tabProps(index) {
   return {
     id: `tab-${index}`,
-    "aria-controls": `tabpanel-${index}`
+    "aria-controls": `tabpanel-${index}`,
   };
 }