CEC-3579 - Debug Mask on vehicle updates (#271)

* CEC-3579 - Add debug_mask to config message

* CEC-3579 - Debug Mask in vehicle update

* fix

* fix snapshots

* more fixes

* make debug mask a simple string

src/components/Cars/Update/index.jsx

@@ -46,7 +46,10 @@ const MainForm = () => {
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
   const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
   const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
-  const [debugMask, setDebugMask] = useState(0);
+  const debugMaskEl = useRef(null);
+
+  const ENV = process.env.REACT_APP_ENV;
+  const showDebugMask = (ENV === 'local' || ENV === 'dev' || ENV === 'stg')
 
   useEffect(() => {
     setTitle("Update Vehicle");
@@ -95,7 +98,9 @@ const MainForm = () => {
       setMaxDiskBufferSize(vehicle.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
     }
 
-    setDebugMask(vehicle.debug_mask ?? debugMask);
+    if (showDebugMask) {
+      debugMaskEl.current.value = vehicle.debug_mask ?? ""
+    }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vehicle]);
@@ -120,10 +125,6 @@ const MainForm = () => {
     setMaxDiskBufferSize(event.target.value);
   }
 
-  const onDebugMaskChange = (event) => {
-    setDebugMask(event.target.value);
-  }
-
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
@@ -145,7 +146,7 @@ const MainForm = () => {
           max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
         },
-        debug_mask: parseInt(debugMask)
+        debug_mask: debugMaskEl.current.value
       };
 
       const result = await updateVehicle(vin, formData, token);
@@ -388,17 +389,24 @@ const MainForm = () => {
           required
           fullWidth
         />
-        <TextField
-          id="debug_mask"
-          name="debug_mask"
-          label='Debug Mask'
-          value={debugMask}
-          onChange={onDebugMaskChange}
-          variant="outlined"
-          margin="normal"
-          type="number"
-          fullWidth
-        />
+        {showDebugMask && (
+          <TextField
+            id="debug_mask"
+            name="debug_mask"
+            label="DebugMask"
+            InputLabelProps={{
+              shrink: true
+            }}
+            defaultValue=""
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "255",
+            }}
+            fullWidth
+            inputRef={debugMaskEl}
+          />
+        )}
         <Button
           type="submit"
           disabled={busy}