Azure-Samples / Azure-Samples/tutor

[P1] frontend: Migrate legacy UI surfaces to mature workspace design

Open
#221 2 comments 0 reactions 0 assignees View on GitHub
frontend priority:P1 type:tech-debt
Dominant language
Python
Stars
17
Forks
8
PR merge metrics
No merged PRs in 30d

Description

## Problem inventory
Several frontend surfaces still use older demo/admin styling while the platform direction has moved to the mature role-aware workspace shell documented in docs/standalone-lifelong-learning-ux-ia.md and docs/adr/007-frontend-modernization.md.

Type: tech debt / UX regression risk

## Evidence
- frontend/app/configuration/page.tsx uses a demo launcher grid with saturated gradient cards, repeated logo icons, hover scale effects, and broad marketing copy instead of the current operational shell language.
- frontend/app/configuration/questions/page.tsx and frontend/components/Forms/{Questions,Answers,Grader,Themes}.tsx use multi-color rounded cards and oversized form treatment that does not match the newer workspace surfaces.
- frontend/components/Configuration/Questions.tsx and frontend/components/Configuration/Theme.tsx duplicate older full-screen form implementations.
- frontend/components/Dashboard/E-commerce.tsx and frontend/components/Calender/index.tsx still contain TailAdmin/e-commerce/demo content and visual patterns that do not map to Tutor learning workflows.

## Impact assessment
User impact: high. The old UI lowers product trust and makes pilot users feel they are moving between different products.
Blast radius: frontend-wide, concentrated in configuration/admin/form surfaces and unused legacy components.

## Acceptance criteria
- [ ] Inventory legacy UI components and identify which are routed, imported, or safe to retire.
- [ ] Migrate routed configuration/admin surfaces to the mature role-aware workspace visual language already used by Header, Sidebar, WorkspaceHome, Breadcrumb, and EssaySubmission.
- [ ] Remove or clearly quarantine unused TailAdmin/demo surfaces so they cannot reappear through navigation.
- [ ] Replace toy gradients, repeated logo icons, hover-scale cards, and e-commerce/sample copy with dense operational Tutor-specific layouts.
- [ ] Keep all migrated forms accessible under WCAG 2.2 AA: labels, focus visibility, contrast, target size, status messages, keyboard operability.
- [ ] pnpm --dir frontend lint passes.
- [ ] pnpm --dir frontend build passes with NEXT_PUBLIC_APIM_BASE_URL configured.

## Agent assignment
Primary specialist: UIDesigner
Supporting specialist: TypeScriptDeveloper

## Dependency notes
This can start immediately, but it should consume the route/functionality map from the ADR-007 feature issue before deleting or renaming any surfaced route.

## Related backlog
- #21 common dashboard work may overlap with dashboard retirement/replacement.
- #164 supervisor briefing dashboard should use the same mature UI primitives rather than legacy dashboard components.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.