Deploy to production

* Fix template function (#105)

* CEC-638 Add EK test ECU (#106)

* CEC-638 Add EK ECU

* Update test

* CEC-638 Should be EKS (#107)

* Should be EKS

* Update snapshot

* CEC-624 Display update status info and ECU (#108)

* Diplay ECU name in update status (#110)

Optimize car update status progress control
Remove car update status page test
Replace with individual component tests

* Handle case ECU is not in message (#111)

* Refresh button label (#112)

* Update ECU refresh button label

* Update snapshot

* remove

* CEC-660 Fix release notes field (#113)

* CEC-775 Manifest details component (#114)

* CEC-775 Manifest details component

* Code smells

* Fix build warning

.env.dev

@@ -3,11 +3,11 @@ REACT_APP_UPLOAD_SERVICE_URL=https://gw-dev.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://dev-ota-admin.fiskerdps.com
 REACT_APP_GRAFANA_BASE_URL=https://dev-grafana.fiskerdps.com
 REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
-REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellVolt{cellNum}&panelId=2
-REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellT{cellNum}&panelId=2
-REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=4
-REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=6
-REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&panelId=12
-REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=2
-REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=9
 REACT_APP_GRAFANA_API=https://dev-grafana.fiskerdps.com/api/datasources/proxy/2

.env.local

@@ -3,11 +3,11 @@ REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
 REACT_APP_GRAFANA_BASE_URL=https://dev-grafana.fiskerdps.com
 REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
-REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellVolt{cellNum}&panelId=2
-REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellT{cellNum}&panelId=2
-REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=4
-REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=6
-REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&panelId=12
-REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=2
-REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=9
 REACT_APP_GRAFANA_API=https://dev-grafana.fiskerdps.com/api/datasources/proxy/2

.env.prd

@@ -3,11 +3,11 @@ REACT_APP_UPLOAD_SERVICE_URL=https://gw.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://ota-admin.fiskerdps.com
 REACT_APP_GRAFANA_BASE_URL=https://grafana.fiskerdps.com
 REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
-REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellVolt{cellNum}&panelId=2
-REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellT{cellNum}&panelId=2
-REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=4
-REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=6
-REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&panelId=12
-REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=2
-REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=9
 REACT_APP_GRAFANA_API=https://grafana.fiskerdps.com/api/datasources/proxy/1

.env.stg

@@ -3,11 +3,11 @@ REACT_APP_UPLOAD_SERVICE_URL=https://gw-stg.fiskerdps.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.fiskerdps.com
 REACT_APP_GRAFANA_BASE_URL=https://stg-grafana.fiskerdps.com
 REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
-REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellVolt{cellNum}&panelId=2
-REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellT{cellNum}&panelId=2
-REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=4
-REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=6
-REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&panelId=12
-REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=2
-REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=9
 REACT_APP_GRAFANA_API=https://stg-grafana.fiskerdps.com/api/datasources/proxy/1

.env.template

@@ -1,4 +1,13 @@
 REACT_APP_AUTH_SERVICE_URL=http://localhost/compute_auth
 REACT_APP_UPLOAD_SERVICE_URL=http://localhost/ota_update
 REACT_APP_AUTH_CALLBACK_URL=http://localhost:3000
-REACT_APP_GRAFANA_API=https://grafana.fiskerdps.com/api/datasources/proxy/2
+REACT_APP_GRAFANA_BASE_URL=https://grafana.fiskerdps.com
+REACT_APP_GRAFANA_HOME_CHART_PATH=/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12
+REACT_APP_GRAFANA_VOLTAGE_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellVolt{cellNum}&panelId=2
+REACT_APP_GRAFANA_CELLTEMP_CHART_PATH=/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN={vin}&var-Signal=BMS_CellT{cellNum}&panelId=2
+REACT_APP_GRAFANA_BATTERYTEMP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=4
+REACT_APP_GRAFANA_BATTERYCAP_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=6
+REACT_APP_GRAFANA_BATTERYPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&panelId=12
+REACT_APP_GRAFANA_BATTERY12VPERCENT_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=2
+REACT_APP_GRAFANA_BATTERY12VVOLTAGE_CHART=/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN={vin}&refresh=1m&panelId=9
+REACT_APP_GRAFANA_API=https://grafana.fiskerdps.com/api/datasources/proxy/1

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine as builder
+FROM node:16-alpine as builder
 
 ARG ENVIRONMENT=local
 

package-lock.json

@@ -1275,9 +1275,9 @@
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
     "@datadog/browser-core": {
-      "version": "3.1.2",
+      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-3.7.0.tgz",
-      "integrity": "sha512-TVw6AEM39UgBm9wDAQJ/t1BurxfRvZY1TaKZiGOm2OQIFjQgdlbB1BXVZru/OcR3/kGA1JMQ6Nhh2cERDLpNHw==",
+      "integrity": "sha512-Fb36Ev1b0uSyx6J+qikgs8UDtPaVKw42da66kwifgNX+DtXN18T/2aRJon+pheOq/NEmECBG6CsxDRdBJnOYug==",
       "requires": {
         "tslib": "^1.10.0"
       },
@@ -1290,11 +1290,11 @@
       }
     },
     "@datadog/browser-logs": {
-      "version": "3.1.2",
+      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@datadog/browser-logs/-/browser-logs-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@datadog/browser-logs/-/browser-logs-3.7.0.tgz",
-      "integrity": "sha512-XBtqH1RoLky4E7Gpr2eDVod4Zji1/BIOh+1T6zO+quapFWin9VRtiwpo9DjWFjSdGENbjGpz0HJfQIS5b+sLTA==",
+      "integrity": "sha512-ip7uoBA98vnRCPh2sc3rr3TFWi429bbHqNVmcoNBSQzjZO2ogIcPneXCHvNmGabe/LkPmpWM5/kN9CZN1T5B3Q==",
       "requires": {
-        "@datadog/browser-core": "3.1.2",
+        "@datadog/browser-core": "3.7.0",
         "tslib": "^1.10.0"
       },
       "dependencies": {
@@ -1862,9 +1862,9 @@
       }
     },
     "@react-leaflet/core": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
-      "integrity": "sha512-zFxMHgfjCi7khRVB7o7H8NoJl36NaezvfcaeEurVXx22lAGHFlTHiSuLOGA4tOiHj+Ep+Lo3uwUGJ3YM9BGkHg=="
+      "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw=="
     },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
@@ -2039,24 +2039,24 @@
       }
     },
     "@testing-library/dom": {
-      "version": "8.1.0",
+      "version": "8.11.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.11.1.tgz",
-      "integrity": "sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q==",
+      "integrity": "sha512-3KQDyx9r0RKYailW2MiYrSSKEfH0GTkI51UGEvJenvcoDoeRYs0PZpi2SXqtnMClQvCqdtTTpOfFETDTVADpAg==",
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
+        "aria-query": "^5.0.0",
         "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
+        "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.4.4",
         "pretty-format": "^27.0.2"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "27.0.6",
+          "version": "27.2.5",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.5.tgz",
-          "integrity": "sha512-aSquT1qa9Pik26JK5/3rvnYb4bGtm1VFNesHKmNTwmPIgOrixvhL2ghIvFRNEpzy3gU+rUgjIF/KodbkFAl++g==",
+          "integrity": "sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==",
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
             "@types/istanbul-reports": "^3.0.0",
@@ -2073,6 +2073,16 @@
             "@types/yargs-parser": "*"
           }
         },
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "aria-query": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+          "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg=="
+        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2082,13 +2092,18 @@
             "supports-color": "^7.1.0"
           }
         },
+        "dom-accessibility-api": {
+          "version": "0.5.10",
+          "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz",
+          "integrity": "sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g=="
+        },
         "pretty-format": {
-          "version": "27.0.6",
+          "version": "27.3.1",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.3.1.tgz",
-          "integrity": "sha512-8tGD7gBIENgzqA+UBzObyWqQ5B778VIFZA/S66cclyd5YkFLYs2Js7gxDKf0MXtTc9zcS7t1xhdfcElJ3YIvkQ==",
+          "integrity": "sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==",
           "requires": {
-            "@jest/types": "^27.0.6",
+            "@jest/types": "^27.2.5",
-            "ansi-regex": "^5.0.0",
+            "ansi-regex": "^5.0.1",
             "ansi-styles": "^5.0.0",
             "react-is": "^17.0.1"
           },
@@ -2103,9 +2118,9 @@
       }
     },
     "@testing-library/jest-dom": {
-      "version": "5.14.1",
+      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.15.0.tgz",
-      "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==",
+      "integrity": "sha512-lOMuQidnL1tWHLEWIhL6UvSZC1Qt3OkNe1khvi2h6xFiqpe5O8arYs46OU0qyUGq0cSTbroQyMktYNXu3a7sAA==",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -2119,18 +2134,18 @@
       }
     },
     "@testing-library/react": {
-      "version": "12.0.0",
+      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.2.tgz",
-      "integrity": "sha512-sh3jhFgEshFyJ/0IxGltRhwZv2kFKfJ3fN1vTZ6hhMXzz9ZbbcTgmDYM4e+zJv+oiVKKEWZPyqPAh4MQBI65gA==",
+      "integrity": "sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^8.0.0"
       }
     },
     "@testing-library/user-event": {
-      "version": "13.2.1",
+      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-cczlgVl+krjOb3j1625usarNEibI0IFRJrSWX9UsJ1HKYFgCQv9Nb7QAipUDXl3Xdz8NDTsiS78eAkPSxlzTlw==",
+      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
       "requires": {
         "@babel/runtime": "^7.12.5"
       }
@@ -2240,12 +2255,87 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.24",
+      "version": "27.0.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.0.2.tgz",
-      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "integrity": "sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==",
       "requires": {
-        "jest-diff": "^26.0.0",
+        "jest-diff": "^27.0.0",
-        "pretty-format": "^26.0.0"
+        "pretty-format": "^27.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "27.2.5",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.5.tgz",
+          "integrity": "sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==",
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^16.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "16.0.4",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+          "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "diff-sequences": {
+          "version": "27.0.6",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz",
+          "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ=="
+        },
+        "jest-diff": {
+          "version": "27.3.1",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.3.1.tgz",
+          "integrity": "sha512-PCeuAH4AWUo2O5+ksW4pL9v5xJAcIKPUPfIhZBcG1RKv/0+dvaWTQK1Nrau8d67dp65fOqbeMdoil+6PedyEPQ==",
+          "requires": {
+            "chalk": "^4.0.0",
+            "diff-sequences": "^27.0.6",
+            "jest-get-type": "^27.3.1",
+            "pretty-format": "^27.3.1"
+          }
+        },
+        "jest-get-type": {
+          "version": "27.3.1",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.3.1.tgz",
+          "integrity": "sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg=="
+        },
+        "pretty-format": {
+          "version": "27.3.1",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.3.1.tgz",
+          "integrity": "sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==",
+          "requires": {
+            "@jest/types": "^27.2.5",
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^17.0.1"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+            }
+          }
+        }
       }
     },
     "@types/json-schema": {
@@ -2347,9 +2437,9 @@
       "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ=="
     },
     "@types/testing-library__jest-dom": {
-      "version": "5.14.0",
+      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz",
-      "integrity": "sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==",
+      "integrity": "sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==",
       "requires": {
         "@types/jest": "*"
       }
@@ -2761,9 +2851,9 @@
       "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4="
     },
     "ansi-regex": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "4.3.0",
