45 lines
2.0 KiB
Markdown
45 lines
2.0 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/AdminInvitesPage.tsx`,
|
|
`ui/components/AdminUserDetailsPage.tsx`, `ui/components/AdminRolesPage.tsx`,
|
|
`ui/components/AdminAppsPage.tsx`, `ui/components/admin/AdminTable.tsx`,
|
|
`ui/components/admin/AdminModal.tsx`, `ui/ui_scripts.test.ts`
|
|
- **Core Objective:** Phase 2 (UI Admin Pages Decomposition): Refactor large
|
|
admin pages (each > 490 lines) by extracting repeated table structures, modal
|
|
dialogs, and filters into reusable components under `ui/components/admin/`.
|
|
- **Dependencies:**
|
|
`tasks/new/2026-0825.01.jul.story.arch.monolith-decomposition-roadmap-1845.md`
|
|
- **Additional Important Notes:** Must preserve 100% pure Hono SSR JSX layout
|
|
styling, responsive mobile cards (< 768px), and pass `ui/ui_scripts.test.ts`.
|
|
|
|
---
|
|
|
|
### 2. Architectural Considerations & Risks
|
|
|
|
- **Risks:**
|
|
- Breaking existing DOM event handlers or form submissions on user management,
|
|
app creation, role binding, and invite creation.
|
|
- **Alternatives:**
|
|
- Monolithic single-page components; rejected due to high cognitive complexity
|
|
and code duplication across admin views.
|
|
|
|
### 3. Proposed Implementation
|
|
|
|
1. **Create Shared Admin Subcomponents (`ui/components/admin/`):**
|
|
- `AdminTable.tsx`: Reusable data table component with desktop table and
|
|
mobile card layout support.
|
|
- `AdminModal.tsx`: Reusable modal wrapper with standard backdrop, header,
|
|
and close bindings.
|
|
2. **Decompose Admin Pages:**
|
|
- `AdminInvitesPage.tsx` (771 lines): Extract invite creation drawer and bulk
|
|
action modals.
|
|
- `AdminUserDetailsPage.tsx` (541 lines): Extract grant assignment table and
|
|
session revocation panel.
|
|
- `AdminRolesPage.tsx` (514 lines): Extract role definition forms and
|
|
permission picker.
|
|
- `AdminAppsPage.tsx` (493 lines): Extract app registration drawer and SPIFFE
|
|
attestation card.
|
|
3. **Quality Gates & Validation:**
|
|
- Run `deno fmt`, `deno task lint`, `deno task check`.
|
|
- Run `deno test --allow-all` and verify `ui/ui_scripts.test.ts`.
|