dependecy updates, webpack configuration updates

.eslintrc.js

@@ -1,10 +1,12 @@
 module.exports = {
+    parser: "@babel/eslint-parser",
     parserOptions: {
-        ecmaVersion: 2018,
-        ecmaFeatures: {
-            jsx: true
-        }
+       requireConfigFile: false,
+        babelOptions: {
+            presets: ["@babel/preset-env"],
+        },
     },
+
     extends: ["airbnb", "plugin:prettier/recommended"],
     rules: {
         "no-console": "off",

.github/workflows/dependency_scan.yml

@@ -0,0 +1,14 @@
+name: 'Dependency scan'
+on: [pull_request]
+permissions:
+  contents: read
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v4
+        with:
+          fail-on-severity: high

.github/workflows/dev.yml

@@ -10,13 +10,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Cypress run
         uses: cypress-io/github-action@v4
-        with:
-          config-file: /cypress.dev.json
         env:
           CYPRESS_BASE_URL: https://dev.kartat.hsl.fi/kartta
+          CYPRESS_API_URL: https://dev.kartat.hsl.fi/routemap-api
           CYPRESS_HSLID_CLIENT_ID: ${{ secrets.CYPRESS_HSLID_CLIENT_ID }}
           CYPRESS_HSLID_CLIENT_SECRET: ${{ secrets.CYPRESS_HSLID_CLIENT_SECRET }}
           CYPRESS_TESTING_HSLID_USERNAME: ${{ secrets.CYPRESS_TESTING_HSLID_USERNAME }}

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["@babel/preset-env"],
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}

cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  viewportWidth: 1200,
+  viewportHeight: 1300,
+  numTestsKeptInMemory: 1,
+  projectId: "rax4es",
+  video: true,
+  e2e: {
+    specPattern: "cypress/integration/**/*.spec.js",
+    supportFile: "cypress/support/index.js",
+    baseUrl: process.env.CYPRESS_BASE_URL || "http://localhost:3000",
+    env: {
+      apiUrl: process.env.CYPRESS_API_URL || "http://localhost:4000",
+    },
+  },
+});

cypress/integration/general.spec.js

@@ -1,7 +1,7 @@
-const uuidv4 = require("uuid/v4");
+const { v4: uuidv4 } = require("uuid");
 
 // TODO: Envify here and cypress.json properly
