chore: Remove backend-ai-dialog and unused MWC dependencies after full migration #5376
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
After all Lit-Element dialog components have been migrated to React (per epic #5364), remove backend-ai-dialog and all related Lit files. This is also the checkpoint for evaluating full Lit/MWC/Vaadin dependency removal from the project.
Part of epic #5364 — Phase 5 (Cleanup)
Blocked by: All other sub-issues in epic #5364
Scope
Part A: Remove Dialog-Related Lit Files
Files that should already be removed by individual sub-issues. Verify and clean up any remnants:
src/components/backend-ai-dialog.ts— The base dialog componentsrc/components/backend-ai-splash.ts— After feat: Migrate backend-ai-splash to React SplashModal #5366src/components/backend-ai-email-verification-view.ts— After feat: Migrate backend-ai-email-verification-view to React #5367src/components/backend-ai-change-forgot-password-view.ts— After feat: Migrate backend-ai-change-forgot-password-view to React #5368src/components/lablup-terms-of-service.ts— After feat: Migrate lablup-terms-of-service to React TermsOfServiceModal #5369src/components/backend-ai-signup.ts— After feat: Consolidate backend-ai-signup with existing React SignupModal and remove Lit version #5370src/components/backend-ai-login.ts— After feat: Migrate backend-ai-login to React LoginView #5371src/components/backend-ai-app-launcher.ts— After feat: Migrate backend-ai-app-launcher main dialog and infrastructure to React #5372, feat: Migrate app-launcher SSH/SFTP connection dialog to React #5373, feat: Migrate app-launcher connection info dialogs (VNC, XRDP, TCP, VSCode Desktop) to React #5374, feat: Migrate app-launcher Tensorboard, Terminal Guide, and Confirmation dialogs to React #5375
Part B: Remove Type Definitions and Declarations
src/types/backend-ai-console.d.ts— RemoveBackendAIDialogand all migrated component type referencesd/components/backend-ai-dialog.d.ts— Remove declaration filed/components/backend-ai-dialog.d.ts.map— Remove source map- All
d/components/backend-ai-*.d.tsfiles corresponding to removed Lit components
Part C: Remove Style References
src/components/backend-ai-general-styles.ts— Removebackend-ai-dialogstyle rules- CSS custom properties specific to
backend-ai-dialog(--component-width,--component-height, etc.) - Evaluate if
backend-ai-general-styles.tsandbackend-ai-webui-styles.tscan be fully removed
Part D: Evaluate Full MWC Dependency Removal
After all dialog-using components are migrated, audit remaining MWC usage and remove packages where possible.
All 24 MWC packages currently in package.json:
| Package | Used by (after this epic) | Removable? |
|---|---|---|
@material/mwc-dialog |
None | ✅ Yes |
@material/mwc-button |
Remaining Lit components | Evaluate |
@material/mwc-textfield |
None (all migrated) | ✅ Yes |
@material/mwc-select |
None (all migrated) | ✅ Yes |
@material/mwc-checkbox |
None (all migrated) | ✅ Yes |
@material/mwc-icon-button |
backend-ai-edu-applauncher.ts |
After edu-launcher migration |
@material/mwc-icon-button-toggle |
None (all migrated) | ✅ Yes |
@material/mwc-menu |
None (all migrated) | ✅ Yes |
@material/mwc-list |
None (all migrated) | ✅ Yes |
@material/mwc-linear-progress |
backend-ai-indicator.ts |
After indicator migration |
@material/mwc-circular-progress |
Evaluate | Evaluate |
@material/mwc-snackbar |
lablup-notification.ts |
After notification migration |
@material/mwc-drawer |
backend-ai-webui.ts |
After app shell migration |
@material/mwc-top-app-bar-fixed |
backend-ai-webui.ts |
After app shell migration |
@material/mwc-icon |
Evaluate | Evaluate |
@material/mwc-radio |
Evaluate | Evaluate |
@material/mwc-slider |
Evaluate | Evaluate |
@material/mwc-switch |
Evaluate | Evaluate |
@material/mwc-tab |
Evaluate | Evaluate |
@material/mwc-tab-bar |
Evaluate | Evaluate |
@material/mwc-textarea |
Evaluate | Evaluate |
@material/mwc-formfield |
Evaluate | Evaluate |
@material/mwc-line-ripple |
Evaluate | Evaluate |
@material/mwc-ripple |
Evaluate | Evaluate |
Part E: Evaluate Vaadin Dependency Removal
9 Vaadin packages currently in package.json:
@vaadin/combo-box,@vaadin/date-time-picker,@vaadin/grid,@vaadin/icons,@vaadin/item,@vaadin/progress-bar,@vaadin/select,@vaadin/text-field,@vaadin/tooltip- Currently used by:
backend-ai-project-switcher.ts(1 file) - Can be removed after project-switcher is migrated to React (separate issue)
Part F: Evaluate Lit Core Dependency Removal
Lit core packages:
lit(v3.3.2)@lit/reactive-element(v2.1.2)lit-translate(v2.0.1)
Remaining Lit components after this epic (20 files):
| Category | Components | Priority for Future Migration |
|---|---|---|
| App Shell | backend-ai-webui.ts, backend-ai-page.ts |
Last (depends on all others) |
| Views | backend-ai-edu-applauncher.ts, backend-ai-serving-view.ts, backend-ai-error-view.ts |
Medium |
| Widgets | backend-ai-project-switcher.ts, lablup-notification.ts, lablup-codemirror.ts, lablup-expansion.ts, lablup-loading-dots.ts |
Medium |
| Indicators | backend-ai-indicator.ts, backend-ai-indicator-pool.ts |
Medium |
| State/Utils | backend-ai-tasker.ts, backend-ai-metadata-store.ts, backend-ai-settings-store.ts, backend-ai-common-utils.ts, backend-ai-painkiller.ts |
High (can be replaced with React hooks/context) |
| Styles | backend-ai-general-styles.ts, backend-ai-webui-styles.ts, paper-color.ts |
High (can be replaced with Ant Design theme tokens) |
Lit core can only be removed after ALL 20 remaining components are migrated. This issue should produce a report documenting which components still depend on Lit and a recommended migration order for subsequent epics.
Cleanup Checklist
- Verify all dialog migrations are complete and working
- Remove
backend-ai-dialog.tsand related type definitions - Remove all migrated Lit component files and their type declarations in
d/components/ - Remove unused MWC package imports from remaining components
- Run
grep -r "backend-ai-dialog"to find any remaining references - Run
grep -r "mwc-dialog"to verify no direct mwc-dialog usage remains - Evaluate and remove unused
@material/mwc-*packages frompackage.json - Evaluate removability of
@vaadin/*packages - Document remaining Lit dependencies and recommended migration order
- Run
pnpm installto verify dependency tree is clean - Run
pnpm run buildto verify no build errors - Run
pnpm run lintto check for any issues - Run
pnpm run testto verify no test regressions - Update E2E tests if they reference removed elements
- Measure and report bundle size reduction
Acceptance Criteria
- Lit file removed:
src/components/backend-ai-dialog.ts,src/components/backend-ai-app-launcher.ts, and all related type declarations deleted from codebase - All 8 dialog-related Lit files confirmed removed
- All removable MWC packages removed from
package.json - Build, lint, and tests pass
- Bundle size reduction measured and documented
- Remaining Lit dependency report produced: list of 20 remaining Lit components with recommended migration order for future epics
Expected Impact
- Reduced bundle size (MWC packages removed, fewer Lit runtime dependencies)
- Simplified component architecture (single UI framework for dialogs)
- Removal of Shadow DOM / z-index conflict issues between Lit and React modals
- Cleaner dependency tree
- Clear roadmap for subsequent Lit removal epics