Merge pull request #376 from secretarium/chore/pda-front-dev

feat: Adding PDA base implementation

.eslintrc.cjs

@@ -65,18 +65,21 @@ module.exports = {
         '**/*',
         '!**/*.json',
         '!**/*.js',
-        '!**/*.mjs',
+        '!**/*.cjs',
         '!**/*.ts',
-        '!**/*.mts',
         'dist/**',
         'tmp/**',
         'tools/**/_msr*',
         'node_modules/**'
     ],
     plugins: ['@nx'],
+    globals: {
+        __DEBUG_BUILD__: 'readonly',
+        __SENTRY_DEBUG__: 'readonly'
+    },
     overrides: [
         {
-            files: ['*.ts', '*.tsx', '*.mts'],
+            files: ['*.ts', '*.tsx'],
             extends: ['plugin:@nx/typescript'],
             rules: typescriptRules,
             parserOptions: {
@@ -86,9 +89,12 @@ module.exports = {
             }
         },
         {
-            files: ['*.js', '*.jsx'],
+            files: ['*.js', '*.cjs', '*.jsx'],
             extends: ['plugin:@nx/javascript'],
-            rules: javascriptRules
+            rules: {
+                ...javascriptRules,
+                '@typescript-eslint/no-require-imports': 'off'
+            }
         },
         {
             files: ['*.mjs'],

.github/workflows/test.yml

@@ -51,6 +51,26 @@ jobs:
       - name: Install repo dependencies
         run: yarn install --network-timeout 1000000 --forzen-lockfile
 
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('@playwright/test/package.json').version)")" >> $GITHUB_ENV
+
+      - name: Cache Playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Playwright with dependencies
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install --with-deps
+
+      - name: Install Playwright's dependencies
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: yarn playwright install-deps
+
       - name: Unit test the Dev Suite
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"

.vscode/extensions.json

@@ -1,8 +1,7 @@
 {
     "recommendations": [
-        "nrwl.angular-console",
-        "esbenp.prettier-vscode",
         "dbaeumer.vscode-eslint",
-        "firsttris.vscode-jest-runner"
+        "firsttris.vscode-jest-runner",
+        "ms-playwright.playwright"
     ]
-}
+}

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
-    "eslint.autoFixOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit"
+        "source.fixAll.eslint": "always"
     },
     "editor.tabSize": 4,
     "eslint.validate": [
@@ -10,8 +9,7 @@
         "typescript",
         "typescriptreact"
     ],
-    "eslint.packageManager": "yarn",
-    "editor.detectIndentation": false,
+    "editor.detectIndentation": true,
     "editor.formatOnSave": true,
     "files.exclude": {
         "**/.classpath": true,

apps/endoscope-e2e/cypress.config.cjs

@@ -1,4 +1,4 @@
-const cypress = require('cypress')
+const cypress = require('cypress');
 const cypressPreset = require('@nx/cypress/plugins/cypress-preset');
 
 const cypressJsonConfig = {

apps/endoscope/jest.config.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'node:path';
 
 export default {
     displayName: 'endoscope',
@@ -12,5 +12,5 @@ export default {
     },
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
     coverageDirectory: '../../coverage/apps/endoscope',
-    setupFiles: [path.resolve(__dirname, 'jest/setupFile')]
+    setupFiles: [path.resolve(__dirname, 'jest/setupFile.cjs')]
 };

apps/endoscope/src/panel.tsx

@@ -1,17 +1,17 @@
 import { StrictMode } from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import { DevtoolMainPanel } from './app/DevtoolMainPanel';
 
-const containerElement = document.getElementById('root');
-const applicationElement = (
-    <StrictMode>
-        <BrowserRouter>
-            <DevtoolMainPanel />
-        </BrowserRouter>
-    </StrictMode>
-);
-
-const container = (ReactDOM as any).createRoot(containerElement);
-container.render(applicationElement);
+const rootElement = document.getElementById('root');
+if (rootElement && !rootElement?.innerHTML) {
+    const root = createRoot(rootElement);
+    root.render(
+        <StrictMode>
+            <BrowserRouter>
+                <DevtoolMainPanel />
+            </BrowserRouter>
+        </StrictMode>
+    );
+}

apps/endoscope/src/styles.css

@@ -1,6 +1,4 @@
-@tailwind components;
-@tailwind base;
-@tailwind utilities;
+/* @import "tailwindcss"; */
 
 html, body, #root {
     height: 100%;

apps/endoscope/tsconfig.json

@@ -3,14 +3,8 @@
     "compilerOptions": {
         "jsx": "react-jsx",
         "allowJs": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "noImplicitOverride": true,
-        "noPropertyAccessFromIndexSignature": true,
-        "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true
+        "module": "esnext",
+        "moduleResolution": "bundler"
     },
     "files": [],
     "include": [],

apps/endoscope/tsconfig.spec.json

@@ -2,7 +2,6 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../dist/out-tsc",
-        "module": "esnext",
         "types": [
             "jest",
             "node",

apps/pda-back-e2e/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "extends": [
+        "../../.eslintrc.cjs"
+    ],
+    "ignorePatterns": [
+        "!**/*"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts",
+                "*.tsx",
+                "*.js",
+                "*.jsx"
+            ],
+            "rules": {}
+        },
+        {
+            "files": [
+                "*.ts",
+                "*.tsx"
+            ],
+            "parserOptions": {
+                "project": [
+                    "apps/pda-back-e2e/tsconfig.*?.json"
+                ]
+            },
+            "rules": {}
+        },
+        {
+            "files": [
+                "*.js",
+                "*.jsx"
+            ],
+            "rules": {}
+        }
+    ]
+}

