Skip to content

refactor: Consolidate navigation from Lit/Redux to React Router #5378

@inureyes

Description

@inureyes

⚠️ Before implementing, read and follow the Implementation Rules in the epic issue #5364. These rules cover mandatory patterns for React component structure, BAI component usage, reactToWebComponent bridge, state management, i18n, error handling, styling, and code quality. The reference implementation is react/src/components/SignupModal.tsx.

Goal: Complete Lit file removal. Each migration must fully replace the Lit source file with React — not just the dialog parts. The migrated Lit .ts file and its type declarations must be deleted. This epic is a critical step toward removing all Lit/MWC/Vaadin dependencies from the codebase.

Description

The current navigation system is split between two frameworks:

  • Lit/Redux (src/backend-ai-app.ts, src/components/backend-ai-webui.ts): installRouter() + Redux navigate/loadPage actions + dynamic page imports
  • React Router v6 (react/src/routes.tsx, react/src/MainLayout.tsx): React Router with lazy-loaded page components

Bridge events currently connect them:

  • move-to-from-react — React dispatches to trigger Lit navigation
  • react-navigate — Lit dispatches to trigger React navigation
  • locationPath:changed — Cross-framework location sync

This issue consolidates all routing into React Router and removes the Lit/Redux navigation layer.

Part of epic #5364
Depends on: #5371 (Login), #5366#5368 (standalone views migrated so their Lit page loading can be removed)

Current Lit Navigation Architecture

src/backend-ai-app.ts (Redux actions):

navigate(path) → extract page from path → dispatch loadPage(page)
loadPage(page) → dynamic import(`./components/backend-ai-{page}.ts`) → update Redux store

src/components/backend-ai-webui.ts:

  • installRouter() at line ~244 — captures URL changes
  • stateChanged() at line ~846 — activates/deactivates page components based on Redux state
  • _moveTo() at line ~808 — programmatic navigation with fromReact flag

Pages still loaded by Lit/Redux (not yet in React routes):

Migration Plan

  1. Add missing React routes for all pages currently handled by Lit:
  2. Remove Redux page state (src/backend-ai-app.ts navigate/loadPage actions)
  3. Remove installRouter() from backend-ai-webui.ts
  4. Remove stateChanged() page activation logic from backend-ai-webui.ts
  5. Remove bridge events (move-to-from-react, react-navigate) — no longer needed when all navigation is React Router
  6. Remove _moveTo() method — replace remaining callers with React navigation
  7. Remove backend-ai-app.ts if it only contains navigation logic

Acceptance Criteria

  • Lit file removed: src/backend-ai-app.ts (if navigation-only) and its type declarations
  • All page routes handled by React Router v6
  • No Redux page state remaining
  • installRouter() removed from app initialization
  • Bridge events (move-to-from-react, react-navigate) removed
  • _moveTo() method removed, callers updated
  • 404/error page handled by React error boundary
  • Browser back/forward navigation works correctly
  • Deep linking works for all pages
  • No navigation regressions

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:uxUI / UX issue.effort:hardNeed to understand many components / a large extent of contextual or historical information.platform:webWeb-specific issuetype:refactorRefactoring current implementation.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions