Merge branch 'develop' into release/0.0.3

.env.dev

@@ -2,4 +2,4 @@ REACT_APP_CERT_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/certificate
 REACT_APP_AUTH_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com
+REACT_APP_SUPERSET_URL=https://superset-dev.cloud.fiskerinc.com/superset/dashboard/8/?native_filters_key=KPnPthpLQ8rT--6PUdsPzQAcwnleRGHk_3dg0PVYfrXc3SE6zZ2x0p7JuerAZ0Pg

.env.local

@@ -2,4 +2,4 @@ REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
 REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
-REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com
+REACT_APP_SUPERSET_URL=https://superset-dev.cloud.fiskerinc.com/superset/dashboard/8/?native_filters_key=KPnPthpLQ8rT--6PUdsPzQAcwnleRGHk_3dg0PVYfrXc3SE6zZ2x0p7JuerAZ0Pg

.env.prd

@@ -2,4 +2,4 @@ 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_UPLOAD_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com
+REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com/superset/dashboard/9/?native_filters_key=mfJ1VjGTcLUKz7gQs_DgClZhjcdNucYMrPruNibcyDnhkDwdHbAumBRVTpA5tFH_

.env.stg

@@ -2,4 +2,4 @@ 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_UPLOAD_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com
+REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com/superset/dashboard/6/?native_filters_key=XBwRgJIvmxhqBhqlz45kuTnXc1iUY_M_ovzXCzXy5_l-AOFAXEaGLWpYIsfrEHGR

package-lock.json

@@ -4038,6 +4038,19 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
@@ -4046,15 +4059,32 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.4",
+      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -7895,60 +7925,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/env-cmd/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -15929,13 +15905,13 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.12.0",
+      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "bin": {
@@ -15983,14 +15959,6 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -20213,20 +20181,44 @@
         }
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew=="
     },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.4",
+      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -23058,44 +23050,6 @@
       "requires": {
         "commander": "^4.0.0",
         "cross-spawn": "^7.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
       }
     },
     "error-ex": {
@@ -28831,13 +28785,13 @@
       }
     },
     "terser": {
-      "version": "5.12.0",
+      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
@@ -28845,11 +28799,6 @@
           "version": "2.20.3",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
         }
       }
     },

src/components/App/App.test.js

@@ -17,6 +17,7 @@ import {
 import { setToken } from "../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing";
 import App from ".";
+import addSnapshotSerializer from "../../utils/snapshot";
 
 const LOADING_STATUS = "Loading...";
 
@@ -43,32 +44,8 @@ const sleepAndCheck = async (path, selector, compare) => {
 };
 
 describe("App", () => {
-  const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
-
   beforeAll(() => {
-    // Stablize Table Pagination control ids
+    addSnapshotSerializer(expect);
-    expect.addSnapshotSerializer({
-      test: function (val) {
-        return val && typeof val === "string" && val.indexOf("mui-") > -1;
-      },
-      print: function (val) {
-        let str = val;
-        str = str.replace(/mui-\d*/g, "mui-00000");
-
-        return `"${str}"`;
-      },
-    });
-    expect.addSnapshotSerializer({
-      test: (val) => {
-        return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
-      },
-      print: function (val) {
-        let str = val;
-        str = str.replace(rxMakeStyles, "makeStyles-$1-0000");
-
-        return `"${str}"`;
-      },
-    });
   }, 60000);
 
   afterEach(() => {
@@ -132,6 +109,10 @@ describe("App", () => {
     await check("/tools/certificates/add", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /tools/sms/send unauthenticated", async () => {
+    await check("/tools/sms/send", "span.MuiButton-label", "Sign In");
+  });
+
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
@@ -189,4 +170,9 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/tools/certificates/add", "h6", "Create Certificate");
   });
+
+  it("Route /tools/sms/send authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/tools/sms/send", "h6", "Send SMS");
+  });
 });

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

@@ -15,11 +15,11 @@ exports[`CANFiltersAdd Render 1`] = `
           data-testid="mocked-canfiltersprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -153,7 +153,7 @@ exports[`CANFiltersAdd Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

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