@@ -3020,11 +3110,18 @@
       "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg=="
     },
     "axios": {
-      "version": "0.21.1",
+      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "requires": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.14.5",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
+          "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
+        }
       }
     },
     "axobject-query": {
@@ -12200,11 +12297,11 @@
       "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
     },
     "react-leaflet": {
-      "version": "3.2.1",
+      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.2.tgz",
-      "integrity": "sha512-3iS1fpOO+uaRpbuq68Euw9kgaoM9oIGBiDfeFtVb/C9PWBQvXdrv1n946Z8GrbQEhrT+hM9ND6NLLF9fGxTGRw==",
+      "integrity": "sha512-5W7iWjI9+CdTGVAICe8RUyK0n+uLshr+eLQa8eBCbmstPNpCHZJTUSbju4Ws5dkS/PUCr9t5VmoIE9CXuSBEhw==",
       "requires": {
-        "@react-leaflet/core": "^1.1.0"
+        "@react-leaflet/core": "^1.1.1"
       }
     },
     "react-refresh": {
@@ -12213,11 +12310,11 @@
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
     "react-router": {
-      "version": "5.2.0",
+      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
@@ -12237,15 +12334,15 @@
       }
     },
     "react-router-dom": {
-      "version": "5.2.0",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
       "requires": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
+        "react-router": "5.2.1",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
@@ -12629,9 +12726,9 @@
           }
         },
         "nth-check": {
-          "version": "2.0.0",
+          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
           "requires": {
             "boolbase": "^1.0.0"
           }
@@ -14458,9 +14555,9 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
     "tiny-invariant": {
-      "version": "1.1.0",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
     },
     "tiny-warning": {
       "version": "1.0.3",
@@ -14468,9 +14565,9 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tmpl": {
-      "version": "1.0.4",
+      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
@@ -15268,9 +15365,9 @@
       }
     },
     "web-vitals": {
-      "version": "2.1.0",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.2.tgz",
-      "integrity": "sha512-npEyJP8jHf3J71t1tRTEtz9FeKp8H2udWJUUq5ykfPhhstr//TUxiYhIEzLNwk4zv2ybAilMn7v7N6Mxmuitmg=="
+      "integrity": "sha512-nZnEH8dj+vJFqCRYdvYv0a59iLXsb8jJkt+xvXfwgnkyPdsSLtKNlYmtTDiHmTNGXeSXtpjTTUcNvFtrAk6VMQ=="
     },
     "webidl-conversions": {
       "version": "6.1.0",

package.json

@@ -3,23 +3,23 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
-    "@datadog/browser-logs": "^3.1.2",
+    "@datadog/browser-logs": "^3.7.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "clsx": "^1.1.1",
     "env-cmd": "^10.1.0",
     "leaflet": "^1.7.1",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-leaflet": "^3.2.1",
+    "react-leaflet": "^3.2.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.2"
   },
   "scripts": {
     "start": "env-cmd -f .env.local react-scripts start",

src/components/App/App.test.js

@@ -57,7 +57,7 @@ describe("App", () => {
         return `"${str}"`;
       },
     });
