CEC-4517 validate T.Rex version (#375)

* CEC-4517 validate T.Rex version

* suggestion + proper semver compare

* use semver-compare package

* use optional chaining

package.json

@@ -36,6 +36,7 @@
     "react-router-dom": "^5.3.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.0",
+    "semver-compare": "^1.0.0",
     "usehooks-ts": "^2.7.1",
     "web-vitals": "^2.1.4",
     "webpack": "^5.74.0"

src/components/Controls/SendDiagnosticCommand/index.jsx

@@ -5,6 +5,7 @@ import Checkbox from '@mui/material/Checkbox';
 import React, { useEffect, useState } from "react";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { logger } from "../../../services/monitoring";
+import cmp from "semver-compare";
 
 
 import {
@@ -48,6 +49,15 @@ const SendDiagnosticCommand = ({ vin, token, classes }) => {
     }
   };
 
+  const isOnline = () => {
+    return carState && carState?.online;
+  };
+
+  const TREX_MIN_VER = "1.1.108";
+  const isTBOXResetSupported = () => {
+    return !carState?.trex_version ? true : cmp(carState.trex_version, TREX_MIN_VER) === 1;
+  };
+
   const clickHandler = async (_) => {
     try {
       await sendDiagnosticCommand([vin], { body: { command: currentCommand, ecus: currentECUs } }, token);
@@ -103,15 +113,21 @@ const SendDiagnosticCommand = ({ vin, token, classes }) => {
         color="primary"
         className={classes.submit}
         onClick={clickHandler}
-        disabled={!carState ? true : !carState.online}
+        disabled={!isOnline() || !isTBOXResetSupported()}
       >
         Send
       </Button>
       <div>
         <b>
-          {carState && carState.online ? "ONLINE" : "OFFLINE"}
+          {isOnline() ? "ONLINE" : "OFFLINE"}
         </b>
       </div>
+      <div>
+        <b>
+          {!isTBOXResetSupported() ? `TBOX Reset supported from ${TREX_MIN_VER}, current version ${carState.trex_version}` : ""}
+        </b>
+      </div>
+
     </div >
   );
 };