Validates client config (#1181 and #1180)

-  Provides a route to validate the client config file. A comprehensive one 
   for developers (<url>/config/developer), and a simpler one for users
   (<url>/config/user)
- It will also update the client dependencies.

---------
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: atomicgamedeveloper

.codeclimate.yml

@@ -10,7 +10,7 @@ plugins:
       count_threshold: 3
       languages:
         typescript:
-          mass_threshold: 45
+          mass_threshold: 50
         javascript:
         python:
           python_version: 3

client/eslint.config.mjs

@@ -1,6 +1,7 @@
 import jsxA11Y from "eslint-plugin-jsx-a11y";
 import react from "eslint-plugin-react";
 import jest from "eslint-plugin-jest";
+import reactHooks from "eslint-plugin-react-hooks";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import globals from "globals";
 import tsParser from "@typescript-eslint/parser";
@@ -21,7 +22,7 @@ export default [{
     ignores: [
         "**/api/",
         "**/build/",
-        "**/config/",
+        "client/config/",
         "**/node_modules/",
         "**/script/",
         "**/coverage/",
@@ -40,8 +41,9 @@ export default [{
     plugins: {
         "jsx-a11y": jsxA11Y,
         react,
+        "react-hooks": reactHooks,
         jest,
-        "@typescript-eslint": typescriptEslint,
+        "@typescript-eslint": typescriptEslint
     },
 
     languageOptions: {
@@ -86,16 +88,19 @@ export default [{
         "@typescript-eslint/no-unused-vars": [
             "error",
             {
-              "caughtErrorsIgnorePattern": "^_",
+                "caughtErrorsIgnorePattern": "^_",
             }
         ],
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "error",
         "no-console": "error",
         "import/first": "error",
         "react/prop-types": "off",
         "linebreak-style": 0,
         "import/no-unresolved": "off",
         "import/extensions": "off",
         "no-use-before-define": "off",
+        "no-unreachable": "error",
     },
 }, {
     files: ["**/*.ts", "**/*.tsx"],

client/jest.config.json

@@ -4,21 +4,11 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
-  "transformIgnorePatterns": [
-    "/node_modules/(?![d3-shape|recharts]).+\\.js$"
-  ],
+  "transformIgnorePatterns": ["/node_modules/(?![d3-shape|recharts]).+\\.js$"],
   "collectCoverage": true,
-  "coverageReporters": [
-    "text",
-    "cobertura",
-    "clover",
-    "lcov",
-    "json"
-  ],
+  "coverageReporters": ["text", "cobertura", "clover", "lcov", "json"],
   "testTimeout": 15000,
-  "collectCoverageFrom": [
-    "src/**/*.{ts,tsx}"
-  ],
+  "collectCoverageFrom": ["src/**/*.{ts,tsx}"],
   "coveragePathIgnorePatterns": [
     "node_modules",
     "build",
@@ -27,21 +17,15 @@
     "src/store/store.ts",
     "src/preview/util/gitlabDriver.ts"
   ],
-  "modulePathIgnorePatterns": [
-    "test/e2e",
-    "mocks",
-    "config"
-  ],
+  "modulePathIgnorePatterns": ["test/e2e", "mocks", "config"],
   "coverageDirectory": "<rootDir>/coverage/",
   "globals": {
     "window.ENV.SERVER_HOSTNAME": "localhost",
     "window.ENV.SERVER_PORT": 3500
   },
   "verbose": true,
   "testRegex": "/test/.*\\.test.tsx?$",
-  "modulePaths": [
-    "<rootDir>/src/"
-  ],
+  "modulePaths": ["<rootDir>/src/"],
   "moduleNameMapper": {
     "^test/(.*)$": "<rootDir>/test/$1",
     "\\.(css|less|scss)$": "<rootDir>/test/preview/__mocks__/styleMock.ts"

client/package.json

@@ -1,38 +1,40 @@
 {
   "name": "@into-cps-association/dtaas-web",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <prasad.talasila@gmail.com> (http://prasad.talasila.in/)",
   "contributors": [
-    "Omar Suleiman",
     "Asger Busk Breinholm",
-    "Mathias Brændgaard",
-    "Emre Temel",
     "Cesar Vela",
+    "Emre Temel",
+    "Enok Maj",
+    "Mathias Brændgaard",
+    "Omar Suleiman",
     "Vanessa Scherma"
   ],
   "license": "SEE LICENSE IN <LICENSE.md>",
   "private": false,
   "type": "module",
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build": "npx react-scripts build",
     "clean": "npx rimraf build/ dist/ node_modules/ coverage/ playwright-report/ test-results/  test.svg src.svg src/util/gitlab.json",
     "config:dev": "npx shx cp config/dev.js public/env.js && npx shx cp config/dev.js build/env.js",
     "config:local": "npx shx cp config/local.js public/env.js && npx shx cp config/local.js build/env.js",
     "config:prod": "npx shx cp config/prod.js public/env.js && npx shx cp config/prod.js build/env.js",
     "config:test": "npx shx cp config/test.js public/env.js && npx shx cp config/test.js build/env.js",
     "develop": "npx react-scripts start",
-    "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
+    "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss,json}\"",
     "graph": "npx madge --image src.svg src && npx madge --image test.svg test",
     "start": "serve -s build -l 4000",
     "stop": "npx kill-port 4000",
     "syntax": "npx eslint . --fix",
-    "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
+    "test:all": "yarn test:unit && yarn test:int && yarn test:e2e && yarn test:preview:unit && yarn test:preview:int",
     "test:e2e:ext": "cross-env ext=true yarn test:e2e",
-    "test:e2e": "yarn config:test && playwright test -c ./playwright.config.ts",
+    "test:e2e": "yarn config:test && yarn build && playwright test -c ./playwright.config.ts",
     "test:coverage:int-unit": "npx istanbul-combine -d coverage/all -r lcov -r json -r text coverage/unit/coverage-final.json coverage/int/coverage-final.json coverage/preview/unit/coverage-final.json coverage/preview/int/coverage-final.json",
-    "test:int": "jest -c ./jest.config.json jest --coverage --coverageDirectory=coverage/int ../test/integration --setupFilesAfterEnv ./test/integration/jest.setup.ts",
+    "test:int": "jest -c ./jest.config.json --coverage --coverageDirectory=coverage/int ../test/integration --setupFilesAfterEnv ./test/integration/jest.setup.ts",
     "test:unit": "jest -c ./jest.config.json --coverageDirectory=coverage/unit ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts",
     "test:preview:int": "jest -c ./jest.config.json --coverageDirectory=coverage/preview/int ../test/preview/integration --setupFilesAfterEnv ./test/preview/integration/jest.setup.ts",
     "test:preview:unit": "jest -c ./jest.config.json --coverageDirectory=coverage/preview/unit ../test/preview/unit --setupFilesAfterEnv ./test/preview/unit/jest.setup.ts"
@@ -60,8 +62,8 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/remarkable": "^2.0.8",
     "@types/styled-components": "^5.1.32",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.1.4",
     "eslint": "^8.2.0",
@@ -71,6 +73,8 @@
     "eslint-plugin-jest": "^28.8.3",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "http-status-codes": "2.3.0",
     "jest-fetch-mock": "^3.0.3",
     "katex": "^0.16.11",
     "markdown-it-katex": "^2.0.3",
@@ -93,7 +97,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "zod": "3.24.1"
   },
   "devDependencies": {
     "@babel/core": "7.25.8",

client/playwright.config.ts

@@ -20,9 +20,10 @@ export default defineConfig({
     ? undefined
     : {
         command: 'yarn start',
+        url: BASE_URI,
       },
   retries: process.env.CI ? 0 : 1, // Disable retries on Github actions for now as setup always fails
-  timeout: 60 * 1000,
+  timeout: process.env.CI ? 1000 : 30 * 1000,
   globalTimeout: 10 * 60 * 1000,
   testDir: './test/e2e/tests',
   testMatch: /.*\.test\.ts/,
@@ -50,6 +51,7 @@ export default defineConfig({
   use: {
     baseURL: BASE_URI,
     trace: 'on-first-retry', // Wil not record trace on Github actions because of no retries
+    headless: true,
   },
   projects: [
     // Setup project

client/src/page/LayoutPublic.tsx

@@ -4,7 +4,7 @@ import AppBar from '@mui/material/AppBar';
 import Footer from 'page/Footer';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import { Container } from '@mui/material';
+import { Breakpoint, Container } from '@mui/material';
 import LinkButtons from 'components/LinkButtons';
 import toolbarLinkValues from 'util/toolbarUtil';
 
@@ -26,7 +26,10 @@ const DTappBar = () => (
   </AppBar>
 );
 
-function LayoutPublic(props: { children: React.ReactNode }) {
+function LayoutPublic(props: {
+  children: React.ReactNode;
+  containerMaxWidth?: Breakpoint;
+}) {
   return (
     <Box
       sx={{
@@ -38,7 +41,10 @@ function LayoutPublic(props: { children: React.ReactNode }) {
     >
       <DTappBar />
       <Toolbar />
-      <Container component="main" maxWidth="xs">
+      <Container
+        component="main"
+        maxWidth={props.containerMaxWidth ? props.containerMaxWidth : 'xs'}
+      >
         {props.children}
       </Container>
 

client/src/route/auth/Signin.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-
 import { useAuth } from 'react-oidc-context';
 import Button from '@mui/material/Button';
 
@@ -13,6 +12,15 @@ function SignIn() {
     auth.signinRedirect();
   };
 
+  return (
+    <BoxForSignIn>
+      {avatar}
+      {signInButton(startAuthProcess)}
+    </BoxForSignIn>
+  );
+}
+
+function BoxForSignIn(props: { children: React.ReactNode }) {
   return (
     <Box
       sx={{
@@ -22,46 +30,55 @@ function SignIn() {
         alignItems: 'center',
       }}
     >
-      <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
-        <LockOutlinedIcon />
-      </Avatar>
-      <Button
-        onClick={startAuthProcess}
-        variant="contained"
-        sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          padding: '10px 20px',
-          backgroundColor: '#fc6d27',
-          color: 'white',
-          border: 'none',
-          borderRadius: '5px',
-          fontSize: '16px',
-          fontWeight: 'bold',
-          textDecoration: 'none',
-          textTransform: 'none',
-          '&:hover': {
-            backgroundColor: '#fc6d27',
-            textDecoration: 'none',
-          },
-        }}
-        startIcon={
-          <img
-            src={
-              'https://gitlab.com/gitlab-com/gitlab-artwork/-/raw/master/logo/logo-square.png'
-            }
-            alt="GitLab logo"
-            style={{
-              height: '20px',
-              marginRight: '10px',
-            }}
-          />
-        }
-      >
-        Sign In with GitLab
-      </Button>
+      {props.children}
     </Box>
   );
 }
 
+const avatar: JSX.Element = (
+  <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+    <LockOutlinedIcon />
+  </Avatar>
+);
+
+const signInButton = (startAuthProcess: () => void) => (
+  <Button
+    onClick={startAuthProcess}
+    variant="contained"
+    sx={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '10px 20px',
+      backgroundColor: '#fc6d27',
+      color: 'white',
+      border: 'none',
+      borderRadius: '5px',
+      fontSize: '16px',
+      fontWeight: 'bold',
+      textDecoration: 'none',
+      textTransform: 'none',
+      '&:hover': {
+        backgroundColor: '#fc6d27',
+        textDecoration: 'none',
+      },
+    }}
+    startIcon={startIcon}
+  >
+    Sign In with GitLab
+  </Button>
+);
+
+const startIcon = (
+  <img
+    src={
+      'https://gitlab.com/gitlab-com/gitlab-artwork/-/raw/master/logo/logo-square.png'
+    }
+    alt="GitLab logo"
+    style={{
+      height: '20px',
+      marginRight: '10px',
+    }}
+  />
+);
+
 export default SignIn;