-  }, 30000);
+  }, 60000);
 
   afterEach(() => {
     setToken(null);
@@ -178,13 +178,4 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicle-status/FISKER123", "h6", "Vehicle FISKER123 Details");
   });
-
-  it("Route /vehicle-status/vin/carupdateid authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await sleepAndCheck(
-      "/vehicle-status/1G1FP87S3GN100062/283",
-      "h6",
-      "Vehicle 1G1FP87S3GN100062, Update TEST UPDATE"
-    );
-  });
 });

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

@@ -2411,8 +2411,8 @@ exports[`App Route /package-create authenticated 1`] = `
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                     data-shrink="false"
-                    for="releasenotes"
+                    for="release_notes"
-                    id="releasenotes-label"
+                    id="release_notes-label"
                   >
                     Release Notes URL
                     <span
@@ -2429,9 +2429,9 @@ exports[`App Route /package-create authenticated 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="releasenotes"
+                      id="release_notes"
                       maxlength="1024"
-                      name="releasenotes"
+                      name="release_notes"
                       placeholder="Release Notes URL"
                       required=""
                       type="text"
@@ -2680,6 +2680,11 @@ exports[`App Route /package-create authenticated 1`] = `
                             >
                               Driver Window Switch Group
                             </option>
+                            <option
+                              value="EKS"
+                            >
+                              ElectroKnox
+                            </option>
                             <option
                               value="EPS"
                             >
@@ -4602,6 +4607,11 @@ exports[`App Route /package-status authenticated 1`] = `
             <div
               data-testid="mocked-carupdatesprovider"
             >
+              <div
+                class="makeStyles-link-1227"
+              >
+                Show Details
+              </div>
               <div
                 class="makeStyles-paper-1204 makeStyles-tableSize-1256"
               >
@@ -7217,7 +7227,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     <span
                       class="MuiButton-label"
                     >