-const API_URL = Cypress.config().apiUrl;
+const API_URL = Cypress.env("API_URL");
 const TEST_PREFIX = "CY-TEST";
 
 describe("Basic functionalities", () => {
@@ -34,8 +34,7 @@ describe("Basic functionalities", () => {
 
     it("Add list, select it for use and show it", () => {
         const uuid = `${TEST_PREFIX}-${uuidv4()}`;
-        cy.server();
-        cy.route("POST", `${API_URL}/builds`).as("postBuild");
+        cy.intercept("POST", `${API_URL}/builds`).as("postBuild");
 
         cy.get("[data-cy=toggle-mode-button]").click();
         cy.get("[data-cy=new-list-button").click();
@@ -153,14 +152,12 @@ describe("Basic functionalities", () => {
     it("Generate poster", () => {
         const uuid = `${TEST_PREFIX}-${uuidv4()}`;
         const posterName = uuid.substr(0, 5);
-        cy.server();
-        cy.route("POST", `${API_URL}/builds`).as("postBuild");
+
+        cy.intercept("POST", `${API_URL}/builds`).as("postBuild");
 
         cy.get("[data-cy=toggle-mode-button]").click();
-        cy.get("[data-cy=new-list-button").click();
-        cy.get("[data-cy=new-list-name-input]")
-            .click()
-            .type(uuid);
+        cy.get("[data-cy=new-list-button]").click();
+        cy.get("[data-cy=new-list-name-input]").click().type(uuid);
 
         cy.get("[data-cy=new-list-name-input]").should("have.value", uuid);
         cy.get("[data-cy=add-list-button]").click();
@@ -170,33 +167,25 @@ describe("Basic functionalities", () => {
         cy.get("[data-cy=select-list-button]").click();
 
         cy.get("[data-cy=size-selector-button]").click();
-        cy.get("[data-cy=size-selector-width-input]")
-            .click()
-            .clear()
-            .type(200);
-        cy.get("[data-cy=size-selector-height-input]")
-            .click()
-            .clear()
-            .type(200);
+        cy.get("[data-cy=size-selector-width-input]").click().clear().type(200);
+        cy.get("[data-cy=size-selector-height-input]").click().clear().type(200);
 
         cy.get("[data-cy=new-poster-name]").type(posterName);
-        cy.get("[data-cy=generate-button").click();
-        cy.get("[data-cy=close-generate-prompt-button").click();
+        cy.get("[data-cy=generate-button]").click();
+        cy.get("[data-cy=close-generate-prompt-button]").click();
         cy.get("[data-cy=show-list-button]").click();
 
-        // 60 seconds should be more than enough for 200x200 poster.
-        // Better implementation would be to somehow stop waiting after
-        // polling for build status returns "pending: 0".
         cy.wait(60000);
         cy.get(`[data-cy=${posterName}]`).contains("READY");
 
-        // Remove build
         cy.request("GET", `${API_URL}/builds`)
             .its("body")
             .then((buildArr) => {
-                const build = buildArr.find((build) => build.title === uuid);
-                cy.request("DELETE", `${API_URL}/builds/${build.id}`);
-            });
+                const build = buildArr.find((b) => b.title === uuid);
+                if (build) {
+                    cy.request("DELETE", `${API_URL}/builds/${build.id}`);
+                }
+        });
 
         cy.get("[data-cy=close-list-modal-button]").click();
     });

cypress/support/commands.js

@@ -3,10 +3,14 @@ Cypress.Commands.add("hslLogin", () => {
     const AUTH_SCOPE =
         "email https://oneportal.trivore.com/scope/groups.readonly";
 
-    const CLIENT_ID = Cypress.env("CYPRESS_HSLID_CLIENT_ID");
-    const CLIENT_SECRET = Cypress.env("CYPRESS_HSLID_CLIENT_SECRET");
-    const HSLID_USERNAME = Cypress.env("CYPRESS_TESTING_HSLID_USERNAME");
-    const HSLID_PASSWORD = Cypress.env("CYPRESS_TESTING_HSLID_PASSWORD");
+    const CLIENT_ID = Cypress.env("HSLID_CLIENT_ID");
+    const CLIENT_SECRET = Cypress.env("HSLID_CLIENT_SECRET");
+    const HSLID_USERNAME = Cypress.env("TESTING_HSLID_USERNAME");
+    const HSLID_PASSWORD = Cypress.env("TESTING_HSLID_PASSWORD");
+
+    if (!CLIENT_ID || !CLIENT_SECRET) {
+        throw new Error("Missing HSLID envs");
+    }
 
     const authHeader = `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`;
 
@@ -26,7 +30,10 @@ Cypress.Commands.add("hslLogin", () => {
         }
     };
 
-    cy.request(options).then((response) => {
+    cy.request({ ...options, failOnStatusCode: false }).then((response) => {
+        if (response.status !== 200) {
+            throw new Error(`Auth failed: ${response.status} ${JSON.stringify(response.body)}`);
+        }
         const {access_token} = response.body;
         cy.log(access_token);
         expect(response.status).to.eq(200);

package.json

@@ -12,7 +12,7 @@
         "bundle:dev": "cross-env NODE_ENV=development webpack --config webpack.config.development.js",
         "build": "yarn clean && yarn lint && yarn bundle",
         "build:dev": "yarn clean && yarn lint && yarn bundle:dev",
-        "start": "cross-env NODE_ENV=development node server.js",
+        "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.development.js --port 3000",
         "serve": "serve -l 3000 dist"
     },
     "repository": {
@@ -36,19 +36,15 @@
     ],
     "homepage": "https://github.com/HSLdevcom/hsl-map-generator-ui#readme",
     "devDependencies": {
-        "babel-core": "^6.26.3",
-        "babel-eslint": "^6.0.4",
-        "babel-loader": "^6.2.7",
-        "babel-plugin-webpack-loaders": "^0.5.0",
-        "babel-polyfill": "^6.9.0",
-        "babel-preset-es2015": "^6.9.0",
-        "babel-preset-react": "^6.5.0",
-        "babel-preset-react-hmre": "^1.1.1",
-        "babel-preset-stage-0": "^6.5.0",
-        "babel-register": "^6.9.0",
+        "@babel/core": "^7.28.6",
+        "@babel/eslint-parser": "^7.28.6",
+        "@babel/preset-env": "^7.28.6",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/register": "^7.28.6",
+        "babel-loader": "^9",
         "cross-env": "^1.0.8",
-        "css-loader": "^0.28.11",
-        "cypress": "^3.8.3",
+        "css-loader": "^7",
+        "cypress": "^15.9.0",
         "eslint": "~5",
         "eslint-config-airbnb": "~17",
         "eslint-config-prettier": "^6.0.0",
@@ -58,22 +54,20 @@
         "eslint-plugin-prettier": "^3.1.0",
         "eslint-plugin-react": "^7.32.2",
         "express": "^4.20.0",
-        "extract-text-webpack-plugin": "^1.0.1",
-        "file-loader": "^0.11.2",
-        "html-webpack-plugin": "^2.24.1",
-        "json-loader": "^0.5.4",
+        "html-webpack-plugin": "^5",
+        "mini-css-extract-plugin": "^2.10.0",
         "prettier": "^1.18.2",
         "redux-devtools": "^3.3.1",
         "redux-devtools-dock-monitor": "^1.1.1",
         "redux-devtools-log-monitor": "^1.0.11",
         "redux-logger": "^3.0.6",
         "rimraf": "^2.5.4",
         "serve": "^13.0.2",
-        "style-loader": "^0.13.2",
-        "url-loader": "^0.6.2",
-        "webpack": "^1.13.1",
-        "webpack-dev-middleware": "^1.6.1",
-        "webpack-hot-middleware": "^2.10.0"
+        "style-loader": "^4",
+        "uuid": "^13.0.0",
+        "webpack": "^5",
+        "webpack-cli": "^5",
+        "webpack-dev-server": "^5"
     },
     "dependencies": {
         "@material-ui/core": "^4.11.0",

webpack.config.base.js

@@ -1,64 +1,55 @@
-/* eslint-disable no-console, import/no-extraneous-dependencies */
 
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const Dotenv = require("dotenv-webpack");
 
-const config = {
+module.exports = {
+    context: __dirname,
+
+    entry: {
+        app: path.resolve(__dirname, "app/index"),
+    },
+
+    output: {
+        path: path.join(__dirname, "dist"),
+        publicPath: "/",
+        filename: "bundle.js",
+        clean: true,
+    },
+
+    resolve: {
+        extensions: [".js", ".jsx"],
+        mainFields: ["browser", "module", "main"],
+    },
+
     module: {
-        noParse: /json-schema\/lib\/validate\.js/,
-        loaders: [
+        rules: [
             {
                 test: /\.jsx?$/,
-                loaders: ["babel-loader"],
                 include: [
                     path.resolve(__dirname, "app"),
-                    path.resolve(__dirname, "node_modules/mapbox-gl/js")
-                ]
+                    path.resolve(__dirname, "node_modules/mapbox-gl/js"),
+                ],
+                use: {
+                    loader: "babel-loader",
+                },
             },
             {
                 test: /\.js$/,
-                loader: "babel-loader",
-                include: path.resolve(__dirname, "node_modules/hsl-map-style")
-            },
-            {
-                test: /\.json$/,
-                loader: "json-loader"
+                include: path.resolve(__dirname, "node_modules/hsl-map-style"),
+                use: {
+                    loader: "babel-loader",
+                },
             },
             {
                 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-                loader: "url-loader"
-            }
-        ]
-    },
-    output: {
-        path: path.join(__dirname, "dist"),
-        publicPath: "",
-        filename: "bundle.js"
-    },
-    resolve: {
-        extensions: ["", ".js", ".jsx"],
-        packageMains: [
-            "webpack",
-            "browser",
-            "web",
-            "browserify",
-            ["jam", "main"],
-            "main"
+                type: "asset",
+            },
         ],
-        /* alias: {
-            "mapbox-gl$": "mapbox-gl/dist/mapbox-gl"
-        }, */
-        fallback: path.join(__dirname, "node_modules")
-    },
-    resolveLoader: {
-        fallback: path.join(__dirname, "node_modules")
     },
+
     plugins: [
-        new HtmlWebpackPlugin({template: "index.ejs"}),
-        new Dotenv({systemvars: true}),
+        new HtmlWebpackPlugin({ template: "index.ejs" }),
+        new Dotenv({ systemvars: true }),
     ],
-    externals: []
 };
-
-module.exports = config;