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

.env.cec-euprd

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cec-euprd.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/certificate
+REACT_APP_ENV=cec-euprd
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cec-euprd.fiskerinc.com/ota_update

.env.cec-prd

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cec-prd.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/certificate
+REACT_APP_ENV=cec-prd
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/ota_update

.env.dev

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.cloud.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/certificate
+REACT_APP_ENV=dev
 REACT_APP_MAGNA_PROVIDER=Fisker-QA
 REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
 REACT_APP_OTA_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update

.env.local

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
+REACT_APP_ENV=local
 REACT_APP_MAGNA_PROVIDER=Fisker-QA
 REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
 REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update

.env.prd

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cloud.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://gw.cloud.fiskerinc.com/certificate
+REACT_APP_ENV=prd
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update

.env.stg

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/certificate
+REACT_APP_ENV=stg
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update

.env.template

@@ -1,6 +1,7 @@
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
+REACT_APP_ENV=local
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
 REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update

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

@@ -9958,6 +9958,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                             : 
                             3
                           </p>
+                        </div>
+                        <div
+                          class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                        >
                           <p>
                             <b>
                               DebugMask

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

@@ -136,6 +136,10 @@ exports[`VehicleDetailsTab Render 1`] = `
                   : 
                   3
                 </p>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
                 <p>
                   <b>
                     DebugMask

src/components/Cars/Status/Details/index.jsx

@@ -32,6 +32,9 @@ const MainForm = ({ vin }) => {
     providers,
   } = useUserContext();
 
+  const ENV = process.env.REACT_APP_ENV;
+  const showDebugMask = (ENV === 'local' || ENV === 'dev' || ENV === 'stg')
+
   useEffect(() => {
     (async () => {
       try {
@@ -118,6 +121,10 @@ const MainForm = ({ vin }) => {
             <p>
               <b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}
             </p>
+          </Grid>
+        )}
+        {showDebugMask && (
+          <Grid item md={12} className={classes.textCenterAlign}>
             <p>
               <b>DebugMask</b>: {vehicle.debug_mask}
             </p>

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

@@ -144,6 +144,10 @@ exports[`DetailsTab Render 1`] = `
                     : 
                     3
                   </p>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                >
                   <p>
                     <b>
                       DebugMask

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

@@ -272,6 +272,16 @@ exports[`CarStatus Render 1`] = `
                         : 
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                    >
+                      <p>
+                        <b>
+                          DebugMask
+                        </b>
+                        : 
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                     >

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

@@ -935,7 +935,7 @@ exports[`VehicleUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
                   data-shrink="true"
                   for="debug_mask"
                   id="debug_mask-label"
@@ -949,9 +949,10 @@ exports[`VehicleUpdate Render 1`] = `
                     aria-invalid="false"
                     class="MuiInputBase-input MuiOutlinedInput-input"
                     id="debug_mask"
+                    maxlength="255"
                     name="debug_mask"
-                    type="number"
+                    type="text"
-                    value="0"
+                    value=""
                   />
                   <fieldset
                     aria-hidden="true"

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
         />
+        {showDebugMask && (
           <TextField
             id="debug_mask"
             name="debug_mask"
-          label='Debug Mask'
+            label="DebugMask"
-          value={debugMask}
+            InputLabelProps={{
-          onChange={onDebugMaskChange}
+              shrink: true
+            }}
+            defaultValue=""
             variant="outlined"
             margin="normal"
-          type="number"
+            inputProps={{
+              maxLength: "255",
+            }}
             fullWidth
+            inputRef={debugMaskEl}
           />
+        )}
         <Button
           type="submit"
           disabled={busy}