feat: remove webpack, add Vite and Vitest KER-404

.env

@@ -0,0 +1,24 @@
+REACT_APP_KERROKANTASI_API_BASE="https://kerrokantasi.api.dev.hel.ninja"
+REACT_APP_HERO_IMAGE_URL="http://materialbank.myhelsinki.fi/detail/1192/download/7"
+REACT_APP_OPENID_CLIENT_ID="kerrokantasi-ui-dev"
+REACT_APP_OPENID_AUDIENCE="kerrokantasi-api-dev"
+REACT_APP_OPENID_AUTHORITY="https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus"
+REACT_APP_OPENID_APITOKEN_URL="https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus/protocol/openid-connect/token"
+REACT_APP_OPENID_SCOPE="openid profile email"
+REACT_APP_ENABLE_STRONG_AUTH=false
+REACT_APP_CITY_CONFIG="cities/helsinki"
+REACT_APP_SHOW_ACCESSIBILITY_INFO=true
+REACT_APP_SHOW_SOCIAL_MEDIA_SHARING=true
+REACT_APP_ENABLE_COOKIES=true
+REACT_APP_ENABLE_COOKIEBOT=false
+REACT_APP_COOKIEBOT_DATA_CBID=
+REACT_APP_ADMIN_HELP_URL="https://drive.google.com/open?id=1vtUNzbJNVcp7K9JPrE6XP8yTmkBLW3N3FGEsR1NbbIw"
+REACT_APP_EMPTY_COMMENT_STRING="-"
+REACT_APP_MAINTENANCE_SHOW_NOTIFICATION=false
+REACT_APP_MAINTENANCE_DISABLE_LOGIN=false
+REACT_APP_MAINTENANCE_DISABLE_COMMENTS=false
+REACT_APP_MATOMO_COOKIE_DOMAIN=
+REACT_APP_MATOMO_DOMAINS=
+REACT_APP_MATOMO_SIDE_ID=
+REACT_APP_MATOMO_SCRIPT_URL=
+REACT_APP_MATOMO_SCRIPT_FILENAME=

.env.local.example

@@ -0,0 +1,24 @@
+REACT_APP_KERROKANTASI_API_BASE="http://localhost:8080/"
+REACT_APP_HERO_IMAGE_URL=
+REACT_APP_OPENID_CLIENT_ID=
+REACT_APP_OPENID_AUDIENCE=
+REACT_APP_OPENID_AUTHORITY=
+REACT_APP_OPENID_APITOKEN_URL=
+REACT_APP_OPENID_SCOPE=
+REACT_APP_ENABLE_STRONG_AUTH=false
+REACT_APP_CITY_CONFIG=
+REACT_APP_SHOW_ACCESSIBILITY_INFO=false
+REACT_APP_SHOW_SOCIAL_MEDIA_SHARING=true
+REACT_APP_ENABLE_COOKIES=true
+REACT_APP_ENABLE_COOKIEBOT=false
+REACT_APP_COOKIEBOT_DATA_CBID=
+REACT_APP_ADMIN_HELP_URL=
+REACT_APP_EMPTY_COMMENT_STRING=
+REACT_APP_MAINTENANCE_SHOW_NOTIFICATION=false
+REACT_APP_MAINTENANCE_DISABLE_LOGIN=false
+REACT_APP_MAINTENANCE_DISABLE_COMMENTS=false
+REACT_APP_MATOMO_COOKIE_DOMAIN=
+REACT_APP_MATOMO_DOMAINS=
+REACT_APP_MATOMO_SIDE_ID=
+REACT_APP_MATOMO_SCRIPT_URL=
+REACT_APP_MATOMO_SCRIPT_FILENAME=

.env.test

@@ -0,0 +1 @@
+REACT_APP_KERROKANTASI_API_BASE='http://example.com/'

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "vitest-globals/env": true
   },
   "extends": [
     "react-app",
@@ -10,6 +11,7 @@
     "plugin:import/warnings",
     "airbnb",
     "prettier",
+    "plugin:vitest-globals/recommended",
     "plugin:sonarjs/recommended"
   ],
   "parser": "@babel/eslint-parser",

.gitignore

@@ -45,3 +45,12 @@ report/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.env.local
+/build
+
+public/env-config.js
+public/test-env-config.js
+
+cities/**/env-config.js
+cities/**/test-env-config.js

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn test
+yarn test --watch=false

.prod/nginx.conf

