Skip to content

feat(ui): frontend mock mode for offline dev - #209

Merged
schronck merged 1 commit into
mainfrom
feat/ui/mock-mode
Jun 23, 2026
Merged

feat(ui): frontend mock mode for offline dev#209
schronck merged 1 commit into
mainfrom
feat/ui/mock-mode

Conversation

@schronck

@schronck schronck commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

What

Adds a dev-only mock mode to the frontend so the UI can run with realistic data without a Canton node or Keycloak.

cd frontend
npm run dev:mock        # = MOCK=true vite  →  http://localhost:5173

How

  • A small Vite plugin (vite.config.ts, apply: 'serve') intercepts the backend REST routes and serves JSON from frontend/mocks/*.json. It is never included in production builds.
  • Path → fixture: /governance/stategovernance_state.json, with a longest-prefix fallback.
  • party_id-aware: a request with ?party_id=<prefix>::… prefers a <base>__<prefix>.json override before the generic file — so governance state/confirmations can differ per party (e.g. gov core deployed on some parties, not others) without duplicate cards.
  • Unmapped GETs return {}, unmapped POSTs return {"status":"completed"} (treated as success by the UI).

Fixtures (frontend/mocks/)

Realistic devnet-flavoured data covering every screen and dialog:

  • 18 decentralized parties (scattered thresholds/owners/participants, mixed auth states), 14 peers with real FQDN addresses and an online/offline split, 18 packages with peer-compare drift.
  • Pending approvals: 12 workflow runs across in-progress/completed/failed/cancelled, 5 invitations, and per-party governance confirmations.
  • Gov core deployed on 4 authed parties (per-party state + confirmations); the rest show "Deploy contracts".
  • Party detail endpoints (holdings, instruments, vaults, audit trail, transfer-factories, party-config, known-members, auth/test, …) so opening a party renders cleanly.

Verified

Clicked through all tabs, party detail, and every dialog (New Proposal + 26 types, Governance Actions, Deploy Contracts, peer-compare matrix, DAR upload/distribute, party config, Test Auth) — zero console/page errors. Production npm run build unaffected.

To change the data, edit frontend/mocks/*.json — the page hot-reloads.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a dev-only “mock mode” for the frontend so the UI can be developed and demoed offline (no Canton node / Keycloak), by serving API responses from JSON fixtures via a Vite dev-server middleware.

Changes:

  • Introduces a mock-api Vite plugin (serve-only) that intercepts known REST route prefixes and serves frontend/mocks/*.json fixtures with longest-prefix fallback + optional party_id overrides.
  • Adds npm run dev:mock to start Vite with MOCK=true.
  • Adds a comprehensive set of mock JSON fixtures covering most UI screens/dialogs.

Reviewed changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated no comments.

Show a summary per file
File Description
frontend/vite.config.ts Adds a dev-only Vite middleware plugin to serve API fixtures from frontend/mocks/ when MOCK=true.
frontend/package.json Adds dev:mock script to enable mock mode.
frontend/mocks/auth-config.json Mock response for /auth-config.
frontend/mocks/auth_status.json Mock response for /auth/status.
frontend/mocks/auth_test.json Mock response for /auth/test.
frontend/mocks/contracts_query.json Mock response for /contracts/query.
frontend/mocks/credential-offers.json Mock response for /credential-offers.
frontend/mocks/decentralized-parties.json Mock response for /decentralized-parties (party list + metadata).
frontend/mocks/governance_burn-requests.json Mock response for /governance/burn-requests.
frontend/mocks/governance_chain-audit.json Mock response for /governance/chain-audit.
frontend/mocks/governance_confirmations.json Default mock response for /governance/confirmations.
frontend/mocks/governance_confirmations__cbtc-network.json Party-scoped override fixture for /governance/confirmations?party_id=cbtc-network::….
frontend/mocks/governance_confirmations__governance-core.json Party-scoped override fixture for /governance/confirmations?party_id=governance-core::….
frontend/mocks/governance_confirmations__ibtc-admin.json Party-scoped override fixture for /governance/confirmations?party_id=ibtc-admin::….
frontend/mocks/governance_known-members.json Mock response for /governance/known-members.
frontend/mocks/governance_mint-requests.json Mock response for /governance/mint-requests.
frontend/mocks/governance_state.json Default mock response for /governance/state.
frontend/mocks/governance_state__cbtc-mint-authority.json Party-scoped override fixture for /governance/state?party_id=cbtc-mint-authority::….
frontend/mocks/governance_state__cbtc-network.json Party-scoped override fixture for /governance/state?party_id=cbtc-network::….
frontend/mocks/governance_state__governance-core.json Party-scoped override fixture for /governance/state?party_id=governance-core::….
frontend/mocks/governance_state__ibtc-admin.json Party-scoped override fixture for /governance/state?party_id=ibtc-admin::….
frontend/mocks/governance_transfer-instructions.json Mock response for /governance/transfer-instructions.
frontend/mocks/holdings.json Mock response for /holdings.
frontend/mocks/instruments.json Mock response for /instruments.
frontend/mocks/invitations.json Mock response for /invitations.
frontend/mocks/keys_status.json Mock response for /keys/status.
frontend/mocks/network-config.json Mock response for /network-config.
frontend/mocks/network-info.json Mock response for /network-info.
frontend/mocks/node-config.json Mock response for /node-config.
frontend/mocks/operator-info.json Mock response for /operator-info.
frontend/mocks/packages.json Mock response for /packages.
frontend/mocks/packages_compare-peers.json Mock response for /packages/compare-peers.
frontend/mocks/packages_vetted.json Mock response for /packages/vetted.
frontend/mocks/participants-status.json Mock response for /participants-status.
frontend/mocks/party-config.json Mock response for /party-config (and fallback for /party-config/<id>).
frontend/mocks/services_provider.json Mock response for /services/provider.
frontend/mocks/services_user.json Mock response for /services/user.
frontend/mocks/token-standard-contracts.json Mock response for /token-standard-contracts.
frontend/mocks/transfer-factories.json Mock response for /transfer-factories.
frontend/mocks/transfer-preapprovals.json Mock response for /transfer-preapprovals.
frontend/mocks/vaults.json Mock response for /vaults.
frontend/mocks/workflows.json Mock response for /workflows.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@schronck
schronck enabled auto-merge (squash) June 22, 2026 12:29
@schronck
schronck disabled auto-merge June 22, 2026 13:09
MOCK=true npm run dev (npm run dev:mock) serves the backend REST endpoints from frontend/mocks/*.json, so the UI runs offline without a Canton node or Keycloak. Dev-only (apply: 'serve'), never bundled in production. party_id-aware: <endpoint>__<prefix>.json overrides per party.
@schronck

Copy link
Copy Markdown
Collaborator Author

Folded into #212 — consolidating the UI modernization into a single PR. These commits are already included in #212.

@schronck schronck closed this Jun 22, 2026
@schronck schronck reopened this Jun 22, 2026
@schronck
schronck merged commit c287188 into main Jun 23, 2026
12 checks passed
@schronck
schronck deleted the feat/ui/mock-mode branch June 23, 2026 12:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants