WebApp update - Code quality

.codeclimate.yml

@@ -1,42 +1,31 @@
 ---
-engines:
+version: "2"
+plugins:
   shellcheck:
     enabled: true
-  checkstyle:
-    enabled: true
-    channel: "beta"
   csslint:
     enabled: true
   duplication:
     enabled: true
     config:
-      enabled: true
-      threshold: 7
       languages:
-        - typescript
-        - javascript
-        - python
-        - php
+        - typescript:
+        - javascript:
+        - python:
+        - php:
   eslint:
     enabled: true
+    channel: "eslint-8"
     config:
-      config: .eslintrc
+      config: client/.eslintrc
   fixme:
     enabled: true
-ratings:
-  paths:
-    - "**.css"
-    - "**.inc"
-    - "**.ts"
-    - "**.js"
-    - "**.jsx"
-    - "**.tsx"
-    - "**.module"
-    - "**.sh"
-    - "**.bash"
-exclude_paths:
+exclude_patterns:
   - "**.md"
   - "**.txt"
   - "**.json"
   - docs/
-  - .husky/
+  - "**/node_modules/"
+  - "**/build/"
+  - "**/public/"
+  - "**/coverage"

.husky/pre-commit → .git-hooks/pre-commit

@@ -1,10 +1,9 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 if git diff --cached --name-only | grep "^client/" >/dev/null; then
-    cd client
+    cd client || exit
     yarn install
     yarn format && yarn syntax
 else
-    echo "No changes in the client directory. Skipping pre-commit hook."
+    printf "No changes in the client directory. Skipping pre-commit hook."
 fi

.git-hooks/pre-push

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+
+BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+
+if git diff --name-only origin/"$BRANCH_NAME"...HEAD | grep "^client/" >/dev/null; then
+    cd client || exit
+    yarn install
+    yarn jest . --coverage=false
+else
+    echo "No changes in the client directory. Skipping pre-push hook."
+fi

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/client.yml

@@ -13,8 +13,6 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup node
-        env:
-          HUSKY_SKIP_INSTALL: 1
         uses: actions/setup-node@v3
         with:
           node-version: 18

README.md

@@ -13,15 +13,23 @@ The best way to use the DTaaS software is via a vagrant virtual machine. The ins
 The rest of the information on this page is aimed at current and potential contributors to DTaaS software development.
 
 To install the development environment, run
+
 ```bash
 bash script/install.bash
 ```
 
