Merge branch 'release/0.0.3'

src/components/App/App.test.js

@@ -16,7 +16,7 @@ import {
   waitForElementToBeRemoved,
 } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../utils/testing";
+import {TEST_AUTH_OBJECT, TEST_AUTH_OBJECT_FISKER} from "../../utils/testing";
 import App from ".";
 import addSnapshotSerializer from "../../utils/snapshot";
 
@@ -35,7 +35,7 @@ const check = async (path, selector, compare) => {
   let container
   await act(async () => {
     container = await renderRoute(path);
-  })
+  });
   expect(container.querySelector(selector).innerHTML).toEqual(compare);
   expect(container).toMatchSnapshot();
 };
@@ -117,57 +117,57 @@ describe("App", () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
   it("Route / authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await sleepAndCheck("/", "h6", "Home");
   });
 
   it("Route /home authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await sleepAndCheck("/home", "h6", "Home");
   });
 
   it("Route /page-not-found authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/page-not-found", "h1", "Page Not Found");
   });
 
   it("Route /packages authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/packages", "h6", "Deployments");
   });
 
   it("Route /package-status authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/package-status/1", "h6", "Manifest Test Manifest 1.0");
   });
 
   it("Route /package-deploy authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
   });
 
   it("Route /vehicle-add authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/vehicle-add", "h6", "Add Vehicle");
   });
 
   it("Route /vehicles authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/vehicles", "h6", "Vehicles");
   });
 
   it("Route /vehicle-status authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     await check("/vehicle-status/FISKER123", "h6", "Vehicle FISKER123 Details");
   });
 
   it("Route /tools/certificates/add authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/tools/certificates/add", "h6", "Create Certificate");
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    await sleepAndCheck("/tools/certificates/add", "h6", "Create Certificate");
   });
 
   it("Route /tools/sms/send authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/tools/sms/send", "h6", "Send SMS");
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    await sleepAndCheck("/tools/sms/send", "h6", "Send SMS");
   });
 });

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

@@ -35,7 +35,7 @@ exports[`App Route / authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -270,6 +270,42 @@ exports[`App Route / authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -594,7 +630,7 @@ exports[`App Route /home authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -829,6 +865,42 @@ exports[`App Route /home authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -1189,7 +1261,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -1424,6 +1496,42 @@ exports[`App Route /package-deploy authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -2148,7 +2256,7 @@ exports[`App Route /package-status authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -2383,6 +2491,42 @@ exports[`App Route /package-status authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -2825,7 +2969,7 @@ exports[`App Route /packages authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -3060,6 +3204,42 @@ exports[`App Route /packages authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -3482,25 +3662,6 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <span>
-                        <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"
-                          >
-                            <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>
-                      </span>
                     </td>
                   </tr>
                 </tbody>
@@ -3729,7 +3890,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -3964,6 +4125,42 @@ exports[`App Route /page-not-found authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -4251,7 +4448,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -4486,6 +4683,42 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -5006,7 +5239,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -5241,6 +5474,42 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -5627,7 +5896,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -5862,6 +6131,42 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -6806,7 +7111,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -7041,6 +7346,42 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -7397,23 +7738,6 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                               />
                             </svg>
                           </a>
-                          <a
-                            class=""
-                            href="/vehicle-status/FISKER123"
-                            title="Delete \\"FISKER123\\""
-                          >
-                            <svg
-                              aria-hidden="true"
-                              aria-label="Delete \\"FISKER123\\""
-                              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>
                       <div />
@@ -7442,21 +7766,18 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             />
             <div
               aria-labelledby="tab-4"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-4"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-5"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-5"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-6"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-6"
               role="tabpanel"
@@ -7616,7 +7937,7 @@ exports[`App Route /vehicles authenticated 1`] = `
               <span
                 class="MuiButton-label"
               >
-                John
+                Anvar
               </span>
               <span
                 class="MuiTouchRipple-root"
@@ -7851,6 +8172,42 @@ exports[`App Route /vehicles authenticated 1`] = `
                 </li>
               </ul>
             </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/suppliers"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Suppliers
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
             <span>
               <li>
                 <a
@@ -7960,22 +8317,7 @@ 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"
                 >

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

@@ -1,3 +1,5 @@
+import {TEST_AUTH_OBJECT_FISKER} from "../../../utils/testing";
+
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
@@ -8,7 +10,6 @@ import { BrowserRouter } from "react-router-dom";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -35,7 +36,7 @@ describe("CANFiltersAdd", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANFiltersAdd();
     expect(container).toMatchSnapshot();
   });

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

@@ -250,23 +250,6 @@ exports[`CANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"123\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 123"
-                        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
@@ -313,23 +296,6 @@ exports[`CANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"456-789\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 456-789"
-                        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
@@ -376,23 +342,6 @@ exports[`CANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"1\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 1"
-                        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>

src/components/CANFilter/Table/index.jsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
 import {
   Grid,
   Table,
@@ -12,46 +10,46 @@ import {
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from "@material-ui/icons/Edit";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
+import { logger } from "../../../services/monitoring";
+import { hasRole, Permissions } from "../../../utils/roles";
+import { trimIfMoreThan } from "../../../utils/strings";
 import {
   CANFiltersProvider,
   useCANFiltersContext,
 } from "../../Contexts/CANFiltersContext";
-import TableHeaderSortable from "../../Table/HeaderSortable";
-import {
-  useUserContext
-} from "../../Contexts/UserContext"
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
+import { useUserContext } from "../../Contexts/UserContext";
 import SearchField from "../../Controls/SearchField";
-import { logger } from "../../../services/monitoring";
-import { Roles, hasRole } from "../../../utils/roles";
-import {useLocalStorage} from "../../useLocalStorage";
-import {trimIfMoreThan} from "../../../utils/strings";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
 
 const tableColumns = [
   {
     id: "can_id",
-    label: "CAN ID"
+    label: "CAN ID",
   },
   {
     id: "interval",
-    label: "Interval (ms)"
+    label: "Interval (ms)",
   },
   {
     id: "fleet",
-    label: "Fleet"
+    label: "Fleet",
   },
   {
     id: "edge_mask",
-    label: "Edge mask"
+    label: "Edge mask",
   },
   {
     id: "",
-    label: "Actions"
-  }
+    label: "Actions",
+  },
 ];
 
 const PAGE_SIZE = "CAN_FILTER_TABLE_PAGE_SIZE";
@@ -63,9 +61,16 @@ const MainForm = ({ vin }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getFilters, deleteFilter, filters, totalFilters } = useCANFiltersContext();
+  const { getFilters, deleteFilter, filters, totalFilters } =
+    useCANFiltersContext();
   const { setMessage } = useStatusContext();
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
 
   useEffect(() => {
     (async () => {
@@ -118,7 +123,7 @@ const MainForm = ({ vin }) => {
   const onDelete = async (can_id) => {
     try {
       await deleteFilter(vin, can_id, token);
-      setMessage(`Deleted ${can_id}`)
+      setMessage(`Deleted ${can_id}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -126,24 +131,24 @@ const MainForm = ({ vin }) => {
   };
 
   const Actions = (row) => {
-    if(row.fleet != null) {
-      return
+    if (row.fleet != null) {
+      return;
     }
 
     let actions = [];
-    if (hasRole([Roles.CREATE], groups)) {
+    if (hasRole(groups, Permissions.FiskerCreate, providers)) {
       actions.push({
         tip: `Update "${row.can_id}"`,
         link: `/filter-update?vin=${vin}&can_id=${row.can_id}&interval=${row.interval}`,
-        icon: <EditIcon aria-label={`Update ${row.can_id}`} />
+        icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
       });
     }
-    if (hasRole([Roles.DELETE], groups)) {
+    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
       actions.push({
         tip: `Delete "${row.can_id}"`,
         id: row.can_id,
-        icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />
-      })
+        icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />,
+      });
     }
     if (actions.length === 0) return ["No actions"];
 
@@ -177,7 +182,7 @@ const MainForm = ({ vin }) => {
           </Link>
         </Grid>
         <Grid item md={8} className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={onSearch}/>
+          <SearchField classes={classes} onSearch={onSearch} />
         </Grid>
       </Grid>
       <Table>
@@ -196,7 +201,9 @@ const MainForm = ({ vin }) => {
               <TableCell align="center">
                 <Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
               </TableCell>
-              <TableCell align="center">{trimIfMoreThan(row.edge_mask, 15, "...")}</TableCell>
+              <TableCell align="center">
+                {trimIfMoreThan(row.edge_mask, 15, "...")}
+              </TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
@@ -219,7 +226,7 @@ const MainForm = ({ vin }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div >
+    </div>
   );
 };
 

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import {TEST_AUTH_OBJECT_FISKER} from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -37,7 +37,7 @@ describe("CANFiltersTable", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANFiltersTable();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -34,7 +34,7 @@ describe("CANFiltersUpdate", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANFiltersUpdate();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -36,7 +36,7 @@ describe("VehicleAddForm", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderVehicleAdd();
     expect(container).toMatchSnapshot();
   });

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

@@ -22,22 +22,7 @@ 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"
               >

src/components/Cars/List/index.jsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from "react";
 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";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
-import { VehicleProvider } from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
+import { Permissions } from "../../../utils/roles";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import SearchField from "../../Controls/SearchField";
+import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
 import OptionsDropdown from "../../Controls/OptionsDropdown";
+import { RoleWrap } from "../../Controls/RoleWrap";
+import SearchField from "../../Controls/SearchField";
+import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -22,6 +24,8 @@ const MainForm = () => {
     token: {
       idToken: { jwtToken: token },
     },
+    groups,
+    providers,
   } = useUserContext();
 
   const handleSearch = (query) => {
@@ -30,11 +34,11 @@ const MainForm = () => {
 
   const handleOnline = (event) => {
     setOnline(event.target.checked);
-  }
+  };
 
   const handleOnlineHMI = (event) => {
     setOnlineHMI(event.target.checked);
-  }
+  };
 
   useEffect(() => {
     setTitle("Vehicles");
@@ -46,30 +50,34 @@ const MainForm = () => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to="/vehicle-add">
-            <AddCircleIcon fontSize="large" />
-          </Link>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerDelete}
+          >
+            <Link to="/vehicle-add">
+              <AddCircleIcon fontSize="large" />
+            </Link>
+          </RoleWrap>
         </Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
         <Grid item md={2} className={classes.textJustifyAlign}>
-          <OptionsDropdown listId='filter-menu'>
+          <OptionsDropdown listId="filter-menu">
             <MenuItem>
-              <FormControlLabel control={
-                <Checkbox
-                  checked={online}
-                  onChange={handleOnline}
-                />
-              } label="Only online" />
+              <FormControlLabel
+                control={<Checkbox checked={online} onChange={handleOnline} />}
+                label="Only online"
+              />
             </MenuItem>
             <MenuItem>
-              <FormControlLabel control={
-                <Checkbox
-                  checked={onlineHMI}
-                  onChange={handleOnlineHMI}
-                />
-              } label="Only online HMI" />
+              <FormControlLabel
+                control={
+                  <Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
+                }
+                label="Only online HMI"
+              />
             </MenuItem>
           </OptionsDropdown>
         </Grid>
@@ -79,7 +87,11 @@ const MainForm = () => {
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search, online: online? true : null, online_hmi: onlineHMI? true : null }}
+        search={{
+          search,
+          online: online ? true : null,
+          online_hmi: onlineHMI ? true : null,
+        }}
       />
     </div>
   );

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -39,7 +39,7 @@ describe("VehicleTable", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderVehicleTable();
     expect(container).toMatchSnapshot();
   });

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

@@ -9,7 +9,7 @@ import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import CANFiltersTab from "./CANFiltersTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -31,7 +31,7 @@ describe("CANFiltersTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANFiltersTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -11,7 +11,7 @@ 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";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 
 const renderCANSignalsTab = async () => {
   const { container } = render(
@@ -31,7 +31,7 @@ describe("CANSignalsTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANSignalsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./CarUpdatesTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -39,7 +39,7 @@ describe("CarUpdatesTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCarUpdatesTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -101,23 +101,6 @@ exports[`VehicleDetailsTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"TESTVIN1234567890\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete \\"TESTVIN1234567890\\""
-                    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>
             <div />

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

@@ -1,28 +1,36 @@
+import { Grid, Tooltip } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
-import { Link } from 'react-router-dom';
-import {
-  Grid,
-  Tooltip,
-} from "@material-ui/core";
-import EditIcon from "@material-ui/icons/Edit"
-import DeleteIcon from "@material-ui/icons/Delete";
-import clsx from "clsx";
+import { Link } from "react-router-dom";
 
-import { useUserContext } from "../../../Contexts/UserContext"
-import { useStatusContext } from "../../../Contexts/StatusContext";
-import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
-import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import { Permissions } from "../../../../utils/roles";
+import { useStatusContext } from "../../../Contexts/StatusContext";
+import { useUserContext } from "../../../Contexts/UserContext";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../../Contexts/VehicleContext";
+import { RoleWrap } from "../../../Controls/RoleWrap";
 import DeleteConfirmation from "../../../DeleteConfirmation";
+import useStyles from "../../../useStyles";
 
 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();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
 
   useEffect(() => {
     (async () => {
@@ -40,7 +48,7 @@ const MainForm = ({ vin }) => {
   const onDelete = async () => {
     try {
       await deleteVehicle(vin, token);
-      setMessage(`Deleted ${vin}`)
+      setMessage(`Deleted ${vin}`);
       setRedirect(`/vehicles`);
     } catch (e) {
       setMessage(e.message);
@@ -56,36 +64,67 @@ const MainForm = ({ vin }) => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={12} className={classes.textCenterAlign}>
-          <p><b>VIN</b>: {vin}</p>
+          <p>
+            <b>VIN</b>: {vin}
+          </p>
           {vehicle.log_level != null && (
-            <p><b>Log Level</b>: {vehicle.log_level}</p>
+            <p>
+              <b>Log Level</b>: {vehicle.log_level}
+            </p>
           )}
         </Grid>
         {vehicle.canbus && (
           <Grid item md={12} className={classes.textCenterAlign}>
             <b>CANBus</b>
-            <p><b>Enabled</b>: {vehicle.canbus.enabled.toString()}</p>
-            <p><b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}</p>
-            <p><b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}</p>
-            <p><b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}</p>
-            <p><b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}</p>
+            <p>
+              <b>Enabled</b>: {vehicle.canbus.enabled.toString()}
+            </p>
+            <p>
+              <b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}
+            </p>
+            <p>
+              <b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
+            </p>
+            <p>
+              <b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}
+            </p>
+            <p>
+              <b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}
+            </p>
           </Grid>
         )}
         <Grid item md={12} className={classes.textCenterAlign}>
-          <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
-            <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
-              <EditIcon aria-label={`Update "${vin}"`} />
-            </Link>
-          </Tooltip>
-          <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={() => setShowDeleteModal(true)}>
-              <DeleteIcon aria-label={`Delete "${vin}"`} />
-            </Link>
-          </Tooltip>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerCreate}
+          >
+            <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
+              <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
+                <EditIcon aria-label={`Update "${vin}"`} />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerDelete}
+          >
+            <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
+              <Link to="#" onClick={() => setShowDeleteModal(true)}>
+                <DeleteIcon aria-label={`Delete "${vin}"`} />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
         </Grid>
       </Grid>
-      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
-    </div >
+      <DeleteConfirmation
+        message={vin}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={onDelete}
+      />
+    </div>
   );
 };
 

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

@@ -9,7 +9,7 @@ import routeData from "react-router";
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../utils/snapshot";
 
@@ -42,7 +42,7 @@ describe("VehicleDetailsTab", () => {
   })
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderVehicleDetailsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -11,7 +11,7 @@ import { MemoryRouter, Route } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./DetailsTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -41,7 +41,7 @@ describe("DetailsTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderDetailsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -10,7 +10,7 @@ import { render, waitFor } from "@testing-library/react";
 
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import DigitalTwinTab from "./DigitalTwinTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -34,7 +34,7 @@ describe("DigitalTwinTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderDetailsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -12,7 +12,7 @@ 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 { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import addSnapshotSerializer from "../../../utils/snapshot";
 import FleetsTab from "./FleetsTab";
 
@@ -40,7 +40,7 @@ describe("FleetsTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -10,7 +10,7 @@ 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 { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import React from "react";
 
 const renderRemoteCommandsTab = async () => {
@@ -33,7 +33,7 @@ describe("RemoteCommandsTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderRemoteCommandsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -249,23 +249,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"123\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 123"
-                    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
@@ -312,23 +295,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"456-789\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 456-789"
-                    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
@@ -375,23 +341,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"1\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 1"
-                    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>

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

@@ -109,23 +109,6 @@ exports[`DetailsTab Render 1`] = `
                       />
                     </svg>
                   </a>
-                  <a
-                    class=""
-                    href="/testroute/TESTVIN1234567890"
-                    title="Delete \\"TESTVIN1234567890\\""
-                  >
-                    <svg
-                      aria-hidden="true"
-                      aria-label="Delete \\"TESTVIN1234567890\\""
-                      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>
               <div />

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

@@ -217,23 +217,6 @@ exports[`CarStatus Render 1`] = `
                           />
                         </svg>
                       </a>
-                      <a
-                        class=""
-                        href="/"
-                        title="Delete \\"TESTVIN1234567890\\""
-                      >
-                        <svg
-                          aria-hidden="true"
-                          aria-label="Delete \\"TESTVIN1234567890\\""
-                          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>
                   <div />
@@ -261,21 +244,18 @@ exports[`CarStatus Render 1`] = `
           />
           <div
             aria-labelledby="tab-4"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-4"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-5"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-5"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-6"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-6"
             role="tabpanel"

src/components/Cars/Status/index.jsx

@@ -1,28 +1,80 @@
-import React, { useEffect } from "react";
+import { Box, Tab, Tabs } from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
-import clsx from "clsx";
-import { Box, Tab, Tabs } from "@material-ui/core";
 
-import CarDetailsTab from "./DetailsTab";
-import CarUpdatesTab from "./CarUpdatesTab";
-import CANFiltersTab from "./CANFiltersTab";
-import DigitalTwinTab from "./DigitalTwinTab";
-import TabPanel from "../../Controls/TabPanel";
+import { hasRole, Permissions } from "../../../utils/roles";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import TabPanel from "../../Controls/TabPanel";
 import useStyles from "../../useStyles";
+import CANFiltersTab from "./CANFiltersTab";
 import CANSignalsTab from "./CANSignalsTab";
-import RemoteCommandsTab from "./RemoteCommandsTab";
+import CarUpdatesTab from "./CarUpdatesTab";
+import CarDetailsTab from "./DetailsTab";
+import DigitalTwinTab from "./DigitalTwinTab";
 import FleetsTab from "./FleetsTab";
+import RemoteCommandsTab from "./RemoteCommandsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
+const TabViews = [
+  {
+    label: "Details",
+    component: CarDetailsTab,
+  },
+  {
+    label: "Car Updates",
+    component: CarUpdatesTab,
+  },
+  {
+    label: "CAN Filters",
+    component: CANFiltersTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "Digital Twin",
+    component: DigitalTwinTab,
+  },
+  {
+    label: "CAN Signals",
+    component: CANSignalsTab,
+  },
+  {
+    label: "Remote Commands",
+    component: RemoteCommandsTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "Fleets",
+    component: FleetsTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+];
+
+const filterTabs = (data, groups, providers) => {
+  return data.reduce((result, item) => {
+    if (hasRole(groups, item.rolesPerProvider, providers)) {
+      result.push(item);
+    }
+    return result;
+  }, []);
+};
+
 const CarStatus = () => {
   const { vin } = useParams();
   const classes = useStyles();
   const { setTitle, setSitePath } = useStatusContext();
   const { hash } = useLocation();
-  const [tabIndex, setTabIndex] = React.useState(0);
+  const [tabIndex, setTabIndex] = useState(0);
+  const [tabs, setTabs] = useState([]);
+  const { groups, providers } = useUserContext();
+
+  useEffect(() => {
+    const data = filterTabs(TabViews, groups, providers);
+    setTabs(data);
+  }, [groups, providers]);
 
   useEffect(() => {
     const key = hash.replace("#", "");
@@ -59,45 +111,15 @@ const CarStatus = () => {
           value={tabIndex}
           onChange={handleTabChange}
           aria-label="car tabs"
-          indicatorColor="secondary"
-        >
-          <Tab label="Details" {...tabProps(0)} />
-          <Tab label="Car Updates" {...tabProps(1)} />
-          <Tab label="CAN Filters" {...tabProps(2)} />
-          <Tab label="Digital Twin" {...tabProps(3)} />
-          <Tab label="CAN Signals" {...tabProps(4)} />
-          <Tab label="Remote Commands" {...tabProps(5)} />
-          <Tab label="Fleets" {...tabProps(6)} />
+          indicatorColor="secondary">
+          {tabs.map((item, index) => <Tab key={index} label={item.label} {...tabProps(index)} />)}
         </Tabs>
       </Box>
-
-      <TabPanel value={tabIndex} index={0}>
-        <CarDetailsTab />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={1}>
-        <CarUpdatesTab />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={2}>
-        <CANFiltersTab />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={3}>
-        <DigitalTwinTab vin={vin} />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
-        <CANSignalsTab vin={vin} />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
-        <RemoteCommandsTab vin={vin} />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
-        <FleetsTab vin={vin} />
-      </TabPanel>
+      {tabs.map((item, index) => (
+        <TabPanel key={index} value={tabIndex} index={index}>
+          <item.component vin={vin}/>
+        </TabPanel>
+      ))}
     </div>
   );
 };

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

@@ -12,7 +12,7 @@ import routeData from "react-router";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import CarStatus from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -45,7 +45,7 @@ describe("CarStatus", () => {
   })
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCarStatus();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -36,7 +36,7 @@ describe("VehicleUpdate", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderVehicleUpdate();
     expect(container).toMatchSnapshot();
   });

src/components/Certificates/Add/CreateForm.jsx

@@ -4,11 +4,13 @@ import {
   FormLabel,
   Radio,
   RadioGroup,
-  TextField,
+  TextField
 } from "@material-ui/core";
 import React, { useRef, useState } from "react";
 
 import { CertTypeData, CertTypes } from "../../../utils/certificates";
+import { Providers } from "../../../utils/roles";
+import { useUserContext } from "../../Contexts/UserContext";
 import useStyles from "../../useStyles";
 
 const getCertTypeLabel = (certtype) => {
@@ -17,9 +19,20 @@ const getCertTypeLabel = (certtype) => {
   return "ID";
 };
 
+const getCertsTypes = (providers) => {
+  if (providers.length === 0) return [];
+  if (providers[0] === Providers.MAGNA) {
+    return CertTypeData.filter((item) => {
+      return (item.label === CertTypes.TBOX || item.label === CertTypes.ICC);
+    })
+  }
+  return CertTypeData;
+}
+
 const CreateForm = ({ onCreate, busy }) => {
   const classes = useStyles();
   const commonnameEl = useRef(null);
+  const {providers} = useUserContext();
   const [certType, setCertType] = useState(CertTypes.TBOX);
 
   const onSubmit = async (event) => {
@@ -61,7 +74,7 @@ const CreateForm = ({ onCreate, busy }) => {
           onChange={onCertTypeChange}
           margin="normal"
         >
-          {CertTypeData.map((item, i) => {
+          {getCertsTypes(providers).map((item, i) => {
             return (
               <FormControlLabel
                 key={i}

src/components/Contexts/UserContext.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import auth from "../../services/auth";
 import getTimerWorker from "../../services/getTimerWorker";
 import { parsePayload } from "../../utils/jwt";
-import { getGroups } from "../../utils/roles";
+import {getGroups, getProviders} from "../../utils/roles";
 
 const UserContext = React.createContext();
 
@@ -10,6 +10,7 @@ export const UserProvider = ({ children }) => {
   const [fetching, setFetching] = useState(false);
   const [token, setToken] = useState(null);
   const [groups, setGroups] = useState(null);
+  const [providers, setProviders] = useState(null);
   const [error, setError] = useState(null);
   let timer;
 
@@ -73,6 +74,7 @@ export const UserProvider = ({ children }) => {
       }
 
       setGroups(getGroups(idToken));
+      setProviders(getProviders(idToken));
       startSessionTimer();
     } catch (e) {
       setError(`Verify error. ${e.message}`);
@@ -106,6 +108,7 @@ export const UserProvider = ({ children }) => {
 
   const signOut = () => {
     setGroups(null);
+    setProviders(null);
     setToken(null);
     if (localStorage) {
       localStorage.removeItem("token");
@@ -153,6 +156,7 @@ export const UserProvider = ({ children }) => {
         error,
         fetching,
         groups,
+        providers,
         token,
         getAuthorizeURL,
         getLogoutURL,

src/components/Contexts/__mocks__/UserContext.jsx

@@ -1,9 +1,10 @@
 import React from "react";
 
-import { getGroups } from "../../../utils/roles";
+import {getGroups, getProviders} from "../../../utils/roles";
 
 let token = null;
 let groups = null;
+let providers = null;
 let fetching = false;
 let error = null;
 let signInResp = {};
@@ -20,6 +21,7 @@ export const useUserContext = () => ({
   error,
   fetching,
   groups,
+  providers,
   token,
   getAuthorizeURL: jest.fn(() => authorizeURL),
   getLogoutURL: jest.fn(() => logoutURL),
@@ -35,8 +37,10 @@ export const setToken = (val) => {
   token = val;
   if (!val || !val.idToken || !val.idToken.jwtToken) {
     groups = null;
+    providers = null
   } else {
     groups = getGroups(val.idToken.jwtToken);
+    providers = getProviders(val.idToken.jwtToken);
   }
 };
 

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

@@ -6,14 +6,14 @@ import { render, waitFor } from "@testing-library/react";
 import { CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
 import CarUpdateStatusTable from "../CarUpdateStatusTable";
 import { StatusProvider } from "../../Contexts/StatusContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarUpdateStatusTable = async () => {
   const { container } = render(
     <StatusProvider>
       <CarUpdatesProvider>
-        <CarUpdateStatusTable carupdateid={283} token={TEST_AUTH_OBJECT} />
+        <CarUpdateStatusTable carupdateid={283} token={TEST_AUTH_OBJECT_FISKER} />
       </CarUpdatesProvider>
     </StatusProvider>
   );

src/components/Controls/CarUpdatesTable/index.jsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import {
   LinearProgress,
   Table,
@@ -9,19 +8,22 @@ import {
   TableRow,
   Tooltip,
 } from "@material-ui/core";
-import { Link } from "react-router-dom";
 import CancelIcon from "@material-ui/icons/Cancel";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
+import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
 import {
   CarUpdatesProvider,
   useCarUpdatesContext,
 } from "../../Contexts/CarUpdatesContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
+import { useUserContext } from "../../Contexts/UserContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
+import { RoleWrap } from "../RoleWrap";
 
 const tableColumns = [
   {
@@ -68,6 +70,8 @@ const MainForm = ({ vin, token }) => {
   } = useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
+  const { groups, providers } = useUserContext();
+
   useEffect(() => {
     (async () => {
       try {
@@ -176,11 +180,17 @@ const MainForm = ({ vin, token }) => {
               {LocalDateTimeString(row.updated)}
             </TableCell>
             <TableCell>
-              <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
-                <Link to="#" onClick={() => sendCancel(row)}>
-                  <CancelIcon />
-                </Link>
-              </Tooltip>
+              <RoleWrap
+                groups={groups}
+                providers={providers}
+                rolesPerProvider={Permissions.FiskerCreate}
+              >
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </RoleWrap>
             </TableCell>
           </TableRow>
         ))}

src/components/Controls/RoleWrap/__snapshots__/index.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoleWrap RoleWrap with access, child renders 1`] = `
+<div>
+  <div
+    data-testid="test-role-wrap-child"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`RoleWrap RoleWrap without access, child does not render 1`] = `<div />`;
+
+exports[`RoleWrap RoleWrap without access, eitherComponent renders 1`] = `
+<div>
+  <div
+    data-testid="test-role-wrap-child"
+  >
+    Either
+  </div>
+</div>
+`;

src/components/Controls/RoleWrap/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { hasRole } from "../../../utils/roles";
+
+export const RoleWrap = (props) => {
+  const {groups, rolesPerProvider, providers} = props;
+
+  const eitherComponent =  props["eitherComponent"] || null;
+
+  if (!hasRole(groups, rolesPerProvider, providers)) {
+    return eitherComponent != null ? eitherComponent : <></>;
+  }
+
+  return (
+    <React.Fragment>
+      {props.children}
+    </React.Fragment>
+  )
+}
+

src/components/Controls/RoleWrap/index.test.js

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import { Permissions, Providers, Roles } from "../../../utils/roles";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { RoleWrap } from "./index";
+
+const selector = "test-role-wrap-child";
+
+const renderRoleWrap = async (
+  groups,
+  providers,
+  rolesPerProvider,
+  eitherComponent
+) => {
+  const { container } = render(
+    <RoleWrap
+      groups={groups}
+      providers={providers}
+      rolesPerProvider={rolesPerProvider}
+      eitherComponent={eitherComponent}
+    >
+      <div data-testid={selector}>Test</div>
+    </RoleWrap>
+  );
+  return container;
+};
+
+describe("RoleWrap", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("RoleWrap with access, child renders", async () => {
+    const view = await renderRoleWrap(
+      [Roles.READ],
+      [Providers.FISKER],
+      Permissions.FiskerRead,
+      null
+    );
+    const childComponent = screen.getByTestId(selector);
+    expect(childComponent).toHaveTextContent("Test");
+
+    expect(view).toMatchSnapshot();
+  });
+
+  it("RoleWrap without access, child does not render", async () => {
+    const view = await renderRoleWrap(
+      [Roles.READ],
+      [Providers.FISKER],
+      Permissions.FiskerCreate,
+      null
+    );
+    const childComponent = screen.queryByTestId(selector);
+    expect(childComponent).toBeNull();
+
+    expect(view).toMatchSnapshot();
+  });
+
+  it("RoleWrap without access, eitherComponent renders", async () => {
+    const view = await renderRoleWrap(
+      [Roles.READ],
+      [Providers.FISKER],
+      Permissions.FiskerCreate,
+      <div data-testid={selector}>Either</div>
+    );
+    const childComponent = screen.getByTestId(selector);
+    expect(childComponent).toHaveTextContent("Either");
+
+    expect(view).toMatchSnapshot();
+  });
+});

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -36,7 +36,7 @@ describe("FleetAddForm", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetAdd();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../../utils/snapshot";
 
@@ -34,7 +34,7 @@ describe("FleetCANFilterAdd", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetCANFilterAdd();
     expect(container).toMatchSnapshot();
   });

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

@@ -221,23 +221,6 @@ exports[`FleetCANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"123-456\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 123-456"
-                        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
@@ -277,23 +260,6 @@ exports[`FleetCANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"1\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 1"
-                        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
@@ -333,23 +299,6 @@ exports[`FleetCANFiltersTable Render 1`] = `
                         />
                       </svg>
                     </a>
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"1000\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete 1000"
-                        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>

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

@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
 import {
   Grid,
   Table,
@@ -12,37 +10,42 @@ import {
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from "@material-ui/icons/Edit";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
-import TableHeaderSortable from "../../../../Table/HeaderSortable";
-import { useUserContext } from "../../../../Contexts/UserContext"
-import { useStatusContext } from "../../../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
-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 {trimIfMoreThan} from "../../../../../utils/strings"
+import { hasRole, Permissions } from "../../../../../utils/roles";
+import { trimIfMoreThan } from "../../../../../utils/strings";
+import {
+  FleetProvider,
+  useFleetContext,
+} from "../../../../Contexts/FleetContext";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useUserContext } from "../../../../Contexts/UserContext";
+import SearchField from "../../../../Controls/SearchField";
+import TableHeaderSortable from "../../../../Table/HeaderSortable";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import useStyles from "../../../../useStyles";
 
 const tableColumns = [
   {
     id: "can_id",
-    label: "CAN ID"
+    label: "CAN ID",
   },
   {
     id: "interval",
-    label: "Interval (ms)"
+    label: "Interval (ms)",
   },
   {
     id: "edge_mask",
-    label: "Edge mask"
+    label: "Edge mask",
   },
   {
     id: "",
-    label: "Actions"
-  }
+    label: "Actions",
+  },
 ];
 
 const PAGE_SIZE = "FLEET_STATUS_CAN_FILTER_TABLE_PAGE_SIZE";
@@ -54,8 +57,19 @@ const MainForm = ({ name }) => {
   const [order, setOrder] = useState("desc");
   const classes = useStyles();
   const { setMessage } = useStatusContext();
-  const { fleetCANFilters, totalFleetCANFilters, getFleetCANFilters, deleteFleetCANFilter } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+  const {
+    fleetCANFilters,
+    totalFleetCANFilters,
+    getFleetCANFilters,
+    deleteFleetCANFilter,
+  } = useFleetContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
 
   useEffect(() => {
     (async () => {
@@ -107,7 +121,7 @@ const MainForm = ({ name }) => {
   const onDelete = async (can_id) => {
     try {
       await deleteFleetCANFilter(name, can_id, token);
-      setMessage(`Deleted ${can_id}`)
+      setMessage(`Deleted ${can_id}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -116,19 +130,19 @@ const MainForm = ({ name }) => {
 
   const Actions = (row) => {
     let actions = [];
-    if (hasRole([Roles.CREATE], groups)) {
+    if (hasRole(groups, Permissions.FiskerCreate, providers)) {
       actions.push({
         tip: `Update "${row.can_id}"`,
         link: `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}&interval=${row.interval}`,
-        icon: <EditIcon aria-label={`Update ${row.can_id}`} />
+        icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
       });
     }
-    if (hasRole([Roles.DELETE], groups)) {
+    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
       actions.push({
         tip: `Delete "${row.can_id}"`,
         id: row.can_id,
-        icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />
-      })
+        icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />,
+      });
     }
     if (actions.length === 0) return ["No actions"];
 
@@ -157,7 +171,10 @@ const MainForm = ({ name }) => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={`/fleet/${name}/filter-add`} className={classes.labelInline}>
+          <Link
+            to={`/fleet/${name}/filter-add`}
+            className={classes.labelInline}
+          >
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
@@ -174,11 +191,13 @@ const MainForm = ({ name }) => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {fleetCANFilters.map(row => (
+          {fleetCANFilters.map((row) => (
             <TableRow key={row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
-              <TableCell align="center">{trimIfMoreThan(row.edge_mask, 15, "...")}</TableCell>
+              <TableCell align="center">
+                {trimIfMoreThan(row.edge_mask, 15, "...")}
+              </TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
@@ -201,7 +220,7 @@ const MainForm = ({ name }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div >
+    </div>
   );
 };
 

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../../utils/snapshot";
 
@@ -37,7 +37,7 @@ describe("FleetCANFiltersTable", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetCANFiltersTable();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../../utils/snapshot";
 
@@ -34,7 +34,7 @@ describe("FleetCANFilterUpdate", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetCANFilterUpdate();
     expect(container).toMatchSnapshot();
   });

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

@@ -9,7 +9,7 @@ import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import CANFiltersTab from "./CANFiltersTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -31,7 +31,7 @@ describe("CANFiltersTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCANFitlersTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -9,7 +9,7 @@ import routeData from "react-router";
 import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../utils/snapshot";
 
@@ -42,7 +42,7 @@ describe("FleetDetailsTab", () => {
   })
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetDetailsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -11,7 +11,7 @@ import { MemoryRouter, Route } from "react-router-dom";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./DetailsTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -41,7 +41,7 @@ describe("DetailsTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderDetailsTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../../utils/snapshot";
 
@@ -36,7 +36,7 @@ describe("FleetVehicleAdd", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetVehicleAdd();
     expect(container).toMatchSnapshot();
   });

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

@@ -153,26 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <span>
-                      <a
-                        class=""
-                        href="/"
-                        title="Delete \\"USWESTVIN12345678\\""
-                      >
-                        <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 />
-                    </span>
+                    No actions
                   </td>
                 </tr>
                 <tr
@@ -190,26 +171,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <span>
-                      <a
-                        class=""
-                        href="/"
-                        title="Delete \\"USWESTVIN12345679\\""
-                      >
-                        <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 />
-                    </span>
+                    No actions
                   </td>
                 </tr>
                 <tr
@@ -227,26 +189,7 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <span>
-                      <a
-                        class=""
-                        href="/"
-                        title="Delete \\"USWESTVIN12345670\\""
-                      >
-                        <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 />
-                    </span>
+                    No actions
                   </td>
                 </tr>
               </tbody>

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

@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import {
   Grid,
   Table,
@@ -8,25 +6,27 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
-  Tooltip,
+  Tooltip
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
-import TableHeaderSortable from "../../../../Table/HeaderSortable";
-import { useUserContext } from "../../../../Contexts/UserContext";
-import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { logger } from "../../../../../services/monitoring";
+import { hasRole, Permissions } from "../../../../../utils/roles";
 import {
   FleetProvider,
-  useFleetContext,
+  useFleetContext
 } from "../../../../Contexts/FleetContext";
-import useStyles from "../../../../useStyles";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useUserContext } from "../../../../Contexts/UserContext";
 import SearchField from "../../../../Controls/SearchField";
-import { logger } from "../../../../../services/monitoring";
-import { Roles, hasRole } from "../../../../../utils/roles";
-import { useLocalStorage } from "../../../../useLocalStorage";
 import DeleteConfirmation from "../../../../DeleteConfirmation";
+import TableHeaderSortable from "../../../../Table/HeaderSortable";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import useStyles from "../../../../useStyles";
 
 const tableColumns = [
   {
@@ -61,6 +61,7 @@ const MainForm = ({ name }) => {
       idToken: { jwtToken: token },
     },
     groups,
+    providers,
   } = useUserContext();
 
   const handleSearch = (query) => {
@@ -127,7 +128,7 @@ const MainForm = ({ name }) => {
 
   const Actions = (vin) => {
     let actions = [];
-    if (hasRole([Roles.DELETE], groups)) {
+    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
       actions.push({
         tip: `Delete "${vin}"`,
         id: vin,

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../../utils/snapshot";
 
@@ -39,7 +39,7 @@ describe("FleetVehiclesTable", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetVehiclesTable();
     expect(container).toMatchSnapshot();
   });

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

@@ -9,7 +9,7 @@ import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
 import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import VehiclesTab from "./VehiclesTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -31,7 +31,7 @@ describe("VehiclesTab", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderVehiclesTab();
     expect(container).toMatchSnapshot();
   });

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

@@ -220,23 +220,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"123-456\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 123-456"
-                    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
@@ -276,23 +259,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"1\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 1"
-                    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
@@ -332,23 +298,6 @@ exports[`CANFiltersTab Render 1`] = `
                     />
                   </svg>
                 </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"1000\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 1000"
-                    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>

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

@@ -152,26 +152,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <span>
-                  <a
-                    class=""
-                    href="/"
-                    title="Delete \\"USWESTVIN12345678\\""
-                  >
-                    <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 />
-                </span>
+                No actions
               </td>
             </tr>
             <tr
@@ -189,26 +170,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <span>
-                  <a
-                    class=""
-                    href="/"
-                    title="Delete \\"USWESTVIN12345679\\""
-                  >
-                    <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 />
-                </span>
+                No actions
               </td>
             </tr>
             <tr
@@ -226,26 +188,7 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <span>
-                  <a
-                    class=""
-                    href="/"
-                    title="Delete \\"USWESTVIN12345670\\""
-                  >
-                    <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 />
-                </span>
+                No actions
               </td>
             </tr>
           </tbody>

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

@@ -12,7 +12,7 @@ import routeData from "react-router";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import FleetStatus from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -45,7 +45,7 @@ describe("FleetStatus", () => {
   })
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderCarStatus();
     expect(container).toMatchSnapshot();
   });

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

@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -39,7 +39,7 @@ describe("FleetTable", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetTable();
     expect(container).toMatchSnapshot();
   });

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

@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -36,7 +36,7 @@ describe("FleetUpdate", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderFleetUpdate();
     expect(container).toMatchSnapshot();
   });

src/components/Layouts/SideMenu.jsx

@@ -1,17 +1,17 @@
-import React from "react";
 import { List } from "@material-ui/core";
-import HomeIcon from "@material-ui/icons/Home";
-import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
-import CommuteIcon from "@material-ui/icons/Commute";
-import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import AssessmentIcon from "@material-ui/icons/Assessment";
 import BuildIcon from "@material-ui/icons/Build";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+import CommuteIcon from "@material-ui/icons/Commute";
+import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
+import HomeIcon from "@material-ui/icons/Home";
 import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
+import { default as React, useEffect, useState } from "react";
 
+import { hasRole, Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
-import { Roles, hasRole } from "../../utils/roles";
-import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
 import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
+import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
 
 const menuData = [
   {
@@ -24,65 +24,60 @@ const menuData = [
     label: "Deployments",
     to: "/packages",
     icon: <CloudDownloadIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Vehicles",
     to: "/vehicles",
     icon: <DirectionsCarIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Fleets",
     to: "/fleets",
     icon: <CommuteIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerRead,
   },
   {
     label: "Datascope",
     to: null,
     icon: <AssessmentIcon />,
-    roles: [Roles.READ, Roles.CREATE],
-    component: SupersetDashboardList
+    rolesPerProvider: Permissions.FiskerRead,
+    component: SupersetDashboardList,
   },
   {
     label: "Suppliers",
     to: "/suppliers",
     icon: <SettingsInputCompositeIcon />,
-    roles: [Roles.APPROVESUPPLIERS],
+    rolesPerProvider: Permissions.FiskerSupplierAdmin,
   },
   {
     label: "Tools",
     to: "/tools/certificates/add",
     icon: <BuildIcon />,
-    roles: [Roles.CERTIFICATES, Roles.APPROVESUPPLIERS],
+    rolesPerProvider: Permissions.FiskerTools,
     submenus: [
       {
         label: "Certificate",
         to: "/tools/certificates/add",
-        roles: [Roles.CERTIFICATES],
+        rolesPerProvider: Permissions.FiskerCertificate,
       },
       {
         label: "SMS",
         to: "/tools/sms/send",
-        roles: [Roles.CREATE],
-      }
+        rolesPerProvider: Permissions.FiskerCreate,
+      },
     ],
   },
 ];
 
-
 const SideMenu = () => {
-  const { groups } = useUserContext();
-
-  const menu = menuData.reduce((result, item) => {
-    if (hasRole(item.roles, groups)) {
-      result.push(item);
-    }
-
-    return result;
-  }, []);
+  const { groups, providers } = useUserContext();
+  const [menu, setMenu] = useState(menuData);
 
+  useEffect(() => {
+    filterMenu(groups, providers, setMenu);
+  }, [groups, providers]);
 
   return (
     <List>
@@ -96,4 +91,22 @@ const SideMenu = () => {
   );
 };
 
-export default SideMenu;
+const reduceMenu = (data, groups, providers) => {
+  return data.reduce((result, item) => {
+    if (hasRole(groups, item.rolesPerProvider, providers)) {
+      if (item.submenus) {
+        item.submenus = reduceMenu(item.submenus, groups, providers);
+      }
+      result.push(item);
+    }
+    return result;
+  }, []);
+}
+
+const filterMenu = (groups, providers, setMenu) => {
+  const filteredMenu = reduceMenu(menuData, groups, providers);
+  setMenu(filteredMenu);
+};
+
+
+export default SideMenu;

src/components/Layouts/SideMenu.test.jsx

@@ -1,12 +1,12 @@
 jest.mock("../Contexts/UserContext");
-jest.mock("../../services/superset")
+jest.mock("../../services/superset");
 
-import { render, waitFor, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { UserProvider, setToken } from "../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../utils/testing";
-import SideMenu from "./SideMenu";
 import addSnapshotSerializer from "../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../utils/testing";
+import { setToken, UserProvider } from "../Contexts/UserContext";
+import SideMenu from "./SideMenu";
 
 const renderMenu = async () => {
   const { container } = render(
@@ -23,15 +23,20 @@ const renderMenu = async () => {
 describe("SideMenu", () => {
   beforeAll(() => {
     addSnapshotSerializer(expect);
+  });
 
+  it("Unauthenticated", async () => {
+    setToken({ idToken: { jwtToken: null } });
+    const container = await renderMenu();
+    expect(container).toMatchSnapshot();
   });
 
   it("Authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderMenu();
     await waitFor(() => {
-      expect(screen.getByText('Datascope')).toBeInTheDocument()
-    })
+      expect(screen.getByText("Datascope")).toBeInTheDocument();
+    });
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -213,6 +213,42 @@ exports[`SideMenu Authenticated 1`] = `
           </li>
         </ul>
       </li>
+      <li>
+        <a
+          aria-disabled="false"
+          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+          href="/suppliers"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemIcon-root"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M5 2c0-.55-.45-1-1-1s-1 .45-1 1v4H1v6h6V6H5V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2H9v2zm-8 0c0 1.3.84 2.4 2 2.82V23h2v-4.18C6.16 18.4 7 17.3 7 16v-2H1v2zM21 6V2c0-.55-.45-1-1-1s-1 .45-1 1v4h-2v6h6V6h-2zm-8-4c0-.55-.45-1-1-1s-1 .45-1 1v4H9v6h6V6h-2V2zm4 14c0 1.3.84 2.4 2 2.82V23h2v-4.18c1.16-.41 2-1.51 2-2.82v-2h-6v2z"
+              />
+            </svg>
+          </div>
+          <div
+            class="MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            >
+              Suppliers
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
       <span>
         <li>
           <a
@@ -303,3 +339,52 @@ exports[`SideMenu Authenticated 1`] = `
   </div>
 </div>
 `;
+
+exports[`SideMenu Unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <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>
+    </ul>
+  </div>
+</div>
+`;

src/components/Manifest/Deploy/index.jsx

@@ -1,32 +1,34 @@
-import React, {useEffect, useState} from "react";
-import {Redirect, useParams} from "react-router";
-import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
+import { Button, FormControlLabel, Grid, Switch, Typography } from "@material-ui/core";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Redirect, useParams } from "react-router";
 
-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 { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { Permissions } from "../../../utils/roles";
+import { CarUpdatesProvider, useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
+import { FleetProvider } from "../../Contexts/FleetContext";
+import { ManifestsProvider, useManifestsContext } from "../../Contexts/ManifestsContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
-import {logger} from "../../../services/monitoring";
-import {LocalDateTimeString} from "../../../utils/dates";
 import FleetSelectionTable from "../../Controls/FleetSelectionTable";
-import {FleetProvider} from "../../Contexts/FleetContext";
-
+import { RoleWrap } from "../../Controls/RoleWrap";
+import SearchField from "../../Controls/SearchField";
+import useStyles from "../../useStyles";
 
 const CAR_UPDATE = false;
 const FLEET_UPDATE = true;
 
 const MainForm = () => {
   const [updateType, setUpdateType] = useState(CAR_UPDATE);
-
   const {manifest_id} = useParams();
   const {getManifests, manifests, busy} = useManifestsContext();
   const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
   const {
+    groups,
+    providers,
     token: {
       idToken: {jwtToken: token},
     },
@@ -145,12 +147,17 @@ const MainForm = () => {
             >{`${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"/>
-
+            <RoleWrap
+              groups={groups}
+              providers={providers}
+              rolesPerProvider={Permissions.FiskerRead}
+            >
+              <FormControlLabel control={<Switch
+                checked={updateType === CAR_UPDATE}
+                onChange={handleChange}
+                inputProps={{'aria-label': 'controlled'}}
+              />} label="Car(default) or Fleet"/>
+            </RoleWrap>
           </Grid>
           <Grid item md={4} className={classes.textCenterAlign}>
             <SearchField classes={classes} onSearch={handleSearch}/>

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

@@ -9,7 +9,7 @@ import { ManifestsProvider } from "../../Contexts/ManifestsContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import ManifestDetails from ".";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
 const TestComponent = (opened) => (
@@ -26,7 +26,7 @@ const TestComponent = (opened) => (
 
 describe("Manifest Details Component", () => {
   beforeAll(() => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     addSnapshotSerializer(expect);
   });
 

src/components/Manifest/List/index.jsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import {
   Grid,
   Table,
@@ -10,28 +8,30 @@ import {
   TableRow,
   Tooltip,
 } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
-import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
-import {
-  useManifestsContext,
-  ManifestsProvider,
-} from "../../Contexts/ManifestsContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
-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 { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
-import DeleteConfirmation from "../../DeleteConfirmation";
 import EditIcon from "@material-ui/icons/Edit";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import { hasRole, Permissions } from "../../../utils/roles";
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import ECUList from "../../Controls/ECUList";
+import SearchField from "../../Controls/SearchField";
+import DeleteConfirmation from "../../DeleteConfirmation";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
 
 const tableColumns = [
   {
@@ -71,7 +71,7 @@ const formatManifestType = (type) => {
     default:
       return "Standard";
   }
-}
+};
 
 const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
 
@@ -95,6 +95,7 @@ const MainForm = () => {
       idToken: { jwtToken: token },
     },
     groups,
+    providers,
   } = useUserContext();
 
   const sortHandler = (event, property) => {
@@ -168,29 +169,30 @@ const MainForm = () => {
 
   const Actions = (row) => {
     let actions = [];
-    if (hasRole([Roles.CREATE, Roles.READ], groups)) {
+    if (hasRole(groups, Permissions.FiskerMagnaRead, providers)) {
       actions.push({
         tip: `Status "${row.name} ${row.version}"`,
         link: `/package-status/${row.id}`,
         icon: (
           <VisibilityIcon aria-label={`Status ${row.name} ${row.version}`} />
         ),
-      }, {
-        tip: `Update "${row.name} ${row.version}"`,
-        link: `/package-update/${row.id}`,
-        icon: (
-          <EditIcon aria-label={`Update ${row.name} ${row.version}`} />
-        ),
       });
     }
-    if (hasRole([Roles.CREATE], groups)) {
+    if (hasRole(groups, Permissions.FiskerRead, providers)) {
+      actions.push({
+        tip: `Update "${row.name} ${row.version}"`,
+        link: `/package-update/${row.id}`,
+        icon: <EditIcon aria-label={`Update ${row.name} ${row.version}`} />,
+      });
+    }
+    if (hasRole(groups, Permissions.FiskerMagnaCreate, providers)) {
       actions.push({
         tip: `Deploy "${row.name} ${row.version}"`,
         link: `/package-deploy/${row.id}`,
         icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />,
       });
     }
-    if (hasRole([Roles.DELETE], groups)) {
+    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
       actions.push({
         tip: `Delete "${row.name} ${row.version}"`,
         id: row.id,
@@ -257,7 +259,9 @@ const MainForm = () => {
                 )}
               </TableCell>
               <TableCell align="center">{row.version}</TableCell>
-              <TableCell align="center">{formatManifestType(row.type)}</TableCell>
+              <TableCell align="center">
+                {formatManifestType(row.type)}
+              </TableCell>
               <TableCell align="center">
                 {LocalDateTimeString(row.created)}
               </TableCell>

src/components/Manifest/Status/index.jsx

@@ -1,6 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router";
-import { Link } from "react-router-dom";
 import {
   LinearProgress,
   Table,
@@ -14,22 +11,27 @@ import {
 } from "@material-ui/core";
 import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import { Link } from "react-router-dom";
 
-import {
-  ManifestsProvider,
-  useManifestsContext,
-} from "../../Contexts/ManifestsContext";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { Permissions } from "../../../utils/roles";
 import {
   CarUpdatesProvider,
   useCarUpdatesContext,
 } from "../../Contexts/CarUpdatesContext";
-import { useUserContext } from "../../Contexts/UserContext";
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { LocalDateTimeString } from "../../../utils/dates";
-import { logger } from "../../../services/monitoring";
-import ManifestDetails from "../Details";
+import { useUserContext } from "../../Contexts/UserContext";
+import { RoleWrap } from "../../Controls/RoleWrap";
 import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
+import ManifestDetails from "../Details";
 
 const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
@@ -52,6 +54,8 @@ const MainForm = () => {
     token: {
       idToken: { jwtToken: token },
     },
+    groups,
+    providers,
   } = useUserContext();
 
   useEffect(() => {
@@ -172,11 +176,18 @@ const MainForm = () => {
                 {LocalDateTimeString(row.updated)}
               </TableCell>
               <TableCell>
-                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
-                  <Link to="#" onClick={() => sendCancel(row)}>
-                    <CancelIcon />
-                  </Link>
-                </Tooltip>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerCreate}
+                  eitherComponent={<>No action</>}
+                >
+                  <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                    <Link to="#" onClick={() => sendCancel(row)}>
+                      <CancelIcon />
+                    </Link>
+                  </Tooltip>
+                </RoleWrap>
               </TableCell>
             </TableRow>
           ))}

src/components/Manifest/Update/index.jsx

@@ -49,9 +49,7 @@ const MainForm = () => {
   const onSubmit = async (e) => {
     e.preventDefault();
     try {
-      const data = {name, type};
-      console.log(data);
-      const result = await updateManifest(manifest_id, data, token);
+      const result = await updateManifest(manifest_id, {name, type}, token);
       if (!result || result.error) return;
 
       setMessage(`Updated manifest ${manifest_id}`);

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

@@ -9,7 +9,7 @@ import { ManifestsProvider } from "../../Contexts/ManifestsContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import ManifestUpdate from ".";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderManifestUpdate = async () => {
@@ -33,12 +33,12 @@ const renderManifestUpdate = async () => {
 
 describe("Manifest Details Component", () => {
   beforeAll(() => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     addSnapshotSerializer(expect);
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const view = await renderManifestUpdate();
     expect(view).toMatchSnapshot();
   });

src/components/Routes/AuthRoute.jsx

@@ -8,7 +8,7 @@ export const TYPES = {
   PROTECTED: 2,
 };
 
-export const AuthRoute = ({ token, type, roles, groups, ...others }) => {
+export const AuthRoute = ({ token, type, groups, rolesPerGroup, providers, ...others }) => {
   if (type === TYPES.PROTECTED && !token) {
     return <Redirect to="/" />;
   } else if (type === TYPES.GUEST && token) {
@@ -16,8 +16,9 @@ export const AuthRoute = ({ token, type, roles, groups, ...others }) => {
   } else if (
     type === TYPES.PROTECTED &&
     token &&
-    roles &&
-    !hasRole(roles, groups)
+    rolesPerGroup &&
+    providers &&
+    !hasRole(groups, rolesPerGroup, providers)
   ) {
     return <Redirect to="/home" />;
   }

src/components/Routes/SiteRoutes.jsx

@@ -1,10 +1,10 @@
 import React, { Suspense } from "react";
 import { Switch } from "react-router-dom";
 
-import { AuthRoute, TYPES } from "../Routes/AuthRoute";
-import { MessageBar } from "../MessageBar";
+import { Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
-import { Roles } from "../../utils/roles";
+import { MessageBar } from "../MessageBar";
+import { AuthRoute, TYPES } from "../Routes/AuthRoute";
 
 const CANFilterCreate = React.lazy(() => import("../CANFilter/Add"));
 const CANFilterUpdate = React.lazy(() => import("../CANFilter/Update"));
@@ -39,7 +39,7 @@ const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
 const Datascope = React.lazy(() => import("../Dashboard"));
 const SiteRoutes = () => {
-  const { token, groups } = useUserContext();
+  const { token, groups, providers } = useUserContext();
   return (
     <Suspense fallback={"Loading..."}>
       <MessageBar />
@@ -57,7 +57,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/filter-update"
@@ -65,7 +66,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/fleets"
@@ -73,7 +75,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerRead}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet/:name/vehicle-add"
@@ -81,7 +84,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet/:name/filter-add"
@@ -89,7 +93,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet/:name/filter-update"
@@ -97,7 +102,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet/:name"
@@ -105,7 +111,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerRead}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet-add"
@@ -113,7 +120,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/fleet-update"
@@ -121,7 +129,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/home"
@@ -135,7 +144,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
         />
         <AuthRoute
           path="/package-deploy/:manifest_id"
@@ -143,7 +153,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/package-status/:manifest_id"
@@ -151,7 +162,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
         />
         <AuthRoute
           path="/package-update/:manifest_id"
@@ -159,7 +171,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerRead}
+          providers={providers}
         />
         <AuthRoute
           path="/vehicles"
@@ -167,7 +180,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
         />
         <AuthRoute
           path="/vehicle-add"
@@ -175,7 +189,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/vehicle-status/:vin/:carupdateid"
@@ -183,7 +198,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
         />
         <AuthRoute
           path="/vehicle-status/:vin"
@@ -191,7 +207,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
         />
         <AuthRoute
           path="/vehicle-update"
@@ -199,7 +216,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/tools/certificates/add"
@@ -207,7 +225,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CERTIFICATES]}
+          rolesPerGroup={Permissions.FiskerMagnaCertificate}
+          providers={providers}
         />
         <AuthRoute
           path="/tools/sms/send"
@@ -215,7 +234,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerCreate}
+          providers={providers}
         />
         <AuthRoute
           path="/suppliers"
@@ -223,7 +243,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.APPROVESUPPLIERS]}
+          rolesPerGroup={Permissions.FiskerSupplierAdmin}
+          providers={providers}
         />
         <AuthRoute
           path="/supplier/:email"
@@ -231,7 +252,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.APPROVESUPPLIERS]}
+          rolesPerGroup={Permissions.FiskerSupplierAdmin}
+          providers={providers}
         />
         <AuthRoute
           path="/datascope"
@@ -239,7 +261,8 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          rolesPerGroup={Permissions.FiskerRead}
+          providers={providers}
         />
         <PageNotFound />
       </Switch>

src/components/Suppliers/Details/index.test.js

@@ -15,7 +15,7 @@ import { BrowserRouter } from "react-router-dom";
 import { SupplierProvider } from "../../Contexts/SupplierContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -43,7 +43,7 @@ describe("Supplier page", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderSupplierDetailsPage();
     expect(container).toMatchSnapshot();
   });

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

@@ -10,7 +10,7 @@ import { BrowserRouter } from "react-router-dom";
 import { SupplierProvider } from "../../Contexts/SupplierContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
@@ -38,7 +38,7 @@ describe("Suppliers page", () => {
   });
 
   it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
     const container = await renderSuppliersPage();
     expect(container).toMatchSnapshot();
   });