Merge pull request #453 from City-of-Helsinki/develop

Develop to master

.babelrc

@@ -2,24 +2,31 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react",
-    "@babel/preset-flow",
+    "@babel/preset-flow"
   ],
   "env": {
     "test": {
-      "plugins": ["istanbul"]
+      "plugins": [
+        "istanbul"
+      ]
     }
   },
   "plugins": [
     "react-hot-loader/babel",
     "@babel/plugin-proposal-class-properties",
-    ["module-resolver", {
-      "root": ["./src"],
-      "alias": {
-        "$src": "./src",
-        "$assets": "./assets",
-        "$components": "./src/components",
-        "$util": "./src/util",
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./src"
+        ],
+        "alias": {
+          "$src": "./src",
+          "$assets": "./assets",
+          "$components": "./src/components",
+          "$util": "./src/util"
+        }
       }
-    }]
+    ]
   ]
-}
+}

.env.example

@@ -1,10 +1,10 @@
 # Required
 API_URL=https://mvj.dev.hel.ninja/v1
 STORAGE_PREFIX=MVJ
-
+PORT=3000
 # The SSO OpenId Connect settings
 OPENID_CONNECT_API_TOKEN_KEY=https://api.hel.fi/auth/mvj
 OPENID_CONNECT_API_TOKEN_URL=https://api.hel.fi/sso/api-tokens/
 OPENID_CONNECT_AUTHORITY_URL=https://api.hel.fi/sso/openid/
-OPENID_CONNECT_CLIENT_ID=
-OPENID_CONNECT_SCOPE=openid profile https://api.hel.fi/auth/mvj
+OPENID_CONNECT_CLIENT_ID=https://api.hel.fi/auth/mvj
+OPENID_CONNECT_SCOPE=openid profile mvj https://api.hel.fi/auth/mvj

.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:flowtype/recommended"
   ],
   "env": {
     "browser": true,
@@ -31,11 +32,12 @@
     "no-case-declarations": "off"
   },
   "plugins": [
-    "react"
+    "react",
+    "flowtype"
   ],
   "settings": {
     "react": {
-      "version": "detect",
+      "version": "detect"
     }
-  },
+  }
 }

.flowconfig

@@ -19,4 +19,4 @@ module.name_mapper='^\$components/\(.*\)$' -> '<PROJECT_ROOT>/src/components/\1'
 module.name_mapper='^\$src/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
 module.name_mapper='^\$util/\(.*\)$' -> '<PROJECT_ROOT>/src/util/\1'
 
-suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
+# suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

.github/workflows/sonarcloud.yml

@@ -0,0 +1,25 @@
+on:
+  push:
+    branches: [master, develop]
+  pull_request:
+    branches: [master, develop]
+
+name: Sonarcloud Scan
+jobs:
+  sonarcloud:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: SonarCloud Scan
+      uses: sonarsource/sonarcloud-github-action@master
+      with:
+        args: >
+          -Dsonar.organization=managedcloudapplications
+          -Dsonar.projectKey=mvj-ui
+          -Dsonar.sources=.
+          -Dsonar.host.url=https://sonarcloud.io
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.gitignore

@@ -12,3 +12,6 @@ npm-debug.log
 /log
 
 report.*.json
+
+docker-compose.override.yml
+docker-compose.dev.yml

.prod/nginx.conf

@@ -0,0 +1,40 @@
+pid        /tmp/nginx.pid;
+
+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       8080;
+        server_name  localhost;
+
+        location /healthz {
+            return 200 'OK';
+        }
+
+        location /readiness {
+            return 200 'OK';
+        }
+
+        location / {
+            root   /usr/share/nginx/html;
+            try_files $uri /index.html;
+        }
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}
+

Dockerfile

@@ -1,12 +1,90 @@
-FROM node:10.15
+# ===============================================
+FROM node:14-slim AS appbase
+# ===============================================
+
+RUN groupadd -g 1001 appuser \
+  && useradd --create-home --no-log-init -u 1001 -g 1001 appuser
+
+RUN mkdir /app
+RUN chown -R appuser:appuser /app
 
 WORKDIR /app
 
