tylerg/auth-yes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
auth-yes/tasks/complete/2026-0825.01.jul.story.arch.monolith-decomposition-roadmap-1845.ph2.md
google-labs-jules[bot] 4c7d8d4af7 feat(ui): decompose admin pages into reusable AdminTable and AdminModal components 
Refactored AdminInvitesPage, AdminUserDetailsPage, AdminRolesPage, and AdminAppsPage to use the new pure Hono SSR JSX stateless components.
Fixed missing import definitions in AdminRolesPage.
Moved task file to complete state.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
2026-08-26 00:34:29 +00:00

2.0 KiB
Raw Blame History

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.