Merge pull request thunder-id#3030 from jeradrutnam/main

Fix frontend/packages & docs packages lint and test failures and re-enabled in CI

Author: jeradrutnam

.audit-ignore.json

@@ -1,6 +1,5 @@
 {
-  "$comment": "Audit advisory IDs to ignore. Frontend uses CVE IDs (pnpm), E2E/sample-apps use GHSA IDs (npm).",
-  "frontend": [],
+  "$comment": "Audit advisory IDs to ignore for npm audit (E2E and sample-apps). Frontend CVE ignores are managed via auditConfig.ignoreCves in pnpm-workspace.yaml.",
   "common": [],
   "e2e": [],
   "sample-apps": []

.github/workflows/pr-builder.yml

@@ -13,7 +13,7 @@ on:
 
 # Avoid running multiple PR builders for the same PR on subsequent pushes.
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.head_ref || github.ref_name }}
   cancel-in-progress: true
 
 env:
@@ -46,12 +46,9 @@ jobs:
         working-directory: frontend
         run: |
           echo "🔍 Running pnpm audit for frontend dependencies..."
-          IGNORE_ARGS=()
-          while IFS= read -r id; do
-            IGNORE_ARGS+=(--ignore "$id")
-          done < <(jq -r '.frontend[].id' "$GITHUB_WORKSPACE/.audit-ignore.json")
+          # CVE ignores are managed via auditConfig.ignoreCves in pnpm-workspace.yaml
           # Remove `--ignore-registry-errors` once pnpm 11 is generally available. Tracker: https://github.com/pnpm/pnpm/issues/11265
-          pnpm audit --ignore-registry-errors --audit-level=high "${IGNORE_ARGS[@]}"
+          pnpm audit --ignore-registry-errors --audit-level=high
 
       - name: 🔍 Run npm audit (E2E Tests)
         working-directory: tests/e2e
@@ -336,16 +333,12 @@ jobs:
         if: steps.filter.outputs.code != 'true'
         run: echo "Only documentation changes detected - skipping frontend and E2E tests"
 
-  test-frontend:
-    name: 🧪 Frontend Tests (shard ${{ matrix.shard }}/4)
+  test-frontend-packages:
+    name: 🧪 Frontend Package & Gate Tests
     needs: [detect-code-changes]
     if: ${{ always() && (github.event_name == 'workflow_dispatch' || github.event_name == 'pull_request' || github.event_name == 'merge_group') && (needs.detect-code-changes.result == 'skipped' || needs.detect-code-changes.outputs.should-run == 'true') }}
     runs-on: ubuntu-latest
     timeout-minutes: 30
-    strategy:
-      fail-fast: false
-      matrix:
-        shard: [1, 2, 3, 4]
     steps:
       - name: 📥 Checkout Code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -369,37 +362,85 @@ jobs:
         run: |
           pnpm build:frontend
 
-      - name: 🧪 Run Console Tests with Coverage
+      - name: 🎭 Install Playwright Browsers
+        run: pnpm exec playwright install chromium
+
+      - name: 🧪 Run Tests for Frontend Packages
         run: |
-          cd frontend/apps/console
-          pnpm vitest run --coverage --shard=${{ matrix.shard }}/4
+          cd frontend
+          pnpm test:packages
 
       - name: 🧪 Run Gate Tests with Coverage
-        if: matrix.shard == 1
         run: |
           cd frontend/apps/gate
           pnpm test:coverage
 
-      # TODO: Enable package tests in CI once the broken tests are fixed
+      # Strip branch data (BRDA/BRF/BRH) from frontend LCOV reports before uploading.
+      # React Compiler (babel-plugin-react-compiler) generates phantom branch points in compiled
+      # output that inflate the partial-line count in Codecov's coverage calculation.
+      # This is a known upstream issue: https://github.com/facebook/react/issues/32950
+      # Line and function coverage remain unaffected and accurately reflect test quality.
+      - name: 🧹 Strip branch data from gate LCOV report
+        run: |
+          if [ -f "frontend/apps/gate/coverage/lcov.info" ]; then
+            sed -i '/^BRDA:/d;/^BRF:/d;/^BRH:/d' "frontend/apps/gate/coverage/lcov.info"
+          fi
 
