fix high and critical vulnerabilities

.eslintrc

@@ -1,25 +1,63 @@
 {
-  "extends": ["airbnb", "plugin:prettier/recommended"],
-  "plugins": ["prettier"],
-  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "prettier"
+  ],
+  "parser": "@babel/eslint-parser",
   "env": {
     "browser": true,
     "jest": true
   },
   "rules": {
-    "react/jsx-filename-extension": ["error", {
-      "extensions": [".js"]
-    }],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [
+          ".js"
+        ]
+      }
+    ],
     "import/first": 0,
     "react/forbid-prop-types": 0,
     "react/no-array-index-key": 0,
     "react/jsx-closing-bracket-location": "off",
     "react/sort-comp": 0,
-    "react/prefer-stateless-function": false,
-    "react/no-unescaped-entities": false,
+    "react/prefer-stateless-function": "off",
+    "react/no-unescaped-entities": "off",
     "operator-assignment": 0,
     "no-nested-ternary": "off",
     "prefer-destructuring": "off",
-    "prettier": true
+    "react/destructuring-assignment": "off",
+    "react/function-component-definition": "off",
+    "react/static-property-placement": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unused-class-component-methods": "off",
+    "react/no-deprecated": "off",
+    "class-methods-use-this": "off",
+    "import/no-import-module-exports": "off",
+    "import/no-cycle": "off",
+    "default-param-last": "off",
+    "lines-between-class-members": "off",
+    "import/order": "off",
+    "no-else-return": "off",
+    "react/jsx-fragments": "off",
+    "react/no-access-state-in-setstate": "off"
+  },
+  "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "plugins": [
+        [
+          "@babel/plugin-proposal-decorators",
+          {
+            "legacy": true
+          }
+        ],
+        "@babel/plugin-proposal-class-properties"
+      ]
+    }
   }
 }

.github/workflows/dev.yml

@@ -13,10 +13,9 @@ jobs:
         uses: actions/checkout@v4
       - name: Cypress run
         uses: cypress-io/github-action@v6
-        with:
-          config-file: /cypress.dev.json
         env:
           CYPRESS_BASE_URL: https://dev.kartat.hsl.fi/julkaisin
+          CYPRESS_API_URL: https://dev.kartat.hsl.fi/julkaisin-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 }}

.nvmrc

@@ -0,0 +1 @@
+20

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:16-alpine as builder
+FROM node:20-alpine AS builder
 
-ENV WORK /opt/publisher
+ENV WORK=/opt/publisher
 
 # Create app directory
 RUN mkdir -p ${WORK}

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [require.resolve('babel-preset-react-app')],
+    plugins: [[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }]],
+  };
+};

config-overrides.js

@@ -1,3 +1,37 @@
 const { override, addBabelPlugin } = require('customize-cra');
 
-module.exports = override(addBabelPlugin(['@babel/plugin-proposal-decorators', { legacy: true }]));
+// Patch react-scripts' webpackDevServer config to use the new setupMiddlewares
+// API instead of the deprecated onBeforeSetupMiddleware/onAfterSetupMiddleware.
+// react-scripts 5 still uses the old API, causing deprecation warnings in
+// webpack-dev-server 4.7+.
+const patchDevServer = configFn => (...args) => {
+  const config = configFn(...args);
+  const { onBeforeSetupMiddleware, onAfterSetupMiddleware, ...rest } = config;
+  return {
+    ...rest,
+    setupMiddlewares(middlewares, devServer) {
+      if (onBeforeSetupMiddleware) {
+        onBeforeSetupMiddleware(devServer);
+      }
+      if (onAfterSetupMiddleware) {
+        onAfterSetupMiddleware(devServer);
+      }
+      return middlewares;
+    },
+  };
+};
+
+// Suppress source-map-loader warnings from node_modules that ship broken
+// source maps (e.g. react-slidedown references .jsx files it doesn't publish).
+const ignoreSourceMapWarnings = config => ({
+  ...config,
+  ignoreWarnings: [...(config.ignoreWarnings || []), /Failed to parse source map/],
+});
+
+module.exports = {
+  webpack: override(
+    addBabelPlugin(['@babel/plugin-proposal-decorators', { legacy: true }]),
+    ignoreSourceMapWarnings,
+  ),
+  devServer: patchDevServer,
+};

