266 lines
11 KiB
Markdown
266 lines
11 KiB
Markdown
# Tasks: Superset-Style UX Redesign
|
|
|
|
**Input**: Design documents from `/specs/019-superset-ux-redesign/`
|
|
**Prerequisites**: plan.md ✅, spec.md ✅, research.md ✅, data-model.md ✅, contracts/ ✅
|
|
|
|
**Tests**: Not explicitly requested - implementation tasks only.
|
|
|
|
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
|
|
|
## Format: `[ID] [P?] [Story] Description`
|
|
|
|
- **[P]**: Can run in parallel (different files, no dependencies)
|
|
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
|
|
- Include exact file paths in descriptions
|
|
|
|
## Path Conventions
|
|
|
|
- **Web app**: `backend/src/`, `frontend/src/`
|
|
|
|
---
|
|
|
|
## Phase 1: Setup (Shared Infrastructure)
|
|
|
|
**Purpose**: Create new directory structure and stores for layout state
|
|
|
|
- [ ] T001 Create `frontend/src/lib/components/layout/` directory for shared layout components
|
|
- [ ] T002 Create `frontend/src/lib/components/hubs/` directory for resource hub pages
|
|
- [ ] T003 [P] Create `frontend/src/lib/stores/sidebar.js` with persistentStore pattern for sidebar state
|
|
- [ ] T004 [P] Create `frontend/src/lib/stores/taskDrawer.js` with resourceTaskMap store
|
|
- [ ] T005 [P] Create `frontend/src/lib/stores/activity.js` as derived store from taskDrawer
|
|
|
|
---
|
|
|
|
## Phase 2: Foundational (Blocking Prerequisites)
|
|
|
|
**Purpose**: Core layout components that MUST be complete before ANY user story can be implemented
|
|
|
|
**⚠️ CRITICAL**: No user story work can begin until this phase is complete
|
|
|
|
- [ ] T006 Create `frontend/src/lib/components/layout/Sidebar.svelte` with categories: DASHBOARDS, DATASETS, STORAGE, ADMIN
|
|
- [ ] T007 Create `frontend/src/lib/components/layout/TopNavbar.svelte` with Logo, Search placeholder, Activity indicator, User menu
|
|
- [ ] T008 Create `frontend/src/lib/components/layout/Breadcrumbs.svelte` for page hierarchy navigation
|
|
- [ ] T009 Update `frontend/src/routes/+layout.svelte` to include Sidebar, TopNavbar, and main content area
|
|
- [ ] T010 Add i18n keys for navigation labels in `frontend/src/lib/i18n/translations/en.json`
|
|
- [ ] T011 Add i18n keys for navigation labels in `frontend/src/lib/i18n/translations/ru.json`
|
|
|
|
**Checkpoint**: Foundation ready - user story implementation can now begin
|
|
|
|
---
|
|
|
|
## Phase 3: User Story 1 - Resource-Centric Navigation (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Users can navigate through a persistent left sidebar with resource categories
|
|
|
|
**Independent Test**: Click "Dashboards" or "Datasets" in sidebar and verify correct hub loads
|
|
|
|
### Implementation for User Story 1
|
|
|
|
- [ ] T012 [US1] Implement sidebar collapse/expand toggle with animation in `frontend/src/lib/components/layout/Sidebar.svelte`
|
|
- [ ] T013 [US1] Add mobile hamburger menu toggle in `frontend/src/lib/components/layout/TopNavbar.svelte`
|
|
- [ ] T014 [US1] Implement active item highlighting in sidebar using `sidebarStore`
|
|
- [ ] T015 [US1] Add localStorage persistence for sidebar state (collapsed/expanded)
|
|
- [ ] T016 [US1] Implement responsive sidebar (overlay mode on mobile < 768px)
|
|
- [ ] T017 [US1] Verify implementation matches ux_reference.md (Sidebar mockups)
|
|
|
|
**Checkpoint**: Sidebar navigation fully functional and responsive
|
|
|
|
---
|
|
|
|
## Phase 4: User Story 2 - Global Task Drawer & Activity Monitoring (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Users can monitor running tasks without losing context via a slide-out drawer
|
|
|
|
**Independent Test**: Trigger a Backup and verify Task Drawer opens with log stream
|
|
|
|
### Implementation for User Story 2
|
|
|
|
- [ ] T018 [US2] Create `frontend/src/lib/components/layout/TaskDrawer.svelte` as slide-out panel from right
|
|
- [ ] T019 [US2] Integrate existing `TaskLogViewer` component inside Task Drawer
|
|
- [ ] T020 [US2] Implement Activity indicator badge in TopNavbar showing `activeCount` from store
|
|
- [ ] T021 [US2] Connect Task Drawer to WebSocket for real-time log streaming
|
|
- [ ] T022 [US2] Implement interactive area in drawer for `PasswordPrompt` and other inputs
|
|
- [ ] T023 [US2] Add close button that allows task to continue running in background
|
|
- [ ] T024 [US2] Implement drawer open trigger from Activity indicator click
|
|
- [ ] T025 [US2] Verify implementation matches ux_reference.md (Task Drawer mockup)
|
|
|
|
**Checkpoint**: Task Drawer fully functional with real-time logs
|
|
|
|
---
|
|
|
|
## Phase 5: User Story 5 - Unified Top Navigation Bar (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Consistent top navbar with Logo, Search, Activity, and User menu
|
|
|
|
**Independent Test**: Navigate to any page and verify top bar shows all elements
|
|
|
|
### Implementation for User Story 5
|
|
|
|
- [ ] T026 [US5] Implement Logo/Brand link in TopNavbar that returns to Home
|
|
- [ ] T027 [US5] Add Global Search placeholder (non-functional, for future) in TopNavbar
|
|
- [ ] T028 [US5] Implement User menu dropdown with Profile, Settings, Logout options
|
|
- [ ] T029 [US5] Connect User menu Logout to authentication logout flow
|
|
- [ ] T030 [US5] Verify implementation matches ux_reference.md (Top Navigation Bar mockup)
|
|
|
|
**Checkpoint**: Top navbar complete with all elements
|
|
|
|
---
|
|
|
|
## Phase 6: User Story 3 - Dashboard Hub Management (Priority: P2)
|
|
|
|
**Goal**: Central hub for dashboards with Git status and action triggers
|
|
|
|
**Independent Test**: Navigate to `/dashboards`, select environment, verify grid displays correctly
|
|
|
|
### Backend for User Story 3
|
|
|
|
- [ ] T031 [P] [US3] Create `backend/src/api/routes/dashboards.py` with GET /api/dashboards endpoint
|
|
- [ ] T032 [P] [US3] Create `backend/src/services/resource_service.py` for shared resource fetching logic
|
|
- [ ] T033 [US3] Implement dashboard list fetching with Git status and last task status
|
|
|
|
### Frontend for User Story 3
|
|
|
|
- [ ] T034 [US3] Create `frontend/src/routes/dashboards/+page.svelte` as Dashboard Hub
|
|
- [ ] T035 [US3] Implement environment selector dropdown at top of Dashboard Hub
|
|
- [ ] T036 [US3] Create dashboard grid with columns: Title, Slug, Git Status, Last Task, Actions
|
|
- [ ] T037 [US3] Implement Actions menu with Migrate, Backup, Git Operations options
|
|
- [ ] T038 [US3] Connect Actions menu to existing plugin triggers (Migration, Backup, Git)
|
|
- [ ] T039 [US3] Implement status badge click to open Task Drawer with correct task
|
|
- [ ] T040 [US3] Add empty state when no environments configured or no dashboards found
|
|
- [ ] T041 [US3] Verify implementation matches ux_reference.md (Dashboard Hub Grid mockup)
|
|
|
|
**Checkpoint**: Dashboard Hub fully functional
|
|
|
|
---
|
|
|
|
## Phase 7: User Story 4 - Dataset Hub & Semantic Mapping (Priority: P2)
|
|
|
|
**Goal**: Dedicated hub for datasets with mapping progress
|
|
|
|
**Independent Test**: Navigate to `/datasets` and verify list with mapping progress
|
|
|
|
### Backend for User Story 4
|
|
|
|
- [ ] T042 [P] [US4] Create `backend/src/api/routes/datasets.py` with GET /api/datasets endpoint
|
|
- [ ] T043 [US4] Implement dataset list fetching with mapped fields count
|
|
|
|
### Frontend for User Story 4
|
|
|
|
- [ ] T044 [US4] Create `frontend/src/routes/datasets/+page.svelte` as Dataset Hub
|
|
- [ ] T045 [US4] Implement dataset grid with columns: Table Name, Schema, Mapped Fields, Last Task, Actions
|
|
- [ ] T046 [US4] Implement "Map Columns" action that opens mapping interface
|
|
- [ ] T047 [US4] Add empty state when no datasets found
|
|
- [ ] T048 [US4] Verify implementation matches ux_reference.md
|
|
|
|
**Checkpoint**: Dataset Hub fully functional
|
|
|
|
---
|
|
|
|
## Phase 8: User Story 6 - Consolidated Settings Experience (Priority: P2)
|
|
|
|
**Goal**: All settings consolidated into single section with categories
|
|
|
|
**Independent Test**: Navigate to Settings and verify all categories listed
|
|
|
|
### Backend for User Story 6
|
|
|
|
- [ ] T049 [P] [US6] Extend `backend/src/api/routes/settings.py` with GET /api/settings endpoint
|
|
- [ ] T050 [US6] Implement consolidated settings response with all categories
|
|
|
|
### Frontend for User Story 6
|
|
|
|
- [ ] T051 [US6] Create `frontend/src/routes/settings/+page.svelte` as Settings page
|
|
- [ ] T052 [US6] Implement tabbed navigation: Environments, Connections, LLM, Logging, System
|
|
- [ ] T053 [US6] Reuse existing settings components within each tab
|
|
- [ ] T054 [US6] Implement role-based visibility (hide admin tabs for non-admin users)
|
|
- [ ] T055 [US6] Add user-preference settings (theme, language) accessible to all users
|
|
- [ ] T056 [US6] Verify implementation matches ux_reference.md (Settings Page mockup)
|
|
|
|
**Checkpoint**: Settings page fully functional
|
|
|
|
---
|
|
|
|
## Phase 9: Polish & Cross-Cutting Concerns
|
|
|
|
**Purpose**: Improvements that affect multiple user stories
|
|
|
|
- [ ] T057 [P] Add breadcrumb navigation to all new pages
|
|
- [ ] T058 [P] Implement breadcrumb truncation for deep paths (>3 levels)
|
|
- [ ] T059 Remove old card-based dashboard grid if no longer needed
|
|
- [ ] T060 [P] Add skeleton loaders for resource hub grids
|
|
- [ ] T061 [P] Add error banners for environment connection failures
|
|
- [ ] T062 Run quickstart.md validation for all user stories
|
|
- [ ] T063 Final UX review against ux_reference.md
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order
|
|
|
|
### Phase Dependencies
|
|
|
|
- **Setup (Phase 1)**: No dependencies - can start immediately
|
|
- **Foundational (Phase 2)**: Depends on Setup completion - BLOCKS all user stories
|
|
- **User Stories (Phase 3-8)**: All depend on Foundational phase completion
|
|
- US1, US2, US5 (P1) can proceed in parallel
|
|
- US3, US4, US6 (P2) can proceed after P1 stories or in parallel
|
|
- **Polish (Phase 9)**: Depends on all desired user stories being complete
|
|
|
|
### User Story Dependencies
|
|
|
|
- **US1 (P1)**: Can start after Foundational - No dependencies on other stories
|
|
- **US2 (P1)**: Can start after Foundational - Uses stores from Setup
|
|
- **US5 (P1)**: Can start after Foundational - Uses TopNavbar from Foundational
|
|
- **US3 (P2)**: Can start after Foundational - Uses Task Drawer from US2
|
|
- **US4 (P2)**: Can start after Foundational - Uses Task Drawer from US2
|
|
- **US6 (P2)**: Can start after Foundational - Uses Sidebar from US1
|
|
|
|
### Parallel Opportunities
|
|
|
|
- T003, T004, T005 can run in parallel (different store files)
|
|
- T031, T032 can run in parallel (different backend files)
|
|
- T042 can run in parallel with T031
|
|
- T049 can run in parallel with other backend tasks
|
|
- T057, T058, T060, T061 can run in parallel (different concerns)
|
|
|
|
---
|
|
|
|
## Implementation Strategy
|
|
|
|
### MVP First (P1 Stories Only)
|
|
|
|
1. Complete Phase 1: Setup
|
|
2. Complete Phase 2: Foundational (CRITICAL - blocks all stories)
|
|
3. Complete Phase 3: User Story 1 (Sidebar Navigation)
|
|
4. Complete Phase 4: User Story 2 (Task Drawer)
|
|
5. Complete Phase 5: User Story 5 (Top Navbar)
|
|
6. **STOP and VALIDATE**: Test all P1 stories independently
|
|
7. Deploy/demo if ready
|
|
|
|
### Full Delivery
|
|
|
|
1. MVP First (above)
|
|
2. Add User Story 3 (Dashboard Hub) → Test independently
|
|
3. Add User Story 4 (Dataset Hub) → Test independently
|
|
4. Add User Story 6 (Settings) → Test independently
|
|
5. Complete Polish phase
|
|
6. Final validation
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
| Metric | Value |
|
|
|--------|-------|
|
|
| Total Tasks | 63 |
|
|
| Setup Tasks | 5 |
|
|
| Foundational Tasks | 6 |
|
|
| US1 (Sidebar) Tasks | 6 |
|
|
| US2 (Task Drawer) Tasks | 8 |
|
|
| US5 (Top Navbar) Tasks | 5 |
|
|
| US3 (Dashboard Hub) Tasks | 11 |
|
|
| US4 (Dataset Hub) Tasks | 7 |
|
|
| US6 (Settings) Tasks | 8 |
|
|
| Polish Tasks | 7 |
|
|
| Parallel Opportunities | 15+ |
|
|
| MVP Scope | Phases 1-5 (25 tasks) |
|