auth-yes/ui/components/admin/drawers/GrantDrawer.tsx
google-labs-jules[bot] 65f59521c0 feat(ui): decompose Admin UI with separate Drawers and Scripts
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>
2026-08-26 18:37:15 +00:00

56 lines
1.7 KiB
TypeScript

export const GrantDrawer = (
{ user, allApps }: { user: any; allApps: any[] },
) => {
return (
<div style="margin-top: 1rem; padding: 1.25rem; background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);">
<h4 style="margin: 0 0 0.75rem 0; font-size: 0.95rem; color: var(--text-primary);">
Assign / Update Application Access
</h4>
<form
id="grantAccessForm"
onsubmit={`handleGrantAccess(event, '${user.id}')`}
style="display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap;"
>
<div style="flex: 2; min-width: 200px;">
<label style="display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-secondary);">
Application
</label>
<select
id="grantAppId"
onchange="updateRoleOptions()"
required
style="width: 100%;"
>
{allApps.map((app) => (
<option value={app.id}>
{app.name} ({app.spiffe_id})
</option>
))}
</select>
</div>
<div style="flex: 1; min-width: 140px;">
<label style="display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-secondary);">
Assigned Role
</label>
<select
id="grantRole"
required
style="width: 100%;"
>
{/* Dynamically populated */}
</select>
</div>
<button
type="submit"
class="btn-primary"
style="min-height: 44px;"
>
Save Grant
</button>
</form>
</div>
);
};