fix: fix Frontend Tests workflow and enable SonarCloud for UI

[abhizipstack]

What

• Fix disabled Frontend Tests CI workflow
• Enable SonarCloud integration for frontend (shared project with backend)
• Replace broken test with proper ErrorBoundary tests

Why

• Frontend Tests workflow was disabled due to test failures (ESM module compatibility)
• SonarCloud for frontend was not active
• Consolidates OR-1374 and OR-567 (both closed as duplicates of OR-1406)

How

• Test fix: Replace full App render test (ESM issues) with proper ErrorBoundary tests — renders children normally + catches errors with fallback
• Workflow: Add paths filter (frontend/**), use npm install, pin SonarCloud to @V3, add continue-on-error, skip git fetch for dependabot
• SonarCloud: Changed project key to Zipstack_visitran (same as backend) — consolidating into single project instead of separate zipstack_visitran_ui

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No — workflow was disabled, test was already broken. This gets both working again with proper tests.

Database Migrations

• None

Env Config

• SONAR_TOKEN already configured in repo secrets

Relevant Docs

• SonarCloud: https://sonarcloud.io (project: Zipstack_visitran)

Related Issues or PRs

• PR fix: regenerate package-lock.json — npm ci failing in CI #37 (package-lock sync — same npm install approach)

Dependencies Versions

• Node 20.x (unchanged)

Notes on Testing

• Verified locally: 2 tests passed, coverage/lcov.info generated
• Frontend Tests workflow passed in CI
• After merge: workflow is already enabled

Screenshots

N/A

Checklist

I have read and understood the Contribution Guidelines.

[greptile-apps]

Greptile Summary

This PR re-enables the disabled Frontend Tests CI workflow and wires up SonarCloud for the frontend/ directory. The workflow gains a paths filter so it only triggers on frontend changes, the SonarCloud action is pinned to @v3, the git fetch --unshallow step now correctly skips dependabot runs (consistent with the if guard already on the scan step), and the previously-broken test is replaced with real ErrorBoundary unit tests.

• The ErrorBoundary tests are a genuine improvement: they cover both the happy-path (children rendered) and the error-fallback path. The import path (../../../widgets/error_boundary) resolves correctly to frontend/src/widgets/error_boundary/index.js, and the fallbackComponent prop used in the test matches the component's actual prop interface.
• sonar.projectKey was changed from zipstack_visitran_ui to Zipstack_visitran — this contradicts the PR description and may direct the SonarCloud scan at a different (or non-existent) project. Since continue-on-error: true silences failures, this would go unnoticed in CI. This should be confirmed against the SonarCloud dashboard before merging.
• The npm install vs npm ci and continue-on-error: true trade-offs are acknowledged as intentional in the previous review thread.

Confidence Score: 4/5

Safe to merge after confirming the correct SonarCloud project key; all other concerns are acknowledged intentional trade-offs

Workflow and test changes are solid and well-reasoned. The one P1 concern — the sonar.projectKey value contradicting the PR description — could silently break the SonarCloud integration that is the primary goal of this PR. A quick confirmation against the dashboard is warranted before merging.

frontend/sonar-project.properties — verify the project key matches the registered SonarCloud project

Important Files Changed

Filename	Overview
.github/workflows/frontend-tests.yaml	Workflow re-enabled with paths filter, pinned SonarCloud @V3, and dependabot guard on unshallow fetch — straightforward improvements
frontend/sonar-project.properties	Project key changed from zipstack_visitran_ui to Zipstack_visitran, contradicting the PR description — needs verification against SonarCloud dashboard
frontend/src/ide/explorer/tests/explorer.test.js	Placeholder replaced with real ErrorBoundary tests covering happy path and error-fallback; prop usage matches component implementation exactly

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Push/PR to main\nfrontend/** paths only"] --> B[Checkout & Setup Node 20.x]
    B --> C[npm install frontend/]
    C --> D[Run tests with coverage]
    D --> E{actor == dependabot?}
    E -- No --> F[git fetch --unshallow]
    F --> G["SonarCloud Scan\ncontinue-on-error: true"]
    G --> H[Workflow Complete]
    E -- Yes --> H
    G -. failure silenced .-> H

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/sonar-project.properties
Line: 1

Comment:
**SonarCloud project key changed — contradicts PR description**

The `sonar.projectKey` was changed from `zipstack_visitran_ui` to `Zipstack_visitran`, but the PR description explicitly states "Uses existing frontend/sonar-project.properties (project key: zipstack_visitran_ui)". SonarCloud project keys are case-sensitive and must exactly match the key registered in the SonarCloud dashboard.

If the registered project is `zipstack_visitran_ui` and this key now reads `Zipstack_visitran`, the scanner will either create a brand-new unrelated project or fail to associate results with the intended dashboard entry — silently, because `continue-on-error: true` is set on the scan step.

Please confirm which key is registered in the SonarCloud dashboard and align this file accordingly.

```suggestion
sonar.projectKey=zipstack_visitran_ui
```

How can I resolve this? If you propose a fix, please make it concise.

_{Greploops — Automatically fix all review issues by running /greploops in Claude Code. It iterates: fix, push, re-review, repeat until 5/5 confidence.
Use the Greptile plugin for Claude Code to query reviews, search comments, and manage custom context directly from your terminal.}

_{Reviews (4): Last reviewed commit: "fix: point frontend SonarCloud to Zipsta..." | Re-trigger Greptile}

[wicky-zipstack]

LGTM