+Before you make commits, please install the git hooks provided in the repository.
+
+```shell
+script/configure-git-hooks.sh
+```
+
+This will ensure that your commits are formatted correctly and that the unittests pass before you push your changes. Be aware that the tests take a long time to run. If you want to skip the tests or formatting, you can use the `--no-verify` flag on `git commit` or `git push`.
+
 ### Infrastructure Components
 
 The application uses [Træfik](https://github.com/traefik/traefik) and [ML Workspace](https://github.com/ml-tooling/ml-workspace) open-source components. It is possible to run [jupyterlab notebooks](script/jupyter.sh), [Grafana servers](script/grafana.sh) and [InfluxDB](script/influx.sh) as part of the DTaaS software. But terminal-based Jupyterlab, Grafana and InfluxDB are not installed in the default setup.
 
-
 ## License
 
 This software is owned by [The INTO-CPS Association](https://into-cps.org/) and is available under [the INTO-CPS License](./LICENSE.txt).

client/.eslintrc

@@ -1,7 +1,7 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
+    "es2022": true,
     "jest": true,
     "jest/globals": true
   },
@@ -30,11 +30,9 @@
   "parserOptions": {
     "requireConfigFile": false,
     "ecmaFeatures": {
-      "emacVersion": 6,
-      "sourceType": "module",
       "jsx": true
     },
-    "ecmaVersion": 2018,
+    "ecmaVersion": 11,
     "sourceType": "module" // Allows for the use of imports
   },
   "plugins": ["jsx-a11y", "react", "jest", "@typescript-eslint"],

client/README.md

@@ -8,7 +8,7 @@ The following steps are required to setup the environment and build the applicat
 
 ### Prerequisites
 
-If you are using yarn 2, please change the package.json to use `postinstall` instead `prepare` scripts. This application is using **Husky** for pre-commit hooks, read more about husky and yarn 2 [here](https://typicode.github.io/husky/#/?id=yarn-2).
+If you are using yarn 2, please change the package.json to use `postinstall` instead `prepare` scripts.
 
 ```bash
 cd client
@@ -27,12 +27,23 @@ yarn clean      #clean the directory of temporary files
 
 ---
 
-## Configuration
+## Custom configuration
 
-To customize the configuration of endpoints to your preference, it is recommended that you configure the environment file of your choice located in the `'./config'` directory.
+It is required to have a `env.js` in the root directory of `build` during runtime. This file is used to configure the endpoints of the application. See the [build instructions](../docs/CLIENT.md) for an example.
 
-Once the configuration file has been updated, please rerun the configuration bash to apply the changes.
+### Multiple configurations
+
+If you want to switch between multiple environments, you can use the `yarn configapp` command to copy a configuration file from `client/config/` to the `build` directory.
+
+1. Save the file as `client/config/<config-name>.js`.
+2. Run the config command to copy the file to the `public` directory and the `build` directory, if a build is present.
 
 ```bash
-yarn configapp #prod | dev
+yarn configapp <config-name>
 ```
+
+> Which ever env.js file is present in the `public` directory during `yarn build`, will be used in the build.
+
+It is therefore reccommend to keep the configurations in the `client/config/` directory and use the `yarn configapp` command to switch between them.
+
+---

client/jest.config.json

@@ -26,8 +26,5 @@
   "verbose": true,
   "testRegex": "/test/.*\\.test.tsx?$",
   "modulePaths": ["<rootDir>/src/"],
-  "setupFilesAfterEnv": [
-    "<rootDir>/test/unitTests/config/test.env.js",
-    "<rootDir>/test/unitTests/config/importJestDom.ts"
-  ]
+  "setupFilesAfterEnv": ["<rootDir>/test/unitTests/jest.setup.ts"]
 }

client/package.json

@@ -21,7 +21,7 @@
     "start": "script/start.bash",
     "clean": "script/clean.bash",
     "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
-    "prepare": "cd .. && husky install"
+    "prepare": "../script/configure-git-hooks.sh"
   },
   "eslintConfig": {
     "extends": [
@@ -40,22 +40,28 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "react-router-dom": "^6.3.0",
+    "react-tabs": "^6.0.0",
     "recharts": "^2.1.13",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.0.1",
+    "styled-components": "^5.3.9",
     "typescript": "^4.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.21.0",
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.32.1",
+    "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
     "eslint": "^8.22.0",
@@ -65,11 +71,11 @@
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
-    "husky": "^8.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "playwright": "^1.25.0",
+    "playwright": "^1.32.1",
     "prettier": "2.7.1",
+    "react-iframe": "^1.8.5",
     "react-scripts": "^5.0.1",
     "ts-jest": "^29.0.5"
   },

client/script/build.bash

@@ -1,4 +1,5 @@
 #!/bin/bash
-export PATH="$(yarn bin):$PATH"
+PATH="$(yarn bin):$PATH"
+export PATH
 #babel ./src --out-dir build --copy-files
-react-scripts build
+react-scripts build

client/script/config.bash

@@ -1,7 +1,7 @@
+#!/bin/bash
 # copy the correct environment variables file to react SPA
 # https://stackoverflow.com/questions/51653931/react-configuration-file-for-post-deployment-settings
 # https://dev.to/akdevcraft/react-runtime-variables-49dc
-#!/bin/bash
 mode=$1
 if [ -z "$mode" ]; then
     printf "Use yarn configapp with either dev, prod or test:"
@@ -17,20 +17,21 @@ set_env() {
     fi
 }
 
-case "$mode" in 
+case "$mode" in
 
-    dev)
-        set_env dev
-        ;;
-    prod)
-        set_env prod
-        ;;
-    test)
-        set_env test
-        ;;
-    *) echo "Invalid mode $mode - use 'dev', 'prod' or 'test'"
-        exit 1
-        ;;
+dev)
+    set_env dev
+    ;;
+prod)
+    set_env prod
+    ;;
+test)
+    set_env test
+    ;;
+*)
+    echo "Invalid mode $mode - use 'dev', 'prod' or 'test'"
+    exit 1
+    ;;
 esac
 
 exit 0

client/script/syntax.bash

@@ -1,4 +1,5 @@
 #!/bin/bash
-export PATH="$(yarn bin):$PATH"
+PATH="$(yarn bin):$PATH"
+export PATH
 printf "Running eslint"
 eslint .

client/script/test.bash

@@ -1,12 +1,26 @@
 #!/bin/bash
-printf "\n\n################ Testing in progress ################"
+printf "\n\n################ Testing in progress ################\n"
 printf "\n################ Running Jest ################\n"
-export PATH="$(yarn bin):$PATH"
+PATH="$(yarn bin):$PATH" # Add yarn bin to path
+export PATH
 jest .
 
+JEST_EXIT_CODE=$?
+if [ $JEST_EXIT_CODE -ne 0 ]; then
+    printf "\n\n################ Jest tests failed ################"
+    exit 1
+fi
+
 # { { yarn start 2>&3 || [ $? -eq 137 ]; } 3>&2 2>/dev/null & } <-- Does not work. Trying to only suppress error 137.
 yarn start >/dev/null & # Start server in background. Suppress stderr.
-printf "\n\n################ Running Playwright ################"
+printf "\n\n################ Running Playwright ################\n"
 playwright test
+PLAYWRGHT_EXIT_CODE=$?
+
 printf "Closing server on port 4000..."
 npx kill-port 4000
+
+if [ $PLAYWRGHT_EXIT_CODE -ne 0 ]; then
+    printf "\n\n################ Playwright tests failed ################\n"
+    exit $PLAYWRGHT_EXIT_CODE
+fi

client/src/components/Iframe.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react';
+import IframeReact from 'react-iframe';
 
 interface IFrameProps {
   url: string;
-  fullsize?: boolean;
   title: string;
 }
 
-function Iframe({ url, fullsize, title }: IFrameProps) {
+function Iframe({ url, title }: IFrameProps) {
   // Be aware sandbox is not supported by current JupyterLight implementation.
   return (
-    <iframe
+    <IframeReact
       title={title}
-      src={url}
+      url={url}
       width="100%"
-      referrerPolicy="no-referrer"
-      style={fullsize ? { flexGrow: 1 } : { height: '100%' }}
+      styles={{ flexGrow: '1' }}
     />
   );
 }