Merge branch 'release/0.0.3'

src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap

@@ -22,53 +22,6 @@ exports[`CANFiltersAdd Render 1`] = `
               class="makeStyles-form-0"
               novalidate=""
             >
-              <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-              >
-                <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                  data-shrink="false"
-                  for="vin"
-                  id="vin-label"
-                >
-                  VIN
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
-                </label>
-                <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="vin"
-                    maxlength="255"
-                    name="vin"
-                    readonly=""
-                    required=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0"
-                    >
-                      <span>
-                        VIN
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
@@ -152,6 +105,43 @@ exports[`CANFiltersAdd Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                  data-shrink="false"
+                  for="edgeMask"
+                  id="edgeMask-label"
+                >
+                  EdgeMask (hex representation)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="edgeMask"
+                    maxlength="255"
+                    name="edgeMask"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        EdgeMask (hex representation)
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"

src/components/CANFilter/Add/index.jsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
 import { useLocation } from "react-router-dom";
-import { Button, TextField } from "@material-ui/core";
 
 import {
   CANFiltersProvider,
@@ -11,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
+import {CANFilterFragment} from "../../CANFilterEditFragment";
 
 
 const MainForm = () => {
@@ -19,8 +19,9 @@ const MainForm = () => {
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
-  const canIdEl = useRef(null);
+  const [canId, setCanId] = useState(null);
-  const intervalEl = useRef(null);
+  const [interval, setInterval] = useState("");
+  const [edgeMask, setEdgeMask] = useState("");
   const queries = new URLSearchParams(useLocation().search);
   const vin = queries.get("vin") ?? ""
 
@@ -42,8 +43,9 @@ const MainForm = () => {
     try {
       event.preventDefault();
       const formData = {
-        can_id: canIdEl.current.value,
+        can_id: canId,
-        interval: parseInt(intervalEl.current.value)
+        interval: (interval == null || interval === "0") ? null:interval,
+        edge_mask: edgeMask === "" ? null : edgeMask,
       };
       const result = await addFilter(vin, formData, token);
       if (!result || result.error) return;
@@ -63,56 +65,17 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
+        <CANFilterFragment
-          id="vin"
+          vin={vin}
-          name="vin"
+          canId={canId}
-          label="VIN"
+          setCanId={setCanId}
-          variant="outlined"
+          interval={interval}
-          margin="normal"
+          setInterval={setInterval}
-          inputProps={{
+          edgeMask={edgeMask}
-            maxLength: "255",
+          setEdgeMask={setEdgeMask}
-            readOnly: true,
+          busy={busy}
-          }}
+          onSubmit={onSubmit}
-          value={vin}
-          required
-          fullWidth
         />
-        <TextField
-          id="canId"
-          name="canId"
-          label="CAN ID"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={canIdEl}
-        />
-        <TextField
-          id="interval"
-          name="interval"
-          label="Interval (ms)"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          fullWidth
-          inputRef={intervalEl}
-        />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          Submit
-        </Button>
       </form>
     </div>
   );

src/components/CANFilter/Table/index.jsx

@@ -137,9 +137,16 @@ const MainForm = ({ vin }) => {
 
     let actions = [];
     if (hasRole(groups, Permissions.FiskerCreate, providers)) {
+      let link = `/filter-update?vin=${vin}&can_id=${row.can_id}`;
+      if (row.interval || row.interval===0) {
+        link = link + `&interval=${row.interval}`
+      }
+      if (row.edge_mask) {
+        link = link + `&edge_mask=${row.edge_mask}`
+      }
       actions.push({
         tip: `Update "${row.can_id}"`,
-        link: `/filter-update?vin=${vin}&can_id=${row.can_id}&interval=${row.interval}`,
+        link,
         icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
       });
     }
@@ -195,7 +202,7 @@ const MainForm = ({ vin }) => {
         />
         <TableBody>
           {filters.map((row) => (
-            <TableRow key={row.can_id}>
+            <TableRow key={row.fleet?row.can_id+row.fleet:row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
               <TableCell align="center">

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

@@ -26,54 +26,7 @@ exports[`CANFiltersUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
-                  data-shrink="false"
-                  for="vin"
-                  id="vin-label"
-                >
-                  VIN
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
-                </label>
-                <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="vin"
-                    maxlength="255"
-                    name="vin"
-                    readonly=""
-                    required=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0"
-                    >
-                      <span>
-                        VIN
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-              >
-                <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="canId"
                   id="canId-label"
@@ -88,15 +41,15 @@ exports[`CANFiltersUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    disabled=""
                     id="canId"
                     maxlength="255"
                     name="canId"
-                    readonly=""
                     required=""
                     type="text"
                     value=""
@@ -120,19 +73,12 @@ exports[`CANFiltersUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
                   data-shrink="false"
                   for="interval"
                   id="interval-label"
                 >
                   Interval (ms)
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
                 </label>
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -143,7 +89,6 @@ exports[`CANFiltersUpdate Render 1`] = `
                     id="interval"
                     maxlength="255"
                     name="interval"
-                    required=""
                     type="text"
                     value=""
                   />
@@ -156,7 +101,43 @@ exports[`CANFiltersUpdate Render 1`] = `
                     >
                       <span>
                         Interval (ms)
-                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                  data-shrink="false"
+                  for="edgeMask"
+                  id="edgeMask-label"
+                >
+                  EdgeMask (hex representation)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="edgeMask"
+                    maxlength="255"
+                    name="edgeMask"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        EdgeMask (hex representation)
                       </span>
                     </legend>
                   </fieldset>

src/components/CANFilter/Update/index.jsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
 import { useLocation } from "react-router-dom";
-import { Button, TextField } from "@material-ui/core";
 
 import {
   CANFiltersProvider,
@@ -11,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
+import {CANFilterFragment} from "../../CANFilterEditFragment";
 
 
 const MainForm = () => {
@@ -19,12 +19,12 @@ const MainForm = () => {
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
-  const intervalEl = useRef(null);
   const queries = new URLSearchParams(useLocation().search);
   const vin = queries.get("vin") ?? ""
   const canID = queries.get("can_id") ?? ""
-  const interval = queries.get("interval") ?? ""
+
-  // const edge_mask = queries.get("edge_mask") ?? ""
+  const [interval, setInterval] = useState(queries.get("interval") ?? "");
+  const [edgeMask, setEdgeMask] = useState(queries.get("edge_mask") ?? "");
 
   useEffect(() => {
     setTitle("Update CAN Filter");
@@ -45,7 +45,8 @@ const MainForm = () => {
       event.preventDefault();
       const formData = {
         can_id: canID,
-        interval: parseInt(intervalEl.current.value)
+        interval: interval,
+        edge_mask: edgeMask,
       };
       const result = await updateFilter(vin, canID, formData, token);
       if (!result || result.error) return;
@@ -65,59 +66,16 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
+        <CANFilterFragment
-          id="vin"
+          vin={vin}
-          name="vin"
+          canId={canID}
-          label="VIN"
+          interval={interval}
-          variant="outlined"
+          setInterval={setInterval}
-          margin="normal"
+          edgeMask={edgeMask}
-          inputProps={{
+          setEdgeMask={setEdgeMask}
-            maxLength: "255",
+          busy={busy}
-            readOnly: true,
+          onSubmit={onSubmit}
-          }}
-          value={vin}
-          required
-          fullWidth
         />
-        <TextField
-          id="canId"
-          name="canId"
-          label="CAN ID"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-            readOnly: true,
-          }}
-          value={canID}
-          required
-          fullWidth
-        />
-        <TextField
-          id="interval"
-          name="interval"
-          label="Interval (ms)"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          defaultValue={interval}
-          required
-          fullWidth
-          inputRef={intervalEl}
-        />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          Submit
-        </Button>
       </form>
     </div>
   );

src/components/CANFilterEditFragment/index.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import {Button, TextField} from "@material-ui/core";
+import useStyles from "../useStyles";
+
+export const CANFilterFragment = (
+  {
+    vin,
+    fleet,
+    canId,
+    setCanId,
+    edgeMask,
+    setEdgeMask,
+    interval,
+    setInterval,
+    busy,
+    onSubmit,
+  }) => {
+
+  const classes = useStyles();
+
+  const FirstField = () => {
+    if (vin) {
+      return <TextField
+        id="vin"
+        name="vin"
+        label="VIN"
+        variant="outlined"
+        margin="normal"
+        inputProps={{
+          maxLength: "255",
+          readOnly: true,
+        }}
+        value={vin}
+        required
+        fullWidth
+      />
+    }
+    if (fleet) {
+      return <TextField
+        id="name"
+        name="name"
+        label="Fleet Name"
+        variant="outlined"
+        margin="normal"
+        inputProps={{
+          maxLength: "255",
+          readOnly: true,
+        }}
+        value={fleet}
+        required
+        fullWidth
+      />
+    }
+  }
+
+  const canProps = setCanId ? {
+    value: canId,
+    onChange: (event) => setCanId(event.target.value)
+  } : {
+    value: canId,
+    disabled: true,
+  }
+
+  return (
+    <React.Fragment>
+      {FirstField()}
+      <TextField
+        id="canId"
+        name="canId"
+        label="CAN ID"
+        variant="outlined"
+        margin="normal"
+        inputProps={{
+          maxLength: "255",
+        }}
+        required
+        fullWidth
+        {...canProps}
+      />
+      <TextField
+        id="interval"
+        name="interval"
+        label="Interval (ms)"
+        variant="outlined"
+        margin="normal"
+        inputProps={{
+          maxLength: "255",
+        }}
+        fullWidth
+        value={interval}
+        disabled={!(edgeMask == null || edgeMask === "")}
+        onChange={async (event) => setInterval(event.target.value)}
+      />
+      <TextField
+        id="edgeMask"
+        name="edgeMask"
+        label="EdgeMask (hex representation)"
+        variant="outlined"
+        margin="normal"
+        inputProps={{
+          maxLength: "255",
+        }}
+        fullWidth
+        value={edgeMask}
+        disabled={!(interval == null || interval === "" || interval === '0' || interval === 0)}
+        onChange={async (event) => setEdgeMask(event.target.value)}
+      />
+      <Button
+        type="submit"
+        disabled={busy}
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={onSubmit}
+      >
+        Submit
+      </Button>
+   </React.Fragment>
+  )
+}
+

src/components/Contexts/CANFiltersContext.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import api from "../../services/CANFiltersAPI";
+import { validateCANID, validateFilter } from "../../utils/validationSupplier";
 
 const CANFiltersContext = React.createContext();
 
@@ -50,7 +51,6 @@ export const CANFiltersProvider = ({ children }) => {
       setBusy(true);
 
       validateVIN(vin);
-      validateID(canID);
       validateFilter(filter);
 
       const result = await api.updateFilter(vin, canID, filter, token);
@@ -68,7 +68,7 @@ export const CANFiltersProvider = ({ children }) => {
       setBusy(true);
 
       validateVIN(vin);
-      validateID(canID);
+      validateCANID(canID);
 
       const result = await api.deleteFilter(vin, canID, token);
       if (result.error) {
@@ -104,24 +104,6 @@ const validateVIN = (vin) => {
   if (vin == null || vin.length !== 17) {
     throw new Error("Invalid VIN");
   }
-}
-
-const validateID = (can_id) => {
-  if (can_id == null || can_id === "") {
-    throw new Error("CAN ID required");
-  }
-}
-
-const validateFilter = (filter) => {
-  if (filter == null) {
-    throw new Error("No filter data");
-  }
-
-  validateID(filter.can_id)
-
-  if (filter.interval == null) {
-    throw new Error("Interval required");
-  }
 };
 
 export const useCANFiltersContext = () => useContext(CANFiltersContext);

src/components/Contexts/CANFiltersContext.test.jsx

@@ -118,7 +118,7 @@ describe("CANFiltersContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );
-      checkBaseResults("CAN ID required", "false");
+      checkBaseResults("Invalid CAN ID", "false");
     });
 
     it("addFilter", async () => {
@@ -195,7 +195,7 @@ describe("CANFiltersContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );
-      checkBaseResults("CAN ID required", "false");
+      checkBaseResults("Invalid CAN ID", "false");
     });
 
     it("updateFilter", async () => {
@@ -228,10 +228,6 @@ describe("CANFiltersContext", () => {
               data-testid="deleteFilterNull"
               onClick={() => deleteF(null)}
             />
-            <button
-              data-testid="deleteFilterNonexistent"
-              onClick={() => deleteF(-1)}
-            />
             <button data-testid="deleteFilter" onClick={() => deleteF(123)} />
           </>
         );
@@ -258,15 +254,7 @@ describe("CANFiltersContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toEqual("false")
       );
-      checkBaseResults("CAN ID required", "false");
+      checkBaseResults("Invalid CAN ID", "false");
-    });
-
-    it("deleteFilterNonexistent", async () => {
-      fireEvent.click(screen.getByTestId("deleteFilterNonexistent"));
-      await waitFor(() =>
-        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
-      );
-      checkBaseResults("", "false");
     });
 
     it("deleteFilter", async () => {

src/components/Contexts/FleetContext.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import api from "../../services/fleetsAPI";
+import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
 
 const FleetContext = React.createContext();
 
@@ -200,7 +201,6 @@ export const FleetProvider = ({ children }) => {
       setBusy(true);
 
       validateFleetName(name);
-      validateCANID(can_id);
       validateFilter(filter);
 
       const result = await api.updateFleetCANFilter(name, can_id, filter, token);
@@ -278,30 +278,6 @@ const validateFleetName = (name) => {
   if (name == null || !/^[\w-]+$/.test(name)) {
     throw new Error("Invalid name");
   }
-}
+};
-
-const validateVIN = (vin) => {
-  if (vin == null || vin.length !== 17) {
-    throw new Error("Invalid VIN");
-  }
-}
-
-const validateFilter = (filter) => {
-  if (filter == null) {
-    throw new Error("No CAN filter data");
-  }
-
-  validateCANID(filter.can_id)
-
-  if (filter.interval == null || !/^\d+$/.test(filter.interval)) {
-    throw new Error("Invalid interval");
-  }
-}
-
-const validateCANID = (can_id) => {
-  if (can_id == null || !/^\d+(-\d+)?$/.test(can_id)) {
-    throw new Error("Invalid CAN ID");
-  }
-}
 
 export const useFleetContext = () => useContext(FleetContext);

src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap

@@ -152,6 +152,43 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                  data-shrink="false"
+                  for="edgeMask"
+                  id="edgeMask-label"
+                >
+                  EdgeMask (hex representation)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="edgeMask"
+                    maxlength="255"
+                    name="edgeMask"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        EdgeMask (hex representation)
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"

src/components/Fleets/Status/CANFilters/Add/index.jsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
-import { Button, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
 
 import { useUserContext } from "../../../../Contexts/UserContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
 import useStyles from "../../../../useStyles";
 import { logger } from "../../../../../services/monitoring";
+import { CANFilterFragment } from "../../../../CANFilterEditFragment";
 
 
 const MainForm = () => {
@@ -15,8 +16,9 @@ const MainForm = () => {
   const { addFleetCANFilter, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
   const classes = useStyles();
-  const canIdEl = useRef(null);
+  const [canId, setCanId] = useState(null);
-  const intervalEl = useRef(null);
+  const [interval, setInterval] = useState("");
+  const [edgeMask, setEdgeMask] = useState("");
   const [redirect, setRedirect] = useState(null);
 
   useEffect(() => {
@@ -41,9 +43,11 @@ const MainForm = () => {
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
+
       const formData = {
-        can_id: canIdEl.current.value,
+        can_id: canId,
-        interval: parseInt(intervalEl.current.value)
+        interval: (interval == null || interval === "") ? null : interval,
+        edge_mask: edgeMask === "" ? null : edgeMask,
       };
       const result = await addFleetCANFilter(name, formData, token);
       if (!result || result.error) return;
@@ -77,42 +81,17 @@ const MainForm = () => {
           required
           fullWidth
         />
-        <TextField
+        <CANFilterFragment
-          id="canId"
+          fleet={name}
-          name="canId"
+          canId={canId}
-          label="CAN ID"
+          setCanId={setCanId}
-          variant="outlined"
+          interval={interval}
-          margin="normal"
+          setInterval={setInterval}
-          inputProps={{
+          edgeMask={edgeMask}
-            maxLength: "255",
+          setEdgeMask={setEdgeMask}
-          }}
+          busy={busy}
-          required
+          onSubmit={onSubmit}
-          fullWidth
-          inputRef={canIdEl}
         />
-        <TextField
-          id="interval"
-          name="interval"
-          label="Interval (ms)"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          fullWidth
-          inputRef={intervalEl}
-        />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {busy ? "Submitting..." : "Submit"}
-        </Button>
       </form>
     </div>
   );

src/components/Fleets/Status/CANFilters/Table/index.jsx

@@ -131,10 +131,18 @@ const MainForm = ({ name }) => {
   const Actions = (row) => {
     let actions = [];
     if (hasRole(groups, Permissions.FiskerCreate, providers)) {
+      let link = `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}`;
+      if (row.interval || row.interval===0) {
+        link = link + `&interval=${row.interval}`
+      }
+      if (row.edge_mask) {
+        link = link + `&edge_mask=${row.edge_mask}`
+      }
+
       actions.push({
         tip: `Update "${row.can_id}"`,
-        link: `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}&interval=${row.interval}`,
+        link,
-        icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
+        icon: <EditIcon aria-label={`Update ${row.can_id}`} />
       });
     }
     if (hasRole(groups, Permissions.FiskerDelete, providers)) {

src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap

@@ -26,54 +26,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
-                  data-shrink="false"
-                  for="name"
-                  id="name-label"
-                >
-                  Fleet Name
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
-                </label>
-                <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="name"
-                    maxlength="255"
-                    name="name"
-                    readonly=""
-                    required=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0"
-                    >
-                      <span>
-                        Fleet Name
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-              >
-                <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="canId"
                   id="canId-label"
@@ -88,15 +41,15 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    disabled=""
                     id="canId"
                     maxlength="255"
                     name="canId"
-                    readonly=""
                     required=""
                     type="text"
                     value=""
@@ -120,19 +73,12 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
                   data-shrink="false"
                   for="interval"
                   id="interval-label"
                 >
                   Interval (ms)
-                  <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                  >
-                     
-                    *
-                  </span>
                 </label>
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -143,7 +89,6 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                     id="interval"
                     maxlength="255"
                     name="interval"
-                    required=""
                     type="text"
                     value=""
                   />
@@ -156,7 +101,43 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                     >
                       <span>
                         Interval (ms)
-                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                  data-shrink="false"
+                  for="edgeMask"
+                  id="edgeMask-label"
+                >
+                  EdgeMask (hex representation)
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="edgeMask"
+                    maxlength="255"
+                    name="edgeMask"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        EdgeMask (hex representation)
                       </span>
                     </legend>
                   </fieldset>

src/components/Fleets/Status/CANFilters/Update/index.jsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
 import { useLocation } from "react-router-dom";
-import { Button, TextField } from "@material-ui/core";
 
 import { useUserContext } from "../../../../Contexts/UserContext";
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
 import useStyles from "../../../../useStyles";
 import { logger } from "../../../../../services/monitoring";
+import {CANFilterFragment} from "../../../../CANFilterEditFragment";
 
 
 const MainForm = () => {
@@ -16,11 +16,12 @@ const MainForm = () => {
   const { updateFleetCANFilter, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
   const classes = useStyles();
-  const intervalEl = useRef(null);
-  const [redirect, setRedirect] = useState(null);
   const queries = new URLSearchParams(useLocation().search);
   const canID = queries.get("can_id") ?? "";
-  const interval = queries.get("interval") ?? "";
+  const [interval, setInterval] = useState(queries.get("interval") ?? "");
+  const [edgeMask, setEdgeMask] = useState(queries.get("edge_mask") ?? "")
+  const [redirect, setRedirect] = useState(null);
+
 
   useEffect(() => {
     const title = "Update CAN Filter"
@@ -46,7 +47,8 @@ const MainForm = () => {
       event.preventDefault();
       const formData = {
         can_id: canID,
-        interval: parseInt(intervalEl.current.value)
+        interval: (interval == null || interval === "") ? null : interval,
+        edge_mask: edgeMask === "" ? null : edgeMask,
       };
       const result = await updateFleetCANFilter(name, canID, formData, token);
       if (!result || result.error) return;
@@ -66,59 +68,16 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
+        <CANFilterFragment
-          id="name"
+          fleet={name}
-          name="name"
+          canId={canID}
-          label="Fleet Name"
+          interval={interval}
-          variant="outlined"
+          setInterval={setInterval}
-          margin="normal"
+          edgeMask={edgeMask}
-          inputProps={{
+          setEdgeMask={setEdgeMask}
-            maxLength: "255",
+          busy={busy}
-            readOnly: true,
+          onSubmit={onSubmit}
-          }}
-          value={name}
-          required
-          fullWidth
         />
-        <TextField
-          id="canId"
-          name="canId"
-          label="CAN ID"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-            readOnly: true,
-          }}
-          value={canID}
-          required
-          fullWidth
-        />
-        <TextField
-          id="interval"
-          name="interval"
-          label="Interval (ms)"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          defaultValue={interval}
-          required
-          fullWidth
-          inputRef={intervalEl}
-        />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {busy ? "Submitting..." : "Submit"}
-        </Button>
       </form>
     </div>
   );

src/utils/validationSupplier.js

@@ -35,3 +35,56 @@ export const validateSupplier = (supplier) => {
 export const validateEmail = (email) => {
   if (!validator.validate(email)) throw new Error("invalid email");
 };
+
+export const validateInterval = (interval) => {
+  if (!/^\d+$/.test(interval)) {
+    throw new Error("Interval must be number")
+  }
+}
+
+export const validateEdgeMask = (edgeMask) => {
+  if (!/^[a-fA-F0-9]+$/.test(edgeMask)) {
+    throw new Error("Edge mask must be hex");
+  }
+}
+
+export const validateVIN = (vin) => {
+  if (vin == null || vin.length !== 17) {
+    throw new Error("Invalid VIN");
+  }
+}
+
+export const validateCANID = (can_id) => {
+  if (can_id == null || can_id === "" || !/^\d+(-\d+)?$/.test(can_id)) {
+    throw new Error("Invalid CAN ID");
+  }
+}
+
+export const validateFilter = (filter) => {
+  if (filter == null) {
+    throw new Error("No filter data");
+  }
+
+  validateCANID(filter.can_id)
+
+  const oneOf = (filter.interval || filter.edge_mask) && !(filter.interval && filter.edge_mask)
+  if (!oneOf) {
+    throw new Error("Only interval or edge mask must be defined")
+  }
+
+  if (filter.interval) {
+    validateInterval(filter.interval)
+    filter.interval = parseInt(filter.interval)
+    delete filter.edge_mask;
+  }
+
+  if (filter.edge_mask && filter.edge_mask.length > 0) {
+    validateEdgeMask(filter.edge_mask)
+    delete filter.interval;
+
+  // if the length is odd, add a leading zero
+  if (filter.edge_mask.length % 2 === 1) filter.edge_mask = "0"+filter.edge_mask;
+  } else {
+    filter.edge_mask = undefined;
+  }
+};