-
Notifications
You must be signed in to change notification settings - Fork 78
Description
⚠️ 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 isreact/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
.tsfile 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()+ Reduxnavigate/loadPageactions + 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 navigationreact-navigate— Lit dispatches to trigger React navigationlocationPath: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 changesstateChanged()at line ~846 — activates/deactivates page components based on Redux state_moveTo()at line ~808 — programmatic navigation withfromReactflag
Pages still loaded by Lit/Redux (not yet in React routes):
verify-email→backend-ai-email-verification-view(migrating in feat: Migrate backend-ai-email-verification-view to React #5367)change-password→backend-ai-change-forgot-password-view(migrating in feat: Migrate backend-ai-change-forgot-password-view to React #5368)edu-applauncher→backend-ai-edu-applauncher(separate issue)- Plugin pages → dynamically loaded (separate issue)
- Error/404 page →
backend-ai-error-view
Migration Plan
- Add missing React routes for all pages currently handled by Lit:
/verify-email→ React EmailVerificationView (after feat: Migrate backend-ai-email-verification-view to React #5367)/change-password→ React ChangePasswordView (after feat: Migrate backend-ai-change-forgot-password-view to React #5368)/edu-applauncher→ React EduAppLauncher (separate issue)/error→ React error boundary page
- Remove Redux page state (
src/backend-ai-app.tsnavigate/loadPage actions) - Remove
installRouter()frombackend-ai-webui.ts - Remove
stateChanged()page activation logic frombackend-ai-webui.ts - Remove bridge events (
move-to-from-react,react-navigate) — no longer needed when all navigation is React Router - Remove
_moveTo()method — replace remaining callers with React navigation - Remove
backend-ai-app.tsif 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