From 0fad12b23b76dc4913c0fbead976619953b7c9ba Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Tue, 6 Dec 2022 04:27:26 +0600
Subject: [PATCH 1/4] CEC-3245 Fix console errors during test (#246)

* fix/fleet-vehicles-search

* fix/fleet-name-update

* Fix errors in console during test
---
 src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap | 1 -
 src/components/CANFilter/Add/index.jsx                         | 2 +-
 src/components/CANFilter/Add/index.test.jsx                    | 1 -
 src/components/Fleets/Status/CANFilters/Add/index.jsx          | 2 +-
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index d72040a..9d96d85 100644
--- a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
@@ -161,7 +161,6 @@ exports[`CANFiltersAdd Render 1`] = `
         </div>
       </div>
     </div>
-    f
   </div>
 </div>
 `;
diff --git a/src/components/CANFilter/Add/index.jsx b/src/components/CANFilter/Add/index.jsx
index b1bafac..0c64009 100644
--- a/src/components/CANFilter/Add/index.jsx
+++ b/src/components/CANFilter/Add/index.jsx
@@ -19,7 +19,7 @@ const MainForm = () => {
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
-  const [canId, setCanId] = useState(null);
+  const [canId, setCanId] = useState(undefined);
   const [interval, setInterval] = useState("");
   const [edgeMask, setEdgeMask] = useState("");
   const queries = new URLSearchParams(useLocation().search);
diff --git a/src/components/CANFilter/Add/index.test.jsx b/src/components/CANFilter/Add/index.test.jsx
index 7afca84..5484339 100644
--- a/src/components/CANFilter/Add/index.test.jsx
+++ b/src/components/CANFilter/Add/index.test.jsx
@@ -23,7 +23,6 @@ const renderCANFiltersAdd = async () => {
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
-      f
     </CANFiltersProvider>
   );
   await waitFor(() => {});
diff --git a/src/components/Fleets/Status/CANFilters/Add/index.jsx b/src/components/Fleets/Status/CANFilters/Add/index.jsx
index 726f7c3..0b653ee 100644
--- a/src/components/Fleets/Status/CANFilters/Add/index.jsx
+++ b/src/components/Fleets/Status/CANFilters/Add/index.jsx
@@ -16,7 +16,7 @@ const MainForm = () => {
   const { addFleetCANFilter, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
   const classes = useStyles();
-  const [canId, setCanId] = useState(null);
+  const [canId, setCanId] = useState(undefined);
   const [interval, setInterval] = useState("");
   const [edgeMask, setEdgeMask] = useState("");
   const [redirect, setRedirect] = useState(null);

From 888e8925bd14b319026f993762b3126a127768f0 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 7 Dec 2022 11:21:20 -0800
Subject: [PATCH 2/4] CEC-3040 Fix add car button permission (#245)

---
 .../App/__snapshots__/App.test.js.snap          | 17 ++++++++++++++++-
 .../Cars/List/__snapshots__/index.test.jsx.snap | 17 ++++++++++++++++-
 src/components/Cars/List/index.jsx              |  2 +-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index c93bf07..a714fc5 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -8402,7 +8402,22 @@ exports[`App Route /vehicles authenticated 1`] = `
               >
                 <div
                   class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-                />
+                >
+                  <a
+                    href="/vehicle-add"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                      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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                      />
+                    </svg>
+                  </a>
+                </div>
                 <div
                   class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
                 >
diff --git a/src/components/Cars/List/__snapshots__/index.test.jsx.snap b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
index 50c7849..cc2b5f0 100644
--- a/src/components/Cars/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
@@ -22,7 +22,22 @@ exports[`VehicleTable Render 1`] = `
             >
               <div
                 class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-              />
+              >
+                <a
+                  href="/vehicle-add"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                    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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                    />
+                  </svg>
+                </a>
+              </div>
               <div
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index db72783..c0ab155 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -53,7 +53,7 @@ const MainForm = () => {
           <RoleWrap
             groups={groups}
             providers={providers}
-            rolesPerProvider={Permissions.FiskerDelete}
+            rolesPerProvider={Permissions.FiskerCreate}
           >
             <Link to="/vehicle-add">
               <AddCircleIcon fontSize="large" />

From 8e1b01b65113e95b2341e742267cd4373d7358f5 Mon Sep 17 00:00:00 2001
From: Paul Adamsen <117673433+pauladamseniii@users.noreply.github.com>
Date: Wed, 7 Dec 2022 19:17:08 -0500
Subject: [PATCH 3/4] CEC-3242 - New form for Fleet/AddVehicle (#243)

* CEC-3242 - New form for Fleet/AddVehicle

* fixes, improvements

* update snapshot

* CEC-3242 and CEC-3262

* update snapshot

* un-require removed fields from vehicle add
---
 .../App/__snapshots__/App.test.js.snap        | 140 -----
 .../Add/__snapshots__/index.test.jsx.snap     | 140 -----
 src/components/Cars/Add/index.jsx             |  51 --
 src/components/Contexts/VehicleContext.jsx    |   8 -
 .../Add/__snapshots__/index.test.jsx.snap     | 498 ++++++++++++++++++
 .../Fleets/Status/Vehicles/Add/index.jsx      | 115 +++-
 6 files changed, 610 insertions(+), 342 deletions(-)

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index a714fc5..4788d68 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6392,146 +6392,6 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     </fieldset>
                   </div>
                 </div>
-                <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                    data-shrink="true"
-                    for="model"
-                    id="model-label"
-                  >
-                    Model
-                    <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="model"
-                      maxlength="255"
-                      name="model"
-                      required=""
-                      type="text"
-                      value="Ocean"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                      >
-                        <span>
-                          Model
-                           *
-                        </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-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                    data-shrink="true"
-                    for="year"
-                    id="year-label"
-                  >
-                    Year
-                    <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="year"
-                      maxlength="4"
-                      minlength="4"
-                      name="year"
-                      required=""
-                      type="number"
-                      value="2022"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                      >
-                        <span>
-                          Year
-                           *
-                        </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-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                    data-shrink="true"
-                    for="trim"
-                    id="trim-label"
-                  >
-                    Trim
-                    <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="trim"
-                      maxlength="4"
-                      minlength="4"
-                      name="trim"
-                      required=""
-                      type="text"
-                      value="Base"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                      >
-                        <span>
-                          Trim
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
                 <label
                   class="MuiFormLabel-root"
                   id="demo-row-radio-buttons-group-label"
diff --git a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
index 2d706b6..9670407 100644
--- a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
@@ -68,146 +68,6 @@ exports[`VehicleAddForm Render 1`] = `
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-              >
-                <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                  data-shrink="true"
-                  for="model"
-                  id="model-label"
-                >
-                  Model
-                  <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="model"
-                    maxlength="255"
-                    name="model"
-                    required=""
-                    type="text"
-                    value="Ocean"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                    >
-                      <span>
-                        Model
-                         *
-                      </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-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                  data-shrink="true"
-                  for="year"
-                  id="year-label"
-                >
-                  Year
-                  <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="year"
-                    maxlength="4"
-                    minlength="4"
-                    name="year"
-                    required=""
-                    type="number"
-                    value="2022"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                    >
-                      <span>
-                        Year
-                         *
-                      </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-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                  data-shrink="true"
-                  for="trim"
-                  id="trim-label"
-                >
-                  Trim
-                  <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="trim"
-                    maxlength="4"
-                    minlength="4"
-                    name="trim"
-                    required=""
-                    type="text"
-                    value="Base"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
-                    >
-                      <span>
-                        Trim
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
               <label
                 class="MuiFormLabel-root"
                 id="demo-row-radio-buttons-group-label"
diff --git a/src/components/Cars/Add/index.jsx b/src/components/Cars/Add/index.jsx
index 88617fb..b3ce2e3 100644
--- a/src/components/Cars/Add/index.jsx
+++ b/src/components/Cars/Add/index.jsx
@@ -32,9 +32,6 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
 
   const vinEl = useRef(null);
-  const modelEl = useRef(null);
-  const yearEl = useRef(null);
-  const trimEl = useRef(null);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -81,9 +78,6 @@ const MainForm = () => {
 
       const formData = {
         vin: vinEl.current.value,
-        model: modelEl.current.value,
-        year: parseInt(yearEl.current.value),
-        trim: trimEl.current.value,
         log_level: selectedLogLevel,
         canbus: {
           enabled: canbusEnabled,
@@ -123,51 +117,6 @@ const MainForm = () => {
           fullWidth
           inputRef={vinEl}
         />
-        <TextField
-          id="model"
-          name="model"
-          label="Model"
-          defaultValue="Ocean"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={modelEl}
-        />
-        <TextField
-          id="year"
-          name="year"
-          label="Year"
-          type="number"
-          defaultValue="2022"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "4",
-            minLength: "4",
-          }}
-          required
-          fullWidth
-          inputRef={yearEl}
-        />
-        <TextField
-          id="trim"
-          name="trim"
-          label="Trim"
-          defaultValue="Base"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "4",
-            minLength: "4",
-          }}
-          required
-          fullWidth
-          inputRef={trimEl}
-        />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup
           row
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 3896f9d..cf4062a 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -16,14 +16,6 @@ const validateAdd = (vehicle) => {
   if (vehicle.vin.length > 17) {
     throw new Error("VIN cannot be larger than 17 characters");
   }
-
-  if (!vehicle.model || vehicle.model.length === 0) {
-    throw new Error("model required");
-  }
-
-  if (!vehicle.year || vehicle.year < 2000 || vehicle.year > 9999) {
-    throw new Error("year required");
-  }
 };
 
 export const VehicleProvider = ({ children }) => {
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 d6cb489..09c6772 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
@@ -68,6 +68,504 @@ exports[`FleetVehicleAdd Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                Log Level
+              </label>
+              <div
+                aria-labelledby="demo-row-radio-buttons-group-label"
+                class="MuiFormGroup-root MuiFormGroup-row"
+                margin="normal"
+                role="radiogroup"
+              >
+                <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="log-level-group"
+                        type="radio"
+                        value="trace"
+                      />
+                      <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"
+                  >
+                    Trace
+                  </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="log-level-group"
+                        type="radio"
+                        value="debug"
+                      />
+                      <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"
+                  >
+                    Debug
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    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-0"
+                        name="log-level-group"
+                        type="radio"
+                        value="info"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-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"
+                  >
+                    Info
+                  </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="log-level-group"
+                        type="radio"
+                        value="warning"
+                      />
+                      <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"
+                  >
+                    Warning
+                  </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="log-level-group"
+                        type="radio"
+                        value="error"
+                      />
+                      <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"
+                  >
+                    Error
+                  </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="log-level-group"
+                        type="radio"
+                        value="critical"
+                      />
+                      <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"
+                  >
+                    Critical
+                  </span>
+                </label>
+              </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                CAN Bus
+              </label>
+              <div
+                class="MuiFormGroup-root"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    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-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    CAN Bus Enabled
+                  </span>
+                </label>
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="max_mem_buffer_size"
+                    id="max_mem_buffer_size-label"
+                  >
+                    Max Memory Buffer Size (0 uses default size)
+                    <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="max_mem_buffer_size"
+                      maxlength="12"
+                      name="max_mem_buffer_size"
+                      required=""
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                      >
+                        <span>
+                          Max Memory Buffer Size (0 uses default size)
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Data Logger Enabled
+                  </span>
+                </label>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined Mui-disabled Mui-disabled MuiFormLabel-filled Mui-required Mui-required"
+                  data-shrink="true"
+                  for="max_disk_buffer_size"
+                  id="max_disk_buffer_size-label"
+                >
+                  Max Disk Buffer Size (0 uses default size)
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    disabled=""
+                    id="max_disk_buffer_size"
+                    maxlength="12"
+                    name="max_disk_buffer_size"
+                    required=""
+                    type="number"
+                    value="0"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                    >
+                      <span>
+                        Max Disk Buffer Size (0 uses default size)
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <button
                 class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
                 tabindex="0"
diff --git a/src/components/Fleets/Status/Vehicles/Add/index.jsx b/src/components/Fleets/Status/Vehicles/Add/index.jsx
index debf7b6..483b416 100644
--- a/src/components/Fleets/Status/Vehicles/Add/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Add/index.jsx
@@ -1,6 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Redirect, useParams } from "react-router";
-import { Button, TextField } from "@material-ui/core";
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField
+} from "@material-ui/core";
 
 import useStyles from "../../../../useStyles";
 import {
@@ -21,9 +30,15 @@ const MainForm = () => {
     },
   } = useUserContext();
   const classes = useStyles();
-  const vinEl = useRef(null);
   const [redirect, setRedirect] = useState(null);
 
+  const vinEl = useRef(null);
+  const [selectedLogLevel, setSelectedLogLevel] = useState("info");
+  const [canbusEnabled, setCANBusEnabled] = useState(true);
+  const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
+  const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
+  const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
+
   useEffect(() => {
     const title = "Add Vehicle";
     setTitle(title);
@@ -43,11 +58,41 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  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 {
       event.preventDefault();
 
-      const formData = { vin: vinEl.current.value };
+      const formData = {
+        vin: vinEl.current.value,
+        log_level: selectedLogLevel,
+        canbus: {
+          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
+        }
+      };
+
       const result = await addFleetVehicle(name, formData, token);
 
       setMessage(`Added ${result.vin}`);
@@ -78,6 +123,70 @@ const MainForm = () => {
           fullWidth
           inputRef={vinEl}
         />
+        <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-row-radio-buttons-group-label"
+          name="log-level-group"
+          value={selectedLogLevel}
+          onChange={onLogLevelChange}
+          margin="normal"
+        >
+          <FormControlLabel value="trace" control={<Radio />} label="Trace" />
+          <FormControlLabel value="debug" control={<Radio />} label="Debug" />
+          <FormControlLabel value="info" control={<Radio />} label="Info" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
+          <FormControlLabel value="error" control={<Radio />} label="Error" />
+          <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" />
+          <TextField
+            id="max_mem_buffer_size"
+            name="max_mem_buffer_size"
+            label='Max Memory Buffer Size (0 uses default size)'
+            value={maxMemBufferSize}
+            onChange={onMaxMemBufferSizeChange}
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "12",
+            }}
+            type="number"
+            disabled={!canbusEnabled}
+            required
+            fullWidth
+          />
+          <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)'
+          value={maxDiskBufferSize}
+          onChange={onMaxDiskBufferSizeChange}
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "12",
+          }}
+          type="number"
+          disabled={!dataLoggerEnabled}
+          required
+          fullWidth
+        />
         <Button
           type="submit"
           disabled={busy}

From 2ec340efc558d2c1e72f0f17ad932389a5250edc Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Mon, 12 Dec 2022 10:59:30 -0800
Subject: [PATCH 4/4] CEC-3301, CEC-3317 Magna security dll and remote commands
 (#249)

* CEC-3301, CEC-3317 Magna security dll and remote commands

* Fix test
---
 .env.cec-prd                                  |   8 +-
 .env.dev                                      |  10 +-
 .env.local                                    |  10 +-
 .env.prd                                      |   8 +-
 .env.stg                                      |   8 +-
 .env.template                                 |   8 +-
 src/components/App/App.test.js                |  23 +-
 .../App/__snapshots__/App.test.js.snap        | 356 ++++++++++++++++++
 src/components/Cars/Status/index.jsx          |   1 -
 src/components/Contexts/KeygenContext.jsx     |  38 ++
 .../Controls/DownloadFileLink/index.jsx       |   1 -
 src/components/Layouts/SideMenu.jsx           |   5 +
 .../__snapshots__/index.test.jsx.snap         |  45 +++
 src/components/Magna/SecurityDLL/index.jsx    |  47 +++
 .../Magna/SecurityDLL/index.test.jsx          |  21 ++
 src/components/Magna/SecurityDLL/result.jsx   |  36 ++
 src/components/Routes/SiteRoutes.jsx          |  10 +
 src/services/CANFiltersAPI.js                 |   7 +-
 src/services/fleetsAPI.js                     |   7 +-
 src/services/manifestsAPI.js                  |   7 +-
 src/services/securityDLL.js                   |   2 +
 src/services/smsAPI.js                        |  12 +-
 src/services/superset.js                      |   5 +-
 src/services/suppliersAPI.js                  |  18 +-
 src/services/updatesAPI.js                    |   7 +-
 src/services/uploadFile.js                    |   2 +-
 src/services/vehiclesAPI.js                   |   7 +-
 src/utils/testing.js                          |   6 +
 28 files changed, 644 insertions(+), 71 deletions(-)
 create mode 100644 src/components/Contexts/KeygenContext.jsx
 create mode 100644 src/components/Magna/SecurityDLL/__snapshots__/index.test.jsx.snap
 create mode 100644 src/components/Magna/SecurityDLL/index.jsx
 create mode 100644 src/components/Magna/SecurityDLL/index.test.jsx
 create mode 100644 src/components/Magna/SecurityDLL/result.jsx
 create mode 100644 src/services/securityDLL.js

diff --git a/.env.cec-prd b/.env.cec-prd
index b290f2f..956480c 100644
--- a/.env.cec-prd
+++ b/.env.cec-prd
@@ -1,7 +1,9 @@
+REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cec-prd.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/certificate
-REACT_APP_UPLOAD_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/ota_update
-REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cec-prd.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://superset.cec-prd.fiskerinc.com
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
+REACT_APP_OTA_SERVICE_URL=https://gw.cec-prd.fiskerinc.com/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://superset.cec-prd.fiskerinc.com
diff --git a/.env.dev b/.env.dev
index f3731e4..84cee69 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,7 +1,9 @@
-REACT_APP_CERT_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/certificate
-REACT_APP_AUTH_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/compute_auth
-REACT_APP_UPLOAD_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
+REACT_APP_AUTH_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/compute_auth
+REACT_APP_CERT_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/certificate
 REACT_APP_MAGNA_PROVIDER=Fisker-QA
 REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
+REACT_APP_OTA_SERVICE_URL=https://dev-gw.cloud.fiskerinc.com/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
diff --git a/.env.local b/.env.local
index 3a54e33..b51db82 100644
--- a/.env.local
+++ b/.env.local
@@ -1,7 +1,9 @@
+REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
-REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
-REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
-REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
 REACT_APP_MAGNA_PROVIDER=Fisker-QA
-REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
\ No newline at end of file
+REACT_APP_MAGNA_GROUP_ID=efcc3025-e2d8-4212-8227-805c7be39d2c
+REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://dev-superset-new.cloud.fiskerinc.com
diff --git a/.env.prd b/.env.prd
index a818e1d..793c11b 100644
--- a/.env.prd
+++ b/.env.prd
@@ -1,7 +1,9 @@
+REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cloud.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://gw.cloud.fiskerinc.com/certificate
-REACT_APP_UPLOAD_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update
-REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
+REACT_APP_OTA_SERVICE_URL=https://gw.cloud.fiskerinc.com/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://superset.cloud.fiskerinc.com
diff --git a/.env.stg b/.env.stg
index 97ac1a5..ba137f8 100644
--- a/.env.stg
+++ b/.env.stg
@@ -1,7 +1,9 @@
+REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
 REACT_APP_AUTH_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/certificate
-REACT_APP_UPLOAD_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
-REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
+REACT_APP_OTA_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com
diff --git a/.env.template b/.env.template
index 362d6d9..d20768a 100644
--- a/.env.template
+++ b/.env.template
@@ -1,7 +1,9 @@
-REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
-REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
-REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com
+REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_CERT_SERVICE_URL=http://localhost/certificate
 REACT_APP_MAGNA_PROVIDER=Magna
 REACT_APP_MAGNA_GROUP_ID=68273225-9da4-4fa7-aea5-38e16ec471fe
+REACT_APP_OTA_SERVICE_URL=http://localhost/ota_update
+REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll
+REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
+REACT_APP_SUPERSET_URL=https://dev-superset.cloud.fiskerinc.com
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 3346d96..0eab94a 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -8,17 +8,14 @@ jest.mock("../../services/vehiclesAPI");
 jest.mock("../../services/superset")
 
 import {
-  act,
-  render,
-  screen,
-  cleanup,
-  waitFor,
-  waitForElementToBeRemoved,
+  act, cleanup, render,
+  screen, waitFor,
+  waitForElementToBeRemoved
 } from "@testing-library/react";
-import { setToken } from "../Contexts/UserContext";
-import {TEST_AUTH_OBJECT, TEST_AUTH_OBJECT_FISKER} from "../../utils/testing";
 import App from ".";
 import addSnapshotSerializer from "../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER, TEST_AUTH_OBJECT_MAGNA } from "../../utils/testing";
+import { setToken } from "../Contexts/UserContext";
 
 const LOADING_STATUS = "Loading...";
 
@@ -113,9 +110,14 @@ describe("App", () => {
     await check("/tools/sms/send", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /tools/security-dll unauthenticated", async () => {
+    await check("/tools/security-dll", "span.MuiButton-label", "Sign In");
+  });
+
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
+
   it("Route / authenticated", async () => {
     setToken(TEST_AUTH_OBJECT_FISKER);
     await sleepAndCheck("/", "h6", "Home");
@@ -170,4 +172,9 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT_FISKER);
     await sleepAndCheck("/tools/sms/send", "h6", "Send SMS");
   });
+
+  it("Route /tools/security-dll authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT_MAGNA);
+    await sleepAndCheck("/tools/security-dll", "h6", "Security.dll Download");
+  });
 });
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 4788d68..813de41 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -5233,6 +5233,362 @@ exports[`App Route /tools/certificates/add unauthenticated 1`] = `
 </div>
 `;
 
+exports[`App Route /tools/security-dll 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"
+            >
+              Security.dll Download
+            </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="/tools/security-dll"
+                  >
+                    Tools
+                  </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="/tools/security-dll"
+                  >
+                    Security.dll Download
+                  </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"
+              >
+                Human
+              </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>
+            <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>
+            </ul>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-0 makeStyles-contentShift-0"
+      >
+        <div
+          class="makeStyles-drawerHeader-0"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthLg"
+        >
+          <h3>
+            Generating certificates...
+          </h3>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /tools/security-dll 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>
+            <p>
+              <strong>
+                Note: Your email address will be used as the user id
+              </strong>
+            </p>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`App Route /tools/sms/send authenticated 1`] = `
 <div>
   <div
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index b6c29ca..d2d8cec 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -44,7 +44,6 @@ const TabViews = [
   {
     label: "Remote Commands",
     component: RemoteCommandsTab,
-    rolesPerProvider: Permissions.FiskerRead,
   },
   {
     label: "Fleets",
diff --git a/src/components/Contexts/KeygenContext.jsx b/src/components/Contexts/KeygenContext.jsx
new file mode 100644
index 0000000..d336a75
--- /dev/null
+++ b/src/components/Contexts/KeygenContext.jsx
@@ -0,0 +1,38 @@
+import React, { useContext, useState } from "react";
+
+import api from "../../services/suppliersAPI";
+
+const KeygenContext = React.createContext();
+
+export const KeygenProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+  const [securityCerts, setSecurityCerts] = useState(null);
+
+  const generateSecurityCerts = async (token) => {
+    setBusy(true);
+
+    try {
+      const data = await api.getManufactureCert(token);
+
+      if (data.error) throw new Error(data.message);
+
+      setSecurityCerts(data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <KeygenContext.Provider
+      value={{
+        busy,
+        securityCerts,
+        generateSecurityCerts,
+      }}
+    >
+      {children}
+    </KeygenContext.Provider>
+  );
+};
+
+export const useKeygenContext = () => useContext(KeygenContext);
diff --git a/src/components/Controls/DownloadFileLink/index.jsx b/src/components/Controls/DownloadFileLink/index.jsx
index 1ebfd90..f9f9cad 100644
--- a/src/components/Controls/DownloadFileLink/index.jsx
+++ b/src/components/Controls/DownloadFileLink/index.jsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 
 const DownloadFileLink = ({ data, filename, mimetype }) => {
   const [link, setLink] = useState("");
-
   const releaseLink = () => {
     if (link === "") return;
     URL.revokeObjectURL(link);
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index 21a5816..9ab327c 100644
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -62,6 +62,11 @@ const menuData = [
         to: "/tools/certificates/add",
         rolesPerProvider: Permissions.FiskerCertificate,
       },
+      {
+        label: "Security.dll",
+        to: "/tools/security-dll",
+        rolesPerProvider: Permissions.Magna,
+      },
       {
         label: "SMS",
         to: "/tools/sms/send",
diff --git a/src/components/Magna/SecurityDLL/__snapshots__/index.test.jsx.snap b/src/components/Magna/SecurityDLL/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..92bf6cf
--- /dev/null
+++ b/src/components/Magna/SecurityDLL/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Magna Security DLL page Security DLL Result page 1`] = `
+<div>
+  <form>
+    <p>
+      Click to download your certificates and security.dll.
+      <br />
+      <strong>
+        DLL will not work unless certificate.pem and key.pem are placed next to the DLL
+      </strong>
+    </p>
+    <ul>
+      <li>
+        <a
+          download="certificate.pem"
+        >
+          certificate.pem
+        </a>
+      </li>
+      <li>
+        <a
+          download="key.pem"
+        >
+          key.pem
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://assets.fiskerdps.com/cloud-supplier/fisker_security_32.dll"
+        >
+          security.dll 32-bit
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll"
+        >
+          security.dll 64-bit
+        </a>
+      </li>
+    </ul>
+  </form>
+</div>
+`;
diff --git a/src/components/Magna/SecurityDLL/index.jsx b/src/components/Magna/SecurityDLL/index.jsx
new file mode 100644
index 0000000..11e4d29
--- /dev/null
+++ b/src/components/Magna/SecurityDLL/index.jsx
@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+
+import { KeygenProvider, useKeygenContext } from "../../Contexts/KeygenContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import Result from "./result";
+
+const MainForm = () => {
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const { generateSecurityCerts, securityCerts } = useKeygenContext();
+  const { setTitle, setSitePath, setMessage } = useStatusContext();
+  const getCert = async () => {
+    try {
+      await generateSecurityCerts(token);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  useEffect(() => {
+    setTitle("Security.dll Download");
+    setSitePath([
+      {
+        label: `Tools`,
+      },
+      {
+        label: "Security.dll Download",
+      },
+    ])
+    getCert();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  if (securityCerts) {
+    return <Result {...securityCerts} />
+  }
+
+  return <h3>Generating certificates...</h3>
+};
+
+const SecurityDLL = () => (
+  <KeygenProvider>
+    <MainForm/>
+  </KeygenProvider>
+);
+
+export default SecurityDLL;
\ No newline at end of file
diff --git a/src/components/Magna/SecurityDLL/index.test.jsx b/src/components/Magna/SecurityDLL/index.test.jsx
new file mode 100644
index 0000000..f8207b0
--- /dev/null
+++ b/src/components/Magna/SecurityDLL/index.test.jsx
@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import addSnapshotSerializer from "../../../utils/snapshot";
+import Result from "./result";
+
+describe("Magna Security DLL page", () => {
+  beforeAll(() => {
+    global.URL.createObjectURL = jest.fn();
+    global.URL.revokeObjectURL = jest.fn();
+    addSnapshotSerializer(expect);
+  });
+
+  it("Security DLL Result page", () => {
+    const result = {public_key:"-----BEGIN CERTIFICATE-----\nPUBLIC_KEY\n-----END CERTIFICATE-----",private_key:"-----BEGIN RSA PRIVATE KEY-----\nPRIVATE_KEY\n-----END RSA PRIVATE KEY-----",serial_number:"77:49:34:9d:be:f6:59:03:b4:1c:63:84:07:5b:2a:8a:21:0a:c5:9e",type:"rsa"}
+    const { container } = render(<Result {...result} />);
+
+    expect(container).toMatchSnapshot();
+
+  })
+})
\ No newline at end of file
diff --git a/src/components/Magna/SecurityDLL/result.jsx b/src/components/Magna/SecurityDLL/result.jsx
new file mode 100644
index 0000000..c81b511
--- /dev/null
+++ b/src/components/Magna/SecurityDLL/result.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { SECURITY_DLL_64_URL, SECURITY_DLL_URL } from "../../../services/securityDLL";
+import DownloadFileLink from "../../Controls/DownloadFileLink";
+
+const CertMimeType = "application/x-pem-file";
+
+const Result = ({ public_key, private_key }) => (
+  <>
+    <form>
+      <p>Click to download your certificates and security.dll.<br /><strong>DLL will not work unless certificate.pem and key.pem are placed next to the DLL</strong></p>
+      <ul>
+        <li>
+          <DownloadFileLink
+            data={public_key}
+            filename="certificate.pem"
+            mimetype={CertMimeType} />
+        </li>
+        <li>
+          <DownloadFileLink
+            data={private_key}
+            filename="key.pem"
+            mimetype={CertMimeType} />
+        </li>
+        <li>
+          <a href={SECURITY_DLL_URL}>security.dll 32-bit</a>
+        </li>
+        <li>
+          <a href={SECURITY_DLL_64_URL}>security.dll 64-bit</a>
+        </li>
+      </ul>
+    </form>
+  </>
+);
+
+export default Result;
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index 288655f..768aa16 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -34,6 +34,7 @@ const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
 const VehicleUpdateForm = React.lazy(() => import("../Cars/Update"));
 const CertificateCreate = React.lazy(() => import("../Certificates/Add"));
+const SecurityDLL = React.lazy(() => import("../Magna/SecurityDLL"));
 const SMSSend = React.lazy(() => import("../SMS/Send"));
 const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
@@ -228,6 +229,15 @@ const SiteRoutes = () => {
           rolesPerGroup={Permissions.FiskerMagnaCertificate}
           providers={providers}
         />
+        <AuthRoute
+          path="/tools/security-dll"
+          render={() => <SecurityDLL />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.Magna}
+          providers={providers}
+        />
         <AuthRoute
           path="/tools/sms/send"
           render={() => <SMSSend />}
diff --git a/src/services/CANFiltersAPI.js b/src/services/CANFiltersAPI.js
index a6a6b4d..ce977eb 100644
--- a/src/services/CANFiltersAPI.js
+++ b/src/services/CANFiltersAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+    addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const canFiltersAPI = {
   addFilter: async (vin, filter, token) =>
diff --git a/src/services/fleetsAPI.js b/src/services/fleetsAPI.js
index 08e54ce..542cc5e 100644
--- a/src/services/fleetsAPI.js
+++ b/src/services/fleetsAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+    addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const fleetsAPI = {
   addFleet: async (fleet, token) =>
diff --git a/src/services/manifestsAPI.js b/src/services/manifestsAPI.js
index 33a6436..9091d97 100644
--- a/src/services/manifestsAPI.js
+++ b/src/services/manifestsAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+    addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const manifestsAPI = {
   deleteManifest: async (manifest_id, token) =>
diff --git a/src/services/securityDLL.js b/src/services/securityDLL.js
new file mode 100644
index 0000000..f68f9a7
--- /dev/null
+++ b/src/services/securityDLL.js
@@ -0,0 +1,2 @@
+export const SECURITY_DLL_URL = process.env.REACT_APP_SECURITY_DLL_URL;
+export const SECURITY_DLL_64_URL = process.env.REACT_APP_SECURITY_DLL_64_URL;
\ No newline at end of file
diff --git a/src/services/smsAPI.js b/src/services/smsAPI.js
index 396d50f..d82355d 100644
--- a/src/services/smsAPI.js
+++ b/src/services/smsAPI.js
@@ -1,17 +1,15 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
+    errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const smsAPI = {
   /**
    * Sends a SMS to an ICCID
-   * @param {*} data 
-   * @param {*} token 
-   * @returns 
+   * @param {*} data
+   * @param {*} token
+   * @returns
    */
   send: async (data, token) =>
     fetch(`${API_ENDPOINT}/sms`, {
diff --git a/src/services/superset.js b/src/services/superset.js
index 4d13078..7d827bc 100644
--- a/src/services/superset.js
+++ b/src/services/superset.js
@@ -1,11 +1,10 @@
 import {
-  getAuthHeaderOptions,
-  addQueryParams,
+    addQueryParams, getAuthHeaderOptions
 } from "../utils/http";
 
 //Added the token we got from the first authorization and set it as the auth token, and that allowed us to hit the request
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const supersetAPI = {
   getGuestToken: async(token) => {
diff --git a/src/services/suppliersAPI.js b/src/services/suppliersAPI.js
index efc6436..9b11e69 100644
--- a/src/services/suppliersAPI.js
+++ b/src/services/suppliersAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+  addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const suppliersAPI = {
   addSupplier: async (vehicle, token) =>
@@ -78,6 +75,17 @@ const suppliersAPI = {
     })
       .then(fetchRespHandler)
       .catch(errorHandler),
+
+  getManufactureCert: async (token) =>
+    fetch(`${API_ENDPOINT}/manufacture-certs`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler)
 };
 
 export default suppliersAPI;
diff --git a/src/services/updatesAPI.js b/src/services/updatesAPI.js
index 5e8dda9..9410b0e 100644
--- a/src/services/updatesAPI.js
+++ b/src/services/updatesAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+    addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const createDeployUpdatesClosure = (suffix) => {
   return async (data, token) =>
diff --git a/src/services/uploadFile.js b/src/services/uploadFile.js
index 7e9f11a..e85809d 100644
--- a/src/services/uploadFile.js
+++ b/src/services/uploadFile.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const UPLOAD_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const UPLOAD_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 const fileField = "file";
 
 export const getCancelToken = () => {
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index cc672d5..86a2bc8 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -1,11 +1,8 @@
 import {
-  errorHandler,
-  getAuthHeaderOptions,
-  fetchRespHandler,
-  addQueryParams,
+    addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
 } from "../utils/http";
 
-const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
 
 const vehiclesAPI = {
   addVehicle: async (vehicle, token) =>
diff --git a/src/utils/testing.js b/src/utils/testing.js
index 1ccb278..2b2f071 100644
--- a/src/utils/testing.js
+++ b/src/utils/testing.js
@@ -15,3 +15,9 @@ export const TEST_AUTH_OBJECT_FISKER = {
 }
 export const TEST_EXPECTED_GROUPS =
   "[2914e67f-fb85-4b78-b79d-656f4f37faa1, 8d8278a5-9c0e-4c7f-918a-811fd1d236e4, 746f34b0-9ba0-4b5d-8d84-0256a9c8e390, 6c3cf98d-0ada-48c6-ae94-b171cfa275fc, acbd72c9-9ff3-46a8-83ba-c6fa5df3f264, 5e59a619-c890-4472-91c2-d5eae5d8fa18, 56ef4bec-d739-4ddf-a003-ecc813085b8d, 929b0470-f7eb-4e18-9f97-22ac2c591a10, 131e6257-fdb7-426a-9825-1cd918802fba, 1ac794cc-76ac-47f6-bee6-d6666998f0fd, 87770aea-9162-409e-aa70-10d0d1de5902, 5dea6c32-6575-4527-9254-e50d27ae5e92, bafc17a7-ec64-49d9-a2a7-dafc28dcb037, 2449c066-9146-44a7-b4e6-4828031d958d, efcc3025-e2d8-4212-8227-805c7be39d2c, 8f78dce7-f5f9-4033-a10c-c9c7408bfcfe, cf653183-c829-4eed-a6ce-453fa1017cd9, 783c5979-f5e7-4cb6-b14e-c3553dde956a, 5515a98f-4668-4121-8e8d-fee2825699cf, 86956a2f-8d46-47ff-9b29-f99079ae3c1d, c4d4361c-8882-47b4-8641-fd3ab68ae722, 972ad095-16b7-40ad-a464-f5dbf417a8cd, 7bcdcdb2-3279-44bf-a998-771bab4b33e1]";
+export const TEST_TOKEN_MAGNA = "eyJraWQiOiJlUTNuZFJLaUVcL084VUZ5RHFsYjN0S1RzWG00SzVPMlc4NXd3VWkzT2tNZz0iLCJhbGciOiJSUzI1NiJ9.eyJhdF9oYXNoIjoiSG10dVRGVmdLaS1FbXhTWTNldFdVUSIsInN1YiI6ImMyZWRjYTk5LTdiZDQtNDkzNS1hZDM3LTFhMjJhN2VmMWY0NiIsImNvZ25pdG86Z3JvdXBzIjpbInVzLXdlc3QtMl9BV3dqTFh5bTJfRmlza2VyLVFBIl0sImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLXdlc3QtMi5hbWF6b25hd3MuY29tXC91cy13ZXN0LTJfQVd3akxYeW0yIiwiY29nbml0bzp1c2VybmFtZSI6ImZpc2tlci1xYV9qd3VAZmlza2VyaW5jLmNvbSIsImN1c3RvbTpncm91cHMiOiJbMjczYzdjMGQtNTFkMy00YTMxLTk0NDMtYzQzNjc1NzJlZTRmLCA1ZTU5YTYxOS1jODkwLTQ0NzItOTFjMi1kNWVhZTVkOGZhMTgsIGM0ZDQzNjFjLTg4ODItNDdiNC04NjQxLWZkM2FiNjhhZTcyMiwgZWZjYzMwMjUtZTJkOC00MjEyLTgyMjctODA1YzdiZTM5ZDJjLCA4Njk1NmEyZi04ZDQ2LTQ3ZmYtOWIyOS1mOTkwNzlhZTNjMWQsIGY2M2I2NDMwLTEyODgtNDBhOC1hYTQ5LTg0Mzg1MTUwZDZhOCwgNWRlYTZjMzItNjU3NS00NTI3LTkyNTQtZTUwZDI3YWU1ZTkyLCAxMzFlNjI1Ny1mZGI3LTQyNmEtOTgyNS0xY2Q5MTg4MDJmYmEsIGE2Yzk4MDVlLTgwYjItNDJiMi1iZmJiLTlkZjUyZTU1MDRkOCwgNjZjYWQ4NjAtM2Q4MC00YTU4LTlkOTgtNTQwOTE3NzMzZWY2LCAyNDQ5YzA2Ni05MTQ2LTQ0YTctYjRlNi00ODI4MDMxZDk1OGQsIDkyOWIwNDcwLWY3ZWItNGUxOC05Zjk3LTIyYWMyYzU5MWExMCwgM2JlZjYzNzctZWRkZS00YWUwLTkzMWUtMzg4Nzk5OTM5NjUyLCA3ODNjNTk3OS1mNWU3LTRjYjYtYjE0ZS1jMzU1M2RkZTk1NmEsIDI5MTRlNjdmLWZiODUtNGI3OC1iNzlkLTY1NmY0ZjM3ZmFhMSwgYjBlODJlODMtMmM5NC00YjI0LWI5YzctZTc3ODE2ZjI1OTdkLCBjZjY1MzE4My1jODI5LTRlZWQtYTZjZS00NTNmYTEwMTdjZDksIDZjM2NmOThkLTBhZGEtNDhjNi1hZTk0LWIxNzFjZmEyNzVmYywgNTUxNWE5OGYtNDY2OC00MTIxLThlOGQtZmVlMjgyNTY5OWNmLCA5NzJhZDA5NS0xNmI3LTQwYWQtYTQ2NC1mNWRiZjQxN2E4Y2QsIDczN2U0NDljLTIzMDktNDY5ZS1hYTQ4LTQ2ZTY4OTE5ODNjMCwgOGQ4Mjc4YTUtOWMwZS00YzdmLTkxOGEtODExZmQxZDIzNmU0LCBiYWZjMTdhNy1lYzY0LTQ5ZDktYTJhNy1kYWZjMjhkY2IwMzcsIDc0NmYzNGIwLTliYTAtNGI1ZC04ZDg0LTAyNTZhOWM4ZTM5MCwgN2JjZGNkYjItMzI3OS00NGJmLWE5OTgtNzcxYmFiNGIzM2UxLCBhY2JkNzJjOS05ZmYzLTQ2YTgtODNiYS1jNmZhNWRmM2YyNjQsIDFhYzc5NGNjLTc2YWMtNDdmNi1iZWU2LWQ2NjY2OTk4ZjBmZCwgOGY3OGRjZTctZjVmOS00MDMzLWExMGMtYzljNzQwOGJmY2ZlLCA4Nzc3MGFlYS05MTYyLTQwOWUtYWE3MC0xMGQwZDFkZTU5MDIsIDU2ZWY0YmVjLWQ3MzktNGRkZi1hMDAzLWVjYzgxMzA4NWI4ZF0iLCJhdWQiOiI3Y2sydGZvcWF2YzcyYzQ1aGg3dGdlNDJrZCIsImlkZW50aXRpZXMiOlt7InVzZXJJZCI6Imp3dUBmaXNrZXJpbmMuY29tIiwicHJvdmlkZXJOYW1lIjoiRmlza2VyLVFBIiwicHJvdmlkZXJUeXBlIjoiU0FNTCIsImlzc3VlciI6Imh0dHBzOlwvXC9zdHMud2luZG93cy5uZXRcLzVhYTRiNjQwLWM5ZmMtNGE5Yi1iM2EzLWQ0YTdkMDA4ZmI1ZVwvIiwicHJpbWFyeSI6InRydWUiLCJkYXRlQ3JlYXRlZCI6IjE2Njg2MjQ4NTM3NDEifV0sInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjcwNjI4NDU3LCJleHAiOjE2NzA2MzU1OTgsImlhdCI6MTY3MDYzMTk5OCwiZW1haWwiOiJqd3VAZmlza2VyaW5jLmNvbSJ9.dqSyarRMi8i5C51waGAgCu54z8BozGmS_B9bQELAq-puHfWBSsVzBVBipSY50e_NdTyg7UcU5CA4kijSIQLWz5jsy09Mfq_rh7NNOeWcX_X631bkLsQda9Qs53j4AlrPZFgAV_EtmoqLCK-z1kYv4gjZvtyWw7LKQ1VcsuFaNGPko1QAC1zpIc2OngRvamtLOxhuQjd8bDdQFQh56P4q02rkTssCEPyxr-D3loBC1s7GkJ3OZm1wuljjJfXCLogirIyrgDS4k2e0CPWofXCwGqM0lvVs73DmRt_s7-TNbYFg9A105d3UhoP6NNfKCNTqEVWKLPaGQNkhcL9xJwYX-A";
+export const TEST_AUTH_OBJECT_MAGNA = {
+  idToken: {
+    jwtToken: TEST_TOKEN_MAGNA
+  },
+}
\ No newline at end of file