apps/pda-back-e2e/jest.config.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+export default {
+    displayName: 'pda-back-e2e',
+    preset: '../../jest.preset.cjs',
+    globalSetup: '<rootDir>/src/support/global-setup.ts',
+    globalTeardown: '<rootDir>/src/support/global-teardown.ts',
+    setupFiles: ['<rootDir>/src/support/test-setup.ts'],
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.[tj]s$': [
+            'ts-jest',
+            {
+                tsconfig: '<rootDir>/tsconfig.e2e.json',
+            },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../coverage/pda-back-e2e',
+};

apps/pda-back-e2e/project.json

@@ -0,0 +1,20 @@
+{
+    "name": "pda-back-e2e",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "implicitDependencies": [
+        "pda-back"
+    ],
+    "targets": {
+        "e2e": {
+            "executor": "@nx/jest:jest",
+            "outputs": [
+                "{workspaceRoot}/coverage/{e2eProjectRoot}"
+            ],
+            "options": {
+                "jestConfig": "apps/pda-back-e2e/jest.config.ts",
+                "passWithNoTests": true
+            }
+        }
+    }
+}

apps/pda-back-e2e/src/secretarium-fido/secretarium-fido.spec.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+describe('GET /', () => {
+    it('should return a message', async () => {
+        const res = await axios.get('/ping').catch((err) => {
+            console.error(err);
+        });
+
+        if (!res) {
+            throw new Error('No response');
+        }
+
+        expect(res.status).toBe(200);
+        expect(res.data).toEqual({ pong: true });
+    });
+});

apps/pda-back-e2e/src/support/global-setup.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { exec, ChildProcess } from 'node:child_process';
+// import axios from 'axios';
+
+declare global {
+    // eslint-disable-next-line no-var
+    var __RUNNING_BACKEND__: ChildProcess | undefined;
+}
+
+export default async function () {
+    // Start services that that the app needs to run (e.g. database, docker-compose, etc.).
+    console.log('\nStarting up the backend...\n');
+    console.log(process.cwd());
+
+    let shouldPrintProcessOutput = true;
+    globalThis.__RUNNING_BACKEND__ = exec('yarn nx serve pda-back --configuration=production --watch=false');
+    globalThis.__RUNNING_BACKEND__.on('error', (err) => {
+        console.error(err);
+    });
+    globalThis.__RUNNING_BACKEND__.stdout?.on('data', (data) => {
+        if (data.includes('listening at'))
+            shouldPrintProcessOutput = false;
+        if (shouldPrintProcessOutput)
+            console.log(data);
+    });
+
+    // Start the webserver and wait until it responds
+    await new Promise<void>((resolve, reject) => {
+        (async () => {
+            const sleep = async () => new Promise(r => setTimeout(r, 5000));
+            let count = 0;
+            while (count < 10) {
+                await sleep();
+                try {
+                    await axios.get('http://localhost:3000/ping').then((result) => {
+                        axios.defaults.baseURL = 'http://localhost:3000';
+                        console.log('Backend is up and running');
+                        console.log(result.data);
+                        if (result.status === 200)
+                            resolve();
+                    });
+                } catch (e) {
+                    if (e instanceof Error)
+                        e.message.substring(0, 0);
+                    if (count === 5)
+                        console.log('Waiting for the backend to start...');
+                }
+                count++;
+            }
+            reject('Backend did not start in time');
+        })().catch(reject);
+    });
+}

apps/pda-back-e2e/src/support/global-teardown.ts

@@ -0,0 +1,5 @@
+export default async function () {
+    // Put clean up logic here (e.g. stopping services, docker-compose, etc.).
+    // Hint: `globalThis` is shared between setup and teardown.
+    globalThis.__RUNNING_BACKEND__?.kill();
+}

apps/pda-back-e2e/src/support/test-setup.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+const host = process.env.HOST ?? 'localhost';
+const port = process.env.PORT ?? '3000';
+axios.defaults.baseURL = `http://${host}:${port}`;

apps/pda-back-e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": [
+            "jest",
+            "node"
+        ]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/**/*.ts"
+    ]
+}