@@ -0,0 +1,40 @@
+pid        /tmp/nginx.pid; #for running as non-root
+
+events {
+    worker_connections  4096;  ## Default: 1024
+}
+http {
+    #for running as non-root
+    client_body_temp_path /tmp/client_temp;
+    proxy_temp_path       /tmp/proxy_temp_path;
+    fastcgi_temp_path     /tmp/fastcgi_temp;
+    uwsgi_temp_path       /tmp/uwsgi_temp;
+    scgi_temp_path        /tmp/scgi_temp;
+
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    server {
+        listen       8086;
+        server_name  localhost;
+
+        location /healthz {
+            return 200 'OK';
+        }
+
+        location /readiness {
+            return 200 'OK';
+        }
+
+        location / {
+            root   /usr/share/nginx/html;
+            try_files $uri /index.html;
+            include /etc/nginx/env/nginx_env.conf;
+        }
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}

.prod/nginx_env.conf

@@ -0,0 +1,2 @@
+# This is a placeholder file for additional environment configuration
+# Actual content is defined by pipeline.

Dockerfile

@@ -1,6 +1,6 @@
-# ==========================================
-FROM registry.access.redhat.com/ubi8/nodejs-18 AS deployable
-# ==========================================
+# ===============================================
+FROM registry.access.redhat.com/ubi9/nodejs-18 as appbase
+# ===============================================
 
 WORKDIR /app
 
@@ -15,25 +15,80 @@ ARG NODE_ENV=production
 ENV NODE_ENV $NODE_ENV
 
 # Yarn
-ENV YARN_VERSION 1.19.1
+ENV YARN_VERSION 1.22.19
 RUN yarn policies set-version $YARN_VERSION
 
 # Most files from source tree are needed at runtime
-COPY . /app/
+# COPY . /app/
 RUN chown -R default:root /app
 
 # Install npm dependencies and build the bundle
 USER default
 
-RUN yarn cache clean --force
-RUN yarn
+COPY --chown=default:root package.json yarn.lock /app/
+COPY --chown=default:root ./scripts /app/scripts
+COPY --chown=default:root ./public /app/public
+COPY --chown=default:root ./cities /app/cities
+COPY --chown=default:root ./assets /app/assets
+
+RUN yarn config set network-timeout 300000
+RUN yarn && yarn cache clean --force
+
+COPY --chown=default:root index.html vite.config.mjs .eslintrc.json .eslintignore .prettierrc .env* /app/
+COPY --chown=default:root ./src /app/src
+
+# =============================
+FROM appbase as development
+# =============================
+
+WORKDIR /app
+
+# Set NODE_ENV to development in the development container
+ARG NODE_ENV=development
+ENV NODE_ENV $NODE_ENV
+
+# Bake package.json start command into the image
+CMD yarn start
+
+# ===================================
+FROM appbase as staticbuilder
+# ===================================
+
+WORKDIR /app
+
 RUN yarn build
 
-# Run the frontend server using arbitrary user to simulate
-# Openshift when running using fe. Docker. Under actual
-# Openshift, the user will be random
-USER 158435:0
-CMD [ "yarn", "start" ]
+# =============================
+FROM registry.access.redhat.com/ubi9/nginx-122 as production
+# =============================
+
+USER root
+
+RUN chgrp -R 0 /usr/share/nginx/html && \
+    chmod -R g=u /usr/share/nginx/html
+
+# Copy static build
+COPY --from=staticbuilder /app/build /usr/share/nginx/html
+
+# Copy nginx config
+COPY .prod/nginx.conf  /etc/nginx/nginx.conf
+RUN mkdir /etc/nginx/env
+COPY .prod/nginx_env.conf  /etc/nginx/env/
+
+WORKDIR /usr/share/nginx/html
+
+# Copy default environment config and setup script
+COPY ./scripts/env.sh .
+COPY .env .
+
+# Copy package.json so env.sh can read it
+COPY package.json .
+
+RUN chmod +x env.sh
+
+USER 1001
+
+CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
 
 # Expose port 8086
 EXPOSE 8086

README.md

@@ -1,7 +1,5 @@
 # Kerrokantasi UI
 
-[![codecov](https://codecov.io/gh/City-of-Helsinki/kerrokantasi-ui/branch/main/graph/badge.svg)](https://codecov.io/gh/City-of-Helsinki/kerrokantasi-ui)
-
 Kerrokantasi UI is the user interface powering kerrokantasi.hel.fi service. It
 is a full featured interface for both answering and creating questionnaires as
 supported by Kerrokantasi API.
@@ -16,47 +14,61 @@ supported by Kerrokantasi API.
 
 ### Configuration
 
-`config_dev.toml` is used for configuration when NODE_ENV != "production". It
-is in TOML-format, which for our purposes is `Key=Value` format.
-
-When NODE_ENV=="production", only environment variables are used for
-configuration. This is done because we've had several painful accidents
-with leftover configuration files. The environment variables are named
-identically to the ones used in config_dev.toml. Do note that the variables
-are case insensitive, ie. `KeRRokanTasi_aPi_bASe` is a valid name. Go wild!
-
-In the repository root there is `config_dev.toml.example` which contains
-every setting and comments explaining their use. If you only want to give
-kerrokantasi-ui a test, all configuration you need to do is:
-`cp config_dev.toml.example config_dev.toml`. That will give you a partially
-working configuration for browsing test questionnaires in our test API.
+`.env` is the preliminary configuration file. To use local configuration, create `.env.local` which will override other configuration (see `.env.local.example`).
 
 ### Running development server
 
 ```
-yarn build
 yarn start
 ```
 
-No separate build step is required to start the development server.
-It is somewhat unstable, but provides hot reloading:
-
-```
-yarn run dev
-```
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The server will output the URL for accessing kerrokantasi-ui.
+You will also see any lint errors in the console.
 
-### Running in production
+https://vitejs.dev/guide/cli.html#vite
 
-You can use your favorite process manager to run `yarn build` and `yarn start`.
-Node-specific managers can also directly run `compile(/index.js)` & `server(/index.js)`.
+Scripts generates first environment variables to `public/env-config.js` with `scripts/update-runtime-env.js`, which contains the
+actual used variables when running the app. App is not using default `process.env` way to refer of variables but
+`window._env_` object.
 
 ### Other commands
+```yarn build```
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles app in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [build](https://vitejs.dev/guide/cli.html#build) for more information.
+
+Note that running built application locally you need to generate also `public/env-config.js` file. It can be done with
+`yarn update-runtime-env`. By default it's generated for development environment if no `NODE_ENV` is set.
+
+```yarn run test```
+
+See the section about [running tests](https://vitest.dev/guide/) for more information.
+
+Scripts generates first environment variables to `public/test-env-config.js` with `scripts/update-runtime-env.js`, which contains the
+actual used variables when running the app. App is not using default `process.env` way to refer of variables but
+`window._env_` object.
+
+```yarn test:e2e```
+
+Runs end-to-end tests using [Playwright](https://playwright.dev).
+
+It is recommended to run these tests to ensure the overall functionality and user experience of the application.
+
+```yarn update-runtime-env```
+
+Generates variable object used when app is running. Generated object is stored at `public/env-config.js` and available
+as `window._env_` object.
+
+Generation uses values from either
+[environment variables or files](https://vitejs.dev/guide/env-and-mode.html).
 
-- `yarn run fetch-plugins`: fetch optional plugins (see below)
-- `yarn run test`: run tests
-- `yarn test -- -u` update tests
+At the production deployment same generation is done with [`env.sh`](scripts/env.sh).
 
 ### Running service in Docker
 
@@ -124,7 +136,7 @@ and execute the following four commands inside your docker container:
 
 #### Configure Tunnistamo to frontend
 
-Change the following configuration in `config_dev.toml`
+Change the following configuration in `.env.local`
 
 ```
 kerrokantasi_api_base="http://localhost:8080"
@@ -138,7 +150,7 @@ openid_scope="openid profile https://api.hel.fi/auth/kerrokantasi"
 
 #### Configure Helsinki Profiili to frontend
 
-Change the following configuration in `config_dev.toml`
+Change the following configuration in `.env.local`
 
 ```
 kerrokantasi_api_base="http://localhost:8080"
@@ -188,7 +200,7 @@ The styles are based on Bootstrap version 3 (Sass).
 
 ## Using the whitelabel theme assets
 
-To have a non city specific theme, change the `city_config` config value to `whitelabel`
+To have a non city specific theme, change the `REACT_APP_CITY_CONFIG` config value to `whitelabel`
 
 ## Installing city specific assets
 
@@ -209,14 +221,14 @@ a solution to this, please fix.
      ```
 2. In the `kerrokantasi-ui` project run `yarn add ../<theme-assets-folder>`
 3. Edit files in `kerrokantasi-ui/node_modules/<theme-assets-folder>` for changes to be reflected
-4. Set the `city_config` config to `<theme-assets-folder>`
+4. Set the `REACT_APP_CITY_CONFIG` config to `<theme-assets-folder>`
 
 **Production installation:**
 
 1. Add the project to the local `kerrokantasi-ui` project either by installing it
    the same way as in the dev environment, or from GitHub or if the package is published
    to npm, then install it from there.
-2. Set the `city_config` config to `<theme-assets-folder>`
+2. Set the `REACT_APP_CITY_CONFIG` config to `<theme-assets-folder>`
 
 ## Creating city specific assets
 

assets/sass/app.scss

@@ -11,4 +11,4 @@
 @import "kerrokantasi/kerrokantasi";
 
 ///// HDS React base styles
-@import "~hds-core/lib/base.min.css";
+@import "hds-core/lib/base.min.css";