Validates client config

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,9 +88,11 @@ 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",

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.0",
+  "version": "0.8.1",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <[email protected]> (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"
@@ -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/preview/route/digitaltwins/editor/PreviewTab.tsx

@@ -6,38 +6,38 @@ import * as RemarkableKatex from 'remarkable-katex';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 interface PreviewProps {
-  fileContent: string;
-  fileType: string;
+    fileContent: string;
+    fileType: string;
 }
 
 function PreviewTab({ fileContent, fileType }: PreviewProps) {
-  if (fileType === 'md') {
-    const md = new Remarkable({
-      html: true,
-      typographer: true,
-    }).use(RemarkableKatex);
+    if (fileType === 'md') {
+        const md = new Remarkable({
+            html: true,
+            typographer: true,
+        }).use(RemarkableKatex);
 
-    const renderedMarkdown = md.render(fileContent);
+        const renderedMarkdown = md.render(fileContent);
 
-    return (
-      <div
-        style={{
-          width: '100%',
-          overflowWrap: 'break-word',
-          wordWrap: 'break-word',
-          whiteSpace: 'normal',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          dangerouslySetInnerHTML={{
-            __html: renderedMarkdown,
-          }}
-          style={{
-            maxWidth: '100%',
-          }}
-        />
-        <style>{`
+        return (
+            <div
+                style={{
+                    width: '100%',
+                    overflowWrap: 'break-word',
+                    wordWrap: 'break-word',
+                    whiteSpace: 'normal',
+                    overflow: 'hidden',
+                }}
+            >
+                <div
+                    dangerouslySetInnerHTML={{
+                        __html: renderedMarkdown,
+                    }}
+                    style={{
+                        maxWidth: '100%',
+                    }}
+                />
+                <style>{`
           img {
             max-width: 100%;
             height: auto;
@@ -58,17 +58,18 @@ function PreviewTab({ fileContent, fileType }: PreviewProps) {
             background-color: #f0f0f0;
           }
         `}</style>
-      </div>
-    );
-  }
+            </div>
+        );
+    }
 
-  if (fileType === 'json') {
-    return <SyntaxHighlighter language="json">{fileContent}</SyntaxHighlighter>;
-  }
-  if (fileType === 'yaml' || fileType === 'yml') {
-    return <SyntaxHighlighter language="yaml">{fileContent}</SyntaxHighlighter>;
-  }
-  return <SyntaxHighlighter language="bash">{fileContent}</SyntaxHighlighter>;
+    if (fileType === 'json') {
+        return <SyntaxHighlighter language="json">{fileContent}</SyntaxHighlighter>;
+    }
+    if (fileType === 'yaml' || fileType === 'yml') {
+        return <SyntaxHighlighter language="yaml">{fileContent}</SyntaxHighlighter>;
+    }
+    return <SyntaxHighlighter language="bash">{fileContent}</SyntaxHighlighter>;
+    return null;
 }
 
 export default PreviewTab;