-                      Update
+                      Refresh
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -7779,858 +7789,6 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
 </div>
 `;
 
-exports[`App Route /vehicle-status/vin/carupdateid authenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-1613"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1614 makeStyles-appBarShift-1615 mui-00000fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <div>
-            <h6
-              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-            >
-              Vehicle 1G1FP87S3GN100062, Update TEST UPDATE
-            </h6>
-            <nav
-              aria-label="breadcrumb"
-              class="MuiTypography-root MuiBreadcrumbs-root MuiTypography-body1 MuiTypography-colorInherit"
-              style="font-size: 10px;"
-            >
-              <ol
-                class="MuiBreadcrumbs-ol"
-              >
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/vehicles"
-                  >
-                    Vehicles
-                  </a>
-                </li>
-                <li
-                  aria-hidden="true"
-                  class="MuiBreadcrumbs-separator"
-                >
-                  /
-                </li>
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/vehicle-status/1G1FP87S3GN100062"
-                  >
-                    Vehicle 1G1FP87S3GN100062 Details
-                  </a>
-                </li>
-                <li
-                  aria-hidden="true"
-                  class="MuiBreadcrumbs-separator"
-                >
-                  /
-                </li>
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/vehicle-status/1G1FP87S3GN100062/283"
-                  >
-                    Vehicle 1G1FP87S3GN100062, Update TEST UPDATE
-                  </a>
-                </li>
-              </ol>
-            </nav>
-          </div>
-          <div
-            class="makeStyles-rightToolbar-1624"
-            color="inherit"
-          >
-            <button
-              aria-controls="fade-menu"
-              aria-haspopup="true"
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                John
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-        </div>
-      </header>
-      <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1618"
-      >
-        <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1619 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-        >
-          <div
-            class="makeStyles-drawerHeader-1620 makeStyles-drawerHeaderLogo-1621"
-          >
-            <img
-              alt="Fisker Admin Portal"
-              class="makeStyles-logo-1630"
-              src="fisker-badge.svg"
-            />
-          </div>
-          <hr
-            class="MuiDivider-root"
-          />
-          <ul
-            class="MuiList-root MuiList-padding"
-          >
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/home"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Home
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/packages"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Deployments
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/vehicles"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-1 1v1h1l2-2.03L9 18v-5H4V5.98L13 6v2h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 13.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V18h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Vehicles
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <span>
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/datascope"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemIcon-root"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Datascope
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-            </span>
-            <ul
-              style="margin-left: 50px;"
-            >
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/datascope/battery"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Battery
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1653 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-                  href="https://dev-grafana.fiskerdps.com"
-                  rel="noopener"
-                  role="button"
-                  tabindex="0"
-                  target="_blank"
-                >
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Diagnostics
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-            </ul>
-          </ul>
-        </div>
-      </div>
-      <main
-        class="makeStyles-content-1622 makeStyles-contentShift-1623"
-      >
-        <div
-          class="makeStyles-drawerHeader-1620"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
-        >
-          <div
-            data-testid="mocked-carupdatesprovider"
-          >
-            <div
-              class="makeStyles-root-1613"
-            >
-              <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
-              >
-                <div
-                  class="MuiGrid-root makeStyles-textJustifyAlign-1648 MuiGrid-item MuiGrid-grid-md-4"
-                >
-                  <div
-                    class="MuiFormControl-root MuiTextField-root makeStyles-fullWidth-1651"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
-                      data-shrink="true"
-                    >
-                      Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiInput-input"
-                        readonly=""
-                        type="text"
-                        value="TEST UPDATE"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiGrid-root makeStyles-textCenterAlign-1649 MuiGrid-item MuiGrid-grid-md-4"
-                >
-                  <div
-                    class="MuiFormControl-root MuiTextField-root makeStyles-fullWidth-1651"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
-                      data-shrink="true"
-                    >
-                      Version
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiInput-input"
-                        readonly=""
-                        type="text"
-                        value="1000"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiGrid-root makeStyles-textRightAlign-1650 MuiGrid-item MuiGrid-grid-md-4"
-                >
-                  <div
-                    class="MuiFormControl-root MuiTextField-root makeStyles-fullWidth-1651"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
-                      data-shrink="true"
-                    >
-                      Created
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiInput-input"
-                        readonly=""
-                        type="text"
-                        value="8/20/2021 6:37:41 PM"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
-                >
-                  <div
-                    class="MuiFormControl-root MuiTextField-root makeStyles-fullWidth-1651"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
-                      data-shrink="true"
-                    >
-                      Description
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiInput-input"
-                        readonly=""
-                        type="text"
-                        value="UPDATE DESCRIPTION"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
-                >
-                  <div
-                    style="width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;"
-                  >
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656 makeStyles-progressSuccess-1657"
-                        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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Pending
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Recieved
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Precondition
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Download
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Approved
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Install
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Clean up
-                      </p>
-                    </div>
-                    <div
-                      class="makeStyles-textCenterAlign-1649"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root makeStyles-progressIcon-1656"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                        />
-                      </svg>
-                      <p
-                        class="MuiTypography-root MuiTypography-body1"
-                      >
-                        Updated
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
-                >
-                  <table
-                    class="MuiTable-root"
-                  >
-                    <thead
-                      class="MuiTableHead-root"
-                    >
-                      <tr
-                        class="MuiTableRow-root MuiTableRow-head"
-                      >
-                        <th
-                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                          scope="col"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root MuiTableSortLabel-root"
-                            role="button"
-                            tabindex="0"
-                          >
-                            Date
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                              />
-                            </svg>
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                          scope="col"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root MuiTableSortLabel-root"
-                            role="button"
-                            tabindex="0"
-                          >
-                            Status
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                              />
-                            </svg>
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                          scope="col"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root MuiTableSortLabel-root"
-                            role="button"
-                            tabindex="0"
-                          >
-                            Error
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                              />
-                            </svg>
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root"
-                    >
-                      <tr
-                        class="MuiTableRow-root"
-                      >
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        >
-                          8/23/2021 5:06:38 PM
-                        </td>
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        >
-                          package_install_complete
-                        </td>
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        />
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root"
-                      >
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        >
-                          8/23/2021 5:06:38 PM
-                        </td>
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        >
-                          package_install_start
-                        </td>
-                        <td
-                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                        />
-                      </tr>
-                    </tbody>
-                    <tfoot
-                      class="MuiTableFooter-root"
-                    >
-                      <tr
-                        class="MuiTableRow-root MuiTableRow-footer"
-                      >
-                        <td
-                          class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                          colspan="5"
-                        >
-                          <div
-                            class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
-                          >
-                            <div
-                              class="MuiTablePagination-spacer"
-                            />
-                            <p
-                              class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                              id="mui-00000"
-                            >
-                              Rows per page:
-                            </p>
-                            <div
-                              class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
-                            >
-                              <select
-                                aria-label="rows per page"
-                                class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
-                                id="mui-00000"
-                              >
-                                <option
-                                  class="MuiTablePagination-menuItem"
-                                  value="5"
-                                >
-                                  5
-                                </option>
-                                <option
-                                  class="MuiTablePagination-menuItem"
-                                  value="10"
-                                >
-                                  10
-                                </option>
-                                <option
-                                  class="MuiTablePagination-menuItem"
-                                  value="25"
-                                >
-                                  25
-                                </option>
-                                <option
-                                  class="MuiTablePagination-menuItem"
-                                  value="100"
-                                >
-                                  100
-                                </option>
-                              </select>
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  d="M7 10l5 5 5-5z"
-                                />
-                              </svg>
-                            </div>
-                            <p
-                              class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                            >
-                              1-2 of 2
-                            </p>
-                            <div
-                              class="MuiTablePagination-actions"
-                            >
-                              <button
-                                aria-label="Previous page"
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                                disabled=""
-                                tabindex="-1"
-                                title="Previous page"
-                                type="button"
-                              >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                                    />
-                                  </svg>
-                                </span>
-                              </button>
-                              <button
-                                aria-label="Next page"
-                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                                disabled=""
-                                tabindex="-1"
-                                title="Next page"
-                                type="button"
-                              >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                                    />
-                                  </svg>
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tfoot>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </main>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`App Route /vehicle-status/vin/carupdateid unauthenticated 1`] = `
 <div>
   <div

src/components/Cars/CarECUs/index.jsx

@@ -86,7 +86,6 @@ const CarECUs = ({ vin, token }) => {
         setECUs(result.data);
         if (result.total > -1) setTotal(result.total);
       } catch (e) {
-        console.log(e);
         setMessage(e.message);
         logger.warn(e.stack);
       }

src/components/Cars/Status/index.jsx

@@ -69,7 +69,7 @@ const MainForm = () => {
             className={clsx(classes.formControl, classes.textField)}
             onClick={updateHandler}
           >
-            {busy ? "Sending..." : "Update"}
+            {busy ? "Sending..." : "Refresh"}
           </Button>
         </Grid>
       </Grid>

src/components/Cars/UpdateStatus/index.jsx

@@ -19,8 +19,7 @@ const MainForm = () => {
   const [manifest, setManifest] = useState(null);
   const [status, setStatus] = useState(null);
   const { setTitle, setSitePath, setMessage } = useStatusContext();
-  const { getCarUpdates, carUpdates, startMonitor, stopMonitor } =
+  const { getCarUpdates, carUpdates } = useCarUpdatesContext();
-    useCarUpdatesContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -66,17 +65,15 @@ const MainForm = () => {
     try {
       if (carUpdates.length === 0) return;
       setStatus(carUpdates[0]);
-      startMonitor(token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-    return () => {
-      stopMonitor();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [carUpdates]);
 
+  if (!status) return null;
+
   return (
     <div className={classes.root}>
       <Grid container spacing={2}>

src/components/Contexts/CarUpdatesContext.jsx

@@ -98,19 +98,19 @@ export const CarUpdatesProvider = ({ children }) => {
     if (validateStatusMessage(status)) {
       if (status.msg === "downloading") {
         item.progress = getDownloadProgress(status);
-        item.status = `downloading ${item.progress}%`;
+        item.status = `${item.ecu || ""} downloading ${item.progress}%`.trim();
         return;
       } else if (status.msg === "package_download_complete") {
         item.progress = 100;
-        item.status = "downloaded";
+        item.status = "download complete";
         return;
       } else if (status.msg === "installing") {
         item.progress = getInstallProgress(status);
-        item.status = `installing ${item.progress}%`;
+        item.status = `${item.ecu || ""} installing ${item.progress}%`.trim();
         return;
       } else if (status.msg === "package_install_complete") {
         item.progress = 100;
-        item.status = "installed";
+        item.status = "install complete";
         return;
       }
     }

src/components/Contexts/ManifestsContext.jsx

@@ -9,6 +9,21 @@ export const ManifestsProvider = ({ children }) => {
   const [manifests, setManifests] = useState([]);
   const [totalManifests, setTotalManifests] = useState(0);
 
+  const getManifest = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.getManifest(id, token);
+      if (result.error)
+        throw new Error(`Get manifests error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const getManifests = async (search, token) => {
     let result;
 
@@ -54,6 +69,7 @@ export const ManifestsProvider = ({ children }) => {
         busy,
         manifests,
         totalManifests,
+        getManifest,
         getManifests,
         deleteManifest,
       }}

src/components/Contexts/__mocks__/CarUpdatesContext.jsx

@@ -7,8 +7,9 @@ let carUpdates = [
   {
     id: 1,
     vin: "1G1FP87S3GN100062",
-    updatepackage_id: 18,
+    manifest_id: 283,
     status: "downloaded",
+    msg: "downloaded",
     created: "2021-07-01T22:40:07.778509Z",
     updated: "2021-07-12T18:22:13.736755Z",
     updatemanifest: {
@@ -16,6 +17,7 @@ let carUpdates = [
       name: "TEST UPDATE",
       version: "1000",
       description: "UPDATE DESCRIPTION",
+      release_notes: "https://releasenotes.com",
       ecu_list: "AGS 1.0.0,AMP 1.0.0",
       created: "2021-08-20T18:37:41.960397Z",
       updated: "2021-08-20T18:37:50.007853Z",
@@ -27,6 +29,7 @@ let carUpdateLog = {
   data: [
     {
       id: 90,
+      carupdate_id: 283,
       status: "package_install_complete",
       error_code: 0,
       created: "2021-08-23T17:06:38.410115Z",
@@ -37,6 +40,7 @@ let carUpdateLog = {
       carupdate_id: 283,
       status: "package_install_start",
       error_code: 0,
+      info: "TEST",
       created: "2021-08-23T17:06:38.030052Z",
       updated: "2021-08-23T17:06:38.030052Z",
     },

src/components/Contexts/__mocks__/ManifestsContext.jsx

@@ -3,6 +3,37 @@ import React from "react";
 const ManifestsContext = React.createContext();
 
 let busy = false;
+let manifest = {
+  id: 1,
+  name: "Test Deployment",
+  version: "1.0.100",
+  description: "Deployment folder test",
+  release_notes: "https://releasenotes.com",
+  ecu_list: "ICC 1000",
+  ecu_updates: [
+    {
+      name: "ICC",
+      part_number: "BBBBBB",
+      version: "1000",
+      files: [
+        {
+          file_id: "b0cda514c94080b4",
+          filename: "LARGE.jpg",
+          url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/LARGE.jpg",
+          file_size: 14559274,
+          size: 14488498,
+          type: "ODX Data",
+          created: "2021-12-09T22:38:29.102813Z",
+          updated: "2021-12-09T22:38:29.102813Z",
+        },
+      ],
+      created: "2021-12-09T22:38:20.408351Z",
+      updated: "2022-01-14T00:47:08.996451Z",
+    },
+  ],
+  created: "2021-12-09T22:38:11.679943Z",
+  updated: "2022-01-14T00:47:08.996451Z",
+};
 let manifests = [
   {
     id: 1,
@@ -22,6 +53,7 @@ export const useManifestsContext = () => ({
   busy,
   manifests,
   totalManifests,
+  getManifest: jest.fn(() => manifest),
   getManifests: jest.fn(() => manifests),
   deleteManifest: jest.fn(),
 });

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

@@ -0,0 +1,150 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import CarUpdateStatusProgress from "../CarUpdateStatusProgress";
+import useStyles from "../../useStyles";
+
+const TestWrapper = ({ status }) => {
+  const classes = useStyles();
+  return <CarUpdateStatusProgress status={status} classes={classes} />;
+};
+
+const renderCarUpdateStatusProgress = async (status) => {
+  const { container } = render(<TestWrapper status={status} />);
+  await waitFor(() => {});
+  return container;
+};
+
+describe("CarUpdateStatusProgress", () => {
+  const tests = [
+    {
+      name: "manifest_received",
+      status: {
+        car_update_id: 297,
+        msg: "manifest_received",
+        err: -6,
+        extra_info: "",
+      },
+    },
+    {
+      name: "manifest_accepted",
+      status: {
+        car_update_id: 297,
+        msg: "manifest_accepted",
+        err: -7,
+        extra_info: "",
+      },
+    },
+    {
+      name: "download_started",
+      status: {
+        car_update_id: 297,
+        msg: "download_started",
+        err: -14,
+        extra_info: "",
+      },
+    },
+    {
+      name: "download_start ECU",
+      status: {
+        car_update_id: 297,
+        ecu: "ADAS",
+        file_current: 0,
+        file_total: 1264672,
+        package_current: 0,
+        package_total: 2529856,
+        msg: "download_start",
+        err: 0,
+      },
+    },
+    {
+      name: "downloading",
+      status: {
+        car_update_id: 297,
+        ecu: "ADAS",
+        file_current: 1048576,
+        file_total: 1264672,
+        package_current: 1048576,
+        package_total: 2529856,
+        msg: "downloading",
+        err: 0,
+      },
+    },
+    {
+      name: "download_complete",
+      status: {
+        car_update_id: 297,
+        ecu: "ADAS",
+        file_current: 1264672,
+        file_total: 1264672,
+        package_current: 1264672,
+        package_total: 2529856,
+        msg: "download_complete",
+        err: 0,
+      },
+    },
+    {
+      name: "package_download_complete",
+      status: {
+        car_update_id: 297,
+        msg: "package_download_complete",
+        err: -15,
+        extra_info: "",
+      },
+    },
+    {
+      name: "download_error",
+      status: {
+        car_update_id: 1,
+        ecu: "TEST",
+        file_current: 0,
+        file_total: 100,
+        package_current: 0,
+        package_total: 1000,
+        msg: "download_error",
+        err: 0,
+      },
+    },
+    {
+      name: "installing",
+      status: {
+        car_update_id: 1,
+        ecu: "TEST",
+        installed: 5,
+        total_files: 10,
+        msg: "installing",
+        err: 0,
+      },
+    },
+    {
+      name: "install_complete ECU",
+      status: {
+        car_update_id: 1,
+        ecu: "TEST",
+        installed: 10,
+        total_files: 10,
+        msg: "install_complete",
+        err: 0,
+      },
+    },
+    {
+      name: "install_error",
+      status: {
+        car_update_id: 1,
+        ecu: "TEST",
+        installed: 5,
+        total_files: 10,
+        msg: "install_error",
+        err: 0,
+      },
+    },
+  ];
+  for (let i = 0, len = tests.length; i < len; i++) {
+    const test = tests[i];
+
+    it(`Render ${test.name}`, async () => {
+      const container = await renderCarUpdateStatusProgress(test.status);
+      expect(container).toMatchSnapshot();
+    });
+  }
+});

src/components/Controls/CarUpdateStatusProgress/index.jsx

@@ -5,6 +5,80 @@ import clsx from "clsx";
 
 import CircularProgress from "../CircularProgress";
 
+const PHASES = [
+  {
+    label: "Pending",
+    events: ["pending"],
+    progress: () => 100,
+  },
+  {
+    label: "Recieved",
+    events: ["manifest_accepted", "manifest_received"],
+    progress: () => 100,
+  },
+  {
+    label: "Precondition",
+    events: ["requirements_succeeded"],
+    progress: () => 100,
+  },
+  {
+    label: "Download",
+    events: [
+      "downloading",
+      "download_start",
+      "download_complete",
+      "download_error",
+      "package_download_start",
+    ],
+    progress: (msg, progress) =>
+      [
+        "package_download_start",
+        "downloading",
+        "download_start",
+        "download_complete",
+      ].indexOf(msg) > -1
+        ? progress
+        : -100,
+  },
+  {
+    label: "Approved",
+    events: ["package_download_complete", "install_approval_await"],
+    progress: () => -1,
+  },
+  {
+    label: "Install",
+    events: [
+      "install_approval_received",
+      "install_start",
+      "installing",
+      "install_complete",
+      "install_error",
+    ],
+    progress: (msg, progress) =>
+      [
+        "install_approval_received",
+        "install_start",
+        "installing",
+        "install_complete",
+      ].indexOf(msg) > -1
+        ? progress
+        : -100,
+  },
+  {
+    label: "Clean up",
+    events: ["package_install_complete", "cleanup_failed"],
+    progress: (msg, progress) => {
+      if (msg === "package_install_complete") return -1;
+      return -100;
+    },
+  },
+  {
+    label: "Updated",
+    events: ["cleanup_success", "manifest_succeeded"],
+    progress: (msg, progress) => 100,
+  },
+];
+
 const Progress = ({ value, classes }) => {
   if (value === 100)
     return (
@@ -21,63 +95,26 @@ const Progress = ({ value, classes }) => {
   return <RadioButtonUnchecked className={classes.progressIcon} />;
 };
 
+const getProgress = (index, phase, progress) => {
+  if (index === phase) return progress;
+  if (index < phase) return 100;
+  return -1;
+};
+
 const CarUpdateStatus = ({ status, classes }) => {
-  const [approval, setApproval] = useState(-1);
+  const [phase, setPhase] = useState(0);
-  const [cleanup, setCleanup] = useState(-1);
+  const [progress, setProgress] = useState(-1);
-  const [download, setDownload] = useState(-1);
-  const [install, setInstall] = useState(-1);
-  const [precondition, setPrecondition] = useState(-1);
-  const [received, setReceived] = useState(-1);
-  const [updated, setUpdated] = useState(-1);
 
   useEffect(() => {
-    /* eslint-disable no-fallthrough, default-case */
     if (!status) return;
-    // update previous steps
+
-    switch (status.msg) {
+    for (let i = 0, len = PHASES.length; i < len; i++) {
-      case "manifest_succeeded":
+      const PHASE = PHASES[i];
-        setUpdated(100);
+      if (PHASE.events.indexOf(status.msg) > -1) {
-      case "cleanup_success":
+        setPhase(i);
-        setCleanup(100);
+        setProgress(PHASE.progress(status.msg, status.progress));
-      case "package_install_complete":
-        setInstall(100);
-      case "install_approval_received":
-        setApproval(100);
-      case "install_approval_await":
-      case "install_start":
-      case "installing":
-      case "install_complete":
-      case "install_error":
-      case "package_download_complete":
-        setDownload(100);
-      case "download_start":
-      case "downloading":
-      case "download_complete":
-      case "download_error":
-      case "package_download_start":
-      case "requirements_succeeded":
-        setPrecondition(100);
-      case "manifest_accepted":
-      case "manifest_received":
-        setReceived(100);
-    }
-    // update progress and errors
-    switch (status.msg) {
-      case "installing":
-        setInstall(status.progress);
-        break;
-      case "install_error":
-        setInstall(-100);
-        break;
-      case "downloading":
-        setDownload(status.progress);
-        break;
-      case "download_error":
-        setDownload(-100);
-        break;
-      case "cleanup_failed":
-        setCleanup(-100);
         break;
+      }
     }
   }, [status]);
 
@@ -90,38 +127,17 @@ const CarUpdateStatus = ({ status, classes }) => {
         flexWrap: "wrap",
       }}
     >
-      <div className={classes.textCenterAlign}>
+      {PHASES.map((item, index) => {
-        <Progress value={100} classes={classes} />
+        return (
-        <Typography>Pending</Typography>
+          <div key={index} className={classes.textCenterAlign}>
-      </div>
+            <Progress
-      <div className={classes.textCenterAlign}>
+              value={getProgress(index, phase, progress)}
-        <Progress value={received} classes={classes} />
+              classes={classes}
-        <Typography>Recieved</Typography>
+            />
-      </div>
+            <Typography>{item.label}</Typography>
-      <div className={classes.textCenterAlign}>
+          </div>
-        <Progress value={precondition} classes={classes} />
+        );
-        <Typography>Precondition</Typography>
+      })}
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={download} classes={classes} />
-        <Typography>Download</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={approval} classes={classes} />
-        <Typography>Approved</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={install} classes={classes} />
-        <Typography>Install</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={cleanup} classes={classes} />
-        <Typography>Clean up</Typography>
-      </div>
-      <div className={classes.textCenterAlign}>
-        <Progress value={updated} classes={classes} />
-        <Typography>Updated</Typography>
-      </div>
     </div>
   );
 };

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

@@ -0,0 +1,42 @@
+jest.mock("../../Contexts/CarUpdatesContext");
+
+import React from "react";
+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";
+
+const renderCarUpdateStatusTable = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <CarUpdatesProvider>
+        <CarUpdateStatusTable carupdateid={283} token={TEST_AUTH_OBJECT} />
+      </CarUpdatesProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {});
+  return container;
+};
+
+describe("CarUpdateStatusTable", () => {
+  beforeAll(() => {
+    expect.addSnapshotSerializer({
+      test: function (val) {
+        return val && typeof val === "string" && val.indexOf("mui-") >= 0;
+      },
+      print: function (val) {
+        let str = val;
+        str = str.replace(/mui-\d*/g, "mui-00000");
+
+        return `"${str}"`;
+      },
+    });
+  });
+
+  it("Render", async () => {
+    const container = await renderCarUpdateStatusTable();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,285 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarUpdateStatusTable Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-carupdatesprovider"
+  >
+    <table
+      class="MuiTable-root"
+    >
+      <thead
+        class="MuiTableHead-root"
+      >
+        <tr
+          class="MuiTableRow-root MuiTableRow-head"
+        >
+          <th
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+            scope="col"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiTableSortLabel-root"
+              role="button"
+              tabindex="0"
+            >
+              Date
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                />
+              </svg>
+            </span>
+          </th>
+          <th
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+            scope="col"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiTableSortLabel-root"
+              role="button"
+              tabindex="0"
+            >
+              Status
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                />
+              </svg>
+            </span>
+          </th>
+          <th
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+            scope="col"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiTableSortLabel-root"
+              role="button"
+              tabindex="0"
+            >
+              Info
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                />
+              </svg>
+            </span>
+          </th>
+          <th
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+            scope="col"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiTableSortLabel-root"
+              role="button"
+              tabindex="0"
+            >
+              Error
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                />
+              </svg>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="MuiTableBody-root"
+      >
+        <tr
+          class="MuiTableRow-root"
+        >
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          >
+            8/23/2021 5:06:38 PM
+          </td>
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          >
+            package_install_complete
+          </td>
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          />
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          />
+        </tr>
+        <tr
+          class="MuiTableRow-root"
+        >
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          >
+            8/23/2021 5:06:38 PM
+          </td>
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          >
+            package_install_start
+          </td>
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          >
+            TEST
+          </td>
+          <td
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+          />
+        </tr>
+      </tbody>
+      <tfoot
+        class="MuiTableFooter-root"
+      >
+        <tr
+          class="MuiTableRow-root MuiTableRow-footer"
+        >
+          <td
+            class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+            colspan="5"
+          >
+            <div
+              class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+            >
+              <div
+                class="MuiTablePagination-spacer"
+              />
+              <p
+                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                id="mui-00000"
+              >
+                Rows per page:
+              </p>
+              <div
+                class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+              >
+                <select
+                  aria-label="rows per page"
+                  class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                  id="mui-00000"
+                >
+                  <option
+                    class="MuiTablePagination-menuItem"
+                    value="5"
+                  >
+                    5
+                  </option>
+                  <option
+                    class="MuiTablePagination-menuItem"
+                    value="10"
+                  >
+                    10
+                  </option>
+                  <option
+                    class="MuiTablePagination-menuItem"
+                    value="25"
+                  >
+                    25
+                  </option>
+                  <option
+                    class="MuiTablePagination-menuItem"
+                    value="100"
+                  >
+                    100
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </div>
+              <p
+                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+              >
+                1-2 of 2
+              </p>
+              <div
+                class="MuiTablePagination-actions"
+              >
+                <button
+                  aria-label="Previous page"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                  disabled=""
+                  tabindex="-1"
+                  title="Previous page"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  aria-label="Next page"
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                  disabled=""
+                  tabindex="-1"
+                  title="Next page"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>
+`;

src/components/Controls/CarUpdateStatusTable/index.jsx

@@ -24,6 +24,10 @@ const tableColumns = [
     id: "status",
     label: "Status",
   },
+  {
+    id: "info",
+    label: "Info",
+  },
   {
     id: "error_code",
     label: "Error",
@@ -106,6 +110,7 @@ const CarUpdateStatusTable = ({ carupdateid, token }) => {
               {LocalDateTimeString(row.created)}
             </TableCell>
             <TableCell align="center">{row.status}</TableCell>
+            <TableCell align="center">{row.info}</TableCell>
             <TableCell align="center">{row.error}</TableCell>
           </TableRow>
         ))}

src/components/Controls/ECUDropDown/index.jsx

@@ -56,6 +56,7 @@ const ECUs = [
   ["DMC", "Driver Monitor Camera"],
   ["DSMC", "Driver Seat Memory Controller"],
   ["DWSG", "Driver Window Switch Group"],
+  ["EKS", "ElectroKnox"],
   ["EPS", "Electric Power Steering"],
   ["EAS", "Electrical Air Compressor System"],
   ["ECC", "Electrical Climate Controller"],

src/components/Manifest/Create/index.jsx

@@ -48,7 +48,7 @@ const MainForm = () => {
         name: packagenameEl.current.value,
         version: versionEl.current.value,
         description: descEl.current.value,
-        releasenotes: releasenotesEl.current.value,
+        release_notes: releasenotesEl.current.value,
       };
       const manifest = await createManifest(formData, authToken);
 
@@ -113,8 +113,8 @@ const MainForm = () => {
           inputRef={descEl}
         />
         <TextField
-          id="releasenotes"
+          id="release_notes"
-          name="releasenotes"
+          name="release_notes"
           label="Release Notes URL"
           variant="outlined"
           margin="normal"

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

@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Manifest Details Component Render Hidden 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-manifestsprovider"
+        >
+          <div
+            class="makeStyles-link-26"
+          >
+            Show Details
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-manifestsprovider"
+      >
+        <div
+          class="makeStyles-link-26"
+        >
+          Show Details
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Manifest Details Component Render Shown 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-manifestsprovider"
+        >
+          <div
+            class="makeStyles-link-89"
+          >
+            Hide Details
+          </div>
+          <ul>
+            <li>
+              Test Deployment 1.0.100
+            </li>
+            <li>
+              Deployment folder test https://releasenotes.com
+            </li>
+            <li>
+              ECUs: 
+              <ul>
+                <li>
+                  ICC, Part: BBBBBB, Version: 1000
+                  <br />
+                  <ul>
+                    <li>
+                      ODX Data: LARGE.jpg 
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-manifestsprovider"
+      >
+        <div
+          class="makeStyles-link-89"
+        >
+          Hide Details
+        </div>
+        <ul>
+          <li>
+            Test Deployment 1.0.100
+          </li>
+          <li>
+            Deployment folder test https://releasenotes.com
+          </li>
+          <li>
+            ECUs: 
+            <ul>
+              <li>
+                ICC, Part: BBBBBB, Version: 1000
+                <br />
+                <ul>
+                  <li>
+                    ODX Data: LARGE.jpg 
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

src/components/Manifest/Details/index.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router";
+
+import { useManifestsContext } from "../../Contexts/ManifestsContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const ECUFileList = (files) => {
+  if (!files || files.length === 0) return "No files";
+  return (
+    <ul>
+      {files.map((file) => (
+        <li key={file.filename}>{`${file.type}: ${file.filename} `}</li>
+      ))}
+    </ul>
+  );
+};
+
+const ECUList = (ecus) => {
+  if (!ecus || ecus.length === 0) return "None";
+  return (
+    <ul>
+      {ecus.map((ecu) => (
+        <li key={ecu.name}>
+          {`${ecu.name}, Part: ${ecu.part_number}, Version: ${ecu.version}`}
+          <br />
+          {ECUFileList(ecu.files)}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const ManifestDetails = ({ opened }) => {
+  const classes = useStyles();
+  const { manifest_id } = useParams();
+  const [manifest, setManifest] = useState(null);
+  const [open, setOpen] = useState(opened || false);
+  const { getManifest } = useManifestsContext();
+  const { setMessage } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const init = async () => {
+    try {
+      const result = await getManifest(manifest_id, token);
+      if (result.error) {
+        throw new Error(`Get manifest error. ${result.message}`);
+      } else {
+        setManifest(result);
+      }
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  const toggleOpen = (e) => {
+    e.preventDefault();
+    setOpen(!open);
+  };
+
+  useEffect(() => {
+    if (!open || manifest) return;
+    init();
+    // eslint-disable-next-line
+  }, [open]);
+
+  if (!open)
+    return (
+      <div className={classes.link} onClick={(e) => toggleOpen(e)}>
+        Show Details
+      </div>
+    );
+  if (manifest === null) return <div>Loading Manifest...</div>;
+
+  return (
+    <>
+      <div className={classes.link} onClick={(e) => toggleOpen(e)}>
+        Hide Details
+      </div>
+      <ul>
+        <li>{`${manifest.name} ${manifest.version}`}</li>
+        <li>{`${manifest.description} ${manifest.release_notes}`}</li>
+        <li>ECUs: {ECUList(manifest.ecu_updates)}</li>
+      </ul>
+    </>
+  );
+};
+
+export default ManifestDetails;

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

@@ -0,0 +1,46 @@
+jest.mock("../../Contexts/ManifestsContext");
+jest.mock("../../Contexts/UserContext");
+
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+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";
+
+const TestComponent = (opened) => (
+  <UserProvider>
+    <BrowserRouter>
+      <StatusProvider>
+        <ManifestsProvider>
+          <ManifestDetails opened={opened} />
+        </ManifestsProvider>
+      </StatusProvider>
+    </BrowserRouter>
+  </UserProvider>
+);
+
+describe("Manifest Details Component", () => {
+  beforeAll(() => {
+    setToken(TEST_AUTH_OBJECT);
+  });
+
+  it("Render Hidden", async () => {
+    const rendered = render(TestComponent(false));
+    await waitFor(() => {
+      // pause for render
+    });
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("Render Shown", async () => {
+    const rendered = render(TestComponent(true));
+    await waitFor(() => {
+      // pause for render
+    });
+    expect(rendered).toMatchSnapshot();
+  });
+});

src/components/Manifest/Status/index.jsx

@@ -26,6 +26,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
+import ManifestDetails from "../Details";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -182,6 +183,7 @@ const MainForm = () => {
 const ManifestStatus = () => (
   <ManifestsProvider>
     <CarUpdatesProvider>
+      <ManifestDetails />
       <MainForm />
     </CarUpdatesProvider>
   </ManifestsProvider>

src/services/__mocks__/manifestsAPI.js

@@ -1,12 +1,10 @@
-
-
 const manifestsAPI = {
   createCarUpdates: async (data, token) => {
     if (!data.id) data.id = 0;
     data.id++;
     return data;
   },
-    
+
   getPackages: async (search, token) => {
     return {
       data: [
@@ -30,9 +28,9 @@ const manifestsAPI = {
           version: "1.2",
           link: "https://cloudfront.com/download",
           ecu_list: "ECU1 1.1.0,ECU2 1.1.2",
-        }
+        },
-      ]
+      ],
-    }
+    };
   },
 
   updatePackage: async (data, token) => {
@@ -54,6 +52,40 @@ const manifestsAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  getManifest: async (id, token) => {
+    return {
+      id,
+      name: "Test Deployment",
+      version: "1.0.100",
+      description: "Deployment folder test",
+      release_notes: "https://releasenotes.com",
+      ecu_list: "ICC 1000",
+      ecu_updates: [
+        {
+          name: "ICC",
+          part_number: "BBBBBB",
+          version: "1000",
+          files: [
+            {
+              file_id: "b0cda514c94080b4",
+              filename: "LARGE.jpg",
+              url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/LARGE.jpg",
+              file_size: 14559274,
+              size: 14488498,
+              type: "ODX Data",
+              created: "2021-12-09T22:38:29.102813Z",
+              updated: "2021-12-09T22:38:29.102813Z",
+            },
+          ],
+          created: "2021-12-09T22:38:20.408351Z",
+          updated: "2022-01-14T00:47:08.996451Z",
+        },
+      ],
+      created: "2021-12-09T22:38:11.679943Z",
+      updated: "2022-01-14T00:47:08.996451Z",
+    };
+  },
 };
 
 export default manifestsAPI;

src/services/grafanaCharts.js

@@ -4,7 +4,7 @@ const template = (props, value) => {
   const keys = Object.keys(props);
 
   return keys.reduce(
-    (current, key) => current.replace(`\${${key}}`, props[key]),
+    (current, key) => current.replace(`{${key}}`, props[key]),
     value
   );
 };

src/services/manifestsAPI.js

@@ -16,6 +16,17 @@ const manifestsAPI = {
       ),
     }).then(fetchRespHandler),
 
+  getManifest: async (id, token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/manifest`, { id });
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler);
+  },
+
   getManifests: async (search, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/manifests`, search);
     return fetch(u, {

src/utils/manifestValidation.js

@@ -21,7 +21,7 @@ export const validateManifest = (data, accessToken) => {
     errors.push("description");
   }
 
-  if (!data.releasenotes || data.releasenotes.length === 0) {
+  if (!data.release_notes || data.release_notes.length === 0) {
     errors.push("release notes");
   }