65f59521c0
Phase 2 Admin Drawers & Scripts execution: - Extract `AppDrawer`, `InviteDrawer`, `RoleEditorDrawer`, and `GrantDrawer`. - Extract `AdminAppsScript`, `AdminInvitesScript`, `AdminRolesScript`, and `AdminUserDetailsScript`. - Hook extracted components into their respective pages. - Format `AdminRolesPage.tsx` and all modified files using `deno fmt`. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
53 lines
2.2 KiB
Markdown
53 lines
2.2 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/drawers/*.tsx`,
|
|
`ui/components/admin/*.tsx`, `ui/ui_scripts.test.ts`
|
|
- **Core Objective:** Phase 2 (Admin Drawers & Scripts): Decompose large admin
|
|
pages by extracting form drawers under `ui/components/admin/drawers/` and
|
|
client script blocks into dedicated SSR JSX script components under
|
|
`ui/components/admin/`.
|
|
- **Dependencies:**
|
|
`tasks/new/2026-0825.01.jul.story.arch.ui-decomposition-roadmap-2300.md`
|
|
- **Additional Important Notes:** Strictly 100% pure Hono SSR JSX. Preserve all
|
|
form submit handlers, action endpoints, and pass `ui/ui_scripts.test.ts`.
|
|
|
|
---
|
|
|
|
### 2. Architectural Considerations & Risks
|
|
|
|
- **Risks:**
|
|
- Breaking admin drawer open/close functions or invite generation triggers if
|
|
script functions are missing or mismatched.
|
|
- **Mitigation:**
|
|
- Encapsulate scripts into dedicated SSR JSX script components
|
|
(`AdminInvitesScript.tsx`, `AdminAppsScript.tsx`, etc.) and ensure all
|
|
client IDs match.
|
|
|
|
### 3. Proposed Implementation
|
|
|
|
1. **Extract Admin Drawers (`ui/components/admin/drawers/`):**
|
|
- `InviteDrawer.tsx`: Invite creation form and options from
|
|
`AdminInvitesPage.tsx`.
|
|
- `GrantDrawer.tsx`: Permission grant assignment form from
|
|
`AdminUserDetailsPage.tsx`.
|
|
- `RoleEditorDrawer.tsx`: Role creation/editing form and permission picker
|
|
from `AdminRolesPage.tsx`.
|
|
- `AppDrawer.tsx`: Connected application registration drawer from
|
|
`AdminAppsPage.tsx`.
|
|
|
|
2. **Extract Admin Script Components (`ui/components/admin/`):**
|
|
- `AdminInvitesScript.tsx`: Client-side handlers for invite generation,
|
|
clipboard copy, and redemption modal.
|
|
- `AdminAppsScript.tsx`: Client-side handlers for app registration, edit
|
|
prefill, and delete.
|
|
- `AdminRolesScript.tsx`: Client-side handlers for role save and permission
|
|
checkboxes.
|
|
- `AdminUserDetailsScript.tsx`: Client-side handlers for grant revoke and
|
|
session kill.
|
|
|
|
3. **Quality Gates & Validation:**
|
|
- Run `deno fmt`, `deno task lint`, `deno task check`.
|
|
- Run `deno test --allow-all` (ensure `ui/ui_scripts.test.ts` passes).
|