Update frontend deps

frontend/package.json

@@ -9,51 +9,52 @@
     "url": "https://github.com/edgehog-device-manager/edgehog"
   },
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
-    "@formatjs/cli": "^6.2.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@formatjs/cli": "^6.2.12",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hookform/resolvers": "^2.8.3",
-    "@tanstack/react-table": "^8.10.1",
-    "@types/js-cookie": "^3.0.4",
-    "@types/leaflet": "^1.7.5",
-    "@types/lodash": "^4.14.176",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.10",
+    "@tanstack/react-table": "^8.19.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/leaflet": "^1.9.12",
+    "@types/lodash": "^4.17.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.6",
-    "@types/relay-runtime": "^14.1.24",
-    "@types/semver": "^7.3.13",
-    "@vitejs/plugin-react": "^4.0.4",
-    "apexcharts": "^3.42.0",
-    "bootstrap": "^5.1.3",
-    "dayjs": "^1.10.7",
-    "graphql": "^15.7.2",
+    "@types/relay-runtime": "^17.0.1",
+    "@types/semver": "^7.5.8",
+    "@vitejs/plugin-react": "^4.3.1",
+    "apexcharts": "^3.50.0",
+    "bootstrap": "^5.3.3",
+    "dayjs": "^1.11.11",
+    "graphql": "^16.9.0",
     "history": "^5.1.0",
     "js-cookie": "^3.0.5",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
-    "react-bootstrap": "^2.0.1",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.46.2",
-    "react-intl": "^6.4.7",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.52.1",
+    "react-intl": "^6.6.8",
     "react-leaflet": "^4.2.1",
-    "react-relay": "^16.2.0",
-    "react-router-dom": "^6.16.0",
-    "react-select": "^5.7.5",
-    "relay-compiler": "^16.2.0",
-    "relay-runtime": "^16.2.0",
-    "sass": "^1.68.0",
+    "react-relay": "^17.0.0",
+    "react-router-dom": "^6.24.1",
+    "react-select": "^5.8.0",
+    "relay-compiler": "^17.0.0",
+    "relay-runtime": "^17.0.0",
+    "sass": "^1.77.6",
     "semver": "^7.3.8",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-relay-lite": "^0.5.0",
-    "vite-tsconfig-paths": "^4.2.1",
+    "vite-plugin-relay-lite": "^0.8.1",
+    "vite-tsconfig-paths": "^4.3.2",
     "yup": "^0.32.11"
   },
   "scripts": {
@@ -94,23 +95,23 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/relay-test-utils": "^14.1.4",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "@vitest/coverage-v8": "^0.34.5",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-relay": "^1.8.3",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.3",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.2",
     "react-select-event": "^5.5.1",
-    "relay-test-utils": "^16.2.0",
-    "vitest": "^0.34.5"
+    "relay-test-utils": "^17.0.0",
+    "vitest": "^1.6.0"
   }
 }

frontend/src/Navigation.tsx

@@ -61,9 +61,10 @@
 };
 
 type RouteKeys = keyof typeof Route;
-type RouteWithParams<T extends string> = T extends ParamParseKey<T>
-  ? { route: T }
-  : { route: T; params: { [P in ParamParseKey<T>]: string } };
+type RouteWithParams<T extends string> =
+  T extends ParamParseKey<T>
+    ? { route: T }
+    : { route: T; params: { [P in ParamParseKey<T>]: string } };
 
 type ParametricRoute = {
   [K in RouteKeys]: RouteWithParams<(typeof Route)[K]>;
@@ -133,5 +134,5 @@
   return navigate;
 };
 
 export { Link, Route, matchPaths, useNavigate };
 export type { LinkProps, ParametricRoute };

frontend/src/api/relay.ts

@@ -33,7 +33,7 @@ declare module "relay-runtime" {
       column: number;
     }>;
     code: string;
-    path: string[];
+    path?: Array<string | number>;
     fields: string[];
     short_message: string;
   }

frontend/src/components/HardwareTypesTable.test.tsx

@@ -50,6 +50,7 @@ type HardwareType = {
   handle: string;
   name: string;
   partNumbers: {
+    id: string;
     partNumber: string;
   }[];
 };
@@ -80,7 +81,7 @@ it("renders Hardware Type data", () => {
       id: "HW-ID",
       handle: "hw-handle",
       name: "HW name",
-      partNumbers: [{ partNumber: "HW-PN1" }],
+      partNumbers: [{ id: "HW-PN1", partNumber: "HW-PN1" }],
     },
   ]);
 
@@ -99,7 +100,10 @@ it("renders multiple Part Numbers separated by comma", () => {
       id: "HW-ID",
       handle: "hw-handle",
       name: "HW name",
-      partNumbers: [{ partNumber: "HW-PN1" }, { partNumber: "HW-PN2" }],
+      partNumbers: [
+        { id: "HW-PN1", partNumber: "HW-PN1" },
+        { id: "HW-PN2", partNumber: "HW-PN2" },
+      ],
     },
   ]);
 
@@ -112,7 +116,10 @@ it("renders Hardware Type data in correct columns", () => {
       id: "HW-ID",
       handle: "hw-handle",
       name: "HW name",
-      partNumbers: [{ partNumber: "HW-PN1" }, { partNumber: "HW-PN2" }],
+      partNumbers: [
+        { id: "HW-PN1", partNumber: "HW-PN1" },
+        { id: "HW-PN2", partNumber: "HW-PN2" },
+      ],
     },
   ]);
 

frontend/src/components/SystemModelsTable.test.tsx

@@ -54,6 +54,7 @@ type SystemModel = {
     name: string;
   };
   partNumbers: {
+    id: string;
     partNumber: string;
   }[];
 };
@@ -91,7 +92,7 @@ it("renders System Model data", async () => {
         id: "HW-ID",
         name: "HW name",
       },
-      partNumbers: [{ partNumber: "SM-PN1" }],
+      partNumbers: [{ id: "SM-PN1", partNumber: "SM-PN1" }],
     },
   ]);
 
@@ -115,7 +116,10 @@ it("renders multiple Part Numbers separated by comma", async () => {
         id: "HW-ID",
         name: "HW name",
       },
-      partNumbers: [{ partNumber: "SM-PN1" }, { partNumber: "SM-PN2" }],
+      partNumbers: [
+        { id: "SM-PN1", partNumber: "SM-PN1" },
+        { id: "SM-PN2", partNumber: "SM-PN2" },
+      ],
     },
   ]);
 
@@ -132,7 +136,7 @@ it("renders System Model data in correct columns", async () => {
         id: "HW-ID",
         name: "HW name",
       },
-      partNumbers: [{ partNumber: "SM-PN1" }],
+      partNumbers: [{ id: "SM-PN1", partNumber: "SM-PN1" }],
     },
   ]);
 

frontend/src/forms/UpdateSystemModel.tsx

@@ -283,8 +283,8 @@ const UpdateSystemModelForm = ({
     pictureFile instanceof FileList && pictureFile.length > 0
       ? URL.createObjectURL(pictureFile[0]) // picture is the new file
       : pictureFile === null
-      ? null // picture is removed
-      : systemModel.pictureUrl; // picture is unchanged
+        ? null // picture is removed
+        : systemModel.pictureUrl; // picture is unchanged
 
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>

frontend/src/mocks/relay.ts

@@ -1,7 +1,7 @@
 /*
   This file is part of Edgehog.
 
-  Copyright 2021-2023 SECO Mind Srl
+  Copyright 2021-2024 SECO Mind Srl
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -23,17 +23,20 @@ import { MockPayloadGenerator } from "relay-test-utils";
 import assets from "assets";
 
 const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
-  SystemModel() {
+  SystemModel(_, generateId) {
+    const id = generateId();
     return {
+      id: btoa(`SystemModel:${id}`),
       handle: "esp32-dev-kit-c",
       name: "ESP32-DevKitC",
       partNumbers: ["AM_0000001"],
       pictureUrl: assets.images.brand,
     };
   },
-  BaseImage() {
+  BaseImage(_, generateId) {
+    const id = generateId();
     return {
-      id: btoa("BaseImage:1"),
+      id: btoa(`BaseImage:${id}`),
       description: "Base Image Description",
       releaseDisplayName: "release-1",
       startingVersionRequirement: null,
@@ -43,10 +46,9 @@ const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
   },
   BaseImageCollection(_, generateId) {
     const id = generateId();
-    const handle = `base-image-collection-id-${id}`;
     return {
-      id: handle,
-      handle,
+      id: btoa(`BaseImageCollection:${id}`),
+      handle: `base-image-collection-${id}`,
       name: `Base Image Collection ${id}`,
     };
   },
@@ -58,10 +60,11 @@ const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
       status: "CHARGING",
     };
   },
-  Device() {
+  Device(_, generateId) {
+    const id = generateId();
     return {
+      id: btoa(`Device:${id}`),
       deviceId: "DqL4H107S42WBEHmDrvPLQ",
-      id: "1",
       name: "Thingie",
       capabilities: [
         "HARDWARE_INFO",
@@ -81,8 +84,9 @@ const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
     };
   },
   DeviceGroup(_, generateId) {
+    const id = generateId();
     return {
-      id: `device-group-id-${generateId()}`,
+      id: btoa(`DeviceGroup:${id}`),
       name: "Tags: foo",
       handle: "tags-foo",
       selector: '"foo" in tags',
@@ -97,8 +101,10 @@ const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
       memoryTotalBytes: 409600,
     };
   },
-  HardwareType() {
+  HardwareType(_, generateId) {
+    const id = generateId();
     return {
+      id: btoa(`HardwareType:${id}`),
       handle: "esp32",
       name: "ESP32",
       partNumbers: ["HT_0000001"],
@@ -175,9 +181,10 @@ const relayMockResolvers: MockPayloadGenerator.MockResolvers = {
       timestamp: "2021-11-15T11:44:57.432Z",
     };
   },
-  UpdateChannel() {
+  UpdateChannel(_, generateId) {
+    const id = generateId();
     return {
-      id: btoa("UpdateChannel:1"),
+      id: btoa(`UpdateChannel:${id}`),
       name: "Foo devices",
       handle: "update-channel-foo",
     };