Development

.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,25 +10,24 @@ 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 }}
           CYPRESS_TESTING_HSLID_PASSWORD: ${{ secrets.CYPRESS_TESTING_HSLID_PASSWORD }}
       - name: Upload screenshot artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
       - name: Upload video artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: cypress-videos

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine as builder
+FROM node:20-alpine as builder
 
 ENV WORK /opt/mapgenerator
 
@@ -23,7 +23,7 @@ RUN yarn build
 
 
 # The actual image comes here
-FROM node:18-alpine
+FROM node:20-alpine
 
 ENV WORK /opt/mapgenerator
 

app/components/RouteMapConfigurator.js

@@ -9,6 +9,7 @@ import AdvancedRouteMapOptions from "../containers/AdvancedRouteMapOptions";
 import {PointStatus} from "../reducers/publisherRequests";
 import {listModalStyles} from "../utils/ui-utils";
 
+// const ZONE_SYMBOLS = [{value: "A"}, {value: "B"}, {value: "C"}, {value: "D"}, {value: "E"}];
 const ZONE_SYMBOLS = [{value: "A"}, {value: "B"}, {value: "C"}, {value: "D"}];
 
 export default class RouteMapConfigurator extends Component {

app/components/ZoneSymbolMarkers.js

@@ -5,6 +5,7 @@ import AZone from "../icons/icon-Zone-A";
 import BZone from "../icons/icon-Zone-B";
 import CZone from "../icons/icon-Zone-C";
 import DZone from "../icons/icon-Zone-D";
+// import EZone from "../icons/icon-Zone-E";
 import {
     mapSelectionToBbox,
     bboxDiameterInMeters,
@@ -21,6 +22,8 @@ const getZoneIcon = (zone, svgSize) => {
             return <CZone size={svgSize} />;
         case "D":
             return <DZone size={svgSize} />;
+        // case "E":
+        // return <EZone size={svgSize} />;
         default:
             return <div />;
     }

app/icons/icon-Zone-E.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+const EZone = (props) => (
+    <div>
+        <svg
+            width={`${props.size}px`}
+            height={`${props.size}px`}
+            viewBox="0 0 36 36"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xlink="http://www.w3.org/1999/xlink">
+            <title>icon-Zone-E</title>
+            <desc>Created with Sketch.</desc>
+            <defs />
+            <g
+                id="Page-1"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd">
+                <g id="icon-Zone-E">
+                    <path
+                        d="M36,18.00096 C36,27.94176 27.9408,36.00096 18,36.00096 C8.0592,36.00096 0,27.94176 0,18.00096 C0,8.05776 8.0592,0.00096 18,0.00096 C27.9408,0.00096 36,8.05776 36,18.00096"
+                        id="Fill-1"
+                        fill="#007AC9"
+                    />
+                    <path
+                        d="M9.94704,8.85792 C9.94704,7.78992 10.77024,6.96672 11.83584,6.96672 L17.90304,6.96672 C24.60864,6.96672 29.24064,11.56992 29.24064,17.57472 L29.24064,17.63472 C29.24064,23.63952 24.60864,28.30512 17.90304,28.30512 L11.83584,28.30512 C10.77024,28.30512 9.94704,27.48192 9.94704,26.41152 L9.94704,8.85792 Z M17.90304,24.88992 C22.38384,24.88992 25.30944,21.87312 25.30944,17.69712 L25.30944,17.63472 C25.30944,13.45872 22.38384,10.38192 17.90304,10.38192 L13.69584,10.38192 L13.69584,24.88992 L17.90304,24.88992 Z"
+                        id="Fill-4"
+                        fill="#FFFFFF"
+                    />
+                </g>
+            </g>
+        </svg>
+    </div>
+);
+
+export default EZone;

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);