From 738a19c22922b2ce3d415a8f82c1688d5f91b2c9 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Tue, 9 Aug 2022 13:26:37 -0700
Subject: [PATCH 01/26] CEC-2056 safari map (#186)

* CEC-2056 Fix Safari map popup

* Snapshot serializer for Private styles

* Combine serializers
---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 .../App/__snapshots__/App.test.js.snap        | 210 ++++++++++--------
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |  80 +++----
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  80 +++----
 .../Add/__snapshots__/index.test.jsx.snap     |  68 +++---
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |   4 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  68 +++---
 .../Details/__snapshots__/index.test.js.snap  |  24 +-
 src/utils/snapshot.js                         |  18 +-
 16 files changed, 320 insertions(+), 300 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ea0312a..8182dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "clsx": "^1.1.1",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -11593,9 +11593,9 @@
       }
     },
     "node_modules/leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "node_modules/leven": {
       "version": "3.1.0",
@@ -25739,9 +25739,9 @@
       }
     },
     "leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "leven": {
       "version": "3.1.0",
diff --git a/package.json b/package.json
index c1c5967..a6539a1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index b642c4e..e96d66d 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -350,7 +350,7 @@ exports[`App Route / authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -380,10 +380,10 @@ exports[`App Route / authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -405,22 +405,32 @@ exports[`App Route / authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -438,11 +448,17 @@ exports[`App Route / authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -868,7 +884,7 @@ exports[`App Route /home authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -898,10 +914,10 @@ exports[`App Route /home authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -923,22 +939,32 @@ exports[`App Route /home authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -956,11 +982,17 @@ exports[`App Route /home authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -1459,10 +1491,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Package name
@@ -1505,10 +1537,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Version
@@ -1559,10 +1591,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Description
@@ -1606,10 +1638,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Release Notes URL
@@ -2157,11 +2189,11 @@ exports[`App Route /package-create authenticated 1`] = `
                           </svg>
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                             style="padding-left: 8px;"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legend-1329"
+                              class="PrivateNotchedOutline-legend-0"
                               style="width: 0.01px;"
                             >
                               <span>
@@ -2384,11 +2416,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                   </svg>
                                   <fieldset
                                     aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                                     style="padding-left: 8px;"
                                   >
                                     <legend
-                                      class="PrivateNotchedOutline-legend-1329"
+                                      class="PrivateNotchedOutline-legend-0"
                                       style="width: 0.01px;"
                                     >
                                       <span>
@@ -3057,14 +3089,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1261 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1264"
+                                    class="PrivateSwitchBase-input-0"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -5820,10 +5852,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1601 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1603"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -5850,20 +5882,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1606 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="TBOX"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609 PrivateRadioButtonIcon-checked-1611"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5877,7 +5909,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5902,19 +5934,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="ICC"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5928,7 +5960,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5953,19 +5985,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="Charging"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5979,7 +6011,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -6500,10 +6532,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         ICCID
@@ -6546,10 +6578,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Message
@@ -6564,13 +6596,13 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
               >
                 <span
                   aria-disabled="false"
-                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1679 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
                 >
                   <span
                     class="MuiIconButton-label"
                   >
                     <input
-                      class="PrivateSwitchBase-input-1682"
+                      class="PrivateSwitchBase-input-0"
                       data-indeterminate="false"
                       type="checkbox"
                       value="isAwaited"
@@ -7098,10 +7130,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           VIN
@@ -7144,10 +7176,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Model
@@ -7191,10 +7223,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Year
@@ -7238,10 +7270,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Trim
@@ -7268,19 +7300,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="trace"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7294,7 +7326,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7319,19 +7351,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="debug"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7345,7 +7377,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7370,20 +7402,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="info"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403 PrivateRadioButtonIcon-checked-1405"
+                          class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7397,7 +7429,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7422,19 +7454,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="warn"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7448,7 +7480,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7473,19 +7505,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="error"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7499,7 +7531,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7524,19 +7556,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="critical"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7550,7 +7582,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7585,14 +7617,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7651,10 +7683,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                          class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                         >
                           <span>
                             Max Memory Buffer Size (0 uses default size)
@@ -7669,13 +7701,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7736,10 +7768,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Disk Buffer Size (0 uses default size)
@@ -8318,7 +8350,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                   </div>
                   <span
-                    class="PrivateTabIndicator-root-1533 PrivateTabIndicator-colorSecondary-1535 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                     style="left: 0px; width: 0px;"
                   />
                 </div>
diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index 5414382..fff30da 100644
--- a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
index bf0505d..f7f60a2 100644
--- a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
index c5bf8c5..95c6340 100644
--- a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 8fc16ca..ca532b7 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -121,7 +121,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 0a01194..0a175dd 100644
--- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
index c6ad998..f95f4c7 100644
--- a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
index 9d3d430..c6d26c2 100644
--- a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
index f93a306..1fb8994 100644
--- a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
index 02f201a..d6cb489 100644
--- a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 0422987..7cd8290 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 6d14f03..484d38d 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
index d3ecb44..d84a806 100644
--- a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
+++ b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
@@ -52,10 +52,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Contact
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Company
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Address
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Telephone
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Program
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       ECUs
diff --git a/src/utils/snapshot.js b/src/utils/snapshot.js
index 54395e8..819cc59 100644
--- a/src/utils/snapshot.js
+++ b/src/utils/snapshot.js
@@ -1,25 +1,13 @@
-const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
-const rxMUIStyles = /mui-\d*/g;
+const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {
     test: (val) => {
-      return val && typeof val === "string" && val.indexOf("mui-") > -1;
+      return val && typeof val === "string" && val.search(rxStyles) > -1;
     },
     print: (val) => {
       let str = val;
-      str = str.replace(rxMUIStyles, "mui-0");
-
-      return `"${str}"`;
-    },
-  },
-  {
-    test: (val) => {
-      return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
-    },
-    print: (val) => {
-      let str = val;
-      str = str.replace(rxMakeStyles, "makeStyles-$1-0");
+      str = str.replace(rxStyles, "$1$2-0");
 
       return `"${str}"`;
     },

From 7bf91e063917ed1c68b22aeec214b3b29af7f77d Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Thu, 11 Aug 2022 22:54:17 +0600
Subject: [PATCH 02/26] CEC-2207  Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter
---
 .../App/__snapshots__/App.test.js.snap        | 32 +++++++-
 .../List/__snapshots__/index.test.jsx.snap    | 32 +++++++-
 src/components/Cars/List/index.jsx            | 24 +++++-
 .../Controls/OptionsDropdown/index.jsx        | 77 +++++++++++++++++++
 4 files changed, 160 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Controls/OptionsDropdown/index.jsx

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e96d66d..a004604 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -9056,7 +9056,37 @@ exports[`App Route /vehicles authenticated 1`] = `
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                  class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+                >
+                  <div>
+                    <button
+                      aria-haspopup="true"
+                      class="MuiButtonBase-root MuiIconButton-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
                 />
               </div>
               <div
diff --git a/src/components/Cars/List/__snapshots__/index.test.jsx.snap b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
index 11f684d..cc2b5f0 100644
--- a/src/components/Cars/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+              >
+                <div>
+                  <button
+                    aria-haspopup="true"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
               />
             </div>
             <div
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 72ec03d..69e5d18 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import OptionsDropdown from "../../Controls/OptionsDropdown";
 
 const MainForm = () => {
   const classes = useStyles();
   const [search, setSearch] = useState("");
+  const [online, setOnline] = useState(false);
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleOnline = (event) => {
+    setOnline(event.target.checked);
+  }
+
   useEffect(() => {
     setTitle("Vehicles");
     setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} className={classes.textRightAlign} />
+        <Grid item md={2} className={classes.textJustifyAlign}>
+          <OptionsDropdown listId='filter-menu'>
+            <MenuItem>
+              <FormControlLabel control={
+                <Checkbox
+                  checked={online}
+                  onChange={handleOnline}
+                />
+              } label="Only online" />
+            </MenuItem>
+          </OptionsDropdown>
+        </Grid>
+        <Grid item md={2} className={classes.textRightAlign} />
       </Grid>
       <CarSelectionTable
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search }}
+        search={{ search, online: online? true : null}}
       />
     </div>
   );
diff --git a/src/components/Controls/OptionsDropdown/index.jsx b/src/components/Controls/OptionsDropdown/index.jsx
new file mode 100644
index 0000000..81a8403
--- /dev/null
+++ b/src/components/Controls/OptionsDropdown/index.jsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
+import TuneIcon from "@material-ui/icons/Tune";
+
+
+const OptionsDropdown = ({listId, children}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const prevOpen = useRef(open);
+
+  const handleToggle = () => {
+    setOpen((pOpen) => !pOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (<div>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? listId : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <TuneIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({TransitionProps, placement}) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement ===
+                'bottom' ?
+                  'center top' :
+                  'center bottom'
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id={listId}
+                  onKeyDown={handleListKeyDown}
+                >
+                  {children}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default OptionsDropdown;
\ No newline at end of file

From 59a8c934d65ebba1d0e13109d228644e71b299de Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 12 Aug 2022 17:05:43 -0700
Subject: [PATCH 03/26] CEC-2237 Track sign in and keys (#188)

---
 .../List/__snapshots__/index.test.jsx.snap    | 64 +++++++++++++++++++
 src/components/Suppliers/Table/index.jsx      | 18 +++++-
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
index 5b0c8cd..054ef55 100644
--- a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
@@ -190,6 +190,52 @@ exports[`Suppliers page Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Sign In
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Keys
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody
@@ -239,6 +285,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -284,6 +336,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -329,6 +387,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
             </tbody>
             <tfoot
diff --git a/src/components/Suppliers/Table/index.jsx b/src/components/Suppliers/Table/index.jsx
index 4be3ef8..a356f7c 100644
--- a/src/components/Suppliers/Table/index.jsx
+++ b/src/components/Suppliers/Table/index.jsx
@@ -16,7 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -47,9 +47,17 @@ const tableColumns = [
     id: "activated_at",
     label: "Activated",
   },
+  {
+    id: "signin_at",
+    label: "Sign In",
+  },
+  {
+    id: "keys_at",
+    label: "Keys",
+  },
 ];
 
-const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
+const PAGE_SIZE = "SUPPLIER_TABLE_PAGE_SIZE";
 
 const SupplierTable = (props) => {
   const { token, classes } = props;
@@ -137,6 +145,12 @@ const SupplierTable = (props) => {
                 <TableCell align="center">
                   {LocalDateTimeString(row.activated)}
                 </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.signin_at)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.keys_at)}
+                </TableCell>
               </TableRow>
             );
           })}

From 03931434c4f73280a19ffe64720a194b5c6cd7f1 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Mon, 15 Aug 2022 09:27:15 -0700
Subject: [PATCH 04/26] Update stage (#189)

* CEC-2056 safari map (#186)

* CEC-2056 Fix Safari map popup

* Snapshot serializer for Private styles

* Combine serializers

* CEC-2207  Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter

* CEC-2237 Track sign in and keys (#188)

Co-authored-by: arpanetus <arpanetus@protonmail.com>
---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 .../App/__snapshots__/App.test.js.snap        | 242 +++++++++++-------
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |  80 +++---
 .../List/__snapshots__/index.test.jsx.snap    |  32 ++-
 src/components/Cars/List/index.jsx            |  24 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  80 +++---
 .../Controls/OptionsDropdown/index.jsx        |  77 ++++++
 .../Add/__snapshots__/index.test.jsx.snap     |  68 ++---
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |   4 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  68 ++---
 .../Details/__snapshots__/index.test.js.snap  |  24 +-
 .../List/__snapshots__/index.test.jsx.snap    |  64 +++++
 src/components/Suppliers/Table/index.jsx      |  18 +-
 src/utils/snapshot.js                         |  18 +-
 21 files changed, 560 insertions(+), 307 deletions(-)
 create mode 100644 src/components/Controls/OptionsDropdown/index.jsx

diff --git a/package-lock.json b/package-lock.json
index ea0312a..8182dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "clsx": "^1.1.1",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -11593,9 +11593,9 @@
       }
     },
     "node_modules/leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "node_modules/leven": {
       "version": "3.1.0",
@@ -25739,9 +25739,9 @@
       }
     },
     "leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "leven": {
       "version": "3.1.0",
diff --git a/package.json b/package.json
index c1c5967..a6539a1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index b642c4e..a004604 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -350,7 +350,7 @@ exports[`App Route / authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -380,10 +380,10 @@ exports[`App Route / authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -405,22 +405,32 @@ exports[`App Route / authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -438,11 +448,17 @@ exports[`App Route / authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -868,7 +884,7 @@ exports[`App Route /home authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -898,10 +914,10 @@ exports[`App Route /home authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -923,22 +939,32 @@ exports[`App Route /home authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -956,11 +982,17 @@ exports[`App Route /home authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -1459,10 +1491,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Package name
@@ -1505,10 +1537,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Version
@@ -1559,10 +1591,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Description
@@ -1606,10 +1638,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Release Notes URL
@@ -2157,11 +2189,11 @@ exports[`App Route /package-create authenticated 1`] = `
                           </svg>
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                             style="padding-left: 8px;"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legend-1329"
+                              class="PrivateNotchedOutline-legend-0"
                               style="width: 0.01px;"
                             >
                               <span>
@@ -2384,11 +2416,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                   </svg>
                                   <fieldset
                                     aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                                     style="padding-left: 8px;"
                                   >
                                     <legend
-                                      class="PrivateNotchedOutline-legend-1329"
+                                      class="PrivateNotchedOutline-legend-0"
                                       style="width: 0.01px;"
                                     >
                                       <span>
@@ -3057,14 +3089,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1261 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1264"
+                                    class="PrivateSwitchBase-input-0"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -5820,10 +5852,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1601 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1603"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -5850,20 +5882,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1606 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="TBOX"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609 PrivateRadioButtonIcon-checked-1611"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5877,7 +5909,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5902,19 +5934,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="ICC"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5928,7 +5960,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5953,19 +5985,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="Charging"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5979,7 +6011,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -6500,10 +6532,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         ICCID
@@ -6546,10 +6578,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Message
@@ -6564,13 +6596,13 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
               >
                 <span
                   aria-disabled="false"
-                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1679 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
                 >
                   <span
                     class="MuiIconButton-label"
                   >
                     <input
-                      class="PrivateSwitchBase-input-1682"
+                      class="PrivateSwitchBase-input-0"
                       data-indeterminate="false"
                       type="checkbox"
                       value="isAwaited"
@@ -7098,10 +7130,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           VIN
@@ -7144,10 +7176,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Model
@@ -7191,10 +7223,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Year
@@ -7238,10 +7270,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Trim
@@ -7268,19 +7300,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="trace"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7294,7 +7326,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7319,19 +7351,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="debug"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7345,7 +7377,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7370,20 +7402,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="info"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403 PrivateRadioButtonIcon-checked-1405"
+                          class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7397,7 +7429,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7422,19 +7454,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="warn"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7448,7 +7480,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7473,19 +7505,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="error"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7499,7 +7531,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7524,19 +7556,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="critical"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7550,7 +7582,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7585,14 +7617,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7651,10 +7683,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                          class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                         >
                           <span>
                             Max Memory Buffer Size (0 uses default size)
@@ -7669,13 +7701,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7736,10 +7768,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Disk Buffer Size (0 uses default size)
@@ -8318,7 +8350,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                   </div>
                   <span
-                    class="PrivateTabIndicator-root-1533 PrivateTabIndicator-colorSecondary-1535 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                     style="left: 0px; width: 0px;"
                   />
                 </div>
@@ -9024,7 +9056,37 @@ exports[`App Route /vehicles authenticated 1`] = `
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                  class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+                >
+                  <div>
+                    <button
+                      aria-haspopup="true"
+                      class="MuiButtonBase-root MuiIconButton-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
                 />
               </div>
               <div
diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index 5414382..fff30da 100644
--- a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
index bf0505d..f7f60a2 100644
--- a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
index c5bf8c5..95c6340 100644
--- a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Cars/List/__snapshots__/index.test.jsx.snap b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
index 11f684d..cc2b5f0 100644
--- a/src/components/Cars/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+              >
+                <div>
+                  <button
+                    aria-haspopup="true"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
               />
             </div>
             <div
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 72ec03d..69e5d18 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import OptionsDropdown from "../../Controls/OptionsDropdown";
 
 const MainForm = () => {
   const classes = useStyles();
   const [search, setSearch] = useState("");
+  const [online, setOnline] = useState(false);
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleOnline = (event) => {
+    setOnline(event.target.checked);
+  }
+
   useEffect(() => {
     setTitle("Vehicles");
     setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} className={classes.textRightAlign} />
+        <Grid item md={2} className={classes.textJustifyAlign}>
+          <OptionsDropdown listId='filter-menu'>
+            <MenuItem>
+              <FormControlLabel control={
+                <Checkbox
+                  checked={online}
+                  onChange={handleOnline}
+                />
+              } label="Only online" />
+            </MenuItem>
+          </OptionsDropdown>
+        </Grid>
+        <Grid item md={2} className={classes.textRightAlign} />
       </Grid>
       <CarSelectionTable
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search }}
+        search={{ search, online: online? true : null}}
       />
     </div>
   );
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 8fc16ca..ca532b7 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -121,7 +121,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 0a01194..0a175dd 100644
--- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Controls/OptionsDropdown/index.jsx b/src/components/Controls/OptionsDropdown/index.jsx
new file mode 100644
index 0000000..81a8403
--- /dev/null
+++ b/src/components/Controls/OptionsDropdown/index.jsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
+import TuneIcon from "@material-ui/icons/Tune";
+
+
+const OptionsDropdown = ({listId, children}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const prevOpen = useRef(open);
+
+  const handleToggle = () => {
+    setOpen((pOpen) => !pOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (<div>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? listId : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <TuneIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({TransitionProps, placement}) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement ===
+                'bottom' ?
+                  'center top' :
+                  'center bottom'
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id={listId}
+                  onKeyDown={handleListKeyDown}
+                >
+                  {children}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default OptionsDropdown;
\ No newline at end of file
diff --git a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
index c6ad998..f95f4c7 100644
--- a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
index 9d3d430..c6d26c2 100644
--- a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
index f93a306..1fb8994 100644
--- a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
index 02f201a..d6cb489 100644
--- a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 0422987..7cd8290 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 6d14f03..484d38d 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <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-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
index d3ecb44..d84a806 100644
--- a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
+++ b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
@@ -52,10 +52,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Contact
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Company
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Address
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Telephone
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Program
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       ECUs
diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
index 5b0c8cd..054ef55 100644
--- a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
@@ -190,6 +190,52 @@ exports[`Suppliers page Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Sign In
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Keys
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody
@@ -239,6 +285,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -284,6 +336,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -329,6 +387,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
             </tbody>
             <tfoot
diff --git a/src/components/Suppliers/Table/index.jsx b/src/components/Suppliers/Table/index.jsx
index 4be3ef8..a356f7c 100644
--- a/src/components/Suppliers/Table/index.jsx
+++ b/src/components/Suppliers/Table/index.jsx
@@ -16,7 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -47,9 +47,17 @@ const tableColumns = [
     id: "activated_at",
     label: "Activated",
   },
+  {
+    id: "signin_at",
+    label: "Sign In",
+  },
+  {
+    id: "keys_at",
+    label: "Keys",
+  },
 ];
 
-const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
+const PAGE_SIZE = "SUPPLIER_TABLE_PAGE_SIZE";
 
 const SupplierTable = (props) => {
   const { token, classes } = props;
@@ -137,6 +145,12 @@ const SupplierTable = (props) => {
                 <TableCell align="center">
                   {LocalDateTimeString(row.activated)}
                 </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.signin_at)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.keys_at)}
+                </TableCell>
               </TableRow>
             );
           })}
diff --git a/src/utils/snapshot.js b/src/utils/snapshot.js
index 54395e8..819cc59 100644
--- a/src/utils/snapshot.js
+++ b/src/utils/snapshot.js
@@ -1,25 +1,13 @@
-const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
-const rxMUIStyles = /mui-\d*/g;
+const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {
     test: (val) => {
-      return val && typeof val === "string" && val.indexOf("mui-") > -1;
+      return val && typeof val === "string" && val.search(rxStyles) > -1;
     },
     print: (val) => {
       let str = val;
-      str = str.replace(rxMUIStyles, "mui-0");
-
-      return `"${str}"`;
-    },
-  },
-  {
-    test: (val) => {
-      return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
-    },
-    print: (val) => {
-      let str = val;
-      str = str.replace(rxMakeStyles, "makeStyles-$1-0");
+      str = str.replace(rxStyles, "$1$2-0");
 
       return `"${str}"`;
     },

From f0b2a4f21733600fd6e1fe06406dcd6d0bf417e5 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Tue, 23 Aug 2022 08:51:05 -0700
Subject: [PATCH 05/26] CEC-2281 Update certificate form (#190)

---
 .../App/__snapshots__/App.test.js.snap        | 63 +++++++++++++++++--
 .../Certificates/Add/CreateForm.jsx           | 22 +++++--
 .../Contexts/CertificateContext.jsx           |  3 +-
 3 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index a004604..7a23895 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -5825,10 +5825,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 <label
                   class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
-                  for="vin"
-                  id="vin-label"
+                  for="common_name"
+                  id="common_name-label"
                 >
-                  VIN
+                  Common Name (VIN)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -5843,9 +5843,9 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="vin"
+                    id="common_name"
                     maxlength="17"
-                    name="vin"
+                    name="common_name"
                     required=""
                     type="text"
                     value=""
@@ -5858,7 +5858,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        VIN
+                        Common Name (VIN)
                          *
                       </span>
                     </legend>
@@ -6031,6 +6031,57 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                     Charging
                   </span>
                 </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        name="cert-type"
+                        type="radio"
+                        value="Aftersales"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-0"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Aftersales
+                  </span>
+                </label>
               </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
diff --git a/src/components/Certificates/Add/CreateForm.jsx b/src/components/Certificates/Add/CreateForm.jsx
index 86de585..56dc372 100644
--- a/src/components/Certificates/Add/CreateForm.jsx
+++ b/src/components/Certificates/Add/CreateForm.jsx
@@ -11,9 +11,14 @@ import {
 import useStyles from "../../useStyles";
 import { CertTypes } from "../../Contexts/CertificateContext";
 
+const getCertTypeLabel = (certtype) => {
+  if (certtype === CertTypes.Aftersales) return "Service Tool ID";
+  return "VIN";
+};
+
 const CreateForm = ({ onCreate, busy }) => {
   const classes = useStyles();
-  const vinEl = useRef(null);
+  const commonnameEl = useRef(null);
   const [certType, setCertType] = useState(CertTypes.TBOX);
 
   const onSubmit = async (event) => {
@@ -21,7 +26,7 @@ const CreateForm = ({ onCreate, busy }) => {
 
     if (onCreate)
       onCreate({
-        vin: vinEl.current.value,
+        common_name: commonnameEl.current.value,
         type: certType,
       });
   };
@@ -34,9 +39,9 @@ const CreateForm = ({ onCreate, busy }) => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <TextField
-          id="vin"
-          name="vin"
-          label="VIN"
+          id="common_name"
+          name="common_name"
+          label={`Common Name (${getCertTypeLabel(certType)})`}
           variant="outlined"
           margin="normal"
           inputProps={{
@@ -44,7 +49,7 @@ const CreateForm = ({ onCreate, busy }) => {
           }}
           required
           fullWidth
-          inputRef={vinEl}
+          inputRef={commonnameEl}
         />
         <FormLabel id="cert-type-group-label">Type</FormLabel>
         <RadioGroup
@@ -70,6 +75,11 @@ const CreateForm = ({ onCreate, busy }) => {
             control={<Radio />}
             label="Charging"
           />
+          <FormControlLabel
+            value={CertTypes.Aftersales}
+            control={<Radio />}
+            label="Aftersales"
+          />
         </RadioGroup>
         <Button
           type="submit"
diff --git a/src/components/Contexts/CertificateContext.jsx b/src/components/Contexts/CertificateContext.jsx
index 6b4b634..0274d95 100644
--- a/src/components/Contexts/CertificateContext.jsx
+++ b/src/components/Contexts/CertificateContext.jsx
@@ -8,11 +8,12 @@ export const CertTypes = {
   TBOX: "TBOX",
   ICC: "ICC",
   Charging: "Charging",
+  Aftersales: "Aftersales",
 };
 
 const validateCreate = (data) => {
   if (!data.type) throw new Error("type is required");
-  if (!data.vin) throw new Error("vin is required");
+  if (!data.common_name) throw new Error("common name is required");
 };
 
 export const CertificateProvider = ({ children }) => {

From bf0b43dad5c0de730d12967f1e3f3613095d859e Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Tue, 23 Aug 2022 18:18:00 -0700
Subject: [PATCH 06/26] CEC-2281 Fix cert name

---
 .../App/__snapshots__/App.test.js.snap        | 51 -------------------
 .../Certificates/Add/CreateForm.jsx           |  5 --
 .../Certificates/Add/DownloadCerts.jsx        | 11 ++--
 .../__snapshots__/DownloadCerts.test.jsx.snap |  8 +--
 src/components/Certificates/Add/index.jsx     | 12 ++---
 src/services/certificatesAPI.js               | 12 +++++
 6 files changed, 30 insertions(+), 69 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 7a23895..582864f 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6031,57 +6031,6 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                     Charging
                   </span>
                 </label>
-                <label
-                  class="MuiFormControlLabel-root"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
-                  >
-                    <span
-                      class="MuiIconButton-label"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-0"
-                        name="cert-type"
-                        type="radio"
-                        value="Aftersales"
-                      />
-                      <div
-                        class="PrivateRadioButtonIcon-root-0"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                          />
-                        </svg>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                    <span
-                      class="MuiTouchRipple-root"
-                    />
-                  </span>
-                  <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
-                  >
-                    Aftersales
-                  </span>
-                </label>
               </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
diff --git a/src/components/Certificates/Add/CreateForm.jsx b/src/components/Certificates/Add/CreateForm.jsx
index 56dc372..fe00a43 100644
--- a/src/components/Certificates/Add/CreateForm.jsx
+++ b/src/components/Certificates/Add/CreateForm.jsx
@@ -75,11 +75,6 @@ const CreateForm = ({ onCreate, busy }) => {
             control={<Radio />}
             label="Charging"
           />
-          <FormControlLabel
-            value={CertTypes.Aftersales}
-            control={<Radio />}
-            label="Aftersales"
-          />
         </RadioGroup>
         <Button
           type="submit"
diff --git a/src/components/Certificates/Add/DownloadCerts.jsx b/src/components/Certificates/Add/DownloadCerts.jsx
index 140ed82..b8dace1 100644
--- a/src/components/Certificates/Add/DownloadCerts.jsx
+++ b/src/components/Certificates/Add/DownloadCerts.jsx
@@ -6,7 +6,12 @@ import useStyles from "../../useStyles";
 
 const CertMimeType = "application/x-pem-file";
 
-const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
+const DownloadCerts = ({
+  commonName,
+  publicCert,
+  privateCert,
+  onChangeView,
+}) => {
   const classes = useStyles();
 
   const onNewCert = (event) => {
@@ -21,14 +26,14 @@ const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
         <li>
           <DownloadFileLink
             data={publicCert}
-            filename={`${vin}_cert.pem`}
+            filename={`${commonName}_cert.pem`}
             mimetype={CertMimeType}
           />
         </li>
         <li>
           <DownloadFileLink
             data={privateCert}
-            filename={`${vin}_key.pem`}
+            filename={`${commonName}_key.pem`}
             mimetype={CertMimeType}
           />
         </li>
diff --git a/src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap b/src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap
index 0c6258e..f46ed89 100644
--- a/src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap
+++ b/src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap
@@ -9,16 +9,16 @@ exports[`DownloadCerts Render 1`] = `
     <ul>
       <li>
         <a
-          download="TESTVIN_cert.pem"
+          download="undefined_cert.pem"
         >
-          TESTVIN_cert.pem
+          undefined_cert.pem
         </a>
       </li>
       <li>
         <a
-          download="TESTVIN_key.pem"
+          download="undefined_key.pem"
         >
-          TESTVIN_key.pem
+          undefined_key.pem
         </a>
       </li>
     </ul>
diff --git a/src/components/Certificates/Add/index.jsx b/src/components/Certificates/Add/index.jsx
index bfbb9f9..4b3e2ba 100644
--- a/src/components/Certificates/Add/index.jsx
+++ b/src/components/Certificates/Add/index.jsx
@@ -24,7 +24,7 @@ const MainForm = () => {
   const [view, setView] = useState(VIEW_FORM);
   const [pubCert, setPubCert] = useState(null);
   const [privCert, setPrivCert] = useState(null);
-  const [vin, setVIN] = useState(null);
+  const [commonName, setCommonName] = useState(null);
 
   useEffect(() => {
     setTitle("Create Certificate");
@@ -46,19 +46,19 @@ const MainForm = () => {
 
       setPubCert(result.public_key);
       setPrivCert(result.private_key);
-      setVIN(data.vin);
-      setMessage(`Created ${data.vin} certificate`);
+      setCommonName(data.common_name);
+      setMessage(`Created ${data.common_name} certificate`);
       setView(VIEW_DOWNLOAD);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-  };  
+  };
 
   const onChangeView = () => {
     setPubCert(null);
     setPrivCert(null);
-    setVIN(null);
+    setCommonName(null);
 
     setView(VIEW_FORM);
   };
@@ -66,7 +66,7 @@ const MainForm = () => {
   if (view === VIEW_DOWNLOAD)
     return (
       <DownloadCerts
-        vin={vin}
+        commonName={commonName}
         publicCert={pubCert}
         privateCert={privCert}
         onChangeView={onChangeView}
diff --git a/src/services/certificatesAPI.js b/src/services/certificatesAPI.js
index 3313723..d0a0a5d 100644
--- a/src/services/certificatesAPI.js
+++ b/src/services/certificatesAPI.js
@@ -18,6 +18,18 @@ const certificatesAPI = {
     })
       .then(fetchRespHandler)
       .catch(errorHandler),
+
+  createAftersales: async (data, token) =>
+    fetch(`${API_ENDPOINT}/create-aftersales`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(data),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
 };
 
 export default certificatesAPI;

From aa36b2eb9199eff02379bbc023eadbac9e7bbafb Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 26 Aug 2022 16:12:12 -0700
Subject: [PATCH 07/26] CEC-2360 Fix filename display and add manifest type
 (#191)

* CEC-2360 Fix filename display and add manifest type

* const
---
 .../Contexts/__mocks__/ManifestsContext.jsx         |  2 --
 .../Details/__snapshots__/index.test.jsx.snap       |  4 ++--
 src/components/Manifest/Details/index.jsx           | 13 ++++++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Contexts/__mocks__/ManifestsContext.jsx b/src/components/Contexts/__mocks__/ManifestsContext.jsx
index 17a2638..cc0023d 100644
--- a/src/components/Contexts/__mocks__/ManifestsContext.jsx
+++ b/src/components/Contexts/__mocks__/ManifestsContext.jsx
@@ -18,7 +18,6 @@ let manifest = {
       files: [
         {
           file_id: "b0cda514c94080b4",
-          filename: "LARGE.jpg",
           url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/LARGE.jpg",
           write_region: {
             offset: 100,
@@ -35,7 +34,6 @@ let manifest = {
         },
         {
           file_id: "4B897b1DcbeCds8e9",
-          filename: "SMALL.jpg",
           url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/SMALL.jpg",
           write_region: {
             offset: 120559274,
diff --git a/src/components/Manifest/Details/__snapshots__/index.test.jsx.snap b/src/components/Manifest/Details/__snapshots__/index.test.jsx.snap
index 1042fa1..9c0fd0d 100644
--- a/src/components/Manifest/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Manifest/Details/__snapshots__/index.test.jsx.snap
@@ -107,7 +107,7 @@ Object {
           </div>
           <ul>
             <li>
-              Test Deployment 1.0.100
+              Test Deployment 1.0.100 [standard]
             </li>
             <li>
               Deployment folder test https://releasenotes.com
@@ -162,7 +162,7 @@ Object {
         </div>
         <ul>
           <li>
-            Test Deployment 1.0.100
+            Test Deployment 1.0.100 [standard]
           </li>
           <li>
             Deployment folder test https://releasenotes.com
diff --git a/src/components/Manifest/Details/index.jsx b/src/components/Manifest/Details/index.jsx
index addf6eb..a2b18e8 100644
--- a/src/components/Manifest/Details/index.jsx
+++ b/src/components/Manifest/Details/index.jsx
@@ -11,13 +11,18 @@ const getMemoryRegion = (label, region) => {
   return `, ${label}: [Offset: ${region.offset}, Length: ${region.length}]`;
 };
 
+const getFilename = (url) => {
+  const items = url.split("/");
+  return items[items.length - 1];
+};
+
 const ECUFileList = (files) => {
   if (!files || files.length === 0) return "No files";
   return (
     <ul>
       {files.map((file) => (
-        <li key={file.filename}>
-          <a href={file.url}>{file.filename}</a>
+        <li key={file.file_id}>
+          <a href={file.url}>{getFilename(file.url)}</a>
           {`, File ID: ${file.file_id}, Type: ${file.type}, Download Size: ${
             file.file_size
           }, CRC32: ${file.checksum ?? "00000000"}
@@ -99,7 +104,9 @@ const ManifestDetails = ({ opened }) => {
         Hide Details
       </div>
       <ul>
-        <li>{`${manifest.name} ${manifest.version}`}</li>
+        <li>{`${manifest.name} ${manifest.version} [${
+          manifest.type || "standard"
+        }]`}</li>
         <li>{`${manifest.description} ${manifest.release_notes}`}</li>
         <li>ECUs: {ECUList(manifest.ecu_updates)}</li>
       </ul>

From 8d0dbf8030dd5745cd019363dc3ea9fcb8b39319 Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Tue, 30 Aug 2022 03:31:26 +0600
Subject: [PATCH 08/26] CEC-2144, CEC-2338  Add deploy by fleets and fix fleets
 table  (#192)

* Add fix for fleets search

* Decompose fleets table

* Add deploy by fleets

* Add snapshots
---
 .../App/__snapshots__/App.test.js.snap        | 214 +++--
 src/components/Contexts/CarUpdatesContext.jsx |  34 +-
 .../Controls/CarSelectionTable/index.jsx      |   6 +-
 .../Controls/FleetSelectionTable/index.jsx    | 199 +++++
 .../Table/__snapshots__/index.test.jsx.snap   | 744 +++++++++---------
 src/components/Fleets/Table/index.jsx         | 170 +---
 .../Manifest/Deploy/FleetDeployForm.jsx       | 177 +++++
 .../Manifest/Deploy/VehicleDeployForm.jsx     | 175 ++++
 src/components/Manifest/Deploy/index.jsx      | 121 +--
 src/services/__mocks__/updatesAPI.js          |   6 +
 src/services/updatesAPI.js                    |  27 +-
 11 files changed, 1210 insertions(+), 663 deletions(-)
 create mode 100644 src/components/Controls/FleetSelectionTable/index.jsx
 create mode 100644 src/components/Manifest/Deploy/FleetDeployForm.jsx
 create mode 100644 src/components/Manifest/Deploy/VehicleDeployForm.jsx

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 582864f..507ed57 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -2965,112 +2965,154 @@ exports[`App Route /package-deploy authenticated 1`] = `
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            data-testid="mocked-vehicleprovider"
+            data-testid="mocked-manifestsprovider"
           >
             <div
-              data-testid="mocked-manifestsprovider"
+              data-testid="mocked-carupdatesprovider"
             >
               <div
-                data-testid="mocked-carupdatesprovider"
+                class="makeStyles-paper-0"
               >
-                <div
-                  class="makeStyles-paper-0"
+                <form
+                  action="{onSubmit}"
+                  class="makeStyles-form-0"
+                  novalidate=""
                 >
-                  <form
-                    action="{onSubmit}"
-                    class="makeStyles-form-0"
-                    novalidate=""
+                  <p
+                    class="MuiTypography-root MuiTypography-body2"
+                  >
+                    Created 
+                    7/1/2021 10:40:07 PM
+                    .
+                  </p>
+                  <div
+                    class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
                   >
-                    <p
-                      class="MuiTypography-root MuiTypography-body2"
-                    >
-                      Created 
-                      7/1/2021 10:40:07 PM
-                      .
-                    </p>
                     <div
-                      class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-2"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
+                        class="makeStyles-labelInline-0"
                       >
-                        <div
-                          class="makeStyles-labelInline-0"
-                        >
-                          0 Selected
-                        </div>
+                        0 Selected
                       </div>
-                      <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+                    >
+                      <label
+                        class="MuiFormControlLabel-root"
                       >
-                        <div
-                          class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                        <span
+                          class="MuiSwitch-root"
                         >
-                          <label
-                            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-                            data-shrink="false"
-                            for="search"
+                          <span
+                            aria-disabled="false"
+                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-0 Mui-checked"
                           >
-                            Search
-                          </label>
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                              id="search"
-                              type="text"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                            <span
+                              class="MuiIconButton-label"
                             >
-                              <button
-                                aria-label="search"
-                                class="MuiButtonBase-root MuiIconButton-root"
-                                tabindex="0"
-                                type="button"
+                              <input
+                                aria-label="controlled"
+                                checked=""
+                                class="PrivateSwitchBase-input-0 MuiSwitch-input"
+                                type="checkbox"
+                                value=""
+                              />
+                              <span
+                                class="MuiSwitch-thumb"
+                              />
+                            </span>
+                            <span
+                              class="MuiTouchRipple-root"
+                            />
+                          </span>
+                          <span
+                            class="MuiSwitch-track"
+                          />
+                        </span>
+                        <span
+                          class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                        >
+                          Car(default) or Fleet
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    >
+                      <div
+                        class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                      >
+                        <label
+                          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                          data-shrink="false"
+                          for="search"
+                        >
+                          Search
+                        </label>
+                        <div
+                          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                            id="search"
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                          >
+                            <button
+                              aria-label="search"
+                              class="MuiButtonBase-root MuiIconButton-root"
+                              tabindex="0"
+                              type="button"
+                            >
+                              <span
+                                class="MuiIconButton-label"
                               >
-                                <span
-                                  class="MuiIconButton-label"
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                                    />
-                                  </svg>
-                                </span>
-                                <span
-                                  class="MuiTouchRipple-root"
-                                />
-                              </button>
-                            </div>
+                                  <path
+                                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                class="MuiTouchRipple-root"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
-                      <div
-                        class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-                      >
-                        <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-0 makeStyles-textField-0 MuiButton-containedPrimary Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          type="submit"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            Deploy
-                          </span>
-                        </button>
-                      </div>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    >
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-0 makeStyles-textField-0 MuiButton-containedPrimary Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        type="submit"
+                      >
+                        <span
+                          class="MuiButton-label"
+                        >
+                          Deploy
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    data-testid="mocked-vehicleprovider"
+                  >
                     <div
                       class="makeStyles-paper-0 makeStyles-tableSize-0"
                     >
@@ -3393,8 +3435,8 @@ exports[`App Route /package-deploy authenticated 1`] = `
                         </tfoot>
                       </table>
                     </div>
-                  </form>
-                </div>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index 97c2802..7638004 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -6,7 +6,8 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-const validateDeployCarUpdates = (data) => {
+
+const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
   }
@@ -15,11 +16,21 @@ const validateDeployCarUpdates = (data) => {
     throw new Error("Manifest id required");
   }
 
-  if (!data.vins || data.vins.length === 0) {
-    throw new Error("Cars are required");
+  const { [propertyName]: value } = data;
+  if (!value || value.length === 0) {
+    throw new Error(`${errPfx} are required`);
   }
+}
+
+const validateDeployCarUpdates = (data) => {
+  return validateDeployClosure(data, 'vins', 'Cars')
 };
 
+const validateDeployFleetUpdates = (data) => {
+  return validateDeployClosure(data, 'fleet_names', 'Fleets')
+};
+
+
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -43,6 +54,22 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deployFleetUpdates = async (data, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      validateDeployFleetUpdates(data);
+      result = await api.createFleetUpdates(data, token);
+      if  (result.error)
+        throw new Error(`Deploy fleet updates error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  }
+
   const getCarUpdates = async (search, token) => {
     let result;
 
@@ -204,6 +231,7 @@ export const CarUpdatesProvider = ({ children }) => {
         carUpdates,
         totalCarUpdates,
         deployCarUpdates,
+        deployFleetUpdates,
         getCarUpdates,
         getLog,
         getVINUpdates,
diff --git a/src/components/Controls/CarSelectionTable/index.jsx b/src/components/Controls/CarSelectionTable/index.jsx
index 7a5d741..219e69b 100644
--- a/src/components/Controls/CarSelectionTable/index.jsx
+++ b/src/components/Controls/CarSelectionTable/index.jsx
@@ -60,6 +60,7 @@ const CarSelectionTable = (props) => {
     onSelect,
     onSelectAll,
   } = props;
+
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
@@ -67,7 +68,8 @@ const CarSelectionTable = (props) => {
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage } = useStatusContext();
   const { search: searchTerm } = search;
-  const sortHandler = (_event, property) => {
+
+  const handleSort = (_event, property) => {
     if (property === orderBy) {
       if (order === "asc") {
         setOrder("desc");
@@ -137,7 +139,7 @@ const CarSelectionTable = (props) => {
           orderBy={orderBy}
           order={order}
           columnData={tableColumns}
-          onSortRequest={sortHandler}
+          onSortRequest={handleSort}
           multiSelect={multiSelect}
           onSelectAll={handleSelectAll}
           selectCount={selected ? selected.length : 0}
diff --git a/src/components/Controls/FleetSelectionTable/index.jsx b/src/components/Controls/FleetSelectionTable/index.jsx
new file mode 100644
index 0000000..e75df0e
--- /dev/null
+++ b/src/components/Controls/FleetSelectionTable/index.jsx
@@ -0,0 +1,199 @@
+import React, {useEffect, useState} from "react";
+import {Link} from 'react-router-dom';
+import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
+import clsx from "clsx";
+
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {useFleetContext} from "../../Contexts/FleetContext"
+import {logger} from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
+import PropTypes from "prop-types";
+
+const tableColumns = [
+  {
+    id: "name",
+    label: "Name"
+  },
+  {
+    id: "log_level",
+    label: "Log Level"
+  },
+  {
+    id: "canbus_enabled",
+    label: "CAN Bus Enabled"
+  },
+  {
+    id: "data_logger_enabled",
+    label: "Data Logger Enabled"
+  },
+  {
+    id: "num_vehicles",
+    label: "Vehicles"
+  },
+  {
+    id: "num_filters",
+    label: "Filters"
+  }
+];
+
+const PAGE_SIZE = "FLEET_SELECTION_TABLE_PAGE_SIZE";
+
+const FleetSelectionTable = (props) => {
+  const {
+    token,
+    classes,
+    search,
+    multiSelect,
+    selected,
+    onSelect,
+    onSelectAll,
+  } = props;
+
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const { fleets, getFleets, totalFleets } = useFleetContext();
+  const { setMessage } = useStatusContext();
+  const { search: searchTerm } = search;
+
+  const handleSort = (_event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (_event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSelectAll = (event) => {
+    if (!onSelectAll) return;
+
+    const newSelected = [];
+    if (event.target.checked) {
+      fleets.forEach((car) => {
+        newSelected.push(car.name);
+      });
+    }
+
+    onSelectAll(newSelected);
+  };
+
+  const handleSelect = (event, key) => {
+    if (!onSelect) return;
+
+    onSelect(event, key);
+  };
+
+
+  useEffect(() => {
+    const options = { search: searchTerm,
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+    };
+    (async () => {
+      try {
+        if (!token) return;
+        await getFleets(options, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order, searchTerm]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+          multiSelect={multiSelect}
+          onSelectAll={handleSelectAll}
+          selectCount={selected ? selected.length : 0}
+          rowCount={fleets ? fleets.length : 0}
+        />
+        <TableBody>
+          {fleets.map((row) => {
+              const isSelected = selected
+                ? selected.indexOf(row.name) !== -1
+                : false;
+              return (
+                <TableRow key={row.name}>
+                  {multiSelect && (
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={(event) => handleSelect(event, row.name)}
+                      />
+                    </TableCell>
+                  )}
+                  <TableCell align="center">
+                    <Link to={`/fleet/${row.name}`}>{row.name}</Link>
+                  </TableCell>
+                  <TableCell align="center">{row.log_level}</TableCell>
+                  <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
+                  <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
+                </TableRow>)
+            }
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleets}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: {"aria-label": "rows per page"},
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  );
+};
+
+FleetSelectionTable.propTypes = {
+  token: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  search: PropTypes.object.isRequired,
+  multiSelect: PropTypes.bool.isRequired,
+  selected: PropTypes.array,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  connectionStatus: PropTypes.bool,
+}
+
+export default FleetSelectionTable;
diff --git a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
index c8e656b..5f9f641 100644
--- a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
@@ -24,7 +24,6 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-0"
                   href="/fleet-add"
                 >
                   <svg
@@ -40,7 +39,6 @@ exports[`FleetTable Render 1`] = `
                 </a>
               </div>
               <div
-                align="right"
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
@@ -98,397 +96,401 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
-            <table
-              class="MuiTable-root"
+            <div
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
-              <thead
-                class="MuiTableHead-root"
+              <table
+                class="MuiTable-root"
               >
-                <tr
-                  class="MuiTableRow-root MuiTableRow-head"
+                <thead
+                  class="MuiTableHead-root"
                 >
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root MuiTableRow-head"
                   >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
                     >
-                      Name
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
                       >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Log Level
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      CAN Bus Enabled
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Data Logger Enabled
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Vehicles
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Filters
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root"
-              >
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-WEST"
-                    >
-                      US-WEST
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    info
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-CENTRAL"
-                    >
-                      US-CENTRAL
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    warn
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    0
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-EAST"
-                    >
-                      US-EAST
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    error
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    0
-                  </td>
-                </tr>
-              </tbody>
-              <tfoot
-                class="MuiTableFooter-root"
-              >
-                <tr
-                  class="MuiTableRow-root MuiTableRow-footer"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                    colspan="8"
-                  >
-                    <div
-                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
-                    >
-                      <div
-                        class="MuiTablePagination-spacer"
-                      />
-                      <p
-                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                      >
-                        Rows per page:
-                      </p>
-                      <div
-                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
-                      >
-                        <select
-                          aria-label="rows per page"
-                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
-                        >
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="5"
-                          >
-                            5
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="10"
-                          >
-                            10
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="25"
-                          >
-                            25
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="100"
-                          >
-                            100
-                          </option>
-                        </select>
+                        Name
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M7 10l5 5 5-5z"
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                           />
                         </svg>
-                      </div>
-                      <p
-                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
                       >
-                        1-3 of 3
-                      </p>
+                        Log Level
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        CAN Bus Enabled
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Data Logger Enabled
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Vehicles
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Filters
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root"
+                >
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-WEST"
+                      >
+                        US-WEST
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      info
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-CENTRAL"
+                      >
+                        US-CENTRAL
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      warn
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      0
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-EAST"
+                      >
+                        US-EAST
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      error
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      0
+                    </td>
+                  </tr>
+                </tbody>
+                <tfoot
+                  class="MuiTableFooter-root"
+                >
+                  <tr
+                    class="MuiTableRow-root MuiTableRow-footer"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                      colspan="8"
+                    >
                       <div
-                        class="MuiTablePagination-actions"
+                        class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
                       >
-                        <button
-                          aria-label="Previous page"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          title="Previous page"
-                          type="button"
+                        <div
+                          class="MuiTablePagination-spacer"
+                        />
+                        <p
+                          class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                         >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          aria-label="Next page"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          title="Next page"
-                          type="button"
+                          Rows per page:
+                        </p>
+                        <div
+                          class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
                         >
-                          <span
-                            class="MuiIconButton-label"
+                          <select
+                            aria-label="rows per page"
+                            class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root"
-                              focusable="false"
-                              viewBox="0 0 24 24"
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="5"
                             >
-                              <path
-                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              5
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="10"
+                            >
+                              10
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="25"
+                            >
+                              25
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="100"
+                            >
+                              100
+                            </option>
+                          </select>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                        <p
+                          class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                        >
+                          1-3 of 3
+                        </p>
+                        <div
+                          class="MuiTablePagination-actions"
+                        >
+                          <button
+                            aria-label="Previous page"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                            disabled=""
+                            tabindex="-1"
+                            title="Previous page"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            aria-label="Next page"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                            disabled=""
+                            tabindex="-1"
+                            title="Next page"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-            </table>
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/Fleets/Table/index.jsx b/src/components/Fleets/Table/index.jsx
index 2ffccf9..2a34897 100644
--- a/src/components/Fleets/Table/index.jsx
+++ b/src/components/Fleets/Table/index.jsx
@@ -1,66 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
-import {
-  Grid,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TablePagination,
-  TableRow
-} from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {Link} from 'react-router-dom';
+import {Grid,} from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import clsx from "clsx";
 
-import TableHeaderSortable from "../../Table/HeaderSortable";
-import {
-  useUserContext
-} from "../../Contexts/UserContext"
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
+import {useUserContext} from "../../Contexts/UserContext"
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {FleetProvider} from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
-import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
 
-const tableColumns = [
-  {
-    id: "name",
-    label: "Name"
-  },
-  {
-    id: "log_level",
-    label: "Log Level"
-  },
-  {
-    id: "canbus_enabled",
-    label: "CAN Bus Enabled"
-  },
-  {
-    id: "data_logger_enabled",
-    label: "Data Logger Enabled"
-  },
-  {
-    id: "num_vehicles",
-    label: "Vehicles"
-  },
-  {
-    id: "num_filters",
-    label: "Filters"
-  }
-];
-
-const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
 
 const MainForm = () => {
-  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
-  const [order, setOrder] = useState("desc");
   const classes = useStyles();
-  const { setMessage, setSitePath, setTitle } = useStatusContext();
-  const { fleets, totalFleets, getFleets } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const [search, setSearch] = useState("");
+  const {setSitePath, setTitle} = useStatusContext();
+  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
 
   useEffect(() => {
     setTitle("Fleets");
@@ -68,106 +28,26 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!token) return;
-        await getFleets(
-          {
-            limit: pageSize,
-            offset: pageSize * pageIndex,
-            order: `${orderBy} ${order}`,
-          },
-          token
-        );
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
-
-  const handleChangePageIndex = (_event, newIndex) => {
-    setPageIndex(newIndex);
-  };
-
-  const handleChangePageSize = (event) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPageIndex(0);
-  };
-
-  const handleSort = (_event, property) => {
-    try {
-      if (property === orderBy) {
-        if (order === "asc") {
-          setOrder("desc");
-        } else {
-          setOrder("asc");
-        }
-      } else {
-        setOrderBy(property);
-        setOrder("asc");
-      }
-    } catch (e) {
-      logger.warn(e.stack);
-    }
-  };
-
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={"/fleet-add"} className={classes.labelInline}>
-            <AddCircleIcon fontSize="large" />
+          <Link to={"/fleet-add"}>
+            <AddCircleIcon fontSize="large"/>
           </Link>
         </Grid>
-        <Grid item md={4} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+        <Grid item md={4} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={handleSearch}/>
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>
-      <Table>
-        <TableHeaderSortable
-          classes={classes}
-          orderBy={orderBy}
-          order={order}
-          columnData={tableColumns}
-          onSortRequest={handleSort}
-        />
-        <TableBody>
-          {fleets.map((row) => (
-            <TableRow key={row.name}>
-              <TableCell align="center">
-                <Link to={`/fleet/${row.name}`}>{row.name}</Link>
-              </TableCell>
-              <TableCell align="center">{row.log_level}</TableCell>
-              <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
-              <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
-              count={totalFleets}
-              rowsPerPage={pageSize}
-              page={pageIndex}
-              SelectProps={{
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              }}
-              onPageChange={handleChangePageIndex}
-              onRowsPerPageChange={handleChangePageSize}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div >
+      <FleetSelectionTable
+        token={token}
+        classes={classes}
+        search={{search}}
+        multiSelect={false}
+      />
+    </div>
   );
 };
 
diff --git a/src/components/Manifest/Deploy/FleetDeployForm.jsx b/src/components/Manifest/Deploy/FleetDeployForm.jsx
new file mode 100644
index 0000000..59890d4
--- /dev/null
+++ b/src/components/Manifest/Deploy/FleetDeployForm.jsx
@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext,
+} from "../../Contexts/CarUpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SearchField from "../../Controls/SearchField";
+import
+  CarSelectionTable from "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [manifestName, setManifestName] = useState("");
+  const [version, setVersion] = useState("");
+  const [createDate, setCreateDate] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const [redirect, setRedirect] = useState("");
+  const classes = useStyles();
+
+  const handleSearch = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const data = {
+        manifest_id: parseInt(manifest_id),
+        vins: selected,
+      };
+      await deployCarUpdates(data, token);
+      setMessage(
+        `Deployed ${manifestName} ${version} to ${selected.length} cars`
+      );
+      setRedirect(`/package-status/${manifest_id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      getManifests({ id: parseInt(manifest_id) }, token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const data = manifests[0];
+
+    setManifestName(data.name);
+    setVersion(data.version);
+    setCreateDate(LocalDateTimeString(data.created));
+  }, [manifests]);
+
+  if (redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <Typography variant="body2">Created {createDate}.</Typography>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const FleetDeployForm = () => (
+  <FleetProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </FleetProvider>
+);
+
+export default FleetDeployForm;
diff --git a/src/components/Manifest/Deploy/VehicleDeployForm.jsx b/src/components/Manifest/Deploy/VehicleDeployForm.jsx
new file mode 100644
index 0000000..e26f8c2
--- /dev/null
+++ b/src/components/Manifest/Deploy/VehicleDeployForm.jsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext,
+} from "../../Contexts/CarUpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [manifestName, setManifestName] = useState("");
+  const [version, setVersion] = useState("");
+  const [createDate, setCreateDate] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const [redirect, setRedirect] = useState("");
+  const classes = useStyles();
+
+  const handleSearch = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const data = {
+        manifest_id: parseInt(manifest_id),
+        vins: selected,
+      };
+      await deployCarUpdates(data, token);
+      setMessage(
+        `Deployed ${manifestName} ${version} to ${selected.length} cars`
+      );
+      setRedirect(`/package-status/${manifest_id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      getManifests({ id: parseInt(manifest_id) }, token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const data = manifests[0];
+
+    setManifestName(data.name);
+    setVersion(data.version);
+    setCreateDate(LocalDateTimeString(data.created));
+  }, [manifests]);
+
+  if (redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <Typography variant="body2">Created {createDate}.</Typography>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const VehicleDeployForm = () => (
+  <VehicleProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </VehicleProvider>
+);
+
+export default VehicleDeployForm;
diff --git a/src/components/Manifest/Deploy/index.jsx b/src/components/Manifest/Deploy/index.jsx
index 23318c8..eeb825b 100644
--- a/src/components/Manifest/Deploy/index.jsx
+++ b/src/components/Manifest/Deploy/index.jsx
@@ -1,35 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { useParams, Redirect } from "react-router";
-import { Button, Grid, Typography } from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {Redirect, useParams} from "react-router";
+import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
 import clsx from "clsx";
 
-import {
-  ManifestsProvider,
-  useManifestsContext,
-} from "../../Contexts/ManifestsContext";
-import {
-  CarUpdatesProvider,
-  useCarUpdatesContext,
-} from "../../Contexts/CarUpdatesContext";
-import { VehicleProvider } from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
+import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
+import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+import {useUserContext} from "../../Contexts/UserContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
-import { logger } from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
+import {logger} from "../../../services/monitoring";
+import {LocalDateTimeString} from "../../../utils/dates";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+
+const CAR_UPDATE = false;
+const FLEET_UPDATE = true;
 
 const MainForm = () => {
-  const { manifest_id } = useParams();
-  const { getManifests, manifests, busy } = useManifestsContext();
-  const { deployCarUpdates } = useCarUpdatesContext();
+  const [updateType, setUpdateType] = useState(CAR_UPDATE);
+
+  const {manifest_id} = useParams();
+  const {getManifests, manifests, busy} = useManifestsContext();
+  const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {setMessage, setTitle, setSitePath} = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -38,6 +40,11 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
+  const handleChange = (_) => {
+    setSelected([]);
+    setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
+  }
+
   const handleSearch = (query) => {
     setSelected([]);
     setSearch(query);
@@ -54,7 +61,7 @@ const MainForm = () => {
         newSelected = [...selected];
         newSelected.push(key);
       } else {
-        newSelected = selected.filter((vin) => vin !== key);
+        newSelected = selected.filter((vinOrName) => vinOrName !== key);
       }
       setSelected(newSelected);
     } catch (e) {
@@ -67,9 +74,14 @@ const MainForm = () => {
       event.preventDefault();
       const data = {
         manifest_id: parseInt(manifest_id),
-        vins: selected,
-      };
-      await deployCarUpdates(data, token);
+      }
+      if (updateType === CAR_UPDATE) {
+        data.vins = selected;
+        await deployCarUpdates(data, token);
+      } else {
+        data.fleet_names = selected;
+        await deployFleetUpdates(data, token);
+      }
       setMessage(
         `Deployed ${manifestName} ${version} to ${selected.length} cars`
       );
@@ -82,7 +94,7 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      getManifests({ id: parseInt(manifest_id) }, token);
+      getManifests({id: parseInt(manifest_id)}, token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -119,7 +131,7 @@ const MainForm = () => {
   }, [manifests]);
 
   if (redirect.length > 0) {
-    return <Redirect to={redirect} />;
+    return <Redirect to={redirect}/>;
   }
 
   return (
@@ -127,13 +139,21 @@ const MainForm = () => {
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">Created {createDate}.</Typography>
         <Grid container className={classes.root} spacing={2}>
-          <Grid item md={4}>
+          <Grid item md={2}>
             <div
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
+          <Grid item md={2} className={classes.textCenterAlign}>
+            <FormControlLabel control={<Switch
+              checked={updateType === CAR_UPDATE}
+              onChange={handleChange}
+              inputProps={{'aria-label': 'controlled'}}
+            />} label="Car(default) or Fleet"/>
+
+          </Grid>
           <Grid item md={4} className={classes.textCenterAlign}>
-            <SearchField classes={classes} onSearch={handleSearch} />
+            <SearchField classes={classes} onSearch={handleSearch}/>
           </Grid>
           <Grid item md={4} className={classes.textRightAlign}>
             <Button
@@ -148,28 +168,39 @@ const MainForm = () => {
             </Button>
           </Grid>
         </Grid>
-        <CarSelectionTable
-          classes={classes}
-          token={token}
-          multiSelect={true}
-          search={{ search }}
-          selected={selected}
-          onSelect={handleSelect}
-          onSelectAll={handleSelectAll}
-        />
+        {updateType === CAR_UPDATE ?
+          <VehicleProvider>
+            <CarSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}
+            /></VehicleProvider> :
+          <FleetProvider>
+            <FleetSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}/>
+          </FleetProvider>
+        }
       </form>
     </div>
   );
 };
 
 const ManifestDeployForm = () => (
-  <VehicleProvider>
-    <ManifestsProvider>
-      <CarUpdatesProvider>
-        <MainForm />
-      </CarUpdatesProvider>
-    </ManifestsProvider>
-  </VehicleProvider>
+  <ManifestsProvider>
+    <CarUpdatesProvider>
+      <MainForm/>
+    </CarUpdatesProvider>
+  </ManifestsProvider>
 );
 
 export default ManifestDeployForm;
diff --git a/src/services/__mocks__/updatesAPI.js b/src/services/__mocks__/updatesAPI.js
index 58c3ca6..e0efe59 100644
--- a/src/services/__mocks__/updatesAPI.js
+++ b/src/services/__mocks__/updatesAPI.js
@@ -5,6 +5,12 @@ const updatesAPI = {
     return data;
   },
 
+  createFleetUpdates: async (data, token) => {
+    if (!data.id) data.id = 0;
+    data.id++;
+    return data;
+  },
+
   getCarUpdates: async (filter, token) => {
     return { data: [] };
   },
diff --git a/src/services/updatesAPI.js b/src/services/updatesAPI.js
index e5c56f7..42731a1 100644
--- a/src/services/updatesAPI.js
+++ b/src/services/updatesAPI.js
@@ -7,18 +7,23 @@ import {
 
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
+const createDeployUpdatesClosure = (suffix) => {
+  return async (data, token) =>   fetch(`${API_ENDPOINT}/${suffix}`, {
+    method: "POST",
+    headers: Object.assign(
+      { "Content-Type": "application/json" },
+      getAuthHeaderOptions(token)
+    ),
+    body: JSON.stringify(data),
+  })
+    .then(fetchRespHandler)
+    .catch(errorHandler)
+}
+
 const updatesAPI = {
-  createCarUpdates: async (data, token) =>
-    fetch(`${API_ENDPOINT}/carupdate`, {
-      method: "POST",
-      headers: Object.assign(
-        { "Content-Type": "application/json" },
-        getAuthHeaderOptions(token)
-      ),
-      body: JSON.stringify(data),
-    })
-      .then(fetchRespHandler)
-      .catch(errorHandler),
+  createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
+
+  createCarUpdates: createDeployUpdatesClosure("carupdate"),
 
   getCarUpdateLog: async (query, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/carupdateslog`, query);

From 153c6bdcf7d4b1deb8dc05ee92470cbfb0398697 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 2 Sep 2022 09:56:52 -0700
Subject: [PATCH 09/26] CEC-2385 Only show software updates (#193)

* CEC-2385 Only show software updates

* Update browser list

* update threshold

* Clean up
---
 package-lock.json                             |   26 +-
 package.json                                  |    2 +-
 src/components/App/App.test.js                |   10 -
 .../App/__snapshots__/App.test.js.snap        | 1521 +----------------
 .../Status/__snapshots__/index.test.jsx.snap  |    4 +-
 .../Contexts/ManifestCreateContext.jsx        |  247 ---
 .../__mocks__/ManifestCreateContext.jsx       |   50 -
 .../Controls/ManifestECUFileList/index.jsx    |   79 -
 .../Controls/ManifestECUList/index.jsx        |   75 -
 .../Controls/ManifestECURow/index.jsx         |   33 -
 .../Controls/ManifestUploadProgress/index.jsx |   68 -
 .../__snapshots__/index.test.jsx.snap         |    2 +-
 .../Status/__snapshots__/index.test.jsx.snap  |    4 +-
 src/components/Manifest/Create/index.jsx      |  157 --
 src/components/Manifest/List/index.jsx        |    6 +-
 src/components/Routes/SiteRoutes.jsx          |    9 -
 src/utils/manifest_types.js                   |    2 +
 src/utils/snapshot.js                         |    2 +-
 18 files changed, 31 insertions(+), 2266 deletions(-)
 delete mode 100644 src/components/Contexts/ManifestCreateContext.jsx
 delete mode 100644 src/components/Contexts/__mocks__/ManifestCreateContext.jsx
 delete mode 100644 src/components/Controls/ManifestECUFileList/index.jsx
 delete mode 100644 src/components/Controls/ManifestECUList/index.jsx
 delete mode 100644 src/components/Controls/ManifestECURow/index.jsx
 delete mode 100644 src/components/Controls/ManifestUploadProgress/index.jsx
 delete mode 100644 src/components/Manifest/Create/index.jsx
 create mode 100644 src/utils/manifest_types.js

diff --git a/package-lock.json b/package-lock.json
index 8182dba..8b3fc11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6505,13 +6505,19 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001314",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
-      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "version": "1.0.30001387",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
+      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -21996,9 +22002,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001314",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
-      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw=="
+      "version": "1.0.30001387",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
+      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
diff --git a/package.json b/package.json
index a6539a1..19e98ed 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 47,
+        "functions": 45.5,
         "lines": 50,
         "statements": 49
       }
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 1c40617..f5de9f0 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -1,7 +1,6 @@
 jest.mock("../Contexts/CarUpdatesContext");
 jest.mock("../Contexts/FileUploadContext");
 jest.mock("../Contexts/VehicleContext");
-jest.mock("../Contexts/ManifestCreateContext");
 jest.mock("../Contexts/ManifestsContext");
 jest.mock("../Contexts/UserContext");
 jest.mock("../../services/monitoring");
@@ -73,10 +72,6 @@ describe("App", () => {
     await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /package-create unauthenticated", async () => {
-    await check("/package-create", "span.MuiButton-label", "Sign In");
-  });
-
   it("Route /vehicle-add unauthenticated", async () => {
     await check("/vehicle-add", "span.MuiButton-label", "Sign In");
   });
@@ -146,11 +141,6 @@ describe("App", () => {
     await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
   });
 
-  it("Route /package-create authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/package-create", "h6", "Create Deployments");
-  });
-
   it("Route /vehicle-add authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicle-add", "h6", "Add Vehicle");
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 507ed57..3bc6f9c 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -1068,1523 +1068,6 @@ exports[`App Route /home unauthenticated 1`] = `
 </div>
 `;
 
-exports[`App Route /package-create authenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-0"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0 makeStyles-appBarShift-0 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <div>
-            <h6
-              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-            >
-              Create Deployments
-            </h6>
-            <nav
-              aria-label="breadcrumb"
-              class="MuiTypography-root MuiBreadcrumbs-root MuiTypography-body1 MuiTypography-colorInherit"
-              style="font-size: 10px;"
-            >
-              <ol
-                class="MuiBreadcrumbs-ol"
-              >
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/packages"
-                  >
-                    Deployments
-                  </a>
-                </li>
-                <li
-                  aria-hidden="true"
-                  class="MuiBreadcrumbs-separator"
-                >
-                  /
-                </li>
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/package-create"
-                  >
-                    Create Deployments
-                  </a>
-                </li>
-              </ol>
-            </nav>
-          </div>
-          <div
-            class="makeStyles-rightToolbar-0"
-            color="inherit"
-          >
-            <button
-              aria-controls="fade-menu"
-              aria-haspopup="true"
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                John
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-        </div>
-      </header>
-      <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-0"
-      >
-        <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-0 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-        >
-          <div
-            class="makeStyles-drawerHeader-0 makeStyles-drawerHeaderLogo-0"
-          >
-            <img
-              alt="Fisker Admin Portal"
-              class="makeStyles-logo-0"
-              src="fisker-badge.svg"
-            />
-          </div>
-          <hr
-            class="MuiDivider-root"
-          />
-          <ul
-            class="MuiList-root MuiList-padding"
-          >
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/home"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Home
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/packages"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Deployments
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/vehicles"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Vehicles
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/fleets"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-1 1v1h1l2-2.03L9 18v-5H4V5.98L13 6v2h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 13.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V18h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Fleets
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/datascope"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Datascope
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <span>
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/certificates/add"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemIcon-root"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Tools
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-            </span>
-            <ul
-              style="margin-left: 50px;"
-            >
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/certificates/add"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Certificate
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </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>
-      </div>
-      <main
-        class="makeStyles-content-0 makeStyles-contentShift-0"
-      >
-        <div
-          class="makeStyles-drawerHeader-0"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
-        >
-          <div
-            data-testid="mocked-manifestcreateprovider"
-          >
-            <div
-              class="makeStyles-paper-0"
-            >
-              <form
-                action="{onSubmit}"
-                class="makeStyles-form-0"
-                novalidate=""
-              >
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="packagename"
-                    id="packagename-label"
-                  >
-                    Package name
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="packagename"
-                      maxlength="255"
-                      name="packagename"
-                      required=""
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <span>
-                          Package name
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="version"
-                    id="version-label"
-                  >
-                    Version
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="version"
-                      maxlength="255"
-                      name="version"
-                      required=""
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <span>
-                          Version
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="description"
-                    id="description-label"
-                  >
-                    Description
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-                      id="description"
-                      maxlength="5120"
-                      name="description"
-                      placeholder="Package description"
-                      required=""
-                      rows="4"
-                      style="height: 0px; overflow: hidden;"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-                      readonly=""
-                      style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); width: 100%;"
-                      tabindex="-1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <span>
-                          Description
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="release_notes"
-                    id="release_notes-label"
-                  >
-                    Release Notes URL
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="release_notes"
-                      maxlength="1024"
-                      name="release_notes"
-                      placeholder="Release Notes URL"
-                      required=""
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <span>
-                          Release Notes URL
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <h6
-                  class="MuiTypography-root MuiTypography-h6"
-                >
-                  ECU Files
-                </h6>
-                <table
-                  class="MuiTable-root"
-                >
-                  <thead
-                    class="MuiTableHead-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root MuiTableRow-head"
-                    >
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        ID
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        ECU
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        Version
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        Hardware
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      />
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        0
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiInputBase-root MuiOutlinedInput-root"
-                        >
-                          <select
-                            class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-                            id="name"
-                          >
-                            <option
-                              value="AGS"
-                            >
-                              Active Grille Shutter
-                            </option>
-                            <option
-                              value="ADB"
-                            >
-                              Adaptive Driving Beam
-                            </option>
-                            <option
-                              value="ADAS"
-                            >
-                              Advanced Driver Assist System
-                            </option>
-                            <option
-                              value="ACU"
-                            >
-                              Airbag Control Unit
-                            </option>
-                            <option
-                              value="ACP"
-                            >
-                              Airconditioning Control Panel
-                            </option>
-                            <option
-                              value="AMP"
-                            >
-                              Amplifier
-                            </option>
-                            <option
-                              value="AP_FL"
-                            >
-                              Anti-Pinch Front Left
-                            </option>
-                            <option
-                              value="AP_FR"
-                            >
-                              Anti-Pinch Front Right
-                            </option>
-                            <option
-                              value="AP_RL"
-                            >
-                              Anti-Pinch Rear Left
-                            </option>
-                            <option
-                              value="AP_RR"
-                            >
-                              Anti-Pinch Rear Right
-                            </option>
-                            <option
-                              value="AL"
-                            >
-                              Atmosphere Lamp
-                            </option>
-                            <option
-                              value="BCS"
-                            >
-                              Battery HV Current Sensor
-                            </option>
-                            <option
-                              value="BMS"
-                            >
-                              Battery Management System
-                            </option>
-                            <option
-                              value="BMU"
-                            >
-                              Battery Management Unit
-                            </option>
-                            <option
-                              value="BCM"
-                            >
-                              Body Control Module
-                            </option>
-                            <option
-                              value="CDS"
-                            >
-                              Center Display Screen
-                            </option>
-                            <option
-                              value="CCU"
-                            >
-                              Charging Control Unit
-                            </option>
-                            <option
-                              value="CIM"
-                            >
-                              Column Integrated Module
-                            </option>
-                            <option
-                              value="CVM"
-                            >
-                              Coolant Valve Module
-                            </option>
-                            <option
-                              value="CFM"
-                            >
-                              Cooling Fan Module
-                            </option>
-                            <option
-                              value="CMRR_FL"
-                            >
-                              Corner Mid Range Radar Front Left
-                            </option>
-                            <option
-                              value="CMRR_FR"
-                            >
-                              Corner Mid Range Radar Front Right
-                            </option>
-                            <option
-                              value="CMRR_RL"
-                            >
-                              Corner Mid Range Radar Rear Left
-                            </option>
-                            <option
-                              value="CMRR_RR"
-                            >
-                              Corner Mid Range Radar Rear Right
-                            </option>
-                            <option
-                              value="DVRC"
-                            >
-                              Digital Video Recorder Camera
-                            </option>
-                            <option
-                              value="DC-CHM"
-                            >
-                              Direct Current Charge Machine
-                            </option>
-                            <option
-                              value="DMC"
-                            >
-                              Driver Monitor Camera
-                            </option>
-                            <option
-                              value="DSMC"
-                            >
-                              Driver Seat Memory Controller
-                            </option>
-                            <option
-                              value="DWSG"
-                            >
-                              Driver Window Switch Group
-                            </option>
-                            <option
-                              value="EKS"
-                            >
-                              ElectroKnox
-                            </option>
-                            <option
-                              value="EPS"
-                            >
-                              Electric Power Steering
-                            </option>
-                            <option
-                              value="EAS"
-                            >
-                              Electrical Air Compressor System
-                            </option>
-                            <option
-                              value="ECC"
-                            >
-                              Electrical Climate Controller
-                            </option>
-                            <option
-                              value="EWP_B"
-                            >
-                              Electrical Water Pump Battery
-                            </option>
-                            <option
-                              value="EWP_FD"
-                            >
-                              Electrical Water Pump Front Drive
-                            </option>
-                            <option
-                              value="EWP_H"
-                            >
-                              Electrical Water Pump Heat
-                            </option>
-                            <option
-                              value="EWP_RD"
-                            >
-                              Electrical Water Pump Rear Drive
-                            </option>
-                            <option
-                              value="EWM"
-                            >
-                              Electrical Wiper Motor
-                            </option>
-                            <option
-                              value="EXV_B"
-                            >
-                              Electronic Expansion Value Battery
-                            </option>
-                            <option
-                              value="EXV_HP"
-                            >
-                              Electronic Expansion Valve HPC
-                            </option>
-                            <option
-                              value="ESP"
-                            >
-                              Electronic Stability Program
-                            </option>
-                            <option
-                              value="FDHA_FL"
-                            >
-                              Flush Door Handle Actuator Front Left
-                            </option>
-                            <option
-                              value="FDHA_FR"
-                            >
-                              Flush Door Handle Actuator Front Right
-                            </option>
-                            <option
-                              value="FDHA_RL"
-                            >
-                              Flush Door Handle Actuator Rear Left
-                            </option>
-                            <option
-                              value="FDHA_RR"
-                            >
-                              Flush Door Handle Actuator Rear Right
-                            </option>
-                            <option
-                              value="Lumber"
-                            >
-                              Four-Way Lumber
-                            </option>
-                            <option
-                              value="FBM_L"
-                            >
-                              Front Beam Module Left
-                            </option>
-                            <option
-                              value="FBM_R"
-                            >
-                              Front Beam Module Right
-                            </option>
-                            <option
-                              value="FVC"
-                            >
-                              Front Video Camera
-                            </option>
-                            <option
-                              value="GW"
-                            >
-                              Gateway
-                            </option>
-                            <option
-                              value="HUD"
-                            >
-                              Head-Up Display
-                            </option>
-                            <option
-                              value="IDS"
-                            >
-                              Instrument Display Screen
-                            </option>
-                            <option
-                              value="ICC"
-                            >
-                              Integrated Cockpit Controller
-                            </option>
-                            <option
-                              value="IBS"
-                            >
-                              Intelligent Battery Sensor
-                            </option>
-                            <option
-                              value="iBooster"
-                            >
-                              Intelligent Booster
-                            </option>
-                            <option
-                              value="KS"
-                            >
-                              Kick Sensor
-                            </option>
-                            <option
-                              value="LSC"
-                            >
-                              Left Side Camera
-                            </option>
-                            <option
-                              value="MRR"
-                            >
-                              Mid Range Radar
-                            </option>
-                            <option
-                              value="MCU_F"
-                            >
-                              Motor Control Unit Front
-                            </option>
-                            <option
-                              value="MCU_R"
-                            >
-                              Motor Control Unit Rear
-                            </option>
-                            <option
-                              value="MDV"
-                            >
-                              Motorized Deco-Vent
-                            </option>
-                            <option
-                              value="MFS"
-                            >
-                              Multifunction Steering
-                            </option>
-                            <option
-                              value="MIS"
-                            >
-                              Multimedia Interactive Switch
-                            </option>
-                            <option
-                              value="MPC"
-                            >
-                              Multipurpose Camera
-                            </option>
-                            <option
-                              value="OMC"
-                            >
-                              Occupant Monitor Camera
-                            </option>
-                            <option
-                              value="OHC"
-                            >
-                              Overhead Console
-                            </option>
-                            <option
-                              value="PAS"
-                            >
-                              Parking Assistant System
-                            </option>
-                            <option
-                              value="PCU"
-                            >
-                              Parking Control Unit
-                            </option>
-                            <option
-                              value="PMS"
-                            >
-                              Particulate Matter Sensor
-                            </option>
-                            <option
-                              value="PSM"
-                            >
-                              Passenger Seat Module
-                            </option>
-                            <option
-                              value="PEPS"
-                            >
-                              Passive Entry And Passive Start
-                            </option>
-                            <option
-                              value="PKC"
-                            >
-                              Phone Key Controller
-                            </option>
-                            <option
-                              value="PKC_ANT_L"
-                            >
-                              Phone Key Controller Antenna Left
-                            </option>
-                            <option
-                              value="PKC_ANT_R"
-                            >
-                              Phone Key Controller Antenna Right
-                            </option>
-                            <option
-                              value="PWC"
-                            >
-                              Phone Wireless Charging
-                            </option>
-                            <option
-                              value="PASC"
-                            >
-                              Power Adjust Steering Column
-                            </option>
-                            <option
-                              value="PDU"
-                            >
-                              Power Distribution Unit
-                            </option>
-                            <option
-                              value="PLGM"
-                            >
-                              Power Lift Gate Module
-                            </option>
-                            <option
-                              value="RLS"
-                            >
-                              Rain Light Sensor
-                            </option>
-                            <option
-                              value="RAC"
-                            >
-                              Rear Airconditioning Control
-                            </option>
-                            <option
-                              value="RVC"
-                            >
-                              Rear View Camera
-                            </option>
-                            <option
-                              value="RSC"
-                            >
-                              Right Side Camera
-                            </option>
-                            <option
-                              value="RCM"
-                            >
-                              Roof Control Module
-                            </option>
-                            <option
-                              value="RSM"
-                            >
-                              Roof Shade Module
-                            </option>
-                            <option
-                              value="TBOX"
-                            >
-                              Telematics Box
-                            </option>
-                            <option
-                              value="TPMS"
-                            >
-                              Tire Pressure Monitoring System
-                            </option>
-                            <option
-                              value="TDS"
-                            >
-                              Touch Display Screen
-                            </option>
-                            <option
-                              value="USB Box"
-                            >
-                              USB Box
-                            </option>
-                            <option
-                              value="VCU"
-                            >
-                              Vehicle Control Unit
-                            </option>
-                            <option
-                              value="VSP"
-                            >
-                              Vehicle Sound For Pedestraion
-                            </option>
-                            <option
-                              value="WTC_B"
-                            >
-                              Water Thermal Controller Battery
-                            </option>
-                            <option
-                              value="WTC_H"
-                            >
-                              Water Thermal Controller Heat
-                            </option>
-                          </select>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                            style="padding-left: 8px;"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legend-0"
-                              style="width: 0.01px;"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                          requried="true"
-                        >
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input"
-                              id="version"
-                              name="version"
-                              placeholder="Version"
-                              type="text"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                          requried="false"
-                        >
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input"
-                              id="hw_version"
-                              name="hw_version"
-                              placeholder="Hardware"
-                              type="text"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                        width="25"
-                      >
-                        <a
-                          href="/package-create"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                            />
-                          </svg>
-                        </a>
-                      </td>
-                    </tr>
-                    <tr
-                      class="MuiTableRow-root"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                        colspan="5"
-                      >
-                        <table
-                          class="MuiTable-root"
-                        >
-                          <thead
-                            class="MuiTableHead-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root MuiTableRow-head"
-                            >
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Filename
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Offset
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Checksum
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Type
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              />
-                            </tr>
-                          </thead>
-                          <tbody
-                            class="MuiTableBody-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root"
-                            >
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                test.bin
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                                  requried="false"
-                                >
-                                  <div
-                                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                                  >
-                                    <input
-                                      aria-invalid="false"
-                                      class="MuiInputBase-input MuiInput-input"
-                                      id="offset"
-                                      name="offset"
-                                      placeholder="Offset"
-                                      type="text"
-                                      value="0"
-                                    />
-                                  </div>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                                  requried="false"
-                                >
-                                  <div
-                                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                                  >
-                                    <input
-                                      aria-invalid="false"
-                                      class="MuiInputBase-input MuiInput-input"
-                                      id="checksum"
-                                      name="checksum"
-                                      placeholder="Checksum"
-                                      type="text"
-                                      value=""
-                                    />
-                                  </div>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiInputBase-root MuiOutlinedInput-root"
-                                >
-                                  <select
-                                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-                                    id="type"
-                                  >
-                                    <option
-                                      value="bootloader"
-                                    >
-                                      Bootloader
-                                    </option>
-                                    <option
-                                      value="software"
-                                    >
-                                      Software
-                                    </option>
-                                    <option
-                                      value="calibration"
-                                    >
-                                      Calibration
-                                    </option>
-                                    <option
-                                      value="configuration"
-                                    >
-                                      Configuration
-                                    </option>
-                                    <option
-                                      value="none"
-                                    >
-                                      None
-                                    </option>
-                                  </select>
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M7 10l5 5 5-5z"
-                                    />
-                                  </svg>
-                                  <fieldset
-                                    aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                                    style="padding-left: 8px;"
-                                  >
-                                    <legend
-                                      class="PrivateNotchedOutline-legend-0"
-                                      style="width: 0.01px;"
-                                    >
-                                      <span>
-                                        ​
-                                      </span>
-                                    </legend>
-                                  </fieldset>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                                width="25"
-                              >
-                                <a
-                                  href="/package-create"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                                    />
-                                  </svg>
-                                </a>
-                              </td>
-                            </tr>
-                          </tbody>
-                          <tfoot
-                            class="MuiTableFooter-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root MuiTableRow-footer"
-                            >
-                              <td
-                                class="MuiTableCell-root MuiTableCell-footer"
-                                colspan="5"
-                              >
-                                <div
-                                  class="makeStyles-fileDropArea-0 makeStyles-clickable-0"
-                                >
-                                  ADD FILES
-                                </div>
-                                <input
-                                  class="makeStyles-hidden-0"
-                                  type="file"
-                                />
-                              </td>
-                            </tr>
-                          </tfoot>
-                        </table>
-                      </td>
-                    </tr>
-                  </tbody>
-                  <tfoot
-                    class="MuiTableFooter-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root MuiTableRow-footer"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
-                        colspan="5"
-                      >
-                        <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            Add ECU
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </td>
-                    </tr>
-                  </tfoot>
-                </table>
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
-                  tabindex="0"
-                  type="submit"
-                >
-                  <span
-                    class="MuiButton-label"
-                  >
-                    Submit
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </button>
-              </form>
-            </div>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`App Route /package-create unauthenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-0"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <div>
-            <h6
-              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-            />
-          </div>
-        </div>
-      </header>
-      <main
-        class="makeStyles-content-0"
-      >
-        <div
-          class="makeStyles-drawerHeader-0"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
-        >
-          <div
-            class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary"
-              href="https://cognito.com/authorize?redirect=https://example.com/callback"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                Sign In
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </a>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`App Route /package-deploy authenticated 1`] = `
 <div>
   <div
@@ -8286,7 +6769,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiBox-root MuiBox-root-1532 makeStyles-tableToolbar-0"
+              class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
             >
               <div
                 class="MuiTabs-root"
@@ -8404,7 +6887,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               role="tabpanel"
             >
               <div
-                class="MuiBox-root MuiBox-root-1537"
+                class="MuiBox-root MuiBox-root-0"
               >
                 <div
                   class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index ca532b7..a42716e 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -133,7 +133,7 @@ exports[`CarStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/Contexts/ManifestCreateContext.jsx b/src/components/Contexts/ManifestCreateContext.jsx
deleted file mode 100644
index 6243787..0000000
--- a/src/components/Contexts/ManifestCreateContext.jsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import React, { useContext, useState } from "react";
-
-import api from "../../services/manifestsAPI";
-import { uploadFile, getCancelToken } from "../../services/uploadFile";
-import { useStatusContext } from "./StatusContext";
-import {
-  validateManifest,
-  validateManifestECUs,
-} from "../../utils/manifestValidation";
-
-const ManifestCreateContext = React.createContext();
-
-const checkExistingManifest = async (data, token) => {
-  const check = {
-    name: data.name,
-    version: data.version,
-  };
-  const { data: result } = await api.getManifests(check, token);
-  if (result.length > 0)
-    throw new Error(`Update ${data.name} ${data.version} already exists`);
-};
-
-const ECUTemplate = {
-  name: "AGS",
-  version: "",
-  hw_version: "",
-  configuration_mask: "",
-  configuration: "",
-  files: [],
-  manifest_id: 0,
-};
-
-const FileTemplate = {
-  offset: "0",
-  checksum: "",
-  type: "none",
-};
-
-export const ManifestCreateProvider = ({ children }) => {
-  const { setMessage } = useStatusContext();
-  const [busy, setBusy] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadStatus, setUploadStatus] = useState(null);
-  const [cancelUploadToken, setCancelUploadToken] = useState(null);
-  const [uploadFileIndex, setUploadFileIndex] = useState(0);
-  const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [ecus, setECUs] = useState([]);
-  const [ecuIndex, setECUIndex] = useState(0);
-
-  const addECU = () => {
-    try {
-      const result = ecus.concat(
-        Object.assign({ data_id: ecuIndex }, ECUTemplate)
-      );
-      setECUIndex(ecuIndex + 1);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const deleteECU = (data_id) => {
-    try {
-      const result = ecus.filter((item) => item.data_id !== data_id);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const getECU = (ecu_data_id) =>
-    ecus.find((item) => item.data_id === ecu_data_id);
-
-  const getECUFile = (ecu, filename) =>
-    ecu.files.find((file) => file.filename === filename);
-
-  const validateECUFiles = (ecu, files) => {
-    files.forEach((file) => {
-      if (file.size === 0) throw new Error(`${file.name} is 0 size`);
-      const result = getECUFile(ecu, file.name);
-      if (result) throw new Error(`${file.name} already exists`);
-    });
-  };
-
-  const getAllECUFiles = () => {
-    let result = [];
-
-    for (let i = 0, len = ecus.length; i < len; i++) {
-      const ecu = ecus[i];
-      result = result.concat(ecu.files);
-    }
-
-    return result;
-  };
-
-  const addECUFile = (ecu_data_id, items) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-
-      const files = Array.from(items);
-      validateECUFiles(ecu, files);
-
-      const total = ecu.files.length;
-      const result = files.map((file, index) =>
-        Object.assign(
-          { order: total + index, file: file, filename: file.name },
-          FileTemplate
-        )
-      );
-      ecu.files = ecu.files.concat(result);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const sortECUFiles = (ecu) => {
-    ecu.files.sort((x, y) => {
-      if (x.order === y.order) return 0;
-      return x.order < y.order ? -1 : 1;
-    });
-  };
-
-  const deleteECUFile = (ecu_data_id, filename) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-      ecu.files = ecu.files.filter((file) => file.filename !== filename);
-      sortECUFiles(ecu);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const updateECUs = () => {
-    setECUs(ecus.concat([]));
-  };
-
-  const createManifest = async (data, token) => {
-    let result;
-    let currentFileIndex = 0;
-    const incremFileIndex = () => {
-      setUploadFileIndex(currentFileIndex);
-      currentFileIndex++;
-    };
-
-    try {
-      setBusy(true);
-      validateManifest(data, token);
-      validateManifestECUs(ecus);
-      await checkExistingManifest(data, token);
-
-      setUploadedFiles(getAllECUFiles());
-      if (result !== null) result = await api.createManifest(data, token);
-      if (result.error)
-        throw new Error(`Create manifest error. ${result.message}`);
-
-      for (let i = 0, len = ecus.length; i < len; i++) {
-        const ecu = ecus[i];
-        ecu.manifest_id = result.id;
-        await createManifestECU(ecu, token, incremFileIndex);
-      }
-    } finally {
-      setBusy(false);
-      setUploadFileIndex(0);
-      setUploadedFiles([]);
-    }
-
-    return result;
-  };
-
-  const createManifestECU = async (ecu, token, incremFileIndexFn) => {
-    const { files, ...data } = ecu;
-
-    const result = await api.createManifestECU(data, token);
-    if (result.error)
-      throw new Error(`Create manifest error. ${result.message}`);
-
-    for (let i = 0, len = ecu.files.length; i < len; i++) {
-      const file = ecu.files[i];
-      file.manifest_ecu_id = result.id;
-      incremFileIndexFn();
-      const resp = await uploadECUFile(file, token);
-      if (resp.error)
-        throw new Error(`Upload manifest file error. ${resp.error}`);
-    }
-  };
-
-  const cancelUpload = () => {
-    if (cancelUploadToken) cancelUploadToken.cancel();
-    setBusy(false);
-    setUploadStatus("Upload cancelled");
-    setCancelUploadToken(null);
-    setUploadProgress(0);
-  };
-
-  const uploadECUFile = async (file, accessToken) => {
-    const cancel = getCancelToken();
-
-    setUploadProgress(0);
-    setUploadStatus(`Uploading ${file.filename}`);
-    setCancelUploadToken(cancel);
-
-    const result = await uploadFile(
-      file,
-      accessToken,
-      setUploadProgress,
-      cancel.token
-    );
-    if (result.message) {
-      throw new Error(`${result.error}. ${result.message}`);
-    }
-
-    setUploadStatus(`Uploaded ${file.filename}`);
-    setCancelUploadToken(null);
-    setUploadProgress(100);
-
-    return result;
-  };
-
-  return (
-    <ManifestCreateContext.Provider
-      value={{
-        busy,
-        ecus,
-        uploadedFiles,
-        uploadFileIndex,
-        uploadProgress,
-        uploadStatus,
-        addECU,
-        addECUFile,
-        cancelUpload,
-        createManifest,
-        createManifestECU,
-        deleteECU,
-        deleteECUFile,
-        updateECUs,
-      }}
-    >
-      {children}
-    </ManifestCreateContext.Provider>
-  );
-};
-
-export const useManifestCreateContext = () => useContext(ManifestCreateContext);
diff --git a/src/components/Contexts/__mocks__/ManifestCreateContext.jsx b/src/components/Contexts/__mocks__/ManifestCreateContext.jsx
deleted file mode 100644
index 87a5f78..0000000
--- a/src/components/Contexts/__mocks__/ManifestCreateContext.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-const ManifestsContext = React.createContext();
-
-let busy = false;
-let ecus = [
-  {
-    data_id: 0,
-    name: "AGS",
-    version: "",
-    hw_version: "",
-    manifest_id: 0,
-    files: [
-      {
-        filename: "test.bin",
-        order: 0,
-        offset: "0",
-        checksum: "",
-        self_download: false,
-        mode: "D",
-        type: 1,
-      },
-    ],
-  },
-];
-let uploadedFiles = [];
-let uploadFileIndex = 0;
-let uploadProgress = 0;
-let uploadStatus = null;
-
-export const ManifestCreateProvider = ({ children }) => {
-  return <div data-testid="mocked-manifestcreateprovider">{children}</div>;
-};
-
-export const useManifestCreateContext = () => ({
-  busy,
-  ecus,
-  uploadedFiles,
-  uploadFileIndex,
-  uploadProgress,
-  uploadStatus,
-  addECU: jest.fn(),
-  addECUFile: jest.fn(),
-  cancelUpload: jest.fn(),
-  createManifest: jest.fn(),
-  createManifestECU: jest.fn(),
-  deleteECU: jest.fn(),
-  deleteECUFile: jest.fn(),
-  updateECUs: jest.fn(),
-});
diff --git a/src/components/Controls/ManifestECUFileList/index.jsx b/src/components/Controls/ManifestECUFileList/index.jsx
deleted file mode 100644
index 4f7b401..0000000
--- a/src/components/Controls/ManifestECUFileList/index.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import FileDragArea from "../FileDragArea";
-import ListHead from "../ListHead";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import ManifestECUFileTypes from "../ManifestECUFileTypes";
-
-const options = [
-  {
-    label: "Filename",
-    field: "filename",
-    readonly: true,
-  },
-  {
-    label: "Offset",
-    field: "offset",
-  },
-  {
-    label: "Checksum",
-    field: "checksum",
-  },
-  {
-    label: "Type",
-    field: "type",
-    control: ManifestECUFileTypes,
-  },
-  {
-    label: "",
-    field: "filename",
-    delete: true,
-  },
-];
-
-const ManifestECUFileList = ({ data }) => {
-  const { addECUFile, deleteECUFile } = useManifestCreateContext();
-
-  const onAddFile = (files) => {
-    addECUFile(data.data_id, files);
-  };
-
-  const onDeletFile = (filename) => {
-    deleteECUFile(data.data_id, filename);
-  };
-
-  return (
-    <Table>
-      {data && data.files && data.files.length > 0 && (
-        <ListHead options={options} />
-      )}
-      <TableBody>
-        {data.files.map((file) => (
-          <SubListItem
-            key={file.filename}
-            data={file}
-            options={options}
-            onDelete={onDeletFile}
-          />
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={options.length}>
-            <FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
-          </TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  );
-};
-
-export default ManifestECUFileList;
diff --git a/src/components/Controls/ManifestECUList/index.jsx b/src/components/Controls/ManifestECUList/index.jsx
deleted file mode 100644
index c082449..0000000
--- a/src/components/Controls/ManifestECUList/index.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import {
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import ECUDropDrop from "../ECUDropDown";
-import ListHead from "../ListHead";
-import ManifestECURow from "../ManifestECURow";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import PageDragPreventDefault from "../PageDragPreventDefault";
-
-const options = [
-  {
-    label: "ID",
-    field: "data_id",
-    readonly: true,
-  },
-  {
-    label: "ECU",
-    field: "name",
-    control: ECUDropDrop,
-    required: true,
-  },
-  {
-    label: "Version",
-    field: "version",
-    required: true,
-  },
-  {
-    label: "Hardware",
-    field: "hw_version",
-  },
-  {
-    label: "",
-    delete: true,
-  },
-];
-
-const ManifestECUList = () => {
-  const { ecus, addECU } = useManifestCreateContext();
-
-  return (
-    <>
-      <PageDragPreventDefault />
-      <Table>
-        <ListHead options={options} />
-        <TableBody>
-          {ecus.map((item) => {
-            return (
-              <ManifestECURow
-                key={item.data_id}
-                data={item}
-                options={options}
-              />
-            );
-          })}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={5} align="center">
-              <Button onClick={addECU}>Add ECU</Button>
-            </TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </>
-  );
-};
-
-export default ManifestECUList;
diff --git a/src/components/Controls/ManifestECURow/index.jsx b/src/components/Controls/ManifestECURow/index.jsx
deleted file mode 100644
index e39c35e..0000000
--- a/src/components/Controls/ManifestECURow/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import { TableCell, TableRow } from "@material-ui/core";
-
-import ManifestECUFileList from "../ManifestECUFileList";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestECURow = ({ data, options }) => {
-  const { deleteECU } = useManifestCreateContext();
-
-  const onDeleteECU = () => {
-    deleteECU(data.data_id);
-  };
-
-  return (
-    <>
-      <SubListItem
-        key={data.data_id}
-        data={data}
-        options={options}
-        onDelete={onDeleteECU}
-      />
-      <TableRow>
-        <TableCell colSpan={options.length}>
-          <ManifestECUFileList data={data} />
-        </TableCell>
-      </TableRow>
-    </>
-  );
-};
-
-export default ManifestECURow;
diff --git a/src/components/Controls/ManifestUploadProgress/index.jsx b/src/components/Controls/ManifestUploadProgress/index.jsx
deleted file mode 100644
index dfc5088..0000000
--- a/src/components/Controls/ManifestUploadProgress/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
-
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestUploadProgress = (props) => {
-  const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
-    useManifestCreateContext();
-  const [progress, setProgress] = useState(0);
-  const [completed, setCompleted] = useState(0);
-  const [total, setTotal] = useState(0);
-
-  useEffect(() => {
-    const x = uploadedFiles.reduce(
-      (current, { file }) => current + file.size,
-      0
-    );
-    setTotal(x);
-  }, [uploadedFiles]);
-
-  useEffect(() => {
-    if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
-      return;
-    let uploaded = 0;
-    uploadedFiles.forEach(({ file }, i) => {
-      if (i < uploadFileIndex) uploaded += file.size;
-    });
-    setCompleted(uploaded);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadFileIndex]);
-
-  useEffect(() => {
-    if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
-    const { file } = uploadedFiles[uploadFileIndex];
-    const uploaded = completed + file.size * uploadProgress;
-    const x = Math.min(99, Math.floor((uploaded / total) * 100));
-    setProgress(x);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadProgress, completed]);
-
-  return (
-    <>
-      <Grid container>
-        <Grid xs={12}>
-          <Typography align="center">
-            {`File ${uploadFileIndex + 1} of ${
-              uploadedFiles.length
-            }. ${uploadStatus}`}
-          </Typography>
-        </Grid>
-      </Grid>
-      <Grid container alignContent="center" spacing={0}>
-        <Grid xs={11}>
-          <LinearProgress
-            variant="determinate"
-            value={progress}
-            style={{ marginTop: 16 }}
-          />
-        </Grid>
-        <Grid xs={1} alignContent="flex-end" align="right">
-          <Button onClick={props.onCancel}>Cancel</Button>
-        </Grid>
-      </Grid>
-    </>
-  );
-};
-
-export default ManifestUploadProgress;
diff --git a/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap b/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
index 184822a..c712355 100644
--- a/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
+++ b/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`TabPanel Render 1`] = `
     role="tabpanel"
   >
     <div
-      class="MuiBox-root MuiBox-root-1"
+      class="MuiBox-root MuiBox-root-0"
     >
       <div>
         Test
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 7cd8290..2ccf0d6 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/Manifest/Create/index.jsx b/src/components/Manifest/Create/index.jsx
deleted file mode 100644
index 381e2f3..0000000
--- a/src/components/Manifest/Create/index.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
-import { Button, TextField, Typography } from "@material-ui/core";
-
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import {
-  ManifestCreateProvider,
-  useManifestCreateContext,
-} from "../../Contexts/ManifestCreateContext";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
-import ManifestECUList from "../../Controls/ManifestECUList";
-import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
-
-const MainForm = () => {
-  const { createManifest, cancelUpload, busy } = useManifestCreateContext();
-  const { token } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const [redirect, setRedirect] = useState(null);
-  const classes = useStyles();
-  const packagenameEl = useRef(null);
-  const versionEl = useRef(null);
-  const descEl = useRef(null);
-  const releasenotesEl = useRef(null);
-
-  useEffect(() => {
-    setTitle("Create Deployments");
-    setSitePath([
-      {
-        label: "Deployments",
-        link: "/packages",
-      },
-      {
-        label: "Create Deployments",
-      },
-    ]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
-      const {
-        idToken: { jwtToken: authToken },
-      } = token;
-      const formData = {
-        name: packagenameEl.current.value,
-        version: versionEl.current.value,
-        description: descEl.current.value,
-        release_notes: releasenotesEl.current.value,
-      };
-      const manifest = await createManifest(formData, authToken);
-
-      if (!manifest || manifest.error) return;
-
-      cancelUpload();
-      setMessage(`Package uploaded`);
-      setRedirect(`/package-deploy/${manifest.id}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-
-  if (redirect && redirect.length > 0) {
-    return <Redirect to={redirect} />;
-  }
-
-  return (
-    <div className={classes.paper}>
-      <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          id="packagename"
-          name="packagename"
-          label="Package name"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={packagenameEl}
-        />
-        <TextField
-          id="version"
-          name="version"
-          label="Version"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={versionEl}
-        />
-        <TextField
-          id="description"
-          name="description"
-          label="Description"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "5120",
-          }}
-          required
-          fullWidth
-          multiline
-          minRows={4}
-          placeholder="Package description"
-          inputRef={descEl}
-        />
-        <TextField
-          id="release_notes"
-          name="release_notes"
-          label="Release Notes URL"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          required
-          fullWidth
-          placeholder="Release Notes URL"
-          inputRef={releasenotesEl}
-        />
-        <Typography variant="h6">ECU Files</Typography>
-        <ManifestECUList />
-        {busy ? (
-          <ManifestUploadProgress onCancel={cancelUpload} />
-        ) : (
-          <Button
-            type="submit"
-            disabled={busy}
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            onClick={onSubmit}
-          >
-            Submit
-          </Button>
-        )}
-      </form>
-    </div>
-  );
-};
-
-export default function FileUploadForm() {
-  return (
-    <ManifestCreateProvider>
-      <MainForm />
-    </ManifestCreateProvider>
-  );
-}
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index c339079..07bfe2f 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -28,7 +28,8 @@ 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";
+import { useLocalStorage } from "../../useLocalStorage";
+import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
 
 const tableColumns = [
   {
@@ -57,7 +58,7 @@ const tableColumns = [
   },
 ];
 
-const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -103,6 +104,7 @@ const MainForm = () => {
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
+            manifest_type: TYPE_MANIFEST_SOFTWARE,
             search,
           },
           token
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index 87d9e61..626b014 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -28,7 +28,6 @@ const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
 const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
-const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
 const PageNotFound = React.lazy(() => import("../404"));
 const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
@@ -137,14 +136,6 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
-        <AuthRoute
-          path="/package-create"
-          render={() => <ManifestCreate />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
         <AuthRoute
           path="/package-deploy/:manifest_id"
           render={() => <ManifestDeploy />}
diff --git a/src/utils/manifest_types.js b/src/utils/manifest_types.js
new file mode 100644
index 0000000..a04dbcc
--- /dev/null
+++ b/src/utils/manifest_types.js
@@ -0,0 +1,2 @@
+export const TYPE_MANIFEST_SOFTWARE = 1;
+export const TYPE_MANIFEST_CONFIG = 2;
diff --git a/src/utils/snapshot.js b/src/utils/snapshot.js
index 819cc59..f3e3cde 100644
--- a/src/utils/snapshot.js
+++ b/src/utils/snapshot.js
@@ -1,4 +1,4 @@
-const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
+const rxStyles = /(mui|MuiBox-root|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {

From aa5a1e20e0fc0b9ddf2cba2c39182050d761a81e Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Wed, 7 Sep 2022 23:21:57 +0600
Subject: [PATCH 10/26] CEC-2291 Remote Commands (#194)

---
 package.json                                  |   5 +
 .../App/__snapshots__/App.test.js.snap        |  25 ++
 .../Cars/Status/RemoteCommandsTab.jsx         |  26 ++
 .../Cars/Status/RemoteCommandsTab.test.jsx    |  40 +++
 .../RemoteCommandsTab.test.jsx.snap           | 173 ++++++++++++
 .../Status/__snapshots__/index.test.jsx.snap  |  25 ++
 src/components/Cars/Status/index.jsx          |   6 +
 src/components/Contexts/VehicleContext.jsx    |   4 +-
 .../Contexts/VehicleContext.test.jsx          |  49 ++++
 .../Controls/SendCommand/Commands.jsx         | 251 ++++++++++++++++++
 .../Controls/SendCommand/Parameters.jsx       |  73 +++++
 .../Controls/SendCommand/Parameters.test.jsx  | 140 ++++++++++
 .../__snapshots__/Parameters.test.jsx.snap    |  24 ++
 src/components/Controls/SendCommand/index.jsx | 122 ++++-----
 .../Controls/SendCommand/sanitize.js          | 115 ++++++++
 .../Controls/SendCommand/sanitize.test.js     | 150 +++++++++++
 src/services/__mocks__/vehiclesAPI.js         |   3 +-
 src/services/commands.js                      |  99 ++-----
 src/services/vehiclesAPI.js                   |   5 +-
 19 files changed, 1187 insertions(+), 148 deletions(-)
 create mode 100644 src/components/Cars/Status/RemoteCommandsTab.jsx
 create mode 100644 src/components/Cars/Status/RemoteCommandsTab.test.jsx
 create mode 100644 src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap
 create mode 100644 src/components/Controls/SendCommand/Commands.jsx
 create mode 100644 src/components/Controls/SendCommand/Parameters.jsx
 create mode 100644 src/components/Controls/SendCommand/Parameters.test.jsx
 create mode 100644 src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
 create mode 100644 src/components/Controls/SendCommand/sanitize.js
 create mode 100644 src/components/Controls/SendCommand/sanitize.test.js

diff --git a/package.json b/package.json
index 19e98ed..11daec5 100644
--- a/package.json
+++ b/package.json
@@ -4,19 +4,24 @@
   "private": true,
   "dependencies": {
     "@datadog/browser-logs": "^3.11.0",
+    "@date-io/date-fns": "1.x",
+    "@date-io/moment": "1.x",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.1",
     "clsx": "^1.1.1",
+    "date-fns": "^2.29.2",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
     "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
+    "moment": "^2.29.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-leaflet": "^3.2.5",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 3bc6f9c..e2a4fa3 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6873,6 +6873,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-5"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-5"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Remote Commands
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -7036,6 +7054,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-4"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-5"
+              class="makeStyles-fullWidth-0"
+              hidden=""
+              id="tabpanel-5"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
diff --git a/src/components/Cars/Status/RemoteCommandsTab.jsx b/src/components/Cars/Status/RemoteCommandsTab.jsx
new file mode 100644
index 0000000..819e8a0
--- /dev/null
+++ b/src/components/Cars/Status/RemoteCommandsTab.jsx
@@ -0,0 +1,26 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import Typography from "@material-ui/core/Typography";
+import SendCommand from "../../Controls/SendCommand";
+import PropTypes from "prop-types";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+
+const RemoteCommandsTab = (props) => {
+  const { vin } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Vehicle Commands</Typography>
+      <VehicleProvider>
+        <SendCommand vins={[vin]}></SendCommand>
+      </VehicleProvider>
+    </div>
+  )
+}
+
+RemoteCommandsTab.propTypes = {
+  vin: PropTypes.string,
+}
+
+export default RemoteCommandsTab
\ No newline at end of file
diff --git a/src/components/Cars/Status/RemoteCommandsTab.test.jsx b/src/components/Cars/Status/RemoteCommandsTab.test.jsx
new file mode 100644
index 0000000..c1d7882
--- /dev/null
+++ b/src/components/Cars/Status/RemoteCommandsTab.test.jsx
@@ -0,0 +1,40 @@
+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 {render, waitFor} from "@testing-library/react";
+import {StatusProvider} from "../../Contexts/StatusContext";
+import {setToken, UserProvider} from "../../Contexts/UserContext";
+import RemoteCommandsTab from "./RemoteCommandsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import React from "react";
+
+const renderRemoteCommandsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <RemoteCommandsTab vin="TESTVIN1234567890" />
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("RemoteCommandsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderRemoteCommandsTab();
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap
new file mode 100644
index 0000000..b6bfec5
--- /dev/null
+++ b/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RemoteCommandsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6"
+        >
+          Vehicle Commands
+        </h6>
+        <div
+          data-testid="mocked-vehicleprovider"
+        >
+          <div
+            class="makeStyles-paper-0"
+            style="margin-top: 20px;"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-formControl-0"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+                for="send-command"
+              >
+                Command
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
+                  id="send-command"
+                  name="send-command"
+                >
+                  <option
+                    value="doors_lock"
+                  >
+                    Lock doors
+                  </option>
+                  <option
+                    value="doors_unlock"
+                  >
+                    Unlock doors
+                  </option>
+                  <option
+                    value="vent_windows"
+                  >
+                    Vent windows
+                  </option>
+                  <option
+                    value="close_windows"
+                  >
+                    Close windows
+                  </option>
+                  <option
+                    value="flash_headlights"
+                  >
+                    Flash headlights
+                  </option>
+                  <option
+                    value="trunk_close"
+                  >
+                    Close trunk
+                  </option>
+                  <option
+                    value="alert"
+                  >
+                    Alert
+                  </option>
+                  <option
+                    value="precondition"
+                  >
+                    Precondition
+                  </option>
+                  <option
+                    value="california_mode"
+                  >
+                    California mode
+                  </option>
+                  <option
+                    value="trunk_open"
+                  >
+                    Open trunk
+                  </option>
+                  <option
+                    value="temp_cabin"
+                  >
+                    Set cabin temperature(°C)
+                  </option>
+                  <option
+                    value="defrost"
+                  >
+                    Defrost
+                  </option>
+                  <option
+                    value="driver_seat_preheat"
+                  >
+                    Driver seat preheat
+                  </option>
+                  <option
+                    value="passenger_seat_preheat"
+                  >
+                    Preheat passenger seat
+                  </option>
+                  <option
+                    value="steering_wheel_preheat"
+                  >
+                    Preheat Steering wheel
+                  </option>
+                  <option
+                    value="charging"
+                  >
+                    Charging
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <button
+              aria-label="send command"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Send
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index a42716e..d6855a8 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -119,6 +119,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-5"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-5"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -228,6 +246,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-4"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-5"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-5"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 97f6122..0943eb7 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import CANSignalsTab from "./CANSignalsTab";
+import RemoteCommandsTab from "./RemoteCommandsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -64,6 +65,7 @@ const CarStatus = () => {
           <Tab label="CAN Filters" {...tabProps(2)} />
           <Tab label="Digital Twin" {...tabProps(3)} />
           <Tab label="CAN Signals" {...tabProps(4)} />
+          <Tab label="Remote Commands" {...tabProps(5)} />
         </Tabs>
       </Box>
 
@@ -86,6 +88,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
         <CANSignalsTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
+        <RemoteCommandsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index d6aac72..82d9c2f 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -164,10 +164,10 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const sendCommand = async (vins, command, parameters, token) => {
+  const sendCommand = async (vins, command, token) => {
     try {
       setBusy(true);
-      const result = await api.sendCommand(vins, command, parameters, token);
+      const result = await api.sendCommand(vins, command, token);
       if (result.error)
         throw new Error(`Send command error. ${result.message}`);
       return result;
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index c371cfe..b97cf25 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -317,6 +317,55 @@ describe("VehicleContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("sendCommand", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const {busy, sendCommand} = useVehicleContext();
+        const { message, setMessage } = useStatusContext();
+
+        const sendC = async (vin, command) => {
+          try {
+            await sendCommand(vin, command);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
+            <button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
+            <button
+              data-testid="sendCommandVin"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
+            />
+            <button
+              data-testid="sendCommandWrongCommand"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
+            />
+            </>
+        );}
+        render(
+          <StatusProvider>
+            <VehicleProvider>
+              <TestComp />
+            </VehicleProvider>
+          </StatusProvider>
+        );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+  })
 });
 
 const expectedFilters = [
diff --git a/src/components/Controls/SendCommand/Commands.jsx b/src/components/Controls/SendCommand/Commands.jsx
new file mode 100644
index 0000000..c43cf83
--- /dev/null
+++ b/src/components/Controls/SendCommand/Commands.jsx
@@ -0,0 +1,251 @@
+import {Grid, Slider, Switch} from "@material-ui/core";
+import Typography from "@material-ui/core/Typography";
+
+const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
+  ...Array.from({length: 26}, (_, i) => {
+    return {value: i + 2, label: `${i + 15}°C`}
+  })];
+
+const valuetext = (value) => {
+  return `${value}`;
+}
+
+const highMidLowOffMarks = [{
+  value: 3, label: "High",
+}, {
+  value: 2, label: "Mid",
+}, {
+  value: 1, label: "Low",
+}, {
+  value: 0, label: "Off",
+},]
+
+const precondMarks = [
+  {value: 0, label: "Battery"},
+  {value: 1, label: "All"},
+  {value: 2, label: "Climate"},
+  {value: 3, label: "Stop"},
+]
+
+const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
+
+const labelRemoved = (marks) => Array.from(marks).map((mark) => {
+  return {value: mark.value}
+})
+
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "trunk_close", label: "Close trunk"},
+  {value: "alert", label: "Alert"},
+  {
+    value: "precondition", label: "Precondition", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="precondition-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(precondMarks)}
+            getAriaValueText={labelFunc(precondMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="precondition-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={precondMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  },
+  {
+    value: "california_mode", label: "California mode", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+      <Typography id="california_mode-slider" gutterBottom>
+        Set California mode
+      </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+      </span>
+      },
+    },
+  }, {
+    value: "trunk_open", label: "Open trunk", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="trunk_open-slider" gutterBottom>
+            Set trunk's openness level
+          </Typography>
+          <Slider
+            defaultValue={1}
+            value={val}
+            getAriaValueText={valuetext}
+            aria-label="Open trunk"
+            aria-labelledby="trunk_open-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            marks
+            size="small"
+            min={1}
+            max={5}
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
+      dataFunc: (val, handleValChange) => {
+        return <span>
+          <Typography id="temp_cabin-slider" gutterBottom>
+            Set cabin temperature
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(tempMarks)}
+            getAriaValueText={labelFunc(tempMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="temp_cabin-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={27}
+            marks={labelRemoved(tempMarks)}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>
+      }
+    }
+  }, {
+    value: "defrost", label: "Defrost", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="defrost-slider" gutterBottom>
+            Set defrost
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "driver_seat_preheat", label: "Driver seat preheat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="driver_seat_preheat-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="driver_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="passenger_seat_preheat-slider" gutterBottom>
+            Set passenger seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="passenger_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+
+        return <span>
+          <Typography id="steering_wheel_preheat-slider" gutterBottom>
+            Set steering wheel preheat on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "charging", label: "Charging", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="charging-slider" gutterBottom>
+            Set charging on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }]
+
+export default Commands;
diff --git a/src/components/Controls/SendCommand/Parameters.jsx b/src/components/Controls/SendCommand/Parameters.jsx
new file mode 100644
index 0000000..ca1b2d4
--- /dev/null
+++ b/src/components/Controls/SendCommand/Parameters.jsx
@@ -0,0 +1,73 @@
+import PropTypes from "prop-types";
+import {FormControl} from "@material-ui/core";
+import useStyles from "../../useStyles";
+import {MuiPickersUtilsProvider} from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+
+export const Dates = (
+  {
+    startDateFunc,
+    endDateFunc,
+    startDate,
+    handleStartChange,
+    endDate,
+    handleEndChange,
+  }) => {
+  if (startDateFunc && endDateFunc) {
+    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
+      {startDateFunc(startDate, handleStartChange)}
+      {endDateFunc(endDate, handleEndChange, startDate)}
+    </MuiPickersUtilsProvider>);
+  }
+
+  return null;
+}
+
+Dates.propTypes = {
+  startDateFunc: PropTypes.func,
+  endDateFunc: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+}
+
+export const Parameters = (props) => {
+  const {params} = props;
+
+  const classes = useStyles();
+
+  if (params === null || params === undefined || params === "") {
+    return null;
+  }
+
+  const {data, handleDataChange} = props;
+  const {startDate, handleStartChange} = props;
+  const {endDate, handleEndChange} = props;
+
+  return (
+    <FormControl size="small" className={classes.formControl}>
+      <div style={{width: "300px", marginTop: "1em"}}>
+        {params.dataFunc(data, handleDataChange)}
+      </div>
+      <Dates
+        startDateFunc={params.startDateFunc}
+        endDateFunc={params.endDateFunc}
+        startDate={startDate}
+        handleStartChange={handleStartChange}
+        endDate={endDate}
+        handleEndChange={handleEndChange}
+      ></Dates>
+    </FormControl>
+  )
+}
+
+Parameters.propTypes = {
+  params: PropTypes.any,
+  data: PropTypes.any,
+  handleDataChange: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+};
\ No newline at end of file
diff --git a/src/components/Controls/SendCommand/Parameters.test.jsx b/src/components/Controls/SendCommand/Parameters.test.jsx
new file mode 100644
index 0000000..ff2040f
--- /dev/null
+++ b/src/components/Controls/SendCommand/Parameters.test.jsx
@@ -0,0 +1,140 @@
+jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
+
+
+import {render, waitFor} from "@testing-library/react";
+import {Dates, Parameters} from "./Parameters";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+
+const date = Date.parse("2011-10-10T14:48:00")
+
+const renderDates = async (empty) => {
+  if (empty) {
+    await waitFor(() => {
+      /* render */
+    });
+    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
+
+    return container;
+  }
+
+
+  const [start, setStart] = [date, (_) => {}];
+  const [end, setEnd] = [date, (_) => {}];
+
+  const handleStartChange = (val) => {
+    setStart(val)
+  }
+
+  const handleEndChange = (val) => {
+    setEnd(val)
+  }
+
+  await waitFor(() => {
+    /* render */
+  });
+
+  const {container} = render(
+    <div>
+      <Dates
+        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
+        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
+        startDate={start}
+        endDate={end}
+        handleStartChange={handleStartChange}
+        handleEndChange={handleEndChange}
+      />
+    </div>
+  )
+
+  return container
+}
+
+describe("Dates", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderDates(true);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render filled", async () => {
+    const container = await renderDates(false);
+    expect(container).toMatchSnapshot();
+  })
+})
+
+const renderState = {
+  EMPTY: 0,
+  JUST_DATA: 1,
+  WITH_DATE: 2,
+}
+
+const renderParameters = async (rs) => {
+  await waitFor(() => {
+    /* render */
+  });
+
+  if (rs===renderState.EMPTY) {
+    const { container } = render(<Parameters/>)
+
+    return container;
+  }
+  const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
+  const [data, handleDataChange] = [true, (_)=>{}];
+
+  if (rs===renderState.JUST_DATA) {
+    const { container } = render(<Parameters
+      params={params}
+      data={data}
+      handleDataChange={handleDataChange}
+    />)
+
+    return container;
+  }
+
+  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
+  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
+
+  const [start, handleStartChange] = [date, (_)=>{}];
+  const [end, handleEndChange] = [date, (_)=>{}];
+
+  if (rs===renderState.WITH_DATE) {
+    const {container} = render(<Parameters
+        params={params}
+        data={data}
+        handleDataChange={handleDataChange}
+        start={start}
+        handleStartChange={handleStartChange}
+        end={end}
+        handleEndChange={handleEndChange}
+      />
+    )
+
+    return container
+  }
+}
+
+
+describe("Params", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderParameters(renderState.EMPTY);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render just data", async () => {
+    const container = await renderDates(renderState.JUST_DATA);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render with date", async () => {
+    const container = await renderDates(renderState.WITH_DATE);
+    expect(container).toMatchSnapshot();
+  })
+})
diff --git a/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
new file mode 100644
index 0000000..9159f93
--- /dev/null
+++ b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dates Render empty 1`] = `<div />`;
+
+exports[`Dates Render filled 1`] = `
+<div>
+  <div>
+    <div>
+      1318258080000
+    </div>
+    <div>
+      1318258080000
+      , 
+      1318258080000
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Params Render empty 1`] = `<div />`;
+
+exports[`Params Render just data 1`] = `<div />`;
+
+exports[`Params Render with date 1`] = `<div />`;
diff --git a/src/components/Controls/SendCommand/index.jsx b/src/components/Controls/SendCommand/index.jsx
index 4de4635..89776b2 100644
--- a/src/components/Controls/SendCommand/index.jsx
+++ b/src/components/Controls/SendCommand/index.jsx
@@ -1,31 +1,32 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import PropTypes from "prop-types";
-import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
-import SendIcon from "@material-ui/icons/Send";
+import {Button, FormControl, InputLabel, Select} from "@material-ui/core";
 
-import { useVehicleContext } from "../../Contexts/VehicleContext";
-import commands from "../../../services/commands";
+import {useVehicleContext} from "../../Contexts/VehicleContext";
+import commands from "./Commands";
 import useStyles from "../../useStyles";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { logger } from "../../../services/monitoring";
+import {useUserContext} from "../../Contexts/UserContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {logger} from "../../../services/monitoring";
+import {Parameters} from "./Parameters";
+import clsx from "clsx";
+import {sanitize} from "./sanitize";
 
-const SendCommand = ({ vins }) => {
+const SendCommand = ({vins}) => {
   const classes = useStyles();
-  const { sendCommand, busy } = useVehicleContext();
+  const {busy, sendCommand} = useVehicleContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const NoParameters = {
-    value: "",
-    label: "None",
-  };
-  const { setMessage } = useStatusContext();
+  const {setMessage} = useStatusContext();
   const [command, setCommand] = useState("");
-  const [parameters, setParameters] = useState([NoParameters]);
-  const [parameter, setParameter] = useState("");
+  const [parameters, setParameters] = useState(null);
+  const [data, setData] = useState(null);
+  const [startTime, setStartTime] = useState(null)
+  const [endTime, setEndTime] = useState(null)
+
   const changeCommandHandler = (e) => {
     selectCommand(e.target.value);
   };
@@ -34,16 +35,27 @@ const SendCommand = ({ vins }) => {
     const params = getParameters(cmd);
     setCommand(cmd);
     setParameters(params);
-    setParameter(params[0].value);
+    setData(null);
+    setStartTime(null);
+    setEndTime(null);
   };
 
-  const changeParametersHandler = (e) => {
-    setParameter(e.target.value);
+  const handleDataChange = (_, value) => {
+    setData(value);
   };
 
-  const clickHandler = async (e) => {
+  const handleStartChange = (date, _) => {
+    setStartTime(date);
+  }
+
+  const handleEndChange = (date, _) => {
+    setEndTime(date)
+  }
+
+  const clickHandler = async (_) => {
     try {
-      await sendCommand(vins, command, parameter, token);
+      const cmd = sanitize({command: command, data: data, start: startTime, end: endTime});
+      await sendCommand(vins, cmd, token);
       if (vins.length === 1) {
         setMessage(`Sent command to ${vins[0]}`);
       } else {
@@ -59,13 +71,13 @@ const SendCommand = ({ vins }) => {
     for (let i = 0, len = commands.length; i < len; i += 1) {
       const item = commands[i];
       if (item.value === cmd) {
-        if (!item.parameters) {
+        if (!item.params) {
           break;
         }
-        return item.parameters;
+        return item.params;
       }
     }
-    return [NoParameters];
+    return null;
   };
 
   useEffect(() => {
@@ -75,9 +87,9 @@ const SendCommand = ({ vins }) => {
   }, []);
 
   return (
-    <div className={classes.form} style={{ marginTop: 20 }}>
+    <div className={clsx(classes.paper)} style={{marginTop: 20}}>
       <FormControl
-        className={classes.formControlInline}
+        className={classes.formControl}
         variant="outlined"
         size="small"
       >
@@ -101,45 +113,27 @@ const SendCommand = ({ vins }) => {
           ))}
         </Select>
       </FormControl>
-      <FormControl
-        className={classes.formControlInline}
-        variant="outlined"
-        size="small"
-      >
-        <InputLabel
-          htmlFor="send-parameter"
-          className={classes.whiteBackground}
-        >
-          Parameter
-        </InputLabel>
-        <Select
-          native
-          value={parameter}
-          variant="outlined"
-          inputProps={{
-            name: "send-parameter",
-            id: "send-parameter",
-          }}
-          onChange={changeParametersHandler}
-          disabled={parameters.length === 0}
-        >
-          {parameters.map((item) => (
-            <option key={item.value} value={item.value}>
-              {item.label}
-            </option>
-          ))}
-        </Select>
-      </FormControl>
-      <IconButton
-        color="primary"
+      <Parameters
+        params={parameters}
+        data={data}
+        handleDataChange={handleDataChange}
+        startDate={startTime}
+        handleStartChange={handleStartChange}
+        endDate={endTime}
+        handleEndChange={handleEndChange}
+      />
+      <Button
+        type="submit"
         aria-label="send command"
-        component="span"
-        onClick={clickHandler}
-        size="small"
         disabled={busy || vins.length === 0}
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={clickHandler}
       >
-        <SendIcon fontSize="large" />
-      </IconButton>
+        {busy ? "Sending..." : "Send"}
+      </Button>
     </div>
   );
 };
diff --git a/src/components/Controls/SendCommand/sanitize.js b/src/components/Controls/SendCommand/sanitize.js
new file mode 100644
index 0000000..45560e5
--- /dev/null
+++ b/src/components/Controls/SendCommand/sanitize.js
@@ -0,0 +1,115 @@
+export const onOff = {
+  false: "off",
+  true: "on",
+}
+
+export const onOffTemp = {
+  0: "off",
+  1: "on",
+  ...Object.fromEntries(Array.from({length: 26}, (_, i) => [i+2, `${i+15}`]))
+}
+
+export const precond = {
+  0: "battery",
+  1: "all",
+  2: "climate",
+  3: "stop"
+}
+
+export const hmol = {
+  0: "off",
+  1: "low",
+  2: "mid",
+  3: "high"
+}
+
+export const emptyCommands = [
+  "doors_lock", "doors_unlock", "vent_windows",
+  "close_windows", "trunk_close", "flash_headlights",
+  "alert"
+]
+
+export const onOffCommands = ["california_mode", "steering_wheel_preheat", "defrost", "charging"]
+
+export const hmolCommands = ["passenger_seat_preheat", "driver_seat_preheat"]
+
+
+const removeIfFieldsAreEmpty = (cmd, fields) => {
+  for (const field of fields) {
+    if (cmd[field] == null) {
+      delete cmd[field]
+    }
+  }
+
+  return cmd
+}
+
+const tempCabinPeriodConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 27) {
+    cmd.data = 0
+  }
+
+  cmd.data = onOffTemp[cmd.data]
+
+  return cmd
+}
+
+const onOffConvert = (cmd) => {
+  if (cmd.data == null || cmd.data !== true) {
+    cmd.data = false
+  }
+
+  cmd.data = onOff[cmd.data]
+
+  return cmd
+}
+
+const precondConvert = cmd => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = precond[cmd.data]
+
+  return cmd
+}
+
+const hmolConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = hmol[cmd.data]
+
+  return cmd
+}
+
+const trunkOpenConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 1 || cmd.data > 5) {
+    cmd.data = 1
+  }
+
+  cmd.data = cmd.data.toString()
+
+  return cmd
+}
+
+export const sanitize = (cmd) => {
+  cmd = removeIfFieldsAreEmpty(cmd, ["data", "start", "end"])
+
+  if (onOffCommands.includes(cmd.command)) {
+    cmd = onOffConvert(cmd)
+  } else if (hmolCommands.includes(cmd.command)) {
+    cmd = hmolConvert(cmd)
+  } else if (cmd.command === "precondition") {
+    cmd = precondConvert(cmd)
+  } else if (cmd.command === "trunk_open") {
+    cmd = trunkOpenConvert(cmd)
+  } else if (cmd.command === "temp_cabin") {
+    cmd = tempCabinPeriodConvert(cmd)
+  } else {
+    delete cmd.data;
+  }
+
+  return cmd
+}
diff --git a/src/components/Controls/SendCommand/sanitize.test.js b/src/components/Controls/SendCommand/sanitize.test.js
new file mode 100644
index 0000000..4e748f6
--- /dev/null
+++ b/src/components/Controls/SendCommand/sanitize.test.js
@@ -0,0 +1,150 @@
+import {emptyCommands, hmol, hmolCommands, onOff, onOffCommands, onOffTemp, precond, sanitize,} from "./sanitize";
+
+const randomValues = [null, undefined, "someString", 33]
+
+describe("Sanitize test", () => {
+  it("empty commands", () => {
+    for (const command of emptyCommands) {
+      const cmd = sanitize({command})
+      expect(cmd.command).toEqual(command)
+      expect("data" in cmd).toEqual(false);
+      expect("start" in cmd).toEqual(false);
+      expect("end" in cmd).toEqual(false);
+    }
+  })
+
+  it("on-off commands with proper values", () => {
+    for (const command of onOffCommands) {
+      for (const data of [false, true]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(onOff[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("on-off commands with dirty values", () => {
+    for (const command of onOffCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("high-mid-low-off with proper values", () => {
+    for (const command of hmolCommands) {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(hmol[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("precondition with proper values", () => {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command:"precondition", data})
+
+        expect(cmd.data).toEqual(precond[data])
+        expect(cmd.command).toEqual("precondition")
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+  })
+
+  it("precondition with wrong values", () => {
+      const cmd = {command:"precondition"}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("battery")
+        expect(res.command).toEqual("precondition")
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+  })
+
+
+
+  it("high-mid-low-off with wrong values", () => {
+    for (const command of hmolCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("open trunk", () => {
+    const cmd = {command: "trunk_open"}
+    for (let i = 1; i <= 5; i++) {
+      cmd.data = i
+
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual(i.toString())
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+  it("open trunk with wrong values", () => {
+    const cmd = {command: "trunk_open"}
+    for (const rVal of randomValues) {
+      if (rVal !== undefined) {
+        cmd.data = rVal
+      }
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual("1")
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+
+  it("cabin temp with period with proper values", () => {
+    for (let i = 0; i <= 27; i++) {
+      const res = sanitize({
+        command: "temp_cabin",
+        data: i,
+        start: new Date(),
+        end: new Date(),
+      })
+
+
+      expect(res.command).toEqual("temp_cabin")
+      expect(res.data).toEqual(onOffTemp[i])
+      expect(typeof res.start).toEqual("object")
+      expect(typeof res.end).toEqual("object")
+    }
+  })
+})
\ No newline at end of file
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index ea3d879..b66976c 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -94,11 +94,10 @@ const vehiclesAPI = {
       data: [2021, 2022],
     };
   },
-  sendCommand: async (vin, command, parameters) => {
+  sendCommand: async (vin, command) => {
     return {
       vin,
       command,
-      parameters,
     };
   },
   updateVehicle: async (vin, vehicle) => {
diff --git a/src/services/commands.js b/src/services/commands.js
index ac1c305..53806da 100644
--- a/src/services/commands.js
+++ b/src/services/commands.js
@@ -1,81 +1,26 @@
-const Locks = [
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "california_mode", label: "California mode"},
+  {value: "trunk_open", label: "Open trunk"},
+  {value: "trunk_close", label: "Close trunk "},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "alert", label: "Alert"},
+  {value: "temp_cabin", label: "Set cabin temperature"},
   {
-    value: "right_front",
-    label: "Front right door",
-  },{
-    value: "left_front",
-    label: "Front left door",
-  },{
-    value: "right_rear",
-    label: "Rear right door",
-  },{
-    value: "left_rear",
-    label: "Rear left door",
-  },{
-    value: "trunk",
-    label: "Trunk",
+    value: "temp_cabin",
+    label: "Set cabin temperature for period",
+    params: {
+      data: ""
+    },
   },
-];
-
-const Windows = [
-  {
-    value: "right_front",
-    label: "Front right window",
-  },{
-    value: "left_front",
-    label: "Front left window",
-  },{
-    value: "right_rear",
-    label: "Rear right window",
-  },{
-    value: "left_rear",
-    label: "Rear left window",
-  },
-];
-
-const Commands = [{
-    value: "lock",
-    label: "Lock door",
-    parameters: Locks,
-  },
-  {
-    value: "unlock",
-    label: "Unlock door",
-    parameters: Locks,
-  },{
-    value: "open",
-    label: "Open window",
-    parameters: Windows,
-  },
-  {
-    value: "close",
-    label: "Close window",
-    parameters: Windows,
-  },
-  {
-    value: "ecu",
-    label: "ECU Versions",
-  },
-  {
-    value: "log",
-    label: "Log level",
-    parameters: [
-      {
-        value: "info",
-        label: "Info",
-      },
-      {
-        value: "debug",
-        label: "Debug",
-      },
-      {
-        value: "trace",
-        label: "Trace",
-      },
-    ],
-  },{
-    value: "headlights",
-    label: "Flash headlights",
-  }];
+  {value: "defrost", label: "Defrost"},
+  {value: "driver_seat_preheat", label: "Driver seat preheat"},
+  {value: "passenger_seat_preheat", label: "Preheat passenger seat"},
+  {value: "steering_wheel_preheat", label: "Preheat Steering wheel"},
+  {value: "precondition", label: "Precondition"},
+  {value: "charging", label: "Charging"}]
 
 export default Commands;
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index d57c1d0..d99c1d2 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -125,7 +125,7 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  sendCommand: async (vins, command, parameters, token) =>
+  sendCommand: async (vins, command, token) =>
     fetch(`${API_ENDPOINT}/vehiclecommand`, {
       method: "POST",
       headers: Object.assign(
@@ -134,8 +134,7 @@ const vehiclesAPI = {
       ),
       body: JSON.stringify({
         vins,
-        command,
-        parameters,
+        ...command,
       }),
     })
       .then(fetchRespHandler)

From 969b921aa1439c4879c6b92005de97a2a1844e26 Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Sat, 10 Sep 2022 05:25:03 +0600
Subject: [PATCH 11/26] CEC-2378 Add fix for fleet vehicles' search

---
 src/components/Fleets/Status/Vehicles/Table/index.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index 8d08b82..fa061e6 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -42,11 +42,16 @@ const MainForm = ({ name }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
+  const [search, setSearch] = useState("");
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
   const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
   useEffect(() => {
     (async () => {
       try {
@@ -54,6 +59,7 @@ const MainForm = ({ name }) => {
         await getFleetVehicles(
           name,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -66,7 +72,7 @@ const MainForm = ({ name }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
+  }, [token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -145,7 +151,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={handleSearch}/>
         </Grid>
       </Grid>
       <Table>

From 9c7a2b457752a2526043fd641d11a58ea05a612b Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Wed, 14 Sep 2022 17:15:23 +0600
Subject: [PATCH 12/26] CEC-1235 Fix fleet name update (#196)

---
 .../Update/__snapshots__/index.test.jsx.snap    |  8 +++-----
 src/components/Fleets/Update/index.jsx          | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 484d38d..1293291 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="name"
                   id="name-label"
@@ -41,16 +41,14 @@ exports[`FleetUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
-                    disabled=""
+                    class="MuiInputBase-input MuiOutlinedInput-input"
                     id="name"
                     maxlength="255"
                     name="name"
-                    readonly=""
                     required=""
                     type="text"
                     value=""
diff --git a/src/components/Fleets/Update/index.jsx b/src/components/Fleets/Update/index.jsx
index 9c22f49..909f014 100644
--- a/src/components/Fleets/Update/index.jsx
+++ b/src/components/Fleets/Update/index.jsx
@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
-  const name = queries.get("name") ?? "";
 
   const { fleet, getFleet, updateFleet, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +31,8 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
+  const [name, setName] = useState(queries.get("name") ?? "");
+  const [oldName, ] = useState(name);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -56,7 +57,7 @@ const MainForm = () => {
     (async () => {
       try {
         if (!name || !token) return;
-        await getFleet(name, token);
+        await getFleet(oldName, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -77,6 +78,10 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fleet]);
 
+  const onNameChange = (event) => {
+    setName(event.target.value);
+  }
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -110,7 +115,10 @@ const MainForm = () => {
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
         }
       };
-      const result = await updateFleet(name, formData, token);
+
+      console.log(oldName);
+
+      const result = await updateFleet(oldName, formData, token);
       if (!result || result.error) return;
 
       setMessage(`Updated ${result.name}`);
@@ -136,12 +144,11 @@ const MainForm = () => {
           margin="normal"
           inputProps={{
             maxLength: "255",
-            readOnly: true,
           }}
-          disabled
           value={name}
           required
           fullWidth
+          onChange={onNameChange}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup

From 618cc68196b9836ecf206ce5ad2926c4a509f29b Mon Sep 17 00:00:00 2001
From: Alexander Andrews
 <45926661+alexander-e-andrews@users.noreply.github.com>
Date: Tue, 20 Sep 2022 09:40:28 -0400
Subject: [PATCH 13/26] CEC-425 Added Delete Verification Prompt (#198)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
---
 package-lock.json                             | 658 +++++++++++-------
 .../App/__snapshots__/App.test.js.snap        |  36 +-
 .../Details/__snapshots__/index.test.jsx.snap |  12 +-
 src/components/Cars/Status/Details/index.jsx  |   5 +-
 .../Cars/Status/Details/index.test.jsx        |   8 +-
 .../__snapshots__/DetailsTab.test.jsx.snap    |   1 +
 .../Status/__snapshots__/index.test.jsx.snap  |  12 +-
 src/components/Cars/Status/index.test.jsx     |   6 +
 src/components/Controls/TabPanel/index.jsx    |   2 +-
 .../__snapshots__/index.test.jsx.snap         |   9 +
 src/components/DeleteConfirmation/index.jsx   |  36 +
 .../DeleteConfirmation/index.test.jsx         |  20 +
 .../Details/__snapshots__/index.test.jsx.snap |  12 +-
 .../Fleets/Status/Details/index.jsx           |   5 +-
 .../Fleets/Status/Details/index.test.jsx      |   8 +-
 .../Table/__snapshots__/index.test.jsx.snap   | 105 +--
 .../Fleets/Status/Vehicles/Table/index.jsx    |  20 +-
 .../__snapshots__/DetailsTab.test.jsx.snap    |   1 +
 .../__snapshots__/VehiclesTab.test.jsx.snap   | 105 +--
 .../Status/__snapshots__/index.test.jsx.snap  |  12 +-
 src/components/Fleets/Status/index.test.jsx   |   6 +
 src/components/Manifest/List/index.jsx        |   5 +
 22 files changed, 692 insertions(+), 392 deletions(-)
 create mode 100644 src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
 create mode 100644 src/components/DeleteConfirmation/index.jsx
 create mode 100644 src/components/DeleteConfirmation/index.test.jsx

diff --git a/package-lock.json b/package-lock.json
index 8b3fc11..55c27be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,24 @@
       "version": "0.1.1",
       "dependencies": {
         "@datadog/browser-logs": "^3.11.0",
+        "@date-io/date-fns": "1.x",
+        "@date-io/moment": "1.x",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
+        "@material-ui/pickers": "^3.3.10",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^0.26.1",
         "clsx": "^1.1.1",
+        "date-fns": "^2.29.2",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
         "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
+        "moment": "^2.29.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-leaflet": "^3.2.5",
@@ -3396,6 +3401,33 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -3591,6 +3623,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3629,6 +3676,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -4148,6 +4200,26 @@
         }
       }
     },
+    "node_modules/@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      },
+      "peerDependencies": {
+        "@date-io/core": "^1.3.6",
+        "@material-ui/core": "^4.0.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -5103,6 +5175,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -5629,13 +5709,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -5659,34 +5739,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -5996,6 +6048,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -7118,21 +7198,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7144,11 +7209,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -7403,6 +7463,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -8602,6 +8674,21 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -8658,6 +8745,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/espree": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
@@ -9149,6 +9241,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -9193,6 +9308,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -11420,9 +11540,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11937,21 +12057,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -11963,11 +12068,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -12018,6 +12118,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14911,6 +15019,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15090,6 +15209,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16173,6 +16320,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -16479,21 +16639,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16505,11 +16650,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16579,21 +16719,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16616,11 +16741,6 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16881,21 +17001,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -16910,11 +17015,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -19686,6 +19786,27 @@
         }
       }
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
+    "@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -19847,6 +19968,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -19872,6 +20004,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -20257,6 +20394,19 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -20952,6 +21102,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -21339,13 +21497,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -21355,32 +21513,8 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "requires": {
         "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
       }
     },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -21593,6 +21727,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -22430,17 +22586,6 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -22449,11 +22594,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -22653,6 +22793,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -23222,6 +23367,17 @@
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -23256,6 +23412,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -23950,6 +24111,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -23982,6 +24160,11 @@
             "universalify": "^2.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -25591,9 +25774,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -25988,17 +26171,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -26007,11 +26179,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -26051,6 +26218,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28041,6 +28213,14 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -28150,6 +28330,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
       }
     },
     "select-hose": {
@@ -28989,6 +29193,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -29233,17 +29443,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29252,11 +29451,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29307,17 +29501,6 @@
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29331,11 +29514,6 @@
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
           "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29517,17 +29695,6 @@
         "workbox-window": "6.5.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "fs-extra": {
           "version": "9.1.0",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -29539,11 +29706,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "source-map": {
           "version": "0.8.0-beta.0",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e2a4fa3..4b962b9 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -3287,23 +3287,26 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <a
-                        class=""
-                        href="/packages"
-                        title="Delete \\"Test Manifest 1.0\\""
-                      >
-                        <svg
-                          aria-hidden="true"
-                          aria-label="Delete Test Manifest 1.0"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                      <div>
+                        <a
+                          class=""
+                          href="/packages"
+                          title="Delete \\"Test Manifest 1.0\\""
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </a>
+                          <svg
+                            aria-hidden="true"
+                            aria-label="Delete Test Manifest 1.0"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </a>
+                        <div />
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -7024,6 +7027,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                           </a>
                         </div>
                       </div>
+                      <div />
                     </div>
                   </div>
                 </div>
diff --git a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
index 3dcc0a7..d38148b 100644
--- a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                     VIN
                   </b>
                   : 
+                  TESTVIN1234567890
                 </p>
                 <p>
                   <b>
@@ -84,13 +85,13 @@ exports[`VehicleDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/vehicle-update?vin=undefined"
+                  href="/vehicle-update?vin=TESTVIN1234567890"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -103,11 +104,11 @@ exports[`VehicleDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -119,6 +120,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Cars/Status/Details/index.jsx b/src/components/Cars/Status/Details/index.jsx
index 243151f..7692078 100644
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/src/components/Cars/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
 import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -76,12 +78,13 @@ const MainForm = ({ vin }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${vin}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Cars/Status/Details/index.test.jsx b/src/components/Cars/Status/Details/index.test.jsx
index 2334a9e..708c415 100644
--- a/src/components/Cars/Status/Details/index.test.jsx
+++ b/src/components/Cars/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderVehicleDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm vin="TESTVIN1234567890"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("VehicleDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleDetailsTab();
diff --git a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
index 3c50755..c2a24b3 100644
--- a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -128,6 +128,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index d6855a8..02f5063 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -175,6 +175,7 @@ exports[`CarStatus Render 1`] = `
                           VIN
                         </b>
                         : 
+                        TESTVIN1234567890
                       </p>
                     </div>
                     <div
@@ -182,13 +183,13 @@ exports[`CarStatus Render 1`] = `
                     >
                       <a
                         class=""
-                        href="/vehicle-update?vin=undefined"
+                        href="/vehicle-update?vin=TESTVIN1234567890"
                         style="margin: 5px;"
-                        title="Update \\"undefined\\""
+                        title="Update \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Update \\"undefined\\""
+                          aria-label="Update \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -201,11 +202,11 @@ exports[`CarStatus Render 1`] = `
                       <a
                         class=""
                         href="/"
-                        title="Delete \\"undefined\\""
+                        title="Delete \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Delete \\"undefined\\""
+                          aria-label="Delete \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -217,6 +218,7 @@ exports[`CarStatus Render 1`] = `
                       </a>
                     </div>
                   </div>
+                  <div />
                 </div>
               </div>
             </div>
diff --git a/src/components/Cars/Status/index.test.jsx b/src/components/Cars/Status/index.test.jsx
index 9eaed1a..8083078 100644
--- a/src/components/Cars/Status/index.test.jsx
+++ b/src/components/Cars/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("CarStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Controls/TabPanel/index.jsx b/src/components/Controls/TabPanel/index.jsx
index d97a74f..a63ff80 100644
--- a/src/components/Controls/TabPanel/index.jsx
+++ b/src/components/Controls/TabPanel/index.jsx
@@ -3,7 +3,7 @@ import { Box } from "@material-ui/core";
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props;
-
+  
     return (
         <div
             role="tabpanel"
diff --git a/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..1d827d7
--- /dev/null
+++ b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Confirmation Modal Should render 1`] = `
+<div
+  aria-hidden="true"
+>
+  <div />
+</div>
+`;
diff --git a/src/components/DeleteConfirmation/index.jsx b/src/components/DeleteConfirmation/index.jsx
new file mode 100644
index 0000000..877a622
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
+
+const DeleteConfirmation = (props) => {
+    return (
+      <div>
+      <Dialog open={props.open}
+      onClose={props.close}>
+        <DialogTitle id="alert-dialog-title">
+          {"Delete Resource?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {"Are you sure you want to delete: " + props.message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.close}>Cancel</Button>
+          <Button variant="contained" color="secondary" onClick={() => { props.close(); props.deleteFunction()}} autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+      </div>
+    )
+}
+
+DeleteConfirmation.propTypes={
+  open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
+  close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
+  message: PropTypes.any.isRequired, // What the user will see if being confirmed to be deleted
+  deleteFunction: PropTypes.func.isRequired, // Function that runs when user clicks delete
+}
+
+export default DeleteConfirmation;
\ No newline at end of file
diff --git a/src/components/DeleteConfirmation/index.test.jsx b/src/components/DeleteConfirmation/index.test.jsx
new file mode 100644
index 0000000..33da9de
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.test.jsx
@@ -0,0 +1,20 @@
+jest.mock("../Contexts/UserContext");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import DeleteConfirmation from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+describe("Delete Confirmation Modal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Should render", () => {
+    const { container } = render(
+      <DeleteConfirmation open={true} close={()=>{}} message="Test Message" deleteFunction={()=>{}}/>
+    );
+    expect(container).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
index f49c5ea..1019037 100644
--- a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
                     Name
                   </b>
                   : 
+                  Test Fleet
                 </p>
                 <p>
                   <b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/fleet-update?name=undefined"
+                  href="/fleet-update?name=Test Fleet"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Fleets/Status/Details/index.jsx b/src/components/Fleets/Status/Details/index.jsx
index 9b5b31f..3cf7c95 100644
--- a/src/components/Fleets/Status/Details/index.jsx
+++ b/src/components/Fleets/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleet, getFleet, deleteFleet } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${name}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Fleets/Status/Details/index.test.jsx b/src/components/Fleets/Status/Details/index.test.jsx
index 8ba6fbf..6cd7f4b 100644
--- a/src/components/Fleets/Status/Details/index.test.jsx
+++ b/src/components/Fleets/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm name="Test Fleet"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();
diff --git a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
index 8fc325e..34f3767 100644
--- a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
@@ -153,23 +153,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345678\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345678"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345678\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345678"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -187,23 +190,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345679\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345679"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345679\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345679"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -221,23 +227,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345670\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345670"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345670\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345670"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index fa061e6..0fdbdfe 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -43,6 +44,7 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
@@ -132,11 +134,15 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <div>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
+
         );
       }
     });
@@ -151,7 +157,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>
diff --git a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
index 5b8cd0e..fd28656 100644
--- a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
index ea291f7..905f4f2 100644
--- a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
@@ -152,23 +152,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345678\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345678"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345678\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345678"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -186,23 +189,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345679\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345679"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345679\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345679"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -220,23 +226,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345670\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345670"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345670\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345670"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
           </tbody>
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 2ccf0d6..7eee5c3 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
                             Name
                           </b>
                           : 
+                          Fleet Name
                         </p>
                         <p>
                           <b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
                       >
                         <a
                           class=""
-                          href="/fleet-update?name=undefined"
+                          href="/fleet-update?name=Fleet Name"
                           style="margin: 5px;"
-                          title="Update \\"undefined\\""
+                          title="Update \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Update \\"undefined\\""
+                            aria-label="Update \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
                         <a
                           class=""
                           href="/"
-                          title="Delete \\"undefined\\""
+                          title="Delete \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Delete \\"undefined\\""
+                            aria-label="Delete \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
                         </a>
                       </div>
                     </div>
+                    <div />
                   </div>
                 </div>
               </div>
diff --git a/src/components/Fleets/Status/index.test.jsx b/src/components/Fleets/Status/index.test.jsx
index 8ecfca1..bc5cb8c 100644
--- a/src/components/Fleets/Status/index.test.jsx
+++ b/src/components/Fleets/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index 07bfe2f..d47f838 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -30,6 +30,7 @@ import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
 import { useLocalStorage } from "../../useLocalStorage";
 import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import DeleteConfirmation from "../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -67,6 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -178,11 +180,14 @@ const MainForm = () => {
         );
       } else {
         return (
+          <div>
           <Tooltip key={`delete-${action.id}`} title={action.tip}>
             <Link to="#" onClick={() => onDelete(action.id)}>
               {action.icon}
             </Link>
           </Tooltip>
+          <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
         );
       }
     });

From 39ccee54befe868c88f101a0753a53ecb13dda26 Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Thu, 22 Sep 2022 21:56:50 +0600
Subject: [PATCH 14/26] CEC-2383 Vehicle details show fleet filters (#199)

---
 .../Table/__snapshots__/index.test.jsx.snap   | 44 +++++++++++++++++++
 src/components/CANFilter/Table/index.jsx      |  7 +++
 .../__snapshots__/CANFiltersTab.test.jsx.snap | 44 +++++++++++++++++++
 3 files changed, 95 insertions(+)

diff --git a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
index cee527c..7c01ca1 100644
--- a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
@@ -149,6 +149,29 @@ exports[`CANFiltersTable Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Fleet
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
@@ -173,6 +196,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     1000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -226,6 +256,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     2000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -279,6 +316,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     0
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
diff --git a/src/components/CANFilter/Table/index.jsx b/src/components/CANFilter/Table/index.jsx
index c4fe4a2..61b2a7a 100644
--- a/src/components/CANFilter/Table/index.jsx
+++ b/src/components/CANFilter/Table/index.jsx
@@ -39,6 +39,10 @@ const tableColumns = [
     id: "interval",
     label: "Interval (ms)"
   },
+  {
+    id: "fleet",
+    label: "Fleet"
+  },
   {
     id: "",
     label: "Actions"
@@ -178,6 +182,9 @@ const MainForm = ({ vin }) => {
             <TableRow key={row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
+              <TableCell align="center">
+                <Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
+              </TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
diff --git a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
index 5aca30a..bf2a936 100644
--- a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
@@ -148,6 +148,29 @@ exports[`CANFiltersTab Render 1`] = `
                   </svg>
                 </span>
               </th>
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                scope="col"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiTableSortLabel-root"
+                  role="button"
+                  tabindex="0"
+                >
+                  Fleet
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                    />
+                  </svg>
+                </span>
+              </th>
               <th
                 class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                 scope="col"
@@ -172,6 +195,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 1000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -225,6 +255,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 2000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -278,6 +315,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 0
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >

From b622e422861e0b1646df5dabaec814f5cb9393bf Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Tue, 27 Sep 2022 10:29:09 -0700
Subject: [PATCH 15/26] CEC-2601 (#204)

---
 .../App/__snapshots__/App.test.js.snap        | 26 +++++++++++++-
 .../__snapshots__/CarUpdatesTab.test.jsx.snap |  6 +++-
 src/components/Contexts/CarUpdatesContext.jsx | 28 +++++++++++----
 .../Controls/CarUpdatesTable/index.jsx        | 29 +++++++++++++--
 src/components/Manifest/List/index.jsx        | 19 ++++++----
 src/components/Manifest/Status/index.jsx      | 26 ++++++++++++--
 src/services/__mocks__/updatesAPI.js          |  4 +++
 src/services/updatesAPI.js                    | 35 +++++++++++++------
 8 files changed, 140 insertions(+), 33 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 4b962b9..ad4b43a 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -2434,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         Updated
                       </th>
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                        scope="col"
+                      />
                     </tr>
                   </thead>
                   <tbody
@@ -2472,6 +2476,26 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         7/12/2021 6:22:13 PM
                       </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body"
+                      >
+                        <a
+                          class=""
+                          href="/package-status/1"
+                          title="Send cancel for 1G1FP87S3GN100062"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                            />
+                          </svg>
+                        </a>
+                      </td>
                     </tr>
                   </tbody>
                   <tfoot
@@ -2482,7 +2506,7 @@ exports[`App Route /package-status authenticated 1`] = `
                     >
                       <td
                         class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                        colspan="5"
+                        colspan="6"
                       >
                         <div
                           class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 17cb8e8..2efa75e 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
@@ -149,6 +149,10 @@ exports[`CarUpdatesTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                />
               </tr>
             </thead>
             <tbody
@@ -162,7 +166,7 @@ exports[`CarUpdatesTab Render 1`] = `
               >
                 <td
                   class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                  colspan="5"
+                  colspan="6"
                 >
                   <div
                     class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index 7638004..1ec447b 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -6,7 +6,6 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-
 const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
@@ -20,17 +19,16 @@ const validateDeployClosure = (data, propertyName, errPfx) => {
   if (!value || value.length === 0) {
     throw new Error(`${errPfx} are required`);
   }
-}
+};
 
 const validateDeployCarUpdates = (data) => {
-  return validateDeployClosure(data, 'vins', 'Cars')
+  return validateDeployClosure(data, "vins", "Cars");
 };
 
 const validateDeployFleetUpdates = (data) => {
-  return validateDeployClosure(data, 'fleet_names', 'Fleets')
+  return validateDeployClosure(data, "fleet_names", "Fleets");
 };
 
-
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -61,14 +59,14 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
       validateDeployFleetUpdates(data);
       result = await api.createFleetUpdates(data, token);
-      if  (result.error)
+      if (result.error)
         throw new Error(`Deploy fleet updates error. ${result.message}`);
     } finally {
       setBusy(false);
     }
 
     return result;
-  }
+  };
 
   const getCarUpdates = async (search, token) => {
     let result;
@@ -224,12 +222,28 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const cancelUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.cancelCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
+        cancelUpdate,
         deployCarUpdates,
         deployFleetUpdates,
         getCarUpdates,
diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx
index a543777..b4aa071 100644
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/src/components/Controls/CarUpdatesTable/index.jsx
@@ -6,8 +6,10 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import CancelIcon from "@material-ui/icons/Cancel";
 
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -18,7 +20,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -41,6 +43,10 @@ const tableColumns = [
     id: "updated_at",
     label: "Updated",
   },
+  {
+    id: "",
+    label: "",
+  },
 ];
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
+  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
+    useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
     return "None";
   };
 
+  const sendCancel = async (row) => {
+    try {
+      await cancelUpdate(row.id, token);
+      setMessage(`Sent cancel for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <Table>
       <TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
             <TableCell align="center">
               {LocalDateTimeString(row.updated)}
             </TableCell>
+            <TableCell>
+              <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                <Link to="#" onClick={() => sendCancel(row)}>
+                  <CancelIcon />
+                </Link>
+              </Tooltip>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
         <TableRow>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 100]}
-            colSpan={5}
+            colSpan={6}
             count={totalCarUpdates}
             rowsPerPage={pageSize}
             page={pageIndex}
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index d47f838..907ed71 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -68,7 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -181,12 +181,17 @@ const MainForm = () => {
       } else {
         return (
           <div>
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
-          <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
           </div>
         );
       }
diff --git a/src/components/Manifest/Status/index.jsx b/src/components/Manifest/Status/index.jsx
index cb6e865..b57686f 100644
--- a/src/components/Manifest/Status/index.jsx
+++ b/src/components/Manifest/Status/index.jsx
@@ -10,7 +10,9 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
+import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 
 import {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
-const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -38,6 +40,7 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {
+    cancelUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const sendCancel = async ({ id, vin }) => {
+    try {
+      await cancelUpdate(id, token);
+      setMessage(`Sent cancel for ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
             <TableCell align="center">Status</TableCell>
             <TableCell align="center">Created</TableCell>
             <TableCell align="center">Updated</TableCell>
+            <TableCell align="center"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
               <TableCell align="center">
                 {LocalDateTimeString(row.updated)}
               </TableCell>
+              <TableCell>
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
+              colSpan={6}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}
diff --git a/src/services/__mocks__/updatesAPI.js b/src/services/__mocks__/updatesAPI.js
index e0efe59..3491a12 100644
--- a/src/services/__mocks__/updatesAPI.js
+++ b/src/services/__mocks__/updatesAPI.js
@@ -22,6 +22,10 @@ const updatesAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
 };
 
 export default updatesAPI;
diff --git a/src/services/updatesAPI.js b/src/services/updatesAPI.js
index 42731a1..5e8dda9 100644
--- a/src/services/updatesAPI.js
+++ b/src/services/updatesAPI.js
@@ -8,17 +8,18 @@ import {
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
 const createDeployUpdatesClosure = (suffix) => {
-  return async (data, token) =>   fetch(`${API_ENDPOINT}/${suffix}`, {
-    method: "POST",
-    headers: Object.assign(
-      { "Content-Type": "application/json" },
-      getAuthHeaderOptions(token)
-    ),
-    body: JSON.stringify(data),
-  })
-    .then(fetchRespHandler)
-    .catch(errorHandler)
-}
+  return async (data, token) =>
+    fetch(`${API_ENDPOINT}/${suffix}`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(data),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+};
 
 const updatesAPI = {
   createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
@@ -76,6 +77,18 @@ const updatesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler);
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
 };
 
 export default updatesAPI;

From 63e2d2b18fac9b298068c8387de9a812e51e5c27 Mon Sep 17 00:00:00 2001
From: Alexander Andrews
 <45926661+alexander-e-andrews@users.noreply.github.com>
Date: Tue, 27 Sep 2022 15:07:43 -0400
Subject: [PATCH 16/26] CEC-2548 Fixed delete confirmation not being pulled up
 (#202)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
---
 .../App/__snapshots__/App.test.js.snap        |  2 +-
 src/components/Manifest/List/index.jsx        | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index ad4b43a..637ad6b 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -3329,7 +3329,6 @@ exports[`App Route /packages authenticated 1`] = `
                             />
                           </svg>
                         </a>
-                        <div />
                       </div>
                     </td>
                   </tr>
@@ -3460,6 +3459,7 @@ exports[`App Route /packages authenticated 1`] = `
                   </tr>
                 </tfoot>
               </table>
+              <div />
             </div>
           </div>
         </main>
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index 907ed71..253c1bf 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -68,7 +68,11 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deleteId, setDeleteId] = useState("");
+  const [deleteRowName, setDeleteRowName] = useState("");
+
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -133,6 +137,12 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const setDeletePopup = (id, row) => {
+    setDeleteId(id);
+    setDeleteRowName(`${row.name} ${row.version}`);
+    setShowDeleteModal(true);
+  }
+
   const onDelete = async (manifest_id) => {
     try {
       await deleteManifest(parseInt(manifest_id), token);
@@ -182,16 +192,10 @@ const MainForm = () => {
         return (
           <div>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
-              <Link to="#" onClick={() => onDelete(action.id)}>
+              <Link to="#" onClick={() => setDeletePopup(action.id, row)}>
                 {action.icon}
               </Link>
             </Tooltip>
-            <DeleteConfirmation
-              message={action.id}
-              open={showDeleteModal}
-              close={() => setShowDeleteModal(false)}
-              deleteFunction={() => onDelete(action.id)}
-            />
           </div>
         );
       }
@@ -261,6 +265,11 @@ const MainForm = () => {
           </TableRow>
         </TableFooter>
       </Table>
+      <DeleteConfirmation
+        message={deleteRowName}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={() => onDelete(deleteId)} />
     </div>
   );
 };

From 231df333b0c24ea8549de46fb84864b580f05151 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 28 Sep 2022 18:00:31 -0700
Subject: [PATCH 17/26] CEC-2611 Show HMI online status (#205)

* CEC-2611 Show HMI online status
Update car update progress to show ECU
Refresh car details car updates tab

* clean up
---
 src/components/Contexts/CarUpdatesContext.jsx |  28 ++--
 src/components/Contexts/VehicleContext.jsx    |   1 +
 .../Contexts/VehicleContext.test.jsx          | 131 +++++++++++++-----
 .../Controls/CarSelectionTable/index.jsx      |   5 +-
 .../Controls/CarUpdatesTable/index.jsx        |  33 ++++-
 .../Controls/ConnectedIcon/index.jsx          |  19 ++-
 src/components/Fleets/Update/index.jsx        |  86 +++++++-----
 src/components/VehicleMap/index.jsx           |   2 +-
 src/components/VehicleMap/popup.jsx           |   5 +-
 9 files changed, 214 insertions(+), 96 deletions(-)

diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index 1ec447b..3e37bd8 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -76,10 +76,11 @@ export const CarUpdatesProvider = ({ children }) => {
       result = await api.getCarUpdates(search, token);
       if (result.error)
         throw new Error(`Get car updates error. ${result.message}`);
-      result.data.forEach((item) => {
-        item.progress = 0;
+      result.data.forEach((item, i) => {
         item.msg = item.status;
-        applyProgressStatus(item, item);
+        item.progress = 0;
+        applyProgressStatus(item);
+        result.data[i] = Object.assign(result.data[i], item);
       });
       setCarUpdates(result.data);
       if (search && search.offset === 0 && result.total) {
@@ -119,28 +120,27 @@ export const CarUpdatesProvider = ({ children }) => {
     return 0;
   };
 
-  const applyProgressStatus = (item, status) => {
-    if (validateStatusMessage(status)) {
-      if (status.msg === "downloading") {
-        item.progress = getDownloadProgress(status);
+  const applyProgressStatus = (item) => {
+    if (validateStatusMessage(item)) {
+      if (item.msg === "downloading") {
+        item.progress = getDownloadProgress(item);
         item.status = `${item.ecu || ""} downloading ${item.progress}%`.trim();
         return;
-      } else if (status.msg === "package_download_complete") {
+      } else if (item.msg === "package_download_complete") {
         item.progress = 100;
-        item.status = "download complete";
+        item.status = `${item.ecu || ""} download complete`.trim();
         return;
-      } else if (status.msg === "installing") {
-        item.progress = getInstallProgress(status);
+      } else if (item.msg === "installing") {
+        item.progress = getInstallProgress(item);
         item.status = `${item.ecu || ""} installing ${item.progress}%`.trim();
         return;
-      } else if (status.msg === "package_install_complete") {
+      } else if (item.msg === "package_install_complete") {
         item.progress = 100;
-        item.status = "install complete";
+        item.status = `${item.ecu || ""} install complete`.trim();
         return;
       }
     }
     delete item.progress;
-    item.status = status.msg;
   };
 
   const applyProgressStatuses = (statuses) => {
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 82d9c2f..657dbec 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -45,6 +45,7 @@ export const VehicleProvider = ({ children }) => {
       }
       cars.forEach((car) => {
         car.connected = result[car.vin] || false;
+        car.connectedHMI = result[`2:${car.vin}`] || false;
       });
     } catch (e) {
       logger.error(e.stack);
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index b97cf25..cda9d11 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -13,7 +13,7 @@ import { StatusProvider, useStatusContext } from "./StatusContext";
 const checkVehicleResult = (error, busy, vehicle) => {
   checkBaseResults(error, busy);
   expect(screen.getByTestId("vehicle").innerHTML).toEqual(vehicle);
-}
+};
 
 const checkVehiclesResult = (error, busy, vehicles) => {
   checkBaseResults(error, busy);
@@ -195,12 +195,22 @@ describe("VehicleContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="updateVehicleNull" onClick={() => update(null)} />
-            <button data-testid="updateVehicleNoVIN" onClick={() => update({})} />
+            <button
+              data-testid="updateVehicleNull"
+              onClick={() => update(null)}
+            />
+            <button
+              data-testid="updateVehicleNoVIN"
+              onClick={() => update({})}
+            />
             <button
               data-testid="updateVehicle"
               onClick={() =>
-                update({ vin: "3C4PDCBG0ET127145", log_level: "warn", canbus: { enabled: false } })
+                update({
+                  vin: "3C4PDCBG0ET127145",
+                  log_level: "warn",
+                  canbus: { enabled: false },
+                })
               }
             />
           </>
@@ -265,13 +275,17 @@ describe("VehicleContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="deleteVehicleNull" onClick={() => deleteV(null)} />
-            <button data-testid="deleteVehicleNonexistent" onClick={() => deleteV("11111111111111111")} />
+            <button
+              data-testid="deleteVehicleNull"
+              onClick={() => deleteV(null)}
+            />
+            <button
+              data-testid="deleteVehicleNonexistent"
+              onClick={() => deleteV("11111111111111111")}
+            />
             <button
               data-testid="deleteVehicle"
-              onClick={() =>
-                deleteV("3C4PDCBG0ET127145")
-              }
+              onClick={() => deleteV("3C4PDCBG0ET127145")}
             />
           </>
         );
@@ -321,7 +335,7 @@ describe("VehicleContext", () => {
   describe("sendCommand", () => {
     beforeEach(async () => {
       const TestComp = () => {
-        const {busy, sendCommand} = useVehicleContext();
+        const { busy, sendCommand } = useVehicleContext();
         const { message, setMessage } = useStatusContext();
 
         const sendC = async (vin, command) => {
@@ -336,25 +350,38 @@ describe("VehicleContext", () => {
           <>
             <div data-testid="error">{message}</div>
             <div data-testid="busy">{busy.toString()}</div>
-            <button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
-            <button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
+            <button
+              data-testid="sendCommandNullVin"
+              onClick={() => sendC(null, { command: "doors_lock" })}
+            />
+            <button
+              data-testid="sendCommandNonexistentVin"
+              onClick={() =>
+                sendC(["11111111111111111"], { command: "doors_lock" })
+              }
+            />
             <button
               data-testid="sendCommandVin"
-              onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
+              onClick={() =>
+                sendC("3C4PDCBG0ET127145", { command: "doors_lock" })
+              }
             />
             <button
               data-testid="sendCommandWrongCommand"
-              onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
+              onClick={() =>
+                sendC("3C4PDCBG0ET127145", { command: "noSuchCommand" })
+              }
             />
-            </>
-        );}
-        render(
-          <StatusProvider>
-            <VehicleProvider>
-              <TestComp />
-            </VehicleProvider>
-          </StatusProvider>
+          </>
         );
+      };
+      render(
+        <StatusProvider>
+          <VehicleProvider>
+            <TestComp />
+          </VehicleProvider>
+        </StatusProvider>
+      );
     });
 
     afterEach(() => {
@@ -364,24 +391,23 @@ describe("VehicleContext", () => {
     it("initial state", () => {
       checkBaseResults("", "false");
     });
-
-  })
+  });
 });
 
 const expectedFilters = [
   {
     can_id: "123-456",
-    interval: 789
+    interval: 789,
   },
   {
     can_id: "1",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "1000",
-    interval: 1
-  }
-]
+    interval: 1,
+  },
+];
 
 const expectedVehicleData = {
   vin: "3C4PDCBG0ET127145",
@@ -390,9 +416,16 @@ const expectedVehicleData = {
   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: expectedFilters },
+  canbus: {
+    enabled: true,
+    data_logger_enabled: true,
+    max_mem_buffer_size: 1,
+    max_disk_buffer_size: 2,
+    filters: expectedFilters,
+  },
   connected: true,
-}
+  connectedHMI: false,
+};
 
 const expectedVehiclesData = [
   {
@@ -402,19 +435,44 @@ const expectedVehiclesData = [
     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: expectedFilters },
+    canbus: {
+      enabled: true,
+      data_logger_enabled: true,
+      max_mem_buffer_size: 1,
+      max_disk_buffer_size: 2,
+      filters: expectedFilters,
+    },
     connected: true,
+    connectedHMI: false,
+  },
+  { vin: "1G1FP87S3GN100062", connected: true, connectedHMI: false },
+  {
+    vin: "1HGCG325XYA062256",
+    year: 2021,
+    connected: true,
+    connectedHMI: false,
+  },
+  {
+    vin: "1J4GZ78YXWC160024",
+    year: 2021,
+    model: "Ocean",
+    connected: true,
+    connectedHMI: false,
+  },
+  {
+    vin: "2C3CCAAG8CH222800",
+    model: "Ocean",
+    trim: "Basic",
+    connected: true,
+    connectedHMI: false,
   },
-  { vin: "1G1FP87S3GN100062", connected: true },
-  { vin: "1HGCG325XYA062256", year: 2021, connected: true },
-  { vin: "1J4GZ78YXWC160024", year: 2021, model: "Ocean", connected: true },
-  { vin: "2C3CCAAG8CH222800", model: "Ocean", trim: "Basic", connected: true },
   {
     vin: "KNADM4A39C6028108",
     year: 2021,
     model: "Ocean",
     trim: "Basic",
     connected: true,
+    connectedHMI: false,
   },
   {
     vin: "1G11C5SL9FF153507",
@@ -422,5 +480,6 @@ const expectedVehiclesData = [
     model: "Ocean",
     trim: "Basic",
     connected: true,
+    connectedHMI: false,
   },
 ];
diff --git a/src/components/Controls/CarSelectionTable/index.jsx b/src/components/Controls/CarSelectionTable/index.jsx
index 219e69b..fa9d799 100644
--- a/src/components/Controls/CarSelectionTable/index.jsx
+++ b/src/components/Controls/CarSelectionTable/index.jsx
@@ -19,7 +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";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -163,7 +163,8 @@ const CarSelectionTable = (props) => {
                 <TableCell align="center">
                   <ConnectedIcon
                     connected={row.connected}
-                    style={{ marginRight: 5 }}
+                    connectedHMI={row.connectedHMI}
+                    style={{ marginRight: 3 }}
                   />
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                   {row.ecu_list && (
diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx
index b4aa071..3750152 100644
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/src/components/Controls/CarUpdatesTable/index.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
@@ -57,14 +58,21 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
-    useCarUpdatesContext();
+  const {
+    cancelUpdate,
+    getCarUpdates,
+    carUpdates,
+    totalCarUpdates,
+    startMonitor,
+    stopMonitor,
+  } = useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
     (async () => {
       try {
         if (!vin || !token) return;
+        stopMonitor();
         await getCarUpdates(
           {
             vin,
@@ -82,6 +90,20 @@ const MainForm = ({ vin, token }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin, token, pageIndex, pageSize, orderBy, order]);
 
+  useEffect(() => {
+    try {
+      if (carUpdates.length === 0) return;
+      startMonitor(token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+    return () => {
+      stopMonitor();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [carUpdates]);
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -141,7 +163,12 @@ const MainForm = ({ vin, token }) => {
                 {updateName(row)}
               </Link>
             </TableCell>
-            <TableCell align="center">{row.status}</TableCell>
+            <TableCell align="center">
+              {row.status}
+              {row.progress > -1 && (
+                <LinearProgress variant="determinate" value={row.progress} />
+              )}
+            </TableCell>
             <TableCell align="center">
               {LocalDateTimeString(row.created)}
             </TableCell>
diff --git a/src/components/Controls/ConnectedIcon/index.jsx b/src/components/Controls/ConnectedIcon/index.jsx
index 475892d..650ee83 100644
--- a/src/components/Controls/ConnectedIcon/index.jsx
+++ b/src/components/Controls/ConnectedIcon/index.jsx
@@ -1,12 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import { Tooltip } from "@material-ui/core";
 
 const ConnectedIcon = (props) => {
-  if (props.connected) {
+  if (props.connected || props.connectedHMI) {
     return (
       <span style={props.style}>
-        <CheckCircleIcon style={{ color: "Green", fontSize: 12 }} />
+        {props.connected && (
+          <Tooltip title="TBOX">
+            <CheckCircleIcon
+              style={{ color: "Green", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
+        {props.connectedHMI && (
+          <Tooltip title="ICC">
+            <CheckBoxIcon
+              style={{ color: "Blue", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
       </span>
     );
   }
diff --git a/src/components/Fleets/Update/index.jsx b/src/components/Fleets/Update/index.jsx
index 909f014..71c9cd1 100644
--- a/src/components/Fleets/Update/index.jsx
+++ b/src/components/Fleets/Update/index.jsx
@@ -9,30 +9,30 @@ import {
   FormLabel,
   Radio,
   RadioGroup,
-  TextField
+  TextField,
 } from "@material-ui/core";
 
 import useStyles from "../../useStyles";
-import {
-  useFleetContext,
-  FleetProvider
-} from "../../Contexts/FleetContext";
+import { useFleetContext, FleetProvider } from "../../Contexts/FleetContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { logger } from "../../../services/monitoring";
 
-
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
 
   const { fleet, getFleet, updateFleet, busy } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
   const [name, setName] = useState(queries.get("name") ?? "");
-  const [oldName, ] = useState(name);
+  const [oldName] = useState(name);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -71,36 +71,40 @@ const MainForm = () => {
 
     if (fleet.canbus) {
       setCANBusEnabled(fleet.canbus.enabled ?? canbusEnabled);
-      setDataLoggerEnabled(fleet.canbus.data_logger_enabled ?? dataLoggerEnabled);
+      setDataLoggerEnabled(
+        fleet.canbus.data_logger_enabled ?? dataLoggerEnabled
+      );
       setMaxMemBufferSize(fleet.canbus.max_mem_buffer_size ?? maxMemBufferSize);
-      setMaxDiskBufferSize(fleet.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
+      setMaxDiskBufferSize(
+        fleet.canbus.max_disk_buffer_size ?? maxDiskBufferSize
+      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fleet]);
 
   const onNameChange = (event) => {
     setName(event.target.value);
-  }
+  };
 
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
-  }
+  };
 
   const onCANBusChange = (event) => {
     setCANBusEnabled(event.target.checked);
-  }
+  };
 
   const onDataLoggerChange = (event) => {
     setDataLoggerEnabled(event.target.checked);
-  }
+  };
 
   const onMaxMemBufferSizeChange = (event) => {
     setMaxMemBufferSize(event.target.value);
-  }
+  };
 
   const onMaxDiskBufferSizeChange = (event) => {
     setMaxDiskBufferSize(event.target.value);
-  }
+  };
 
   const onSubmit = async (event) => {
     try {
@@ -112,12 +116,13 @@ const MainForm = () => {
           enabled: canbusEnabled,
           data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
           max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
-          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
-        }
+          max_disk_buffer_size:
+            canbusEnabled && dataLoggerEnabled
+              ? parseInt(maxDiskBufferSize)
+              : 0,
+        },
       };
 
-      console.log(oldName);
-
       const result = await updateFleet(oldName, formData, token);
       if (!result || result.error) return;
 
@@ -164,20 +169,24 @@ const MainForm = () => {
           <FormControlLabel value="info" control={<Radio />} label="Info" />
           <FormControlLabel value="warn" control={<Radio />} label="Warn" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
-          <FormControlLabel value="critical" control={<Radio />} label="Critical" />
+          <FormControlLabel
+            value="critical"
+            control={<Radio />}
+            label="Critical"
+          />
         </RadioGroup>
         <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
         <FormGroup>
-          <FormControlLabel control={
-            <Checkbox
-              checked={canbusEnabled}
-              onChange={onCANBusChange}
-            />
-          } label="CAN Bus Enabled" />
+          <FormControlLabel
+            control={
+              <Checkbox checked={canbusEnabled} onChange={onCANBusChange} />
+            }
+            label="CAN Bus Enabled"
+          />
           <TextField
             id="max_mem_buffer_size"
             name="max_mem_buffer_size"
-            label='Max Memory Buffer Size (0 uses default size)'
+            label="Max Memory Buffer Size (0 uses default size)"
             value={maxMemBufferSize}
             onChange={onMaxMemBufferSizeChange}
             variant="outlined"
@@ -190,18 +199,21 @@ const MainForm = () => {
             required
             fullWidth
           />
-          <FormControlLabel control={
-            <Checkbox
-              checked={dataLoggerEnabled}
-              onChange={onDataLoggerChange}
-              disabled={!canbusEnabled}
-            />
-          } label="Data Logger Enabled" />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={dataLoggerEnabled}
+                onChange={onDataLoggerChange}
+                disabled={!canbusEnabled}
+              />
+            }
+            label="Data Logger Enabled"
+          />
         </FormGroup>
         <TextField
           id="max_disk_buffer_size"
           name="max_disk_buffer_size"
-          label='Max Disk Buffer Size (0 uses default size)'
+          label="Max Disk Buffer Size (0 uses default size)"
           value={maxDiskBufferSize}
           onChange={onMaxDiskBufferSizeChange}
           variant="outlined"
@@ -236,4 +248,4 @@ const FleetUpdateForm = (props) => (
   </FleetProvider>
 );
 
-export default FleetUpdateForm;
\ No newline at end of file
+export default FleetUpdateForm;
diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index d8ed19e..6a98059 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -151,7 +151,6 @@ const Component = () => {
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
       <CenterFocus center={center} zoom={zoom} />
-
       {markers.map((marker) => (
         <Marker
           icon={getCarIcon(marker[2])}
@@ -184,6 +183,7 @@ const Component = () => {
           key={carState.vin}
           vin={carState.vin}
           online={carState.online}
+          onlineHMI={carState.online_hmi}
           battery={carState.battery}
           doors={carState.doors}
           location={carState.location}
diff --git a/src/components/VehicleMap/popup.jsx b/src/components/VehicleMap/popup.jsx
index 671e4ed..199d3bb 100644
--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -13,7 +13,7 @@ import CANSignals from "../Cars/CANSignals";
 const VehiclePopUp = (props) => {
   const classes = useStyles();
   const [viewCAN, setViewCAN] = useState(false);
-  const { vin, online, onClose } = props;
+  const { vin, online, onClose, onlineHMI } = props;
 
   const toggleView = (e) => {
     e.preventDefault();
@@ -43,6 +43,9 @@ const VehiclePopUp = (props) => {
         <p>
           <b>Connected</b>: {online.toString()}
         </p>
+        <p>
+          <b>ICC Connected</b>: {onlineHMI?.toString()}
+        </p>
         {viewCAN && <CANSignals vin={vin} />}
         {!viewCAN && <DigitalTwin {...props} />}
       </div>

From 217055e1784b87483ef2de2bbabacc752e408b15 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 28 Sep 2022 20:36:20 -0700
Subject: [PATCH 18/26] CEC-2611 add icc online to car details (#207)

---
 src/components/Cars/Status/DigitalTwinTab.jsx |   3 +
 .../DigitalTwinTab.test.jsx.snap              | 142 +-----------------
 2 files changed, 4 insertions(+), 141 deletions(-)

diff --git a/src/components/Cars/Status/DigitalTwinTab.jsx b/src/components/Cars/Status/DigitalTwinTab.jsx
index de84bb1..f49acd7 100644
--- a/src/components/Cars/Status/DigitalTwinTab.jsx
+++ b/src/components/Cars/Status/DigitalTwinTab.jsx
@@ -48,6 +48,9 @@ const Main = (props) => {
           <div>
             <b>Connected</b>: {carState.online.toString()}
           </div>
+          <div>
+            <b>ICC Connected</b>: {carState?.online_hmi.toString()}
+          </div>
           <DigitalTwin {...carState} />
         </>
       )}
diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
index a376e8e..096928e 100644
--- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
@@ -1,143 +1,3 @@
 // 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>
-`;
+exports[`DigitalTwinTab Render 1`] = `<div />`;

From da466a36f5174c39c72cd980b45e9283dff77bdd Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 28 Sep 2022 22:13:54 -0700
Subject: [PATCH 19/26] CEC-2601 Revert progress changes (#208)

* CEC-2601 Revert progress changes

* update
---
 package.json                                  |  2 +-
 src/components/Contexts/CarUpdatesContext.jsx | 44 ++++++-------------
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 11daec5..3c005e9 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 45.5,
+        "functions": 45,
         "lines": 50,
         "statements": 49
       }
diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index 3e37bd8..a16bed2 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -76,11 +76,10 @@ export const CarUpdatesProvider = ({ children }) => {
       result = await api.getCarUpdates(search, token);
       if (result.error)
         throw new Error(`Get car updates error. ${result.message}`);
-      result.data.forEach((item, i) => {
-        item.msg = item.status;
+      result.data.forEach((item) => {
         item.progress = 0;
-        applyProgressStatus(item);
-        result.data[i] = Object.assign(result.data[i], item);
+        item.msg = item.status;
+        applyProgressStatus(item, item);
       });
       setCarUpdates(result.data);
       if (search && search.offset === 0 && result.total) {
@@ -120,27 +119,28 @@ export const CarUpdatesProvider = ({ children }) => {
     return 0;
   };
 
-  const applyProgressStatus = (item) => {
-    if (validateStatusMessage(item)) {
-      if (item.msg === "downloading") {
-        item.progress = getDownloadProgress(item);
+  const applyProgressStatus = (item, status) => {
+    if (validateStatusMessage(status)) {
+      if (status.msg === "downloading") {
+        item.progress = getDownloadProgress(status);
         item.status = `${item.ecu || ""} downloading ${item.progress}%`.trim();
         return;
-      } else if (item.msg === "package_download_complete") {
+      } else if (status.msg === "package_download_complete") {
         item.progress = 100;
-        item.status = `${item.ecu || ""} download complete`.trim();
+        item.status = "download complete";
         return;
-      } else if (item.msg === "installing") {
-        item.progress = getInstallProgress(item);
+      } else if (status.msg === "installing") {
+        item.progress = getInstallProgress(status);
         item.status = `${item.ecu || ""} installing ${item.progress}%`.trim();
         return;
-      } else if (item.msg === "package_install_complete") {
+      } else if (status.msg === "package_install_complete") {
         item.progress = 100;
-        item.status = `${item.ecu || ""} install complete`.trim();
+        item.status = "install complete";
         return;
       }
     }
     delete item.progress;
+    item.status = status.msg;
   };
 
   const applyProgressStatuses = (statuses) => {
@@ -222,28 +222,12 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
-  const cancelUpdate = async (id, token) => {
-    let result;
-
-    try {
-      setBusy(true);
-      result = await api.cancelCarUpdate(id, token);
-      if (result.error)
-        throw new Error(`Cancel car update error. ${result.message}`);
-    } finally {
-      setBusy(false);
-    }
-
-    return result;
-  };
-
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
-        cancelUpdate,
         deployCarUpdates,
         deployFleetUpdates,
         getCarUpdates,

From f3d0b523d89127d6101020a0ad3eda943a00a6bd Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Thu, 29 Sep 2022 23:34:05 +0600
Subject: [PATCH 20/26] CEC-2384 Vehicle details show associated fleets (#203)

---
 .../App/__snapshots__/App.test.js.snap        |  25 ++
 src/components/CANFilter/Table/index.jsx      |   6 +-
 src/components/Cars/Status/FleetsTab.jsx      | 140 +++++++++
 src/components/Cars/Status/FleetsTab.test.jsx |  47 +++
 .../__snapshots__/FleetsTab.test.jsx.snap     | 280 ++++++++++++++++++
 .../Status/__snapshots__/index.test.jsx.snap  |  25 ++
 src/components/Cars/Status/index.jsx          |   7 +
 src/components/Contexts/VehicleContext.jsx    |  24 ++
 .../Contexts/VehicleContext.test.jsx          |  45 +++
 .../Contexts/__mocks__/VehicleContext.jsx     |   8 +
 src/services/__mocks__/vehiclesAPI.js         |   1 +
 src/services/vehiclesAPI.js                   |  13 +
 12 files changed, 619 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Cars/Status/FleetsTab.jsx
 create mode 100644 src/components/Cars/Status/FleetsTab.test.jsx
 create mode 100644 src/components/Cars/Status/__snapshots__/FleetsTab.test.jsx.snap

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 637ad6b..c42b644 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6918,6 +6918,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-6"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-6"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Fleets
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -7089,6 +7107,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-5"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-6"
+              class="makeStyles-fullWidth-0"
+              hidden=""
+              id="tabpanel-6"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
diff --git a/src/components/CANFilter/Table/index.jsx b/src/components/CANFilter/Table/index.jsx
index 61b2a7a..55d985d 100644
--- a/src/components/CANFilter/Table/index.jsx
+++ b/src/components/CANFilter/Table/index.jsx
@@ -53,6 +53,7 @@ const PAGE_SIZE = "CAN_FILTER_TABLE_PAGE_SIZE";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
+  const [search, onSearch] = useState("");
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
@@ -68,6 +69,7 @@ const MainForm = ({ vin }) => {
         await getFilters(
           vin,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -80,7 +82,7 @@ const MainForm = ({ vin }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, pageIndex, pageSize, orderBy, order]);
+  }, [vin, token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -166,7 +168,7 @@ const MainForm = ({ vin }) => {
           </Link>
         </Grid>
         <Grid item md={8} className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={onSearch}/>
         </Grid>
       </Grid>
       <Table>
diff --git a/src/components/Cars/Status/FleetsTab.jsx b/src/components/Cars/Status/FleetsTab.jsx
new file mode 100644
index 0000000..f981fd0
--- /dev/null
+++ b/src/components/Cars/Status/FleetsTab.jsx
@@ -0,0 +1,140 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import {Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, Typography} from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {useVehicleContext, VehicleProvider} from "../../Contexts/VehicleContext";
+import SearchField from "../../Controls/SearchField";
+import {useLocalStorage} from "../../useLocalStorage";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {useUserContext} from "../../Contexts/UserContext";
+import {logger} from "../../../services/monitoring";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import {Link} from "react-router-dom";
+
+const PAGE_SIZE = "VEHICLE_FLEETS_TABLE_PAGE_SIZE";
+
+const tableColumns = [
+  {
+    id: "fleet",
+    label: "CAN ID"
+  },
+];
+
+const MainForm = (props) => {
+  const classes = useStyles();
+  const {vin} = props;
+
+  const [search, onSearch] = useState("");
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const {setMessage} = useStatusContext();
+  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+  const {getFleets, fleets, totalFleets} = useVehicleContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!vin || !token) return;
+        await getFleets(
+          vin,
+          {
+            search,
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, token, pageIndex, pageSize, orderBy, order, search]);
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSort = (event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Fleets</Typography>
+      <Grid container className={classes.textCenterAlign} spacing={2} justifyContent="center">
+        <Grid item md={3} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={onSearch}/>
+        </Grid>
+      </Grid>
+      <Table style={{width:"auto"}}>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {fleets.map((row) => (
+            <TableRow key={row} width="200px">
+              <TableCell align="center">
+                <Link to={`/fleet/${row}`}>{row}</Link>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleets}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: {"aria-label": "rows per page"},
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  )
+}
+
+const FleetsTab = (props) => {
+  return (
+    <VehicleProvider>
+      <MainForm {...props}/>
+    </VehicleProvider>
+  )
+}
+
+
+export default FleetsTab;
\ No newline at end of file
diff --git a/src/components/Cars/Status/FleetsTab.test.jsx b/src/components/Cars/Status/FleetsTab.test.jsx
new file mode 100644
index 0000000..58fad88
--- /dev/null
+++ b/src/components/Cars/Status/FleetsTab.test.jsx
@@ -0,0 +1,47 @@
+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 { BrowserRouter } from "react-router-dom";
+
+import {StatusProvider} from "../../Contexts/StatusContext";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+import {setToken, UserProvider} from "../../Contexts/UserContext";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import FleetsTab from "./FleetsTab";
+
+const renderFleetsTab = async () => {
+  const {container} = render(
+    <StatusProvider>
+      <UserProvider>
+        <VehicleProvider>
+          <BrowserRouter>
+            <FleetsTab vin="TESTVIN1234567890"/>
+          </BrowserRouter>
+        </VehicleProvider>
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("FleetsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetsTab();
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Cars/Status/__snapshots__/FleetsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/FleetsTab.test.jsx.snap
new file mode 100644
index 0000000..4353af6
--- /dev/null
+++ b/src/components/Cars/Status/__snapshots__/FleetsTab.test.jsx.snap
@@ -0,0 +1,280 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-vehicleprovider"
+      >
+        <div
+          data-testid="mocked-vehicleprovider"
+        >
+          <div
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
+          >
+            <h6
+              class="MuiTypography-root MuiTypography-h6"
+            >
+              Fleets
+            </h6>
+            <div
+              class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-justify-content-xs-center"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                    data-shrink="false"
+                    for="search"
+                  >
+                    Search
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="search"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="search"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root"
+              style="width: auto;"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-head"
+                >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      CAN ID
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root"
+              >
+                <tr
+                  class="MuiTableRow-root"
+                  width="200px"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/fleet1"
+                    >
+                      fleet1
+                    </a>
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                  width="200px"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/fleet2"
+                    >
+                      fleet2
+                    </a>
+                  </td>
+                </tr>
+              </tbody>
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                    colspan="8"
+                  >
+                    <div
+                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                    >
+                      <div
+                        class="MuiTablePagination-spacer"
+                      />
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        Rows per page:
+                      </p>
+                      <div
+                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                      >
+                        <select
+                          aria-label="rows per page"
+                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                        >
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="5"
+                          >
+                            5
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="10"
+                          >
+                            10
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="25"
+                          >
+                            25
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="100"
+                          >
+                            100
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        1-2 of 2
+                      </p>
+                      <div
+                        class="MuiTablePagination-actions"
+                      >
+                        <button
+                          aria-label="Previous page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Previous page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          aria-label="Next page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Next page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 02f5063..87bafee 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -137,6 +137,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-6"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-6"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Fleets
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -255,6 +273,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-5"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-6"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-6"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 0943eb7..bed8b79 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -13,6 +13,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import CANSignalsTab from "./CANSignalsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
+import FleetsTab from "./FleetsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -66,6 +67,8 @@ const CarStatus = () => {
           <Tab label="Digital Twin" {...tabProps(3)} />
           <Tab label="CAN Signals" {...tabProps(4)} />
           <Tab label="Remote Commands" {...tabProps(5)} />
+          <Tab label="Fleets" {...tabProps(6)} />
+
         </Tabs>
       </Box>
 
@@ -92,6 +95,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
         <RemoteCommandsTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
+        <FleetsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 657dbec..3896f9d 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -31,6 +31,8 @@ export const VehicleProvider = ({ children }) => {
   const [vehicle, setVehicle] = useState({});
   const [vehicles, setVehicles] = useState([]);
   const [totalVehicles, setTotalVehicles] = useState(0);
+  const [fleets, setFleets] = useState([]);
+  const [totalFleets, setTotalFleets] = useState(0);
   const [models, setModels] = useState([]);
   const [years, setYears] = useState([]);
 
@@ -220,6 +222,25 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getFleets = async (vin, search, token) => {
+    try {
+      setBusy(true);
+      validateVIN(vin);
+
+      const result = await api.getFleets(vin, search, token);
+      if (result.error) {
+        setFleets([]);
+        throw new Error(`Get Fleets of vehicle`)
+      }
+      setFleets(result.data ?? []);
+      if (result.total) {
+        setTotalFleets(result.total);
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
   return (
     <VehicleContext.Provider
       value={{
@@ -229,6 +250,8 @@ export const VehicleProvider = ({ children }) => {
         vehicle,
         vehicles,
         years,
+        fleets,
+        totalFleets,
         addVehicle,
         deleteVehicle,
         getConnections,
@@ -242,6 +265,7 @@ export const VehicleProvider = ({ children }) => {
         getVehicles,
         sendCommand,
         updateVehicle,
+        getFleets,
       }}
     >
       {children}
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index cda9d11..6478414 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -20,12 +20,57 @@ const checkVehiclesResult = (error, busy, vehicles) => {
   expect(screen.getByTestId("vehicles").innerHTML).toEqual(vehicles);
 };
 
+const checkFleetsResult = (error, busy, fleets) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
+}
+
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
 };
 
 describe("VehicleContext", () => {
+  describe("getFleets", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, fleets, getFleets } = useVehicleContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="fleets">{JSON.stringify(fleets)}</div>
+            <button
+              data-testid="getFleets"
+              onClick={() => getFleets("3C4PDCBG0ET127145")}
+            />
+          </>
+        );
+      };
+      render(
+        <VehicleProvider>
+          <TestComp />
+        </VehicleProvider>
+      );
+    });
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkFleetsResult("", "false", "[]");
+    });
+
+    it("getFleets", async () => {
+      fireEvent.click(screen.getByTestId("getFleets"));
+      await waitFor(() =>
+        expect(screen.getByTestId("fleets").innerHTML).not.toBe("[]")
+      );
+      checkFleetsResult("", "false", JSON.stringify(["fleet1", "fleet2"]));
+    });
+  })
+
   describe("getVehicles", () => {
     beforeEach(() => {
       const TestComp = () => {
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index 81cefda..88b7c05 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -77,6 +77,8 @@ let vehicles = [];
 let models = ["Ocean", "PEAR"];
 let years = [2023, 2024];
 let totalVehicles = 0;
+let fleets = ["fleet1", "fleet2"];
+let totalFleets = 2;
 let error = null;
 
 export const VehicleProvider = ({ children }) => {
@@ -86,6 +88,8 @@ export const VehicleProvider = ({ children }) => {
 export const useVehicleContext = () => ({
   busy,
   models,
+  fleets,
+  totalFleets,
   totalVehicles,
   vehicle,
   vehicles,
@@ -141,6 +145,10 @@ export const useVehicleContext = () => ({
     command,
     parameters,
   })),
+  getFleets: jest.fn((vin, search,_token) => {return {
+    data: ["fleet1", "fleet2"],
+    total: 2,
+  }}),
 });
 
 export const setBusy = (val) => {
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index b66976c..4c9fba4 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -89,6 +89,7 @@ const vehiclesAPI = {
   getVehicles: async () => {
     return { data };
   },
+  getFleets: async (vin) => {return { data: ["fleet1", "fleet2"]}},
   getYears: async () => {
     return {
       data: [2021, 2022],
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index d99c1d2..cc672d5 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -114,6 +114,19 @@ const vehiclesAPI = {
       .catch(errorHandler);
   },
 
+  getFleets: async (vin, search, token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/vehicle/${vin}/fleets`, search)
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+
   getYears: async (token) =>
     fetch(`${API_ENDPOINT}/vehicleyears`, {
       method: "GET",

From d2a467d22bf63edfe1db833c8c516588610a4726 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Thu, 29 Sep 2022 11:58:51 -0700
Subject: [PATCH 21/26] CEC-2601 Fix cancel update handler (#211)

---
 src/components/Contexts/CarUpdatesContext.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index a16bed2..070e49d 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -36,6 +36,21 @@ export const CarUpdatesProvider = ({ children }) => {
   const [delayCount, setDelayCount] = useState(0);
   let progressTimer = 0;
 
+  const cancelUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.cancelCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const deployCarUpdates = async (data, token) => {
     let result;
 
@@ -228,6 +243,7 @@ export const CarUpdatesProvider = ({ children }) => {
         busy,
         carUpdates,
         totalCarUpdates,
+        cancelUpdate,
         deployCarUpdates,
         deployFleetUpdates,
         getCarUpdates,

From 84fbf57daa22ec049e321df44369de143414d496 Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Mon, 3 Oct 2022 20:50:15 +0600
Subject: [PATCH 22/26] CEC-2545 Fix/can signals context (#210)

---
 package.json                                  |   1 +
 .../App/__snapshots__/App.test.js.snap        |   4 +-
 src/components/Cars/CANSignals/index.jsx      |   2 +-
 .../Cars/Status/CANSignalsTab.test.jsx        |  39 +++++
 .../__snapshots__/CANSignalsTab.test.jsx.snap |  23 +++
 .../DigitalTwinTab.test.jsx.snap              | 149 +++++++++++++++++-
 src/components/Contexts/CANSignalsContext.jsx |  49 ++----
 .../Contexts/CANSignalsContext.test.jsx       |  75 +++++++++
 .../Contexts/__mocks__/VehicleContext.jsx     |   1 +
 .../Controls/SendCommand/Parameters.jsx       |  44 ------
 .../Controls/SendCommand/Parameters.test.jsx  |  95 +----------
 .../__snapshots__/Parameters.test.jsx.snap    |  27 ++--
 .../Table/__snapshots__/index.test.jsx.snap   |  12 +-
 .../Fleets/Status/Vehicles/Table/index.jsx    |   4 +-
 .../__snapshots__/VehiclesTab.test.jsx.snap   |  12 +-
 src/components/Manifest/List/index.jsx        |   4 +-
 src/services/__mocks__/vehiclesAPI.js         |  11 ++
 17 files changed, 347 insertions(+), 205 deletions(-)
 create mode 100644 src/components/Cars/Status/CANSignalsTab.test.jsx
 create mode 100644 src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap
 create mode 100644 src/components/Contexts/CANSignalsContext.test.jsx

diff --git a/package.json b/package.json
index 3c005e9..d7b742f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-router-dom": "^5.3.0",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.0",
+    "usehooks-ts": "^2.7.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index c42b644..cb9546f 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -3311,7 +3311,7 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <div>
+                      <span>
                         <a
                           class=""
                           href="/packages"
@@ -3329,7 +3329,7 @@ exports[`App Route /packages authenticated 1`] = `
                             />
                           </svg>
                         </a>
-                      </div>
+                      </span>
                     </td>
                   </tr>
                 </tbody>
diff --git a/src/components/Cars/CANSignals/index.jsx b/src/components/Cars/CANSignals/index.jsx
index a3e9aa9..9de70b8 100644
--- a/src/components/Cars/CANSignals/index.jsx
+++ b/src/components/Cars/CANSignals/index.jsx
@@ -45,7 +45,7 @@ const Main = ({ vin }) => {
 };
 
 const CANSignals = (props) => (
-  <CANSignalProvider>
+  <CANSignalProvider {...{token:props.token}}>
     <Main {...props} />
   </CANSignalProvider>
 );
diff --git a/src/components/Cars/Status/CANSignalsTab.test.jsx b/src/components/Cars/Status/CANSignalsTab.test.jsx
new file mode 100644
index 0000000..2747b69
--- /dev/null
+++ b/src/components/Cars/Status/CANSignalsTab.test.jsx
@@ -0,0 +1,39 @@
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+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 { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import CANSignalsTab from "./CANSignalsTab";
+import {setToken} from "../../Contexts/UserContext";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+
+const renderCANSignalsTab = async () => {
+  const { container } = render(
+    <BrowserRouter>
+      <CANSignalsTab vin="TESTVIN1234567890" token="token"/>
+    </BrowserRouter>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("CANSignalsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderCANSignalsTab();
+    expect(container).toMatchSnapshot();
+  });
+});
+
diff --git a/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap
new file mode 100644
index 0000000..a45ea88
--- /dev/null
+++ b/src/components/Cars/Status/__snapshots__/CANSignalsTab.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CANSignalsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-vehicleprovider"
+  >
+    <div
+      class="makeStyles-paper-0 makeStyles-tableSize-0"
+    >
+      <h6
+        class="MuiTypography-root MuiTypography-h6"
+        style="padding-bottom: 10px;"
+      >
+        CAN Signals
+      </h6>
+      <h3>
+        Loading...
+      </h3>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
index 096928e..607b45f 100644
--- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
@@ -1,3 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DigitalTwinTab Render 1`] = `<div />`;
+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>
+            <b>
+              ICC Connected
+            </b>
+            : 
+            true
+          </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>
+`;
diff --git a/src/components/Contexts/CANSignalsContext.jsx b/src/components/Contexts/CANSignalsContext.jsx
index bb9c1ee..30c49b8 100644
--- a/src/components/Contexts/CANSignalsContext.jsx
+++ b/src/components/Contexts/CANSignalsContext.jsx
@@ -1,8 +1,8 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, {useContext, useState} from "react";
 
 import api from "../../services/vehiclesAPI";
-import { useUserContext } from "./UserContext";
 import { LocalDateTimeString } from "../../utils/dates";
+import {useInterval} from "usehooks-ts";
 
 const CANSignalContext = React.createContext();
 
@@ -15,41 +15,26 @@ const BlankSignal = (msg) => ({
 const transformSignals = (signals) =>
   signals
     .map((signal) => {
-      const { Timestamp, ...Settings } = signal;
-      const keys = Object.keys(Settings);
+      const { timestamp, value, name } = signal;
 
-      return keys.map((key) => ({
-        timestamp: LocalDateTimeString(Timestamp),
-        signal: key,
-        value: Settings[key],
-      }));
+      return {
+        timestamp: LocalDateTimeString(timestamp),
+        signal: name,
+        value: value,
+      };
     })
     .flat();
 
-export const CANSignalProvider = ({ children }) => {
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
+export const CANSignalProvider = ({ token, children }) => {
   const [vin, setVIN] = useState(null);
   const [signals, setSignals] = useState([]);
-  let delay = 500;
+  const [delay, setDelay] = useState(500);
 
-  useEffect(() => {
-    getCANSignals();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      getCANSignals();
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signals]);
+  useInterval(
+    () => {
+      getCANSignals()
+    }, vin?delay:null
+  )
 
   const getCANSignals = async () => {
     try {
@@ -62,10 +47,10 @@ export const CANSignalProvider = ({ children }) => {
       const items = transformSignals(result.data);
 
       if (items.length > 0) {
-        delay = 500;
+        setDelay(500);
         setSignals(items);
       } else {
-        delay = 1000;
+        setDelay(1000);
         setSignals([BlankSignal("No signals")]);
       }
     } catch (e) {
diff --git a/src/components/Contexts/CANSignalsContext.test.jsx b/src/components/Contexts/CANSignalsContext.test.jsx
new file mode 100644
index 0000000..57b98e8
--- /dev/null
+++ b/src/components/Contexts/CANSignalsContext.test.jsx
@@ -0,0 +1,75 @@
+jest.mock("../../services/vehiclesAPI");
+
+import {
+  render,
+  cleanup,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+import {CANSignalProvider, useCANSignalContext} from "./CANSignalsContext";
+
+const checkSignalsResults = (filters) => {
+  expect(screen.getByTestId("signals").innerHTML).toEqual(filters);
+};
+
+describe("CANSignalsContext", () => {
+  describe("getSignals", () => {
+    beforeEach(() => {
+      jest.useFakeTimers("setInterval");
+      const TestComp = () => {
+        const { signals, setVIN } = useCANSignalContext();
+
+        return (
+          <>
+            <div data-testid="signals">{JSON.stringify(signals)}</div>
+            <button
+              data-testid="getSignals"
+              onClick={()=>{setVIN("TESTVIN1234567890")}}
+            />
+          </>
+        );
+      };
+      render(
+        <CANSignalProvider>
+          <TestComp />
+        </CANSignalProvider>
+      );
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkSignalsResults("[]");
+    });
+
+    it("getSignals", async () => {
+      // eslint-disable-next-line testing-library/no-unnecessary-act
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("getSignals"));
+        await waitFor(() =>
+          expect(screen.getByTestId("signals").innerHTML).toBe("[]")
+        );
+        jest.advanceTimersByTime(501);
+      })
+
+      await waitFor(() => {
+        return expect(screen.getByTestId("signals").innerHTML).not.toBe("[]");
+      } );
+
+      checkSignalsResults(JSON.stringify(expectedSignalsData));
+    });
+  });
+});
+
+const expectedSignalsData = [
+  {
+    timestamp: "7/14/2021 8:09:40 PM",
+    signal: "signal",
+    value: 123
+  },
+];
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index 88b7c05..cf6bfba 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -35,6 +35,7 @@ let vehicle = {
 let vehicleState = {
   data: {
     online: false,
+    online_hmi: true,
     battery: {
       percent: 95,
     },
diff --git a/src/components/Controls/SendCommand/Parameters.jsx b/src/components/Controls/SendCommand/Parameters.jsx
index ca1b2d4..5d6fe6c 100644
--- a/src/components/Controls/SendCommand/Parameters.jsx
+++ b/src/components/Controls/SendCommand/Parameters.jsx
@@ -1,36 +1,6 @@
 import PropTypes from "prop-types";
 import {FormControl} from "@material-ui/core";
 import useStyles from "../../useStyles";
-import {MuiPickersUtilsProvider} from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-
-export const Dates = (
-  {
-    startDateFunc,
-    endDateFunc,
-    startDate,
-    handleStartChange,
-    endDate,
-    handleEndChange,
-  }) => {
-  if (startDateFunc && endDateFunc) {
-    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
-      {startDateFunc(startDate, handleStartChange)}
-      {endDateFunc(endDate, handleEndChange, startDate)}
-    </MuiPickersUtilsProvider>);
-  }
-
-  return null;
-}
-
-Dates.propTypes = {
-  startDateFunc: PropTypes.func,
-  endDateFunc: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
-}
 
 export const Parameters = (props) => {
   const {params} = props;
@@ -42,22 +12,12 @@ export const Parameters = (props) => {
   }
 
   const {data, handleDataChange} = props;
-  const {startDate, handleStartChange} = props;
-  const {endDate, handleEndChange} = props;
 
   return (
     <FormControl size="small" className={classes.formControl}>
       <div style={{width: "300px", marginTop: "1em"}}>
         {params.dataFunc(data, handleDataChange)}
       </div>
-      <Dates
-        startDateFunc={params.startDateFunc}
-        endDateFunc={params.endDateFunc}
-        startDate={startDate}
-        handleStartChange={handleStartChange}
-        endDate={endDate}
-        handleEndChange={handleEndChange}
-      ></Dates>
     </FormControl>
   )
 }
@@ -66,8 +26,4 @@ Parameters.propTypes = {
   params: PropTypes.any,
   data: PropTypes.any,
   handleDataChange: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
 };
\ No newline at end of file
diff --git a/src/components/Controls/SendCommand/Parameters.test.jsx b/src/components/Controls/SendCommand/Parameters.test.jsx
index ff2040f..df7f416 100644
--- a/src/components/Controls/SendCommand/Parameters.test.jsx
+++ b/src/components/Controls/SendCommand/Parameters.test.jsx
@@ -1,75 +1,10 @@
-jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
-
-
 import {render, waitFor} from "@testing-library/react";
-import {Dates, Parameters} from "./Parameters";
+import {Parameters} from "./Parameters";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
-
-const date = Date.parse("2011-10-10T14:48:00")
-
-const renderDates = async (empty) => {
-  if (empty) {
-    await waitFor(() => {
-      /* render */
-    });
-    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
-
-    return container;
-  }
-
-
-  const [start, setStart] = [date, (_) => {}];
-  const [end, setEnd] = [date, (_) => {}];
-
-  const handleStartChange = (val) => {
-    setStart(val)
-  }
-
-  const handleEndChange = (val) => {
-    setEnd(val)
-  }
-
-  await waitFor(() => {
-    /* render */
-  });
-
-  const {container} = render(
-    <div>
-      <Dates
-        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
-        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
-        startDate={start}
-        endDate={end}
-        handleStartChange={handleStartChange}
-        handleEndChange={handleEndChange}
-      />
-    </div>
-  )
-
-  return container
-}
-
-describe("Dates", () => {
-  beforeAll(() => {
-    addSnapshotSerializer(expect);
-  })
-
-  it("Render empty", async () => {
-    const container = await renderDates(true);
-    expect(container).toMatchSnapshot();
-  })
-
-  it("Render filled", async () => {
-    const container = await renderDates(false);
-    expect(container).toMatchSnapshot();
-  })
-})
-
 const renderState = {
   EMPTY: 0,
   JUST_DATA: 1,
-  WITH_DATE: 2,
 }
 
 const renderParameters = async (rs) => {
@@ -94,27 +29,6 @@ const renderParameters = async (rs) => {
 
     return container;
   }
-
-  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
-  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
-
-  const [start, handleStartChange] = [date, (_)=>{}];
-  const [end, handleEndChange] = [date, (_)=>{}];
-
-  if (rs===renderState.WITH_DATE) {
-    const {container} = render(<Parameters
-        params={params}
-        data={data}
-        handleDataChange={handleDataChange}
-        start={start}
-        handleStartChange={handleStartChange}
-        end={end}
-        handleEndChange={handleEndChange}
-      />
-    )
-
-    return container
-  }
 }
 
 
@@ -129,12 +43,7 @@ describe("Params", () => {
   })
 
   it("Render just data", async () => {
-    const container = await renderDates(renderState.JUST_DATA);
-    expect(container).toMatchSnapshot();
-  })
-
-  it("Render with date", async () => {
-    const container = await renderDates(renderState.WITH_DATE);
+    const container = await renderParameters(renderState.JUST_DATA);
     expect(container).toMatchSnapshot();
   })
 })
diff --git a/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
index 9159f93..0f1a74f 100644
--- a/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
+++ b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
@@ -1,24 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dates Render empty 1`] = `<div />`;
+exports[`Params Render empty 1`] = `<div />`;
 
-exports[`Dates Render filled 1`] = `
+exports[`Params Render just data 1`] = `
 <div>
-  <div>
-    <div>
-      1318258080000
-    </div>
-    <div>
-      1318258080000
-      , 
-      1318258080000
+  <div
+    class="MuiFormControl-root makeStyles-formControl-0"
+  >
+    <div
+      style="width: 300px; margin-top: 1em;"
+    >
+      <div>
+        val.toString()
+      </div>
     </div>
   </div>
 </div>
 `;
-
-exports[`Params Render empty 1`] = `<div />`;
-
-exports[`Params Render just data 1`] = `<div />`;
-
-exports[`Params Render with date 1`] = `<div />`;
diff --git a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
index 34f3767..7cb84c5 100644
--- a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
@@ -153,7 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -172,7 +172,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -190,7 +190,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -209,7 +209,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
                 <tr
@@ -227,7 +227,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <div>
+                    <span>
                       <a
                         class=""
                         href="/"
@@ -246,7 +246,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                         </svg>
                       </a>
                       <div />
-                    </div>
+                    </span>
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index 0fdbdfe..07127f2 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -134,14 +134,14 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <div>
+          <span key={`delete-${action.id}-of-div`}>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => onDelete(action.id)}>
                 {action.icon}
               </Link>
             </Tooltip>
             <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
-          </div>
+          </span>
 
         );
       }
diff --git a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
index 905f4f2..7db6e6e 100644
--- a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
@@ -152,7 +152,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -171,7 +171,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
             <tr
@@ -189,7 +189,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -208,7 +208,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
             <tr
@@ -226,7 +226,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <div>
+                <span>
                   <a
                     class=""
                     href="/"
@@ -245,7 +245,7 @@ exports[`VehiclesTab Render 1`] = `
                     </svg>
                   </a>
                   <div />
-                </div>
+                </span>
               </td>
             </tr>
           </tbody>
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index 253c1bf..4d019e9 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -190,13 +190,13 @@ const MainForm = () => {
         );
       } else {
         return (
-          <div>
+          <span key={`delete-${action.id}-of-key`}>
             <Tooltip key={`delete-${action.id}`} title={action.tip}>
               <Link to="#" onClick={() => setDeletePopup(action.id, row)}>
                 {action.icon}
               </Link>
             </Tooltip>
-          </div>
+          </span>
         );
       }
     });
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index 4c9fba4..ccd7537 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -50,6 +50,14 @@ const ecusData = [
   },
 ];
 
+const signals = {data:[
+  {
+    timestamp: "2021-07-14T20:09:40.98187Z",
+    name: "signal",
+    value: 123
+  },
+]};
+
 const vehiclesAPI = {
   addVehicle: async (vehicle) => {
     data.push(vehicle);
@@ -105,6 +113,9 @@ const vehiclesAPI = {
     const index = data.findIndex(element => element.vin === vin);
     if (index >= 0) data[index] = vehicle;
     return vehicle;
+  },
+  getCANSignals: async (vin, vehicle) => {
+   return signals;
   }
 };
 

From 9b80853784cacf6f54387128b6a1a67c7662d12e Mon Sep 17 00:00:00 2001
From: Alexander Andrews
 <45926661+alexander-e-andrews@users.noreply.github.com>
Date: Mon, 3 Oct 2022 13:44:59 -0400
Subject: [PATCH 23/26] CEC-2608: Changed warn to warning (#209)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
---
 src/components/App/__snapshots__/App.test.js.snap           | 4 ++--
 src/components/Cars/Add/__snapshots__/index.test.jsx.snap   | 4 ++--
 src/components/Cars/Add/index.jsx                           | 2 +-
 .../Cars/Update/__snapshots__/index.test.jsx.snap           | 4 ++--
 src/components/Cars/Update/index.jsx                        | 2 +-
 src/components/Contexts/FleetContext.test.jsx               | 6 +++---
 src/components/Contexts/VehicleContext.test.jsx             | 2 +-
 src/components/Contexts/__mocks__/FleetContext.jsx          | 2 +-
 src/components/Fleets/Add/__snapshots__/index.test.jsx.snap | 4 ++--
 src/components/Fleets/Add/index.jsx                         | 2 +-
 .../Fleets/Table/__snapshots__/index.test.jsx.snap          | 2 +-
 .../Fleets/Update/__snapshots__/index.test.jsx.snap         | 4 ++--
 src/components/Fleets/Update/index.jsx                      | 2 +-
 src/services/__mocks__/fleetsAPI.js                         | 2 +-
 14 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index cb9546f..527bc6c 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6015,7 +6015,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
-                          value="warn"
+                          value="warning"
                         />
                         <div
                           class="PrivateRadioButtonIcon-root-0"
@@ -6049,7 +6049,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                     >
-                      Warn
+                      Warning
                     </span>
                   </label>
                   <label
diff --git a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
index 95c6340..2d706b6 100644
--- a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
@@ -388,7 +388,7 @@ exports[`VehicleAddForm Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -422,7 +422,7 @@ exports[`VehicleAddForm Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label
diff --git a/src/components/Cars/Add/index.jsx b/src/components/Cars/Add/index.jsx
index b060fce..88617fb 100644
--- a/src/components/Cars/Add/index.jsx
+++ b/src/components/Cars/Add/index.jsx
@@ -180,7 +180,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 0a175dd..403c08a 100644
--- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
@@ -390,7 +390,7 @@ exports[`VehicleUpdate Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -424,7 +424,7 @@ exports[`VehicleUpdate Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label
diff --git a/src/components/Cars/Update/index.jsx b/src/components/Cars/Update/index.jsx
index 92eeecc..64bcc6c 100644
--- a/src/components/Cars/Update/index.jsx
+++ b/src/components/Cars/Update/index.jsx
@@ -208,7 +208,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>
diff --git a/src/components/Contexts/FleetContext.test.jsx b/src/components/Contexts/FleetContext.test.jsx
index 71b53e9..f595e2a 100644
--- a/src/components/Contexts/FleetContext.test.jsx
+++ b/src/components/Contexts/FleetContext.test.jsx
@@ -139,7 +139,7 @@ describe("FleetContext", () => {
               onClick={() =>
                 add({
                   name: "EU-WEST",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }
@@ -219,7 +219,7 @@ describe("FleetContext", () => {
               onClick={() =>
                 update({
                   name: "EU-WEST",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }
@@ -782,7 +782,7 @@ const expectedFleetsData = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: {
       enabled: false,
       data_logger_enabled: false,
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index 6478414..a8c79d5 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -253,7 +253,7 @@ describe("VehicleContext", () => {
               onClick={() =>
                 update({
                   vin: "3C4PDCBG0ET127145",
-                  log_level: "warn",
+                  log_level: "warning",
                   canbus: { enabled: false },
                 })
               }
diff --git a/src/components/Contexts/__mocks__/FleetContext.jsx b/src/components/Contexts/__mocks__/FleetContext.jsx
index 70afe26..4472820 100644
--- a/src/components/Contexts/__mocks__/FleetContext.jsx
+++ b/src/components/Contexts/__mocks__/FleetContext.jsx
@@ -28,7 +28,7 @@ let fleets = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
     vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
   },
diff --git a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
index f95f4c7..7385c23 100644
--- a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
@@ -248,7 +248,7 @@ exports[`FleetAddForm Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -282,7 +282,7 @@ exports[`FleetAddForm Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label
diff --git a/src/components/Fleets/Add/index.jsx b/src/components/Fleets/Add/index.jsx
index cebd349..12ad106 100644
--- a/src/components/Fleets/Add/index.jsx
+++ b/src/components/Fleets/Add/index.jsx
@@ -129,7 +129,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel value="critical" control={<Radio />} label="Critical" />
         </RadioGroup>
diff --git a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
index 5f9f641..4e26d98 100644
--- a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
@@ -304,7 +304,7 @@ exports[`FleetTable Render 1`] = `
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
-                      warn
+                      warning
                     </td>
                     <td
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 1293291..257cb6d 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -248,7 +248,7 @@ exports[`FleetUpdate Render 1`] = `
                         class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
-                        value="warn"
+                        value="warning"
                       />
                       <div
                         class="PrivateRadioButtonIcon-root-0"
@@ -282,7 +282,7 @@ exports[`FleetUpdate Render 1`] = `
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
                   >
-                    Warn
+                    Warning
                   </span>
                 </label>
                 <label
diff --git a/src/components/Fleets/Update/index.jsx b/src/components/Fleets/Update/index.jsx
index 71c9cd1..850871e 100644
--- a/src/components/Fleets/Update/index.jsx
+++ b/src/components/Fleets/Update/index.jsx
@@ -167,7 +167,7 @@ const MainForm = () => {
           <FormControlLabel value="trace" control={<Radio />} label="Trace" />
           <FormControlLabel value="debug" control={<Radio />} label="Debug" />
           <FormControlLabel value="info" control={<Radio />} label="Info" />
-          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
           <FormControlLabel value="error" control={<Radio />} label="Error" />
           <FormControlLabel
             value="critical"
diff --git a/src/services/__mocks__/fleetsAPI.js b/src/services/__mocks__/fleetsAPI.js
index 64a610c..c51b490 100644
--- a/src/services/__mocks__/fleetsAPI.js
+++ b/src/services/__mocks__/fleetsAPI.js
@@ -22,7 +22,7 @@ const fleets = [
   },
   {
     name: "US-CENTRAL",
-    log_level: "warn",
+    log_level: "warning",
     canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
     vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
   },

From 9786912b02f3af49cc7a549b93145b00fea5f341 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Tue, 4 Oct 2022 16:59:37 -0700
Subject: [PATCH 24/26] DEVOPS-0 increase coverage requirements (#213)

---
 package-lock.json | 20 ++++++++++++++++++++
 package.json      |  6 +++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55c27be..5c1f620 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "react-router-dom": "^5.3.0",
         "react-router-hash-link": "^2.4.3",
         "react-scripts": "5.0.0",
+        "usehooks-ts": "^2.7.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -16432,6 +16433,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
+      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -29270,6 +29284,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "usehooks-ts": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
+      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index d7b742f..5a7d5ed 100644
--- a/package.json
+++ b/package.json
@@ -68,9 +68,9 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 45,
-        "lines": 50,
-        "statements": 49
+        "functions": 47,
+        "lines": 55,
+        "statements": 55
       }
     },
     "coverageReporters": [

From 5a3d8afd037fded5635eff39bb55438de02780e0 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 5 Oct 2022 08:41:07 -0700
Subject: [PATCH 25/26] CEC-2585 Fix carsconnected errors (#214)

---
 src/components/VehicleMap/index.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index 6a98059..253c813 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -75,7 +75,9 @@ const Component = () => {
   useEffect(() => {
     if (!token) return;
     if (markers.length > 0) {
-      const vins = markers.map((marker) => marker[2]);
+      const vins = markers
+        .filter((marker) => marker[2].length > 0)
+        .map((marker) => marker[2]);
       getConnections(vins, token).then((conns) => {
         setConnections(conns);
       });

From 25d2b3327ec6a4fd97c79315239b9ff48af09a8d Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 5 Oct 2022 10:23:08 -0700
Subject: [PATCH 26/26] CEC-2585 Do not make request if there are no VINs
 (#215)

* CEC-2585 Do not make request if there are no VINs

* Commet
---
 src/components/VehicleMap/index.jsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index 253c813..c685dac 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -74,14 +74,16 @@ const Component = () => {
 
   useEffect(() => {
     if (!token) return;
-    if (markers.length > 0) {
-      const vins = markers
-        .filter((marker) => marker[2].length > 0)
-        .map((marker) => marker[2]);
-      getConnections(vins, token).then((conns) => {
-        setConnections(conns);
-      });
-    }
+
+    const vins = markers
+      .filter((marker) => marker[2].length > 0)
+      .map((marker) => marker[2]);
+
+    if (vins.length === 0) return;
+
+    getConnections(vins, token).then((conns) => {
+      setConnections(conns);
+    });
     // eslint-disable-next-line
   }, [markers, token]);