-COPY package.json yarn.lock ./
-RUN yarn install && yarn cache clean --force
+# Offical image has npm log verbosity as info. More info - https://github.com/nodejs/docker-node#verbosity
+ENV NPM_CONFIG_LOGLEVEL warn
+
+# set our node environment, either development or production
+# defaults to production, compose overrides this to development on build and run
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
+
+# Global npm deps in a non-root user directory
+ENV NPM_CONFIG_PREFIX=/app/.npm-global
+ENV PATH=$PATH:/app/.npm-global/bin
+
+# Yarn
+ENV YARN_VERSION 1.22.19
+RUN yarn policies set-version $YARN_VERSION
+
+# Use non-root user
+USER appuser
+
+# Copy package.json and package-lock.json/yarn.lock files
+COPY package*.json *yarn* ./
+
+# Install npm depepndencies
+ENV PATH /app/node_modules/.bin:$PATH
+
+USER root
+RUN apt-get update
+RUN apt-get install -y --no-install-recommends build-essential python3
+
+USER appuser
+RUN yarn config set network-timeout 300000
+RUN yarn && yarn cache clean --force
+
+USER root
+RUN apt-get remove -y build-essential
+RUN apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false
+RUN rm -rf /var/lib/apt/lists/*
+RUN rm -rf /var/cache/apt/archives
+
+# =============================
+FROM appbase as development
+# =============================
+
+# Set NODE_ENV to development in the development container
+ARG NODE_ENV=development
+ENV NODE_ENV $NODE_ENV
+
+# copy in our source code last, as it changes the most
+COPY --chown=appuser:appuser . .
+
+# Bake package.json start command into the image
+CMD ["react-scripts", "start"]
+
+# ===================================
+FROM appbase as staticbuilder
+# ===================================
+
+COPY . /app
+RUN yarn compile
+
+# =============================
+FROM registry.access.redhat.com/ubi8/nginx-120 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/dist /usr/share/nginx/html
 
-COPY . .
+# Copy nginx config
+COPY .prod/nginx.conf  /etc/nginx/
 
-VOLUME [ "/app" ]
+EXPOSE 8080
 
-CMD ["yarn", "start"]
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,12 @@
+FROM node:10.15
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+RUN yarn install && yarn cache clean --force
+
+COPY . .
+
+VOLUME [ "/app" ]
+
+CMD ["yarn", "start"]

README.md

@@ -3,7 +3,7 @@
 
 
 
-# MVJ UI 
+# MVJ UI
 City of Helsinki ground rental system UI
 
 Based on [React Boilerplate](https://github.com/nordsoftware/react-boilerplate).
@@ -54,20 +54,29 @@ Make sure you have [Yarn](https://yarnpkg.com/en/docs/install) installed globall
 ```bash
 yarn
 ```
+#### 3. Setup Flow typing definitions for dependencies
 
-#### 3. Add .env file
+```bash
+flow-typed install
+```
+If the tool cannot be found as is, you can invoke it from
+the node binary folder manually (i.e.
+`./node_modules/.bin/flow-typed`) instead of just
+`flow-typed`).
+
+#### 4. Add .env file
 
 ```bash
 cp .env.example .env
 ```
 
-#### 4. Start the development server
+#### 5. Start the development server
 
 ```bash
 yarn start
 ```
 
-#### 5. Compile the distribution build
+#### 6. Compile the distribution build
 
 ```bash
 yarn run compile

defs/react-leaflet.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare module 'react-leaflet' {
+  declare module.exports: any;
+}

docker-compose.yml

@@ -1,7 +1,9 @@
 version: '3'
 services:
     app:
-        build: .
+        build:
+          context: .
+          dockerfile: Dockerfile.dev
         env_file:
             - .env
         ports:

jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$assets/*": ["./assets/*"],
+      "$components/*": ["./src/components/*"],
+      "$src/*": ["./src/*"],
+      "$util/*": ["./src/util/*"]
+    }
+  }
+}

package.json

@@ -112,6 +112,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.1.0",
     "eslint-loader": "^2.2.1",
+    "eslint-plugin-flowtype": "6.1.1",
     "eslint-plugin-react": "^7.14.3",
     "flow-bin": "^0.158.0",
     "flow-typed": "^2.6.1",

src/api/callApi.js

@@ -2,6 +2,7 @@
 import {call, select} from 'redux-saga/effects';
 
 import {getApiToken} from '$src/auth/selectors';
+import {UI_ACCEPT_LANGUAGE_VALUE} from '$src/api/constants';
 
 function* callApi(request: Request): Generator<any, any, any> {
   const apiToken = yield select(getApiToken);
@@ -10,6 +11,11 @@ function* callApi(request: Request): Generator<any, any, any> {
     request.headers.set('Authorization', `Bearer ${apiToken}`);
   }
 
+  request.headers.set(
+    'Accept-Language',
+    UI_ACCEPT_LANGUAGE_VALUE
+  );
+
   if (request.method === 'PATCH' || request.method === 'POST' || request.method === 'PUT') {
     request.headers.set('Content-Type', 'application/json');
   }

src/api/callApiAsync.js

@@ -1,14 +1,20 @@
 // @flow
 import {store} from '$src/root/startApp';
 import {getApiToken} from '$src/auth/selectors';
+import {UI_ACCEPT_LANGUAGE_VALUE} from '$src/api/constants';
 
-const callApiAsync = async(request: Request) => {
+const callApiAsync = async (request: Request): Promise<Object> => {
   const apiToken = await getApiToken(store.getState());
 
   if (apiToken) {
     request.headers.set('Authorization', `Bearer ${apiToken}`);
   }
 
+  request.headers.set(
+    'Accept-Language',
+    UI_ACCEPT_LANGUAGE_VALUE
+  );
+
   if (request.method === 'PATCH' || request.method === 'POST' || request.method === 'PUT') {
     request.headers.set('Content-Type', 'application/json');
   }