-      # - name: 🧪 Run Packages Tests with Coverage
-      #   if: matrix.shard == 1
-      #   run: |
-      #     cd frontend/packages
-      #     pnpm test:coverage
+      - name: 📦 Upload gate coverage artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: gate-coverage
+          path: frontend/apps/gate/coverage/lcov.info
+          if-no-files-found: error
+
+  test-frontend-console:
+    name: 🧪 Console Tests (shard ${{ matrix.shard }}/4)
+    needs: [detect-code-changes]
+    if: ${{ always() && (github.event_name == 'workflow_dispatch' || github.event_name == 'pull_request' || github.event_name == 'merge_group') && (needs.detect-code-changes.result == 'skipped' || needs.detect-code-changes.outputs.should-run == 'true') }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4]
+    steps:
+      - name: 📥 Checkout Code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+
+      - name: ⚙️ Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        with:
+          run_install: false
+          cache_dependency_path: pnpm-lock.yaml
+
+      - name: 📦 Install Frontend Dependencies
+        run: |
+          pnpm install --frozen-lockfile
+
+      - name: 🔨 Build Frontend
+        run: |
+          pnpm build:frontend
+
+      - name: 🧪 Run Console Tests with Coverage
+        run: |
+          cd frontend/apps/console
+          pnpm vitest run --coverage --shard=${{ matrix.shard }}/4
 
       # Strip branch data (BRDA/BRF/BRH) from frontend LCOV reports before uploading.
       # React Compiler (babel-plugin-react-compiler) generates phantom branch points in compiled
       # output that inflate the partial-line count in Codecov's coverage calculation.
       # This is a known upstream issue: https://github.com/facebook/react/issues/32950
       # Line and function coverage remain unaffected and accurately reflect test quality.
-      - name: 🧹 Strip branch data from frontend LCOV reports
+      - name: 🧹 Strip branch data from console LCOV report
         run: |
-          for lcov_file in frontend/apps/console/coverage/lcov.info frontend/packages/coverage/lcov.info; do
-            if [ -f "$lcov_file" ]; then
-              sed -i '/^BRDA:/d;/^BRF:/d;/^BRH:/d' "$lcov_file"
-            fi
-          done
+          if [ -f "frontend/apps/console/coverage/lcov.info" ]; then
+            sed -i '/^BRDA:/d;/^BRF:/d;/^BRH:/d' "frontend/apps/console/coverage/lcov.info"
+          fi
 
       - name: 📦 Upload console coverage artifact
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
@@ -408,18 +449,10 @@ jobs:
           path: frontend/apps/console/coverage/lcov.info
           if-no-files-found: error
 
-      - name: 📦 Upload gate coverage artifact
-        if: matrix.shard == 1
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
-        with:
-          name: gate-coverage
-          path: frontend/apps/gate/coverage/lcov.info
-          if-no-files-found: error
-
   upload-frontend-coverage:
     name: 📊 Upload Frontend Coverage
-    needs: test-frontend
-    if: always() && needs.test-frontend.result == 'success'
+    needs: [test-frontend-packages, test-frontend-console]
+    if: always() && needs.test-frontend-packages.result == 'success' && needs.test-frontend-console.result == 'success'
     runs-on: ubuntu-latest
     timeout-minutes: 30
     permissions:
@@ -624,6 +657,12 @@ jobs:
         with:
           node-version: 'lts/*'
 
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        with:
+          run_install: false
+          cache_dependency_path: pnpm-lock.yaml
+
       - name: 📥 Download Built Distribution
         uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
         with:

docs/eslint.config.js

@@ -16,13 +16,12 @@
  * under the License.
  */
 
-import thunderIdPlugin, {createParserOptions} from '@thunderid/eslint-plugin';
-import {fileURLToPath} from 'url';
 import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+import thunderIdPlugin, {createParserOptions} from '@thunderid/eslint-plugin';
 
-// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
 const __filename = fileURLToPath(import.meta.url);
-// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
+
 const __dirname = dirname(__filename);
 
 export default [
@@ -38,5 +37,52 @@ export default [
         project: './tsconfig.eslint.json',
       }),
     },
+    rules: {
+      'import-x/no-unresolved': [
+        'error',
+        {
+          ignore: ['^@docusaurus/', '^@theme/', '^@theme-original/', '^@generated/', '^@site/'],
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.mjs'],
+    languageOptions: {
+      parserOptions: {
+        project: null,
+      },
+    },
+  },
+  {
+    files: ['scripts/**/*.mjs'],
+    languageOptions: {
+      globals: {
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        URL: 'readonly',
+        console: 'readonly',
+        Buffer: 'readonly',
+      },
+    },
+    rules: {
+      'import/no-extraneous-dependencies': 'off',
+      'import-x/extensions': 'off',
+      '@thunderid/copyright-header': ['error', {allowShebang: true}],
+    },
+  },
+  {
+    files: ['plugins/shims/*.cjs'],
+    languageOptions: {
+      globals: {
+        module: 'writable',
+        require: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        process: 'readonly',
+        exports: 'writable',
+      },
+    },
   },
 ];

docs/package.json

@@ -51,8 +51,8 @@
     "@thunderid/eslint-plugin": "workspace:^",
     "@thunderid/logger": "workspace:^",
     "@thunderid/prettier-config": "workspace:^",
-    "@wso2/oxygen-ui": "0.10.1",
-    "@wso2/oxygen-ui-icons-react": "0.10.1",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
     "clsx": "2.1.1",
     "docusaurus-plugin-copy-page-button": "0.5.0",
     "eslint": "9.39.4",
@@ -65,6 +65,8 @@
     "@docusaurus/module-type-aliases": "3.9.2",
     "@docusaurus/tsconfig": "3.9.2",
     "@docusaurus/types": "3.9.2",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "openapi-to-postmanv2": "4.23.0",
     "rimraf": "catalog:",
     "typescript": "5.9.3",

docs/plugins/personaPlugin.ts

@@ -48,7 +48,7 @@ export default function personaPlugin(): Plugin {
   return {
     name: 'product-persona-plugin',
 
-    async allContentLoaded({
+    allContentLoaded({
       allContent,
       actions,
     }: {

docs/plugins/shims/emotion-css.cjs

@@ -1,8 +1,28 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 // SSR shim for @emotion/css — Emotion creates a DOM cache at module init
 // which fails in Node.js (document is not defined). This no-op shim is used
 // only during Docusaurus server-side rendering; the real package runs in the browser.
-function noop() { return ''; }
-function noopObj() { return {}; }
+
+function noop() {
+  return '';
+}
 
 module.exports = {
   css: noop,
@@ -12,6 +32,8 @@ module.exports = {
   hydrate: noop,
   flush: noop,
   merge: noop,
-  getRegisteredStyles: function() { return []; },
-  cache: { key: 'css', registered: {}, inserted: {}, sheet: { tags: [] } },
+  getRegisteredStyles: function () {
+    return [];
+  },
+  cache: {key: 'css', registered: {}, inserted: {}, sheet: {tags: []}},
 };

docs/plugins/shims/thunderid-react.cjs

@@ -1,10 +1,26 @@
 /**
- * No-op shim for @thunderid/react.
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
  *
- * The frontend design package dist imports these symbols from @thunderid/react,
- * but docs only uses theme utilities from that package. This shim prevents
- * webpack from failing when it cannot resolve @thunderid/react in the docs build.
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
  */
+
+// No-op shim for @thunderid/react.
+// The frontend design package dist imports these symbols from @thunderid/react,
+// but docs only uses theme utilities from that package. This shim prevents
+// webpack from failing when it cannot resolve @thunderid/react in the docs build.
+
 module.exports = {
   Consent: () => null,
   ConsentCheckboxList: () => null,

docs/scripts/cut-version.mjs

@@ -18,8 +18,6 @@
  * under the License.
  */
 
-/* eslint-disable @thunderid/copyright-header, import/no-extraneous-dependencies, no-underscore-dangle */
-
 /**
  * Cuts a new Docusaurus documentation version and snapshots the API spec for it.
  *
@@ -40,8 +38,8 @@
 import {execFileSync} from 'child_process';
 import {existsSync} from 'fs';
 import {join, dirname} from 'path';
-import {createLogger} from '@thunderid/logger';
 import {fileURLToPath} from 'url';
+import {createLogger} from '@thunderid/logger';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

docs/scripts/generate-postman-collections.mjs

@@ -18,8 +18,6 @@
  * under the License.
  */
 
-/* eslint-disable @thunderid/copyright-header, no-undef */
-
 /**
  * Generates Postman collections, environments, and globals from OpenAPI specifications.
  * Product name and slug are derived from docusaurus.product.config.ts to keep the