@@ -9,7 +9,8 @@ import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFiltersAdd = async () => {
   const { container } = render(
@@ -20,14 +21,19 @@ const renderCANFiltersAdd = async () => {
             <MainForm />
           </BrowserRouter>
         </UserProvider>
-      </StatusProvider>f
+      </StatusProvider>
+      f
     </CANFiltersProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("CANFiltersAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFiltersAdd();

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

@@ -15,16 +15,16 @@ exports[`CANFiltersTable Render 1`] = `
           data-testid="mocked-canfiltersprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/filter-add?vin=undefined"
                 >
                   <svg
@@ -40,10 +40,10 @@ exports[`CANFiltersTable Render 1`] = `
                 </a>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

src/components/CANFilter/Table/index.jsx

@@ -28,6 +28,7 @@ import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import { Roles, hasRole } from "../../../utils/roles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -44,9 +45,11 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "CAN_FILTER_TABLE_PAGE_SIZE";
+
 const MainForm = ({ vin }) => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/CANFilter/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFiltersTable = async () => {
   const { container } = render(
@@ -26,11 +27,15 @@ const renderCANFiltersTable = async () => {
       </StatusProvider>
     </CANFiltersProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("CANFiltersTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFiltersTable();

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

@@ -15,11 +15,11 @@ exports[`CANFiltersUpdate Render 1`] = `
           data-testid="mocked-canfiltersprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -163,7 +163,7 @@ exports[`CANFiltersUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

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

@@ -9,7 +9,8 @@ import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFiltersUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,15 @@ const renderCANFiltersUpdate = async () => {
       </StatusProvider>
     </CANFiltersProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("CANFiltersUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFiltersUpdate();

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

@@ -15,11 +15,11 @@ exports[`VehicleAddForm Render 1`] = `
           data-testid="mocked-vehicleprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -276,19 +276,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -327,20 +327,20 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -379,19 +379,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -430,19 +430,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -481,19 +481,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -542,14 +542,14 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -626,13 +626,13 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -707,7 +707,7 @@ exports[`VehicleAddForm Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Cars/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderVehicleAdd = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderVehicleAdd = async () => {
       </StatusProvider>
     </VehicleProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehicleAddForm", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleAdd();

src/components/Cars/CANSignals/index.jsx

@@ -0,0 +1,104 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+
+const BlankSignal = (msg) => ({
+  timestamp: "",
+  signal: msg,
+  value: "",
+});
+
+const transformSignals = (signals) =>
+  signals
+    .map((signal) => {
+      const { Timestamp, ...Settings } = signal;
+      const keys = Object.keys(Settings);
+
+      return keys.map((key) => ({
+        timestamp: LocalDateTimeString(Timestamp),
+        signal: key,
+        value: Settings[key],
+      }));
+    })
+    .flat();
+
+const CANSignals = (props) => {
+  const { vin, token } = props;
+  const { getCANSignals } = useVehicleContext();
+  const [signals, setSignals] = useState([]);
+  const delay = 500;
+  let timer = 0;
+
+  const stopTimer = async () => {
+    if (timer === 0) return;
+    clearTimeout(timer);
+    timer = 0;
+  };
+
+  const startTimer = () => {
+    stopTimer();
+    timer = setTimeout(() => {
+      updateSignals();
+    }, delay);
+  };
+
+  const updateSignals = async () => {
+    try {
+      const result = await getCANSignals(vin, token);
+      const items = transformSignals(result.data);
+
+      if (items.length > 0) {
+        setSignals(items);
+      } else {
+        setSignals([BlankSignal("No signals")]);
+      }
+
+      if (delay > 0) startTimer();
+    } catch (e) {
+      setSignals([BlankSignal(e.message)]);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    startTimer();
+    return () => {
+      stopTimer();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!signals || signals.length === 0) return <h3>Loading...</h3>;
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Timestamp</TableCell>
+          <TableCell>Signal</TableCell>
+          <TableCell>Value</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {signals.map((signal, i) => (
+          <TableRow key={i}>
+            <TableCell>{signal.timestamp}</TableCell>
+            <TableCell>{signal.signal}</TableCell>
+            <TableCell>{signal.value}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default CANSignals;

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

@@ -15,13 +15,13 @@ exports[`VehicleTable Render 1`] = `
           data-testid="mocked-vehicleprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
                   href="/vehicle-add"
@@ -39,10 +39,10 @@ exports[`VehicleTable Render 1`] = `
                 </a>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -93,11 +93,11 @@ exports[`VehicleTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
             <div
-              class="makeStyles-paper-3 makeStyles-tableSize-53"
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
               <table
                 class="MuiTable-root"
@@ -121,7 +121,7 @@ exports[`VehicleTable Render 1`] = `
                       >
                         VIN
                         <span
-                          class="makeStyles-hiddenSortSpan-27"
+                          class="makeStyles-hiddenSortSpan-0"
                         >
                           sorted ascending
                         </span>

src/components/Cars/List/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/VehicleContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderVehicleTable = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderVehicleTable = async () => {
       </StatusProvider>
     </VehicleProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehicleTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleTable();

src/components/Cars/Status/CANFiltersTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -10,7 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import CANFiltersTab from "./CANFiltersTab"
+import CANFiltersTab from "./CANFiltersTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFiltersTab = async () => {
   const { container } = render(
@@ -18,11 +19,17 @@ const renderCANFiltersTab = async () => {
       <CANFiltersTab vin="TESTVIN1234567890" />
     </BrowserRouter>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("CANFiltersTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFiltersTab();

src/components/Cars/Status/CANSignalsTab.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { useUserContext } from "../../Contexts/UserContext";
+import CANSignals from "../CANSignals";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+
+const Main = (props) => {
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const { vin } = props;
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
+        CAN Signals
+      </Typography>
+      <CANSignals vin={vin} token={token} />
+    </div>
+  );
+};
+
+const CANSignalsTab = (props) => (
+  <VehicleProvider>
+    <Main {...props} />
+  </VehicleProvider>
+);
+
+export default CANSignalsTab;

src/components/Cars/Status/CarUpdatesTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./CarUpdatesTab"
+import MainForm from "./CarUpdatesTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarUpdatesTab = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderCarUpdatesTab = async () => {
       </StatusProvider>
     </CANFiltersProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("CarUpdatesTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarUpdatesTab();

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

@@ -15,13 +15,13 @@ exports[`VehicleDetailsTab Render 1`] = `
           data-testid="mocked-vehicleprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <p>
                   <b>
@@ -38,7 +38,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <b>
                   CANBus
@@ -80,7 +80,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <a
                   class=""

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

@@ -9,7 +9,8 @@ import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../utils/snapshot";
 
 const renderVehicleDetailsTab = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderVehicleDetailsTab = async () => {
       </StatusProvider>
     </VehicleProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehicleDetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleDetailsTab();

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

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/VehicleContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,27 +12,34 @@ import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./DetailsTab"
+import MainForm from "./DetailsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderDetailsTab = async () => {
   const { container } = render(
     <VehicleProvider>
       <StatusProvider>
         <UserProvider>
-          <MemoryRouter initialEntries={['/testroute/TESTVIN1234567890']}>
+          <MemoryRouter initialEntries={["/testroute/TESTVIN1234567890"]}>
             <Route path="/testroute/:vin">
               <MainForm vin="TESTVIN1234567890" />
             </Route>
           </MemoryRouter>
         </UserProvider>
       </StatusProvider>
-    </VehicleProvider >
+    </VehicleProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("DetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderDetailsTab();

src/components/Cars/Status/DigitalTwinTab.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import DigitalTwin from "../../DigitalTwin";
+import {
+  useVehicleContext,
+  VehicleProvider,
+} from "../../Contexts/VehicleContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { logger } from "../../../services/monitoring";
+
+const Main = (props) => {
+  const { getState } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage } = useStatusContext();
+  const classes = useStyles();
+  const [carState, setCarState] = useState(null);
+  const { vin } = props;
+
+  useEffect(() => {
+    if (!vin) return;
+    (async () => {
+      try {
+        const result = await getState(token, vin);
+        setCarState(result.data);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
+        Digital Twin
+      </Typography>
+      {carState && (
+        <>
+          <div>
+            <b>Connected</b>: {carState.online.toString()}
+          </div>
+          <DigitalTwin {...carState} />
+        </>
+      )}
+    </div>
+  );
+};
+
+const DigitalTwinTab = (props) => (
+  <VehicleProvider>
+    <Main {...props} />
+  </VehicleProvider>
+);
+
+export default DigitalTwinTab;

src/components/Cars/Status/DigitalTwinTab.test.jsx

@@ -0,0 +1,41 @@
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import DigitalTwinTab from "./DigitalTwinTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+const renderDetailsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <DigitalTwinTab vin="TESTVIN1234567890" />
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("DigitalTwinTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderDetailsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -3,7 +3,7 @@
 exports[`CANFiltersTab Render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-tableSize-53"
+    class="makeStyles-paper-0 makeStyles-tableSize-0"
   >
     <h6
       class="MuiTypography-root MuiTypography-h6"
@@ -14,16 +14,16 @@ exports[`CANFiltersTab Render 1`] = `
       data-testid="mocked-canfiltersprovider"
     >
       <div
-        class="makeStyles-paper-3 makeStyles-tableSize-53"
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
       >
         <div
-          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+          class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
           >
             <a
-              class="makeStyles-labelInline-9"
+              class="makeStyles-labelInline-0"
               href="/filter-add?vin=undefined"
             >
               <svg
@@ -39,10 +39,10 @@ exports[`CANFiltersTab Render 1`] = `
             </a>
           </div>
           <div
-            class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
           >
             <div
-              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
             >
               <label
                 class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

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

@@ -12,7 +12,7 @@ exports[`CarUpdatesTab Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <h6
             class="MuiTypography-root MuiTypography-h6"
@@ -41,7 +41,7 @@ exports[`CarUpdatesTab Render 1`] = `
                   >
                     ID
                     <span
-                      class="makeStyles-hiddenSortSpan-27"
+                      class="makeStyles-hiddenSortSpan-0"
                     >
                       sorted descending
                     </span>
@@ -279,12 +279,12 @@ exports[`CarUpdatesTab Render 1`] = `
             </tfoot>
           </table>
           <h6
-            class="MuiTypography-root makeStyles-labelInline-9 MuiTypography-h6"
+            class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
           >
             Car ECUs
           </h6>
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <table
               class="MuiTable-root"
@@ -308,7 +308,7 @@ exports[`CarUpdatesTab Render 1`] = `
                     >
                       ECU
                       <span
-                        class="makeStyles-hiddenSortSpan-27"
+                        class="makeStyles-hiddenSortSpan-0"
                       >
                         sorted descending
                       </span>

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

@@ -12,7 +12,7 @@ exports[`DetailsTab Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <h6
             class="MuiTypography-root MuiTypography-h6"
@@ -23,13 +23,13 @@ exports[`DetailsTab Render 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-3 makeStyles-tableSize-53"
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
               <div
-                class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <p>
                     <b>
@@ -47,7 +47,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <b>
                     CANBus
@@ -89,7 +89,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <a
                     class=""

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

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DigitalTwinTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-vehicleprovider"
+      >
+        <div
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6"
+            style="padding-bottom: 10px;"
+          >
+            Digital Twin
+          </h6>
+          <div>
+            <b>
+              Connected
+            </b>
+            : 
+            false
+          </div>
+          <div>
+            <p>
+              <b>
+                Battery
+              </b>
+              : 
+              95%
+            </p>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Doors
+              </h3>
+              <p>
+                <b>
+                  hood
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  trunk
+                </b>
+                : 
+                closed
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Location
+              </h3>
+              <p>
+                <b>
+                  altitude
+                </b>
+                : 
+                17
+              </p>
+              <p>
+                <b>
+                  longitude
+                </b>
+                : 
+                -122.414°
+              </p>
+              <p>
+                <b>
+                  latitude
+                </b>
+                : 
+                37.764°
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <p>
+                <b>
+                  Trex Version
+                </b>
+                : 
+                1000000
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <p>
+                <b>
+                  Updated at
+                </b>
+                : 
+                7/26/2022 12:26:38 AM
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -12,10 +12,10 @@ exports[`CarStatus Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-62 makeStyles-tableToolbar-30"
+            class="MuiBox-root MuiBox-root-63 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -83,9 +83,45 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-3"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-3"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Digital Twin
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-4"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-4"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Signals
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-63 PrivateTabIndicator-colorSecondary-65 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
@@ -97,10 +133,10 @@ exports[`CarStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-67"
+              class="MuiBox-root MuiBox-root-68"
             >
               <div
-                class="makeStyles-paper-3 makeStyles-tableSize-53"
+                class="makeStyles-paper-0 makeStyles-tableSize-0"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-h6"
@@ -108,13 +144,13 @@ exports[`CarStatus Render 1`] = `
                   Vehicle Details
                 </h6>
                 <div
-                  class="makeStyles-paper-3 makeStyles-tableSize-53"
+                  class="makeStyles-paper-0 makeStyles-tableSize-0"
                 >
                   <div
-                    class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                    class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
                   >
                     <div
-                      class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                     >
                       <p>
                         <b>
@@ -124,7 +160,7 @@ exports[`CarStatus Render 1`] = `
                       </p>
                     </div>
                     <div
-                      class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                     >
                       <a
                         class=""
@@ -179,6 +215,19 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-2"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-3"
+            hidden=""
+            id="tabpanel-3"
+            role="tabpanel"
+          />
+          <div
+            aria-labelledby="tab-4"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-4"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -7,15 +7,13 @@ 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";
+import CANSignalsTab from "./CANSignalsTab";
 
-const tabHashes = [
+const tabHashes = ["details", "updates", "filters"];
-  "details",
-  "updates",
-  "filters"
-]
 
 const CarStatus = () => {
   const { vin } = useParams();
@@ -25,8 +23,8 @@ const CarStatus = () => {
   const [tabIndex, setTabIndex] = React.useState(0);
 
   useEffect(() => {
-    const key = hash.replace("#", "")
+    const key = hash.replace("#", "");
-    const index = tabHashes.findIndex(element => element === key);
+    const index = tabHashes.findIndex((element) => element === key);
     if (index >= 0) setTabIndex(index);
   }, [hash]);
 
@@ -51,11 +49,21 @@ const CarStatus = () => {
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
-      <Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box
-        <Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
+        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)} />
+          <Tab label="CAN Signals" {...tabProps(4)} />
         </Tabs>
       </Box>
 
@@ -70,14 +78,22 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={2}>
         <CANFiltersTab />
       </TabPanel>
-    </div >
+
+      <TabPanel value={tabIndex} index={3}>
+        <DigitalTwinTab vin={vin} />
+      </TabPanel>
+
+      <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
+        <CANSignalsTab vin={vin} />
+      </TabPanel>
+    </div>
   );
 };
 
 function tabProps(index) {
   return {
     id: `tab-${index}`,
-    "aria-controls": `tabpanel-${index}`
+    "aria-controls": `tabpanel-${index}`,
   };
 }
 

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

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import CarStatus from "./index"
+import CarStatus from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarStatus = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderCarStatus = async () => {
       </StatusProvider>
     </CANFiltersProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("CarStatus", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();

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

@@ -15,11 +15,11 @@ exports[`VehicleUpdate Render 1`] = `
           data-testid="mocked-vehicleprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -278,19 +278,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -329,20 +329,20 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -381,19 +381,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -432,19 +432,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -483,19 +483,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -544,14 +544,14 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -628,13 +628,13 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -708,7 +708,7 @@ exports[`VehicleUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

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

@@ -9,7 +9,8 @@ import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderVehicleUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderVehicleUpdate = async () => {
       </StatusProvider>
     </VehicleProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehicleUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleUpdate();

src/components/Certificates/Add/DownloadCerts.test.jsx

@@ -2,11 +2,13 @@ import React from "react";
 import { render, waitFor } from "@testing-library/react";
 
 import DownloadCerts from "./DownloadCerts";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 describe("DownloadCerts", () => {
   beforeAll(() => {
     global.URL.createObjectURL = jest.fn();
     global.URL.revokeObjectURL = jest.fn();
+    addSnapshotSerializer(expect);
   });
 
   it("Render", async () => {

src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap

@@ -23,7 +23,7 @@ exports[`DownloadCerts Render 1`] = `
       </li>
     </ul>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
       tabindex="0"
       type="submit"
     >

src/components/Certificates/Add/index.jsx

@@ -53,7 +53,7 @@ const MainForm = () => {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-  };
+  };  
 
   const onChangeView = () => {
     setPubCert(null);

src/components/Contexts/SMSContext.jsx

@@ -0,0 +1,63 @@
+import React, { useContext, useState } from "react";
+
+import api from "../../services/smsAPI";
+
+const SMSContext = React.createContext();
+
+export class SMS {
+  constructor(message, ICCID, isAwaited) {
+    /** @type {string} */
+    this.messageText = message;
+    /** @type {string} */
+    this.ICCID = ICCID;
+    /** @type {boolean} */
+    this.await = isAwaited;
+  }
+}
+
+/**
+ * @param {SMS} data
+ */
+const validateSend = (data) => {
+  if (!data.messageText) throw new Error("message is required");
+  if (!data.ICCID) throw new Error("ICCID is required");
+};
+
+export const SMSProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+
+  /**
+   * @param {SMS} data
+   * @param {*} token
+   * @returns
+   */
+  const sendSMS = async (data, token) => {
+    try {
+      setBusy(true);
+
+      validateSend(data);
+
+      const result = await api.send(data, token);
+      if (result.error) {
+        throw new Error(`Send message error. ${result.message}`);
+      }
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <SMSContext.Provider
+      value={{
+        busy,
+        sendSMS,
+      }}
+    >
+      {children}
+    </SMSContext.Provider>
+  );
+};
+
+export const useSMSContext = () => useContext(SMSContext);

src/components/Contexts/VehicleContext.jsx

@@ -205,6 +205,20 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getCANSignals = async (vin, token) => {
+    try {
+      setBusy(true);
+      validateVIN(vin);
+
+      const result = await api.getCANSignals(vin, token);
+      if (result.error)
+        throw new Error(`Get CAN signals error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <VehicleContext.Provider
       value={{
@@ -217,6 +231,7 @@ export const VehicleProvider = ({ children }) => {
         addVehicle,
         deleteVehicle,
         getConnections,
+        getCANSignals,
         getECUs,
         getLocations,
         getModels,

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -5,17 +5,17 @@ let busy = false;
 const filters = [
   {
     can_id: "123-456",
-    interval: 789
+    interval: 789,
   },
   {
     can_id: "1",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "1000",
-    interval: 1
+    interval: 1,
-  }
+  },
-]
+];
 
 let vehicle = {
   vin: "3C4PDCBG0ET127145",
@@ -24,8 +24,55 @@ let vehicle = {
   trim: "Basic",
   ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
   log_level: "info",
-  canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: filters },
+  canbus: {
+    enabled: true,
+    data_logger_enabled: true,
+    max_mem_buffer_size: 1,
+    max_disk_buffer_size: 2,
+    filters: filters,
+  },
 };
+let vehicleState = {
+  data: {
+    online: false,
+    battery: {
+      percent: 95,
+    },
+    max_range: {
+      max_miles: 577,
+    },
+    doors: {
+      hood: false,
+      left_front: false,
+      left_rear: false,
+      right_front: false,
+      right_rear: false,
+      trunk: false,
+    },
+    location: {
+      altitude: 17,
+      longitude: -122.414,
+      latitude: 37.764,
+    },
+    door_locks: {
+      driver: false,
+      all: false,
+    },
+    sunroof: {
+      sunroof: 0,
+    },
+    cabin_climate: {
+      cabin_temperature: 0,
+      internal_temperature: 29,
+    },
+    ambient_temperature: {
+      temperature: 26,
+    },
+    trex_version: "1000000",
+    updated: "2022-07-26T00:26:38.880381Z",
+  },
+};
+
 let vehicles = [];
 let models = ["Ocean", "PEAR"];
 let years = [2023, 2024];
@@ -83,7 +130,7 @@ export const useVehicleContext = () => ({
   getModels: jest.fn(() => {
     models = ["Ocean", "PEAR"];
   }),
-  getState: jest.fn(),
+  getState: jest.fn(() => vehicleState),
   getYears: jest.fn(() => {
     years = [2023, 2024];
   }),

src/components/Controls/CarECUsTable/index.jsx

@@ -14,6 +14,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -42,10 +43,12 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_ECUS_TABLE_PAGE_SIZE";
+
 const CarECUsTable = ({ vin, token, classes }) => {
   const [ecus, setECUs] = useState([]);
   const [total, setTotal] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("ecu");
   const [order, setOrder] = useState("desc");

src/components/Controls/CarSelectionTable/index.jsx

@@ -19,6 +19,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
 import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -47,6 +48,8 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_SELECTION_TABLE_PAGE_SIZE";
+
 const CarSelectionTable = (props) => {
   const {
     token,
@@ -57,7 +60,7 @@ const CarSelectionTable = (props) => {
     onSelect,
     onSelectAll,
   } = props;
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");

src/components/Controls/CarUpdateStatusProgress/CarUpdateStatusProgress.test.jsx

@@ -4,6 +4,7 @@ import { render, waitFor } from "@testing-library/react";
 import CarUpdateStatusProgress from "../CarUpdateStatusProgress";
 import useStyles from "../../useStyles";
 import s from "./Statuses";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const TestWrapper = ({ status }) => {
   const classes = useStyles();
@@ -17,6 +18,10 @@ const renderCarUpdateStatusProgress = async (status) => {
 };
 
 describe("CarUpdateStatusProgress", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   const tests = [
     {
       name: "manifest_received",

src/components/Controls/CarUpdateStatusTable/CarUpdateStatusTable.test.jsx

@@ -7,6 +7,7 @@ import { CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
 import CarUpdateStatusTable from "../CarUpdateStatusTable";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarUpdateStatusTable = async () => {
   const { container } = render(
@@ -22,17 +23,7 @@ const renderCarUpdateStatusTable = async () => {
 
 describe("CarUpdateStatusTable", () => {
   beforeAll(() => {
-    expect.addSnapshotSerializer({
+    addSnapshotSerializer(expect);
-      test: function (val) {
-        return val && typeof val === "string" && val.indexOf("mui-") >= 0;
-      },
-      print: function (val) {
-        let str = val;
-        str = str.replace(/mui-\d*/g, "mui-00000");
-
-        return `"${str}"`;
-      },
-    });
   });
 
   it("Render", async () => {

src/components/Controls/CarUpdateStatusTable/__snapshots__/CarUpdateStatusTable.test.jsx.snap

@@ -194,7 +194,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
               />
               <p
                 class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                id="mui-00000"
+                id="mui-0"
               >
                 Rows per page:
               </p>
@@ -204,7 +204,7 @@ exports[`CarUpdateStatusTable Render 1`] = `
                 <select
                   aria-label="rows per page"
                   class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
-                  id="mui-00000"
+                  id="mui-0"
                 >
                   <option
                     class="MuiTablePagination-menuItem"

src/components/Controls/CarUpdateStatusTable/index.jsx

@@ -14,6 +14,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -34,11 +35,13 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_UPDATE_STATUS_TABLE_PAGE_SIZE";
+
 const CarUpdateStatusTable = ({ carupdateid, token }) => {
   const classes = useStyles();
   const [log, setLog] = useState([]);
   const [logTotal, setLogTotal] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Controls/CarUpdatesTable/index.jsx

@@ -18,6 +18,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -42,9 +43,11 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
+
 const MainForm = ({ vin, token }) => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Controls/DownloadFileLink/index.test.jsx

@@ -2,11 +2,13 @@ import React from "react";
 import { render, waitFor } from "@testing-library/react";
 
 import DownloadFileLink from ".";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 describe("DownloadFileLink", () => {
   beforeAll(() => {
     global.URL.createObjectURL = jest.fn();
     global.URL.revokeObjectURL = jest.fn();
+    addSnapshotSerializer(expect);
   });
 
   it("Render", async () => {

src/components/Controls/ResponsiveIFrame/index.jsx

@@ -1,20 +1,15 @@
 import React from "react";
 
 const ResponsiveIFrame = (props) => {
-  const { classes, src, title } = props;
+  const { classes, src, title, fullscreen } = props;
+  const container = fullscreen
+    ? classes.iframeResponsive
+    : classes.embeddedWrapper;
 
   return (
-    <div className={classes.embeddedWrapper}>
+    <div className={container}>
       <iframe
-        style={{
+        className={classes.iframeResponsive}
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          width: "100%",
-          height: "100%",
-        }}
         title={title}
         src={src}
         frameBorder="0"

src/components/Controls/TabPanel/index.test.jsx

@@ -1,7 +1,7 @@
 import { render, waitFor } from "@testing-library/react";
 
-import TabPanel from "./index"
+import TabPanel from "./index";
-
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderTabPanel = async () => {
   const { container } = render(
@@ -9,11 +9,15 @@ const renderTabPanel = async () => {
       <div>Test</div>
     </TabPanel>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("TabPanel", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     const container = await renderTabPanel();
     expect(container).toMatchSnapshot();

src/components/Dashboard/index.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
+import { SupersetDashboardURL } from "../../services/superset";
+import { useStatusContext } from "../Contexts/StatusContext";
+import useStyles from "../useStyles";
+
+const Dashboard = () => {
+  const classes = useStyles();
+  const { setTitle } = useStatusContext();
+
+  useEffect(() => {
+    setTitle("Datascope");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <ResponsiveIFrame
+      src={SupersetDashboardURL}
+      title="Dashboard"
+      classes={classes}
+      fullscreen
+    />
+  );
+};
+
+export default Dashboard;

src/components/DigitalTwin/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+import useStyles from "../useStyles";
+import { LocalDateTimeString } from "../../utils/dates";
+
+const keyValueTemplate = (key, value) => (
+  <p key={key}>
+    <b>{key}</b>: {value}
+  </p>
+);
+const openCloseState = (value) => (value ? "open" : "closed");
+const mapOpenCloseState = (value) =>
+  keyValueTemplate(value[0], openCloseState(value[1]));
+
+const DigitalTwin = (props) => {
+  const classes = useStyles();
+  const { battery, doors, location, trex_version, updated, windows } = props;
+
+  return (
+    <div>
+      {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
+      {doors != null && (
+        <div className={classes.popupSection}>
+          <h3>Doors</h3>
+          {Object.entries(doors).map(mapOpenCloseState)}
+        </div>
+      )}
+      {windows != null && (
+        <div className={classes.popupSection}>
+          <h3>Windows</h3>
+          {Object.entries(windows).map(mapOpenCloseState)}
+        </div>
+      )}
+      {location != null && (
+        <div className={classes.popupSection}>
+          <h3>Location</h3>
+          {Object.entries(location).map((value) => {
+            if (value[0] === "altitude") {
+              return keyValueTemplate(value[0], value[1]);
+            } else {
+              return keyValueTemplate(value[0], `${value[1]}°`);
+            }
+          })}
+        </div>
+      )}
+      {trex_version && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Trex Version", trex_version)}
+        </div>
+      )}
+      {updated != null && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Updated at", LocalDateTimeString(updated))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DigitalTwin;

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

@@ -15,11 +15,11 @@ exports[`FleetAddForm Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -136,19 +136,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -187,20 +187,20 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -239,19 +239,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -290,19 +290,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -341,19 +341,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -402,14 +402,14 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -486,13 +486,13 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -567,7 +567,7 @@ exports[`FleetAddForm Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetAdd = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetAddForm", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetAdd();

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

@@ -15,11 +15,11 @@ exports[`FleetCANFilterAdd Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -153,7 +153,7 @@ exports[`FleetCANFilterAdd Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

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

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFilterAdd = async () => {
   const { container } = render(
@@ -23,11 +24,15 @@ const renderFleetCANFilterAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFilterAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFilterAdd();

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

@@ -15,16 +15,16 @@ exports[`FleetCANFiltersTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet/undefined/filter-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetCANFiltersTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

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

@@ -23,6 +23,7 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
+import {useLocalStorage} from "../../../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -39,8 +40,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_STATUS_CAN_FILTER_TABLE_PAGE_SIZE";
+
 const MainForm = ({ name }) => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

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

@@ -1,8 +1,8 @@
 jest.mock("../../../../Contexts/FleetContext");
 jest.mock("../../../../Contexts/StatusContext");
 jest.mock("../../../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFiltersTable = async () => {
   const { container } = render(
@@ -26,11 +27,15 @@ const renderFleetCANFiltersTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFiltersTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFiltersTable();

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

@@ -15,11 +15,11 @@ exports[`FleetCANFilterUpdate Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Interval
@@ -163,7 +163,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

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

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetCANFilterUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,15 @@ const renderFleetCANFilterUpdate = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => {});
   return container;
 };
 
 describe("FleetCANFilterUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetCANFilterUpdate();

src/components/Fleets/Status/CANFiltersTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -10,7 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import CANFiltersTab from "./CANFiltersTab"
+import CANFiltersTab from "./CANFiltersTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCANFitlersTab = async () => {
   const { container } = render(
@@ -18,11 +19,17 @@ const renderCANFitlersTab = async () => {
       <CANFiltersTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("CANFiltersTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCANFitlersTab();

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

@@ -15,13 +15,13 @@ exports[`FleetDetailsTab Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <p>
                   <b>
@@ -45,7 +45,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <b>
                   CANBus
@@ -87,7 +87,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </p>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
               >
                 <a
                   class=""

src/components/Fleets/Status/Details/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../utils/snapshot";
 
 const renderFleetDetailsTab = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetDetailsTab = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetDetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();

src/components/Fleets/Status/DetailsTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,27 +12,34 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./DetailsTab"
+import MainForm from "./DetailsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderDetailsTab = async () => {
   const { container } = render(
     <FleetProvider>
       <StatusProvider>
         <UserProvider>
-          <MemoryRouter initialEntries={['/testroute/US-TEST']}>
+          <MemoryRouter initialEntries={["/testroute/US-TEST"]}>
             <Route path="/testroute/:name">
               <MainForm name="US-TEST" />
             </Route>
-          </MemoryRouter >
+          </MemoryRouter>
         </UserProvider>
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("DetailsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderDetailsTab();

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

@@ -15,11 +15,11 @@ exports[`FleetVehicleAdd Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         VIN
@@ -69,7 +69,7 @@ exports[`FleetVehicleAdd Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Status/Vehicles/Add/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetVehicleAdd = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetVehicleAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetVehicleAdd", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetVehicleAdd();

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -15,16 +15,16 @@ exports[`FleetVehiclesTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet/undefined/vehicle-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetVehiclesTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

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

@@ -22,6 +22,7 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
+import {useLocalStorage} from "../../../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -34,8 +35,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
+
 const MainForm = ({ name }) => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Fleets/Status/Vehicles/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../../../Contexts/FleetContext");
 jest.mock("../../../../Contexts/StatusContext");
 jest.mock("../../../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../../../utils/snapshot";
 
 const renderFleetVehiclesTable = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderFleetVehiclesTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetVehiclesTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetVehiclesTable();

src/components/Fleets/Status/VehiclesTab.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -10,7 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import VehiclesTab from "./VehiclesTab"
+import VehiclesTab from "./VehiclesTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderVehiclesTab = async () => {
   const { container } = render(
@@ -18,11 +19,17 @@ const renderVehiclesTab = async () => {
       <VehiclesTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("VehiclesTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehiclesTab();

src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`CANFiltersTab Render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-tableSize-53"
+    class="makeStyles-paper-0 makeStyles-tableSize-0"
   >
     <h6
       class="MuiTypography-root MuiTypography-h6"
@@ -14,16 +14,16 @@ exports[`CANFiltersTab Render 1`] = `
       data-testid="mocked-fleetprovider"
     >
       <div
-        class="makeStyles-paper-3 makeStyles-tableSize-53"
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
       >
         <div
-          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+          class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
           >
             <a
-              class="makeStyles-labelInline-9"
+              class="makeStyles-labelInline-0"
               href="/fleet/undefined/filter-add"
             >
               <svg
@@ -40,10 +40,10 @@ exports[`CANFiltersTab Render 1`] = `
           </div>
           <div
             align="right"
-            class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
           >
             <div
-              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
             >
               <label
                 class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

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

@@ -12,7 +12,7 @@ exports[`DetailsTab Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <h6
             class="MuiTypography-root MuiTypography-h6"
@@ -23,13 +23,13 @@ exports[`DetailsTab Render 1`] = `
             data-testid="mocked-fleetprovider"
           >
             <div
-              class="makeStyles-paper-3 makeStyles-tableSize-53"
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
               <div
-                class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <p>
                     <b>
@@ -54,7 +54,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <b>
                     CANBus
@@ -96,7 +96,7 @@ exports[`DetailsTab Render 1`] = `
                   </p>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                  class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <a
                     class=""

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`VehiclesTab Render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-tableSize-53"
+    class="makeStyles-paper-0 makeStyles-tableSize-0"
   >
     <h6
       class="MuiTypography-root MuiTypography-h6"
@@ -14,16 +14,16 @@ exports[`VehiclesTab Render 1`] = `
       data-testid="mocked-fleetprovider"
     >
       <div
-        class="makeStyles-paper-3 makeStyles-tableSize-53"
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
       >
         <div
-          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+          class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
         >
           <div
-            class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+            class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
           >
             <a
-              class="makeStyles-labelInline-9"
+              class="makeStyles-labelInline-0"
               href="/fleet/undefined/vehicle-add"
             >
               <svg
@@ -40,10 +40,10 @@ exports[`VehiclesTab Render 1`] = `
           </div>
           <div
             align="right"
-            class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-8"
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-8"
           >
             <div
-              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
             >
               <label
                 class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"

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

@@ -12,10 +12,10 @@ exports[`FleetStatus Render 1`] = `
         data-testid="mocked-userprovider"
       >
         <div
-          class="makeStyles-paper-3 makeStyles-tableSize-53"
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-62 makeStyles-tableToolbar-30"
+            class="MuiBox-root MuiBox-root-63 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-63 PrivateTabIndicator-colorSecondary-65 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
@@ -97,10 +97,10 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-67"
+              class="MuiBox-root MuiBox-root-68"
             >
               <div
-                class="makeStyles-paper-3 makeStyles-tableSize-53"
+                class="makeStyles-paper-0 makeStyles-tableSize-0"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-h6"
@@ -111,13 +111,13 @@ exports[`FleetStatus Render 1`] = `
                   data-testid="mocked-fleetprovider"
                 >
                   <div
-                    class="makeStyles-paper-3 makeStyles-tableSize-53"
+                    class="makeStyles-paper-0 makeStyles-tableSize-0"
                   >
                     <div
-                      class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                      class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
                     >
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <p>
                           <b>
@@ -141,7 +141,7 @@ exports[`FleetStatus Render 1`] = `
                         </p>
                       </div>
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <b>
                           CANBus
@@ -183,7 +183,7 @@ exports[`FleetStatus Render 1`] = `
                         </p>
                       </div>
                       <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-12"
+                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <a
                           class=""

src/components/Fleets/Status/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import FleetStatus from "./index"
+import FleetStatus from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarStatus = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderCarStatus = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetStatus", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();

src/components/Fleets/Table/__snapshots__/index.test.jsx.snap

@@ -15,16 +15,16 @@ exports[`FleetTable Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3 makeStyles-tableSize-53"
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
-                class="MuiGrid-root makeStyles-textJustifyAlign-47 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-9"
+                  class="makeStyles-labelInline-0"
                   href="/fleet-add"
                 >
                   <svg
@@ -41,10 +41,10 @@ exports[`FleetTable Render 1`] = `
               </div>
               <div
                 align="right"
-                class="MuiGrid-root makeStyles-textCenterAlign-48 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-50"
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -95,7 +95,7 @@ exports[`FleetTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
             <table

src/components/Fleets/Table/index.jsx

@@ -21,6 +21,7 @@ import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -49,8 +50,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
+
 const MainForm = () => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Fleets/Table/index.test.jsx

@@ -1,8 +1,8 @@
 jest.mock("../../Contexts/FleetContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
-jest.mock('@material-ui/core/utils/unstable_useId', () =>
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
-  jest.fn().mockReturnValue('mui-test-id'),
+  jest.fn().mockReturnValue("mui-test-id")
 );
 
 import { render, waitFor } from "@testing-library/react";
@@ -12,7 +12,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetTable = async () => {
   const { container } = render(
@@ -26,11 +27,17 @@ const renderFleetTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetTable", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetTable();

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

@@ -15,11 +15,11 @@ exports[`FleetUpdate Render 1`] = `
           data-testid="mocked-fleetprovider"
         >
           <div
-            class="makeStyles-paper-3"
+            class="makeStyles-paper-0"
           >
             <form
               action="{onSubmit}"
-              class="makeStyles-form-5"
+              class="makeStyles-form-0"
               novalidate=""
             >
               <div
@@ -57,10 +57,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64"
+                      class="PrivateNotchedOutline-legendLabelled-65"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -138,19 +138,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -189,20 +189,20 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70 PrivateRadioButtonIcon-checked-72"
+                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -241,19 +241,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -292,19 +292,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -343,19 +343,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-70"
+                        class="PrivateRadioButtonIcon-root-71"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-71"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -404,14 +404,14 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -488,13 +488,13 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-66 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-67 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-69"
+                        class="PrivateSwitchBase-input-70"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
@@ -568,7 +568,7 @@ exports[`FleetUpdate Render 1`] = `
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >

src/components/Fleets/Update/index.test.jsx

@@ -9,7 +9,8 @@ import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
-import MainForm from "./index"
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderFleetUpdate = async () => {
   const { container } = render(
@@ -23,11 +24,17 @@ const renderFleetUpdate = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { /* render */ });
+  await waitFor(() => {
+    /* render */
+  });
   return container;
 };
 
 describe("FleetUpdate", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetUpdate();

src/components/Home/index.jsx

@@ -8,7 +8,6 @@ const Home = () => {
   const classes = useStyles();
   const { setTitle, setSitePath } = useStatusContext();
 
-
   useEffect(() => {
     setTitle("Home");
     setSitePath([]);

src/components/Layouts/SideMenu.jsx

@@ -12,7 +12,6 @@ import ListItemLink from "../ListItemLink";
 import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
-import { SupersetDashboardURL } from "../../services/superset";
 
 const menuData = [
   {
@@ -41,7 +40,7 @@ const menuData = [
   },
   {
     label: "Datascope",
-    url: SupersetDashboardURL,
+    to: "/datascope",
     icon: <AssessmentIcon />,
     roles: [Roles.READ, Roles.CREATE],
   },
@@ -62,6 +61,11 @@ const menuData = [
         to: "/tools/certificates/add",
         roles: [Roles.CERTIFICATES],
       },
+      {
+        label: "SMS",
+        to: "/tools/sms/send",
+        roles: [Roles.CREATE],
+      }
     ],
   },
 ];

src/components/Layouts/SideMenu.test.jsx

@@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom";
 import { UserProvider, setToken } from "../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing";
 import SideMenu from "./SideMenu";
+import addSnapshotSerializer from "../../utils/snapshot";
 
 const renderMenu = async () => {
   const { container } = render(
@@ -19,6 +20,10 @@ const renderMenu = async () => {
 };
 
 describe("SideMenu", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Unauthenticated", async () => {
     setToken(null);
     const container = await renderMenu();

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -155,12 +155,10 @@ exports[`SideMenu Authenticated 1`] = `
       <li>
         <a
           aria-disabled="false"
-          class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-52 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="https://dev-superset.cloud.fiskerinc.com/r/3"
+          href="/datascope"
-          rel="noopener"
           role="button"
           tabindex="0"
-          target="_blank"
         >
           <div
             class="MuiListItemIcon-root"
@@ -253,6 +251,28 @@ exports[`SideMenu Authenticated 1`] = `
             />
           </a>
         </li>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/tools/sms/send"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                SMS
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
       </ul>
     </ul>
   </div>

src/components/Manifest/Details/__snapshots__/index.test.jsx.snap

@@ -12,7 +12,7 @@ Object {
           data-testid="mocked-manifestsprovider"
         >
           <div
-            class="makeStyles-link-26"
+            class="makeStyles-link-0"
           >
             Show Details
           </div>
@@ -28,7 +28,7 @@ Object {
         data-testid="mocked-manifestsprovider"
       >
         <div
-          class="makeStyles-link-26"
+          class="makeStyles-link-0"
         >
           Show Details
         </div>
@@ -101,7 +101,7 @@ Object {
           data-testid="mocked-manifestsprovider"
         >
           <div
-            class="makeStyles-link-87"
+            class="makeStyles-link-0"
           >
             Hide Details
           </div>
@@ -156,7 +156,7 @@ Object {
         data-testid="mocked-manifestsprovider"
       >
         <div
-          class="makeStyles-link-87"
+          class="makeStyles-link-0"
         >
           Hide Details
         </div>

src/components/Manifest/Details/index.test.jsx

@@ -10,6 +10,7 @@ import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import ManifestDetails from ".";
 import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import addSnapshotSerializer from "../../../utils/snapshot";
 
 const TestComponent = (opened) => (
   <UserProvider>
@@ -26,6 +27,7 @@ const TestComponent = (opened) => (
 describe("Manifest Details Component", () => {
   beforeAll(() => {
     setToken(TEST_AUTH_OBJECT);
+    addSnapshotSerializer(expect);
   });
 
   it("Render Hidden", async () => {

src/components/Manifest/List/index.jsx

@@ -28,6 +28,7 @@ import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -56,9 +57,11 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
+
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");

src/components/Manifest/Status/index.jsx

@@ -27,11 +27,14 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
+import {useLocalStorage} from "../../useLocalStorage";
+
+const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {

src/components/Routes/SiteRoutes.jsx

@@ -34,9 +34,10 @@ const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
 const VehicleUpdateForm = React.lazy(() => import("../Cars/Update"));
 const CertificateCreate = React.lazy(() => import("../Certificates/Add"));
+const SMSSend = React.lazy(() => import("../SMS/Send"));
 const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
-
+const Datascope = React.lazy(() => import("../Dashboard"));
 const SiteRoutes = () => {
   const { token, groups } = useUserContext();
   return (
@@ -208,6 +209,14 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.CERTIFICATES]}
         />
+        <AuthRoute
+          path="/tools/sms/send"
+          render={() => <SMSSend />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.CREATE]}
+        />
         <AuthRoute
           path="/suppliers"
           render={() => <SuppliersList />}
@@ -224,6 +233,14 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.APPROVESUPPLIERS]}
         />
+        <AuthRoute
+          path="/datascope"
+          render={() => <Datascope />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
         <PageNotFound />
       </Switch>
     </Suspense>

src/components/SMS/Send/SendForm.jsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from "react";
+import {
+  Button,
+  FormControlLabel,
+  Checkbox,
+  TextField,
+} from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { SMS } from "../../Contexts/SMSContext";
+
+const SendForm = ({ onSend, busy }) => {
+  const classes = useStyles();
+
+  const iccidEl = useRef(null);
+
+  const [message, setMessage] = useState(null);
+  const [isAwaited, setAwait] = useState(false);
+
+  const onSubmit = async (event) => {
+    event.preventDefault();
+
+    if (onSend) onSend(new SMS(message, iccidEl.current.value, isAwaited));
+  };
+
+  const onMessageChange = (event) => {
+    setMessage(event.target.value);
+  };
+
+  const onAwaitChange = (event) => {
+    setAwait(event.target.checked);
+  };
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="iccid"
+          name="iccid"
+          label="ICCID"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "50",
+            minLength: "15",
+          }}
+          required
+          fullWidth
+          inputRef={iccidEl}
+        />
+        <TextField
+          id="message"
+          name="message"
+          label="Message"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "320",
+          }}
+          required
+          fullWidth
+          onChange={onMessageChange}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isAwaited}
+              onChange={onAwaitChange}
+              value="isAwaited"
+              color="primary"
+            />
+          }
+          label="Await delivery"
+        />
+
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Sending..." : "Send"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default SendForm;

src/components/SMS/Send/ViewResult.jsx

@@ -0,0 +1,39 @@
+import { Button } from "@material-ui/core";
+import React from "react";
+
+import useStyles from "../../useStyles";
+
+const ViewResult = ({ result, onChangeView }) => {
+  const classes = useStyles();
+
+  const onNewSMS = (event) => {
+    event.preventDefault();
+    if (!onChangeView) return;
+    onChangeView();
+  };
+  return (
+    <div>
+      <h2>View Result</h2>
+      <ul>
+        {Object.keys(result).map((key) => (
+          <li key={key}>
+            {key}:{result[key]}
+            <br />
+          </li>
+        ))}
+      </ul>
+      <Button
+        type="submit"
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={onNewSMS}
+      >
+        Done
+      </Button>
+    </div>
+  );
+};
+
+export default ViewResult;

src/components/SMS/Send/ViewResult.test.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import ViewResult from "./ViewResult";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+describe("ViewResult", () => {
+  beforeAll(() => {
+    global.URL.createObjectURL = jest.fn();
+    global.URL.revokeObjectURL = jest.fn();
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    const { container } = render(
+      <ViewResult result={{ result: "success", message: "message" }} />
+    );
+    await waitFor(() => {
+      /* render */
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/SMS/Send/__snapshots__/ViewResult.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewResult Render 1`] = `
+<div>
+  <div>
+    <h2>
+      View Result
+    </h2>
+    <ul>
+      <li>
+        result
+        :
+        success
+        <br />
+      </li>
+      <li>
+        message
+        :
+        message
+        <br />
+      </li>
+    </ul>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+      tabindex="0"
+      type="submit"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Done
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
+`;

src/components/SMS/Send/index.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+
+import { useSMSContext, SMSProvider } from "../../Contexts/SMSContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { logger } from "../../../services/monitoring";
+import SendForm from "./SendForm";
+import ViewResult from "./ViewResult";
+
+const VIEW_FORM = 0;
+const VIEW_RESULT = 1;
+
+const MainForm = () => {
+  const { busy, sendSMS } = useSMSContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [view, setView] = useState(VIEW_FORM);
+  const [result, setResult] = useState(null);
+
+  useEffect(() => {
+    setTitle("Send SMS");
+    setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sms/send",
+      },
+      {
+        label: "Send SMS",
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSend = async (data) => {
+    try {
+      setResult(await sendSMS(data, token));
+
+      setMessage(`Sent ${data.messageText} to ${data.ICCID}`);
+      setView(VIEW_RESULT);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const onChangeView = () => {
+    setResult(null);
+
+    setView(VIEW_FORM);
+  };
+
+  if (view === VIEW_RESULT)
+    return <ViewResult result={result} onChangeView={onChangeView} />;
+
+  return <SendForm onSend={onSend} busy={busy} />;
+};
+
+const SMSSend = () => (
+  <SMSProvider>
+    <MainForm />
+  </SMSProvider>
+);
+
+export default SMSSend;

src/components/SSOForm/SSOForm.test.js

@@ -4,8 +4,13 @@ import React from "react";
 import { BrowserRouter } from "react-router-dom";
 import { render, cleanup } from "@testing-library/react";
 import SSOForm from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
 
 describe("Sign In Form", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
   it("Should render", () => {
     const { container } = render(
       <BrowserRouter>
@@ -13,7 +18,7 @@ describe("Sign In Form", () => {
       </BrowserRouter>
     );
     expect(container).toMatchSnapshot();
-    
+
     cleanup();
   });
 });

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

@@ -3,11 +3,11 @@
 exports[`Sign In Form Should render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3 makeStyles-textJustifyAlign-47"
+    class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
   >
     <a
       aria-disabled="false"
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary"
       href="https://cognito.com/authorize?redirect=https://example.com/callback"
       tabindex="0"
     >