Updates installation scripts and improves documentation (INTO-CPS-Ass…

…ociation#418) - Makes all the yarn commands cross-platform. Now the developers can work on all OS platforms. - Fixes mistakes in the vagrant installation scripts and documentation. - Removes hardcoded host network interface from the Vagrantfile; Users can now select any one of their available network interfaces. - Adds script for installing gitlab. - Updates client env.js to check for browser environment - Updates mkdocs version and its dependencies - Fixes some mistakes in the documentation - Updates npm publish steps regarding publishing packages to the default npm registry
astitva1905 · Jan 10, 2024 · abc90a6 · abc90a6
1 parent c710e57
commit abc90a6
Show file tree

Hide file tree

Showing 59 changed files with 835 additions and 557 deletions.
diff --git a/.github/workflows/client.yml b/.github/workflows/client.yml
@@ -36,13 +36,13 @@ jobs:
           cd client/	
           yarn install	
           yarn build
-          yarn configapp dev
       - name: Run client unit and integration tests
         run: |
           cd client/	
           yarn install	
-          yarn test -u
-          yarn test -i
+          yarn config:test
+          yarn test:int
+          yarn test:unit
 
       - name: Upload unit and integration test coverage to Codecov
         uses: codecov/codecov-action@v3

diff --git a/.github/workflows/lib-ms.yml b/.github/workflows/lib-ms.yml
@@ -39,12 +39,27 @@ jobs:
           yarn install	
           yarn build
 
-      - name: Run unit and integration tests
+      - name: Run unit tests
         run: |
           cd servers/lib
           yarn install
-          yarn test -u
-          yarn test -i
+          yarn test:unit
+        env:
+          PORT: 4001
+          LOCAL_PATH: ${{ github.workspace }}/files
+          GITLAB_GROUP: dtaas
+          GITLAB_URL: https://gitlab.com/api/graphql
+          TOKEN: token
+          MODE: gitlab
+          LOG_LEVEL: debug
+          APOLLO_PATH: /lib
+
+      - name: Run integration tests
+        if: ${{ always() }}
+        run: |
+          cd servers/lib
+          yarn install
+          yarn test:int
         env:
           PORT: 4001
           LOCAL_PATH: ${{ github.workspace }}/files

diff --git a/client/README.md b/client/README.md
@@ -21,22 +21,24 @@ yarn graph      # generate dependency graphs in the code
 yarn build      #build the react app into build/ directory
 yarn develop    #start the development server without building. Great for live edits.
 
+#Required: Choose one config for application (mandatory)
+yarn config:dev
+yarn config:prod
+yarn config:test
 
-#Required: Specify the environment; specify only one
-yarn configapp [prod | dev] #If not specified, the app wont run.
-
-yarn start      #start the application
-yarn clean      #clean the directory of temporary files
+yarn start       #start the application
+yarn clean       #clean the directory of temporary files
 ```
 
 It is also possible to run different types of tests using the yarn
-test command by passing different flags:
+test commands:
 
 ```bash
-yarn test -a   #run all tests
-yarn test -u   #run unit tests
-yarn test -i   #run integration tests
-yarn test -e   #run end-to-end tests
+#Tests require installation of devDependencies
+yarn test:unit  #run unit tests
+yarn test:int   #run integration tests
+yarn test:e2e   #run end-to-end tests
+yarn test:all   #run all tests
 ```
 
 ---
@@ -74,8 +76,8 @@ yarn configapp <config-name>
 `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/config/` directory and use one of the `yarn config`
+sub-commands to switch between them.
 
 ## Example configuration for developers
 
@@ -99,13 +101,14 @@ window.env = {
   REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
   REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
-  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
+  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
   REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
   REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
   REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
 ```
 
-Here the gitlab URL is `https://gitlab.foo.com/` and the client ID is `934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0`.
+Here the gitlab URL is `https://gitlab.com/` and the client ID is
+`934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0`.
 
 If a basename is needed for the client application, then the configuration
 file needs to be updated with the basename. For example, with a basename of
@@ -125,25 +128,31 @@ window.env = {
   REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
   REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
-  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
+  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
   REACT_APP_REDIRECT_URI: 'http://localhost:4000/au/Library',
   REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/au',
   REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
 ```
 
+It is sufficient to have
+[user-owned oauth](https://docs.gitlab.com/ee/integration/oauth_provider.html#create-a-user-owned-application)
+application. You can create this application in your gitlab account.
 Do remember that the oauth application on gitlab needs to have the redirect
 (callback) URL is correctly registered.
 
-## Caveat
-
-The client website relies on the background services to provide most of the
-functionality. These services would not be running on the developer computer.
-The complete application setup exists either on the integration server or as an
-installation instance. During development, there will be
+**NOTE**: The development environment does not have user workspaces and
+traefik gateway running in the background. As a consequence, the iframe
+links pointing to user workspace will not work correctly. Instead, you
+will see the following error.
 
 ```txt
 Unexpected Application Error!
 404 Not Found
 ```
 
-error on the **Library** and **Digital Twins** pages. This is expected.
+This error can be seen on the **Library** and **Digital Twins** pages.
+This error is expected.
+
+If you want to do _client/_ development with a valid user workspace,
+please perform [localhost](../docs/admin/localhost.md) installation,
+and then perform client development within the installed environment.
diff --git a/client/config/dev.js b/client/config/dev.js
@@ -1,18 +1,20 @@
-window.env = {
-  REACT_APP_ENVIRONMENT: 'dev',
-  REACT_APP_URL: 'https://foo.com/',
-  REACT_APP_URL_BASENAME: 'dtaas',
-  REACT_APP_URL_DTLINK: '/lab',
-  REACT_APP_URL_LIBLINK: '',
-  REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
-  REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
-  REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
-  REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
-  REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+if (typeof window !== 'undefined') {
+  window.env = {
+    REACT_APP_ENVIRONMENT: 'dev',
+    REACT_APP_URL: 'https://foo.com/',
+    REACT_APP_URL_BASENAME: 'dtaas',
+    REACT_APP_URL_DTLINK: '/lab',
+    REACT_APP_URL_LIBLINK: '',
+    REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
+    REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
+    REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
+    REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
+    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
-  REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
-  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
-  REACT_APP_REDIRECT_URI: 'https://foo.com/Library',
-  REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/',
-  REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
-};
+    REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
+    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
+    REACT_APP_REDIRECT_URI: 'https://foo.com/Library',
+    REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/',
+    REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
+  };
+};
diff --git a/client/config/prod.js b/client/config/prod.js
@@ -1,18 +1,20 @@
-window.env = {
-  REACT_APP_ENVIRONMENT: 'prod',
-  REACT_APP_URL: 'https://foo.com/',
-  REACT_APP_URL_BASENAME: 'dtaas',
-  REACT_APP_URL_DTLINK: '/lab',
-  REACT_APP_URL_LIBLINK: '',
-  REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
-  REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
-  REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
-  REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
-  REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+if (typeof window !== 'undefined') {
+  window.env = {
+    REACT_APP_ENVIRONMENT: 'prod',
+    REACT_APP_URL: 'https://foo.com/',
+    REACT_APP_URL_BASENAME: 'dtaas',
+    REACT_APP_URL_DTLINK: '/lab',
+    REACT_APP_URL_LIBLINK: '',
+    REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
+    REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
+    REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
+    REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
+    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
-  REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
-  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
-  REACT_APP_REDIRECT_URI: 'https://foo.com/Library',
-  REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/',
-  REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
+    REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
+    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
+    REACT_APP_REDIRECT_URI: 'https://foo.com/Library',
+    REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/',
+    REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
+  };
 };
diff --git a/client/config/test.js b/client/config/test.js
@@ -1,18 +1,20 @@
-window.env = {
-  REACT_APP_ENVIRONMENT: 'dev',
-  REACT_APP_URL: 'http://localhost:4000/',
-  REACT_APP_URL_BASENAME: '',
-  REACT_APP_URL_DTLINK: '/lab',
-  REACT_APP_URL_LIBLINK: '',
-  REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
-  REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
-  REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
-  REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
-  REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+if (typeof window !== 'undefined') {
+  window.env = {
+    REACT_APP_ENVIRONMENT: 'test',
+    REACT_APP_URL: 'http://localhost:4000/',
+    REACT_APP_URL_BASENAME: '',
+    REACT_APP_URL_DTLINK: '/lab',
+    REACT_APP_URL_LIBLINK: '',
+    REACT_APP_WORKBENCHLINK_TERMINAL: '/terminals/main',
+    REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
+    REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
+    REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
+    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
 
-  REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
-  REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
-  REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
-  REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
-  REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
-};
+    REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
+    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
+    REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
+    REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
+    REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
+  };
+};
diff --git a/client/package.json b/client/package.json
@@ -15,15 +15,21 @@
   "private": false,
   "type": "module",
   "scripts": {
-    "build": "react-scripts build",
+    "build": "npx react-scripts build",
     "clean": "npx rimraf build/ node_modules/ coverage/ playwright-report/  *.svg",
-    "configapp": "script/config.bash",
+    "config:dev": "npx shx cp config/dev.js public/env.js && npx shx cp config/dev.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}\"",
     "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": "script/test.bash"
+    "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
+    "test:e2e": "yarn build && yarn configapp:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
+    "test:int": "jest -c ./jest.integration.config.json ../test/integration --coverage",
+    "test:unit": "jest -c ./jest.config.json ../test/unitTests --coverage"
   },
   "eslintConfig": {
     "extends": [
@@ -40,33 +46,33 @@
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
     "@reduxjs/toolkit": "^1.9.7",
+    "@types/styled-components": "^5.1.32",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
     "dotenv": "^16.1.4",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "oidc-client-ts": "^2.2.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-iframe": "^1.8.5",
     "react-is": "^18.2.0",
     "react-oidc-context": "^2.2.2",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
+    "react-scripts": "^5.0.1",
     "react-tabs": "^6.0.2",
     "redux": "^4.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",
-    "typescript": "^4.9.5",
-    "react-iframe": "^1.8.5",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "@types/styled-components": "^5.1.32",
-    "eslint": "^8.54.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "react-scripts": "^5.0.1"
+    "typescript": "^4.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
@@ -84,6 +90,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "playwright": "^1.32.1",
     "prettier": "3.1.0",
+    "shx": "^0.3.4",
     "ts-jest": "^29.1.1"
   },
   "browserslist": {

diff --git a/client/script/config.bash b/client/script/config.bash
diff --git a/client/script/install.bash b/client/script/install.bash