cypress/plugins/index.js → cypress.config.js

@@ -2,71 +2,70 @@ const fs = require('fs-extra');
 const path = require('path');
 const _ = require('lodash');
 const dotenv = require('dotenv');
-
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
+const { defineConfig } = require('cypress');
 
 async function getConfigurationByFile(file) {
   if (!file) {
     return {};
   }
 
   const pathToConfigFile = path.resolve(`cypress.${file}.json`);
+  if (!(await fs.pathExists(pathToConfigFile))) {
+    return {};
+  }
+
   return fs.readJson(pathToConfigFile);
 }
 
 async function readEnvVars() {
   const config = {};
-
   const appRoot = await fs.realpath(process.cwd());
   const envPaths = [path.resolve(appRoot, '.env')];
   const envObjects = [];
 
   for (const envPath of envPaths) {
-    const pathExists = await fs.exists(envPath);
-
-    if (!pathExists) {
+    if (!(await fs.pathExists(envPath))) {
       continue;
     }
-
     const envFile = await fs.readFile(envPath, 'utf8');
-    const envContent = dotenv.parse(envFile);
-    envObjects.push(envContent);
+    envObjects.push(dotenv.parse(envFile));
   }
 
   const combinedFiles = _.merge({}, ...envObjects);
-
   const CYPRESS_PREFIX = /^CYPRESS_/i;
 
-  // Add CYPRESS-prefixed vars to the config.
   Object.entries(combinedFiles).forEach(([key, value]) => {
     config[key] = value;
   });
 
-  // Add CYPRESS-prefixed vars from the environment to the config.
   for (const [envName, envValue] of Object.entries(process.env)) {
     if (envName.match(CYPRESS_PREFIX)) {
       config[envName] = envValue;
     }
   }
+
   return config;
 }
 
-module.exports = async (on, config) => {
+async function setupNodeEvents(on, config) {
   const configFile = config.env.configFile || '';
-
   const envVars = await readEnvVars();
   const envConfig = await getConfigurationByFile(configFile);
 
   return _.merge({}, config, { env: envVars }, envConfig);
-};
+}
+
+module.exports = defineConfig({
+  apiUrl: process.env.CYPRESS_API_URL || 'http://localhost:4000',
+  e2e: {
+    baseUrl: process.env.CYPRESS_BASE_URL || 'http://localhost:3000',
+    numTestsKeptInMemory: 1,
+    projectId: '3o6x11',
+    specPattern: 'cypress/integration/**/*.spec.js',
+    supportFile: 'cypress/support/index.js',
+    setupNodeEvents,
+    viewportWidth: 800,
+    viewportHeight: 1100,
+    video: true,
+  },
+});

cypress/integration/general.spec.js

@@ -1,4 +1,4 @@
-const uuidv4 = require('uuid/v4');
+const { v4: uuidv4 } = require('uuid');
 
 const API_URL = Cypress.config().apiUrl;
 const TEST_PREFIX = 'CY-TEST';
@@ -87,9 +87,8 @@ describe('General tests', () => {
     cy.get('[data-cy=prompt-textfield]').should('have.value', uuid);
     cy.get('[data-cy=prompt-ok]').should('have.enabled');
 
-    cy.server();
-    cy.route('POST', `${API_URL}/templates`).as('postTemplate');
-    cy.route('DELETE', `${API_URL}/templates`).as('deleteTemplate');
+    cy.intercept('POST', `${API_URL}/templates`).as('postTemplate');
+    cy.intercept('DELETE', `${API_URL}/templates/*`).as('deleteTemplate');
 
     cy.get('[data-cy=prompt-ok]').click();
 
@@ -118,8 +117,7 @@ describe('General tests', () => {
   it('Create and delete build', () => {
     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=create-build]').click();
     cy.get('[data-cy=prompt-textfield]').type(uuid, { force: true });
@@ -136,12 +134,16 @@ describe('General tests', () => {
       .its('body')
       .then(buildArr => {
         const build = buildArr.find(build => build.title === uuid);
-        cy.route('DELETE', `${API_URL}/builds/${build.id}`).as('deleteBuild');
+        if (build) {
+          cy.intercept('DELETE', `${API_URL}/builds/${build.id}`).as('deleteBuild');
+        }
 
         cy.get(`[data-cy=${uuid}-remove]`).click();
         cy.get('[data-cy=confirm-ok]').click();
 
-        cy.wait('@deleteBuild');
+        if (build) {
+          cy.wait('@deleteBuild');
+        }
         cy.get(`[data-cy=${uuid}]`).should('not.exist');
       });
   });
@@ -150,10 +152,9 @@ describe('General tests', () => {
     const buildTitle = `${TEST_PREFIX}-${uuidv4()}`;
     const templateId = `${TEST_PREFIX}-${uuidv4()}`;
 
-    cy.server();
-    cy.route('POST', `${API_URL}/builds`).as('postBuild');
-    cy.route('POST', `${API_URL}/templates`).as('postTemplate');
-    cy.route('POST', `${API_URL}/posters`).as('postPoster');
+    cy.intercept('POST', `${API_URL}/builds`).as('postBuild');
+    cy.intercept('POST', `${API_URL}/templates`).as('postTemplate');
+    cy.intercept('POST', `${API_URL}/posters`).as('postPoster');
 
     cy.get('[data-cy=create-build]').click();
     cy.get('[data-cy=prompt-textfield]').type(buildTitle, { force: true });

package.json

@@ -8,15 +8,15 @@
     "@material-ui/core": "^4.11.0",
     "apollo-link": "^1.2.2",
     "apollo-link-http": "^1.5.4",
-    "cypress": "^3.8.2",
+    "cypress": "13",
     "cypress-commands": "^1.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "graphql": "^0.13.2",
-    "graphql-tag": "^2.9.2",
+    "enzyme": "3",
+    "enzyme-adapter-react-16": "1",
+    "graphql": "15",
+    "graphql-tag": "2",
     "history": "^4.9.0",
     "lodash": "^4.17.21",
-    "material-ui": "^0.20.2",
+    "material-ui": "0",
     "mobx": "^4",
     "mobx-react": "^5.2.3",
     "moment": "^2.29.4",
@@ -27,30 +27,40 @@
     "react-dropzone": "^4.3.0",
     "react-hot-loader": "^4.3.3",
     "react-resizable": "^1.7.5",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "5",
     "react-select": "^5.2.2",
-    "react-slidedown": "^1.3.0",
+    "react-slidedown": "2.4.7",
     "react-test-renderer": "^16.12.0",
     "react-virtualized": "^9.19.1",
-    "serve": "^11.1.0",
-    "styled-components": "^3.3.2"
+    "serve": "14",
+    "styled-components": "5"
   },
   "scripts": {
     "start": "react-app-rewired start",
     "bundle": "react-app-rewired build",
     "build": "yarn lint && CI=true yarn test && yarn bundle",
     "test": "react-app-rewired test --env=jsdom",
     "eject": "react-app-rewired eject",
-    "lint": "yarn eslint src",
+    "lint": "NODE_ENV=development yarn eslint src",
     "serve": "serve build",
     "prettier": "prettier src/**/* --write",
     "cypress": "cypress open"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.29.0",
     "babel-eslint": "10.1.0",
     "customize-cra": "^1.0.0",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^1.13.5",
     "react-app-rewired": "^2.0.0"
@@ -64,10 +74,13 @@
     "eventsource": "1.1.2",
     "form-data": "2.5.4",
     "loader-utils": "1.4.2",
-    "minimatch": "3.1.2",
-    "jest": "24.9.0",
-    "babel-jest": "24.9.0",
-    "shell-quote": "1.7.3"
+    "minimatch": "3.1.4",
+    "shell-quote": "1.7.3",
+    "node-fetch": "2.7.0",
+    "nth-check": "2.0.1",
+    "serialize-javascript": "7.0.3",
+    "underscore": "1.13.8",
+    "cheerio": "1.0.0-rc.12"
   },
   "browserslist": [
     ">0.2%",