Skip to content

feat: Migrate backend-ai-edu-applauncher to React #5377

@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

Migrate backend-ai-edu-applauncher.ts (Lit-Element, ~550 lines) to a React component. This is a specialized education-focused app launcher that wraps backend-ai-app-launcher and adds session creation/reuse logic for educational scenarios.

Part of epic #5364 — Phase 4 (App launcher)
Depends on: #5372 (App launcher main dialog must be migrated first, since edu-launcher delegates to it)

Current Implementation

File: src/components/backend-ai-edu-applauncher.ts

What it does:

  • Simplified app launching experience for educational users
  • Queries for existing compatible sessions and reuses them
  • Creates new sessions using session templates if no compatible session exists
  • Mounts specific vfolders for educational content
  • Launches apps with specific credentials and bootstrap scripts
  • Renders <backend-ai-app-launcher> internally for actual app launching

Key state:

  • appName, sessionId, sessionUuid — Current session info
  • project, group, resourcePolicy — Project/group info from prepareProjectInformation()
  • Session templates — Fetched from backend for session creation

MWC components used: None directly (delegates to backend-ai-app-launcher)

Integration points:

  • Uses globalThis.backendaiclient for Backend.AI API calls
  • Uses globalThis.lablupNotification and globalThis.lablupIndicator
  • Navigates via /edu-applauncher route

Migration Plan

  1. Create react/src/components/EduAppLauncher.tsx (or react/src/pages/EduAppLauncherPage.tsx)
  2. Extract session creation/reuse logic into a custom hook (useEduSession)
  3. Reuse migrated AppLauncherModal (from feat: Migrate backend-ai-app-launcher main dialog and infrastructure to React #5372) directly as a React component
  4. Use useBAISignedRequestWithPromise for Backend.AI API calls
  5. Add React route for /edu-applauncher in react/src/routes.tsx
  6. Register as web component via reactToWebComponent for backward compatibility during transition

Acceptance Criteria

  • Lit file removed: src/components/backend-ai-edu-applauncher.ts and its type declarations deleted from codebase
  • EduAppLauncher React component created
  • Session query/reuse logic works correctly
  • Session creation via templates works
  • VFolder mounting for educational content works
  • App launching delegates to React AppLauncherModal
  • React route registered for /edu-applauncher
  • i18n translations preserved
  • Notification and indicator integration works

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:uxUI / UX issue.effort:normalNeed to understand a few modules / some extent of contextual or historical information.platform:webWeb-specific issuetype:enhanceAdd new features

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions