Merge branch 'develop' into release/0.9.0

.env.cec-euprd

@@ -9,10 +9,11 @@ REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_se
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
 REACT_APP_SUPERSET_URL=https://superset.cec-euprd.fiskerinc.com
 REACT_APP_ROLE_CREATE=e92f2b3e-1b80-42e5-9483-8ae648224dc6
-REACT_APP_ROLE_READ_ONLY=9af2d8c0-c26d-4d6d-bbd1-ac53cbd37ebc
+REACT_APP_ROLE_READ_ONLY=ae5123e3-7a6a-4ca9-947b-a0f184f82cbd
 REACT_APP_ROLE_DELETE=bfd1cccc-213a-4f31-b3d1-6e685976aec8
 REACT_APP_ROLE_GENERATE_CERTIFICATE=9af2d8c0-c26d-4d6d-bbd1-ac53cbd37ebc
 REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":49.8327,"lng":9.8816,"zoom":4.5}

.env.cec-prd

@@ -9,10 +9,11 @@ REACT_APP_SECURITY_DLL_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_se
 REACT_APP_SECURITY_DLL_64_URL=https://assets.fiskerdps.com/cloud-supplier/fisker_security_64.dll
 REACT_APP_SUPERSET_URL=https://superset.cec-prd.fiskerinc.com
 REACT_APP_ROLE_CREATE=e92f2b3e-1b80-42e5-9483-8ae648224dc6
-REACT_APP_ROLE_READ_ONLY=9af2d8c0-c26d-4d6d-bbd1-ac53cbd37ebc
+REACT_APP_ROLE_READ_ONLY=ae5123e3-7a6a-4ca9-947b-a0f184f82cbd
 REACT_APP_ROLE_DELETE=bfd1cccc-213a-4f31-b3d1-6e685976aec8
 REACT_APP_ROLE_GENERATE_CERTIFICATE=9af2d8c0-c26d-4d6d-bbd1-ac53cbd37ebc
 REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.dev

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.local

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=dev,stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.prd

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.stg

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.template

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=dev,stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

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

@@ -475,6 +475,79 @@ exports[`App Route / authenticated 1`] = `
             <div
               data-testid="mocked-vehicleprovider"
             >
+              <div
+                class="MuiFormControl-root MuiFormControl-marginNormal"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  Zoom To
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                >
+                  <select
+                    aria-invalid="false"
+                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                  >
+                    <option
+                      value="{ \\"center\\": [37.0902, -95.7129], \\"zoom\\": 4.5 }"
+                    >
+                      North America
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }"
+                    >
+                      - La Palma
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }"
+                    >
+                      - Manhattan Beach
+                    </option>
+                    <option
+                      value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }"
+                    >
+                      - San Francisco
+                    </option>
+                    <option
+                      value="{ \\"center\\": [49.8327, 9.8816], \\"zoom\\": 4.5 }"
+                    >
+                      Europe
+                    </option>
+                    <option
+                      value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }"
+                    >
+                      - Graz
+                    </option>
+                  </select>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    style="padding-left: 8px;"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-0"
+                      style="width: 0.01px;"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <div
                 class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
@@ -1799,6 +1872,79 @@ exports[`App Route /home authenticated 1`] = `
             <div
               data-testid="mocked-vehicleprovider"
             >
+              <div
+                class="MuiFormControl-root MuiFormControl-marginNormal"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  Zoom To
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                >
+                  <select
+                    aria-invalid="false"
+                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                  >
+                    <option
+                      value="{ \\"center\\": [37.0902, -95.7129], \\"zoom\\": 4.5 }"
+                    >
+                      North America
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }"
+                    >
+                      - La Palma
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }"
+                    >
+                      - Manhattan Beach
+                    </option>
+                    <option
+                      value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }"
+                    >
+                      - San Francisco
+                    </option>
+                    <option
+                      value="{ \\"center\\": [49.8327, 9.8816], \\"zoom\\": 4.5 }"
+                    >
+                      Europe
+                    </option>
+                    <option
+                      value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }"
+                    >
+                      - Graz
+                    </option>
+                  </select>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    style="padding-left: 8px;"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-0"
+                      style="width: 0.01px;"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <div
                 class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -137,6 +137,7 @@ export const useVehicleContext = () => ({
     .fn()
     .mockResolvedValue({
       // tests only pass without mocking the data here
+      // '3FAFP13P71R199267': [],
       // '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],
       // '3FAFP13P71R199060': [[36.891136999999986, 46.832352999999955], [76.891136999999986, 16.832352999999955]],
     }),

src/components/Layouts/SideMenu.jsx

@@ -9,10 +9,10 @@ import HomeIcon from "@material-ui/icons/Home";
 import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
 import { default as React, useEffect, useState } from "react";
 
+import { getCustomDashboardSubmenu } from "../../services/customDashboards";
 import { hasRole, Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
 import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
-import { getCustomDashboardSubmenu } from "../../services/customDashboards"
 
 const menuData = [
   {
@@ -67,7 +67,7 @@ const menuData = [
       {
         label: "Certificate",
         to: "/tools/certificates/add",
-        rolesPerProvider: Permissions.FiskerCertificate,
+        rolesPerProvider: Permissions.FiskerMagnaCertificate,
       },
       {
         label: "Security.dll",

src/components/Manifest/List/index.jsx

@@ -195,7 +195,7 @@ const MainForm = () => {
         ),
       });
     }
-    if (hasRole(groups, Permissions.FiskerRead, providers)) {
+    if (hasRole(groups, Permissions.FiskerCreate, providers)) {
       actions.push({
         tip: `Update "${row.name} ${row.version}"`,
         link: `/package-update/${row.id}`,

src/components/VehicleMap/index.jsx

@@ -6,11 +6,13 @@ import useStyles from "../useStyles";
 
 import GrayMarkerIcon from "../../assets/gray-marker.png";
 import GreenMarkerIcon from "../../assets/green-marker.png";
+import { DropDownList } from "../Controls/DropDownList";
 import { logger } from "../../services/monitoring";
 import { ValidateLocationData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import zoomLocations from './zoomLocations.json';
 
 const Component = () => {
   const classes = useStyles();
@@ -60,17 +62,10 @@ const Component = () => {
   };
 
   const centerAroundMarkers = (points) => {
-    // if (markers == null) {
+    let defaultLocationJSON = process.env.REACT_APP_HOME_MAP_DEFAULT_LOCATION;
-    //   markers = []
+    let defaultLocation = JSON.parse(defaultLocationJSON)
-    // }
+    setCenter([defaultLocation.lat, defaultLocation.lng]);
-    // const coord = markers.reduce((coord, marker) => {
+    setZoom(defaultLocation.zoom);
-    //   coord[0] += marker[0] / markers.length;
-    //   coord[1] += marker[1] / markers.length;
-    //   return coord;
-    // }, [0, 0])
-
-    setCenter([37.0902, -95.7129]);
-    setZoom(4.5);
   };
 
   useEffect(() => {
@@ -109,6 +104,12 @@ const Component = () => {
     setSelectedVIN(vin);
   };
 
+  const focusMap = (e) => {
+    let zoomLocation = JSON.parse(e.target.value)
+    setCenter(zoomLocation.center);
+    setZoom(zoomLocation.zoom)
+  }
+
   const retrieveAndStoreCarState = (vin) => {
     getState(token, vin).then((results) => {
       setCarState({ ...results.data, vin: vin });
@@ -143,55 +144,58 @@ const Component = () => {
   }
 
   return (
-    <MapContainer
+    <>
-      center={center}
+      <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} />
-      zoom={zoom}
+      <MapContainer
-      style={{
+        center={center}
-        width: "100%",
+        zoom={zoom}
-        height: "900px",
+        style={{
-      }}
+          width: "100%",
-    >
+          height: "900px",
-      <TileLayer
+        }}
-        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      >
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        <TileLayer
-      />
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-      <CenterFocus center={center} zoom={zoom} />
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      {markers.map((marker) => (
-        <Marker
-          icon={getCarIcon(marker[2])}
-          key={marker[2]}
-          position={[marker[0], marker[1]]}
-          title={marker[2]}
-          opacity={0.9}
-          zIndexOffset={getZIndex(marker[2])}
-        >
-          <Popup>
-            <div align="center">
-              <p className={classes.markerTitle}>
-                <b>{marker[2]}</b>
-              </p>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                onClick={(e) => selectCar(e, marker[2])}
-              >
-                View Stats
-              </Button>
-            </div>
-          </Popup>
-        </Marker>
-      ))}
-
-      {carState ? (
-        <VehiclePopUp
-          key={carState.vin}
-          {...carState}
-          className={classes.popup}
-          onClose={handleClose}
         />
-      ) : null}
+        <CenterFocus center={center} zoom={zoom} />
-    </MapContainer>
+        {markers.map((marker) => (
+          <Marker
+            icon={getCarIcon(marker[2])}
+            key={marker[2]}
+            position={[marker[0], marker[1]]}
+            title={marker[2]}
+            opacity={0.9}
+            zIndexOffset={getZIndex(marker[2])}
+          >
+            <Popup>
+              <div align="center">
+                <p className={classes.markerTitle}>
+                  <b>{marker[2]}</b>
+                </p>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  onClick={(e) => selectCar(e, marker[2])}
+                >
+                  View Stats
+                </Button>
+              </div>
+            </Popup>
+          </Marker>
+        ))}
+
+        {carState ? (
+          <VehiclePopUp
+            key={carState.vin}
+            {...carState}
+            className={classes.popup}
+            onClose={handleClose}
+          />
+        ) : null}
+      </MapContainer>
+    </>
   );
 };
 

src/components/VehicleMap/zoomLocations.json

@@ -0,0 +1,26 @@
+[
+  {
+    "value": "{ \"center\": [37.0902, -95.7129], \"zoom\": 4.5 }",
+    "label": "North America"
+  },
+  {
+    "value": "{ \"center\": [33.8463, -118.0461], \"zoom\": 10 }",
+    "label": "- La Palma"
+  },
+  {
+    "value": "{ \"center\": [33.8847, -118.4109], \"zoom\": 10 }",
+    "label": "- Manhattan Beach"
+  },
+  {
+    "value": "{ \"center\": [37.7749, -122.4194], \"zoom\": 10 }",
+    "label": "- San Francisco"
+  },
+  {
+    "value": "{ \"center\": [49.8327, 9.8816], \"zoom\": 4.5 }",
+    "label": "Europe"
+  },
+  {
+    "value": "{ \"center\": [47.0707, 15.4395], \"zoom\": 10 }",
+    "label": "- Graz"
+  }
+]

src/components/VehiclePathsMap/index.jsx

@@ -60,15 +60,18 @@ const ComponentVehiclePathsMap = (props) => {
 
         // validate each location
         for (let vinLocations of resultArray) {
-          let path = []
+          // if there are points for the vin; skip if empty points array
-          path[0] = vinLocations[0]
+          if (vinLocations[0] && vinLocations[1] && vinLocations[1][0]) {
-          path[1] = []
+            let path = []
-          for (let location of vinLocations[1]) {
+            path[0] = vinLocations[0]
-            if (ValidateLocationVehiclePathsData(location) !== false) {
+            path[1] = []
-              path[1].push(location);
+            for (let location of vinLocations[1]) {
+              if (ValidateLocationVehiclePathsData(location) !== false) {
+                path[1].push(location);
+              }
             }
+            points.push(path)
           }
-          points.push(path)
         }
 
         setMarkers(points);

src/utils/roles.js

@@ -77,7 +77,7 @@ export const Permissions = {
     [Providers.MAGNA]: [Roles.MAGNAGROUP],
   },
   FiskerTools: {
-    [Providers.FISKER]: [Roles.APPROVESUPPLIERS, Roles.CERTIFICATES],
+    [Providers.FISKER]: [Roles.CERTIFICATES, Roles.CREATE],
     [Providers.FISKER_QA]: [Roles.MANUFACTURE],
     [Providers.MAGNA]: [Roles.MAGNAGROUP],
   },

src/utils/roles.test.js

@@ -56,7 +56,7 @@ describe("Roles Helper", () => {
   it("Check FiskerTools permission", () => {
     expect(
       hasRole([Roles.APPROVESUPPLIERS], Permissions.FiskerTools, [Providers.FISKER])
-    ).toEqual(true);
+    ).toEqual(false);
     expect(
       hasRole([Roles.CERTIFICATES], Permissions.FiskerTools, [Providers.FISKER])
     ).toEqual(true);