style(role-parity): align runtime role list actions with next surface

This commit is contained in:
Ashwin Kumar 2026-03-20 16:09:21 +01:00
parent 78d03e67fb
commit cd780906b1

View file

@ -1,5 +1,5 @@
import { A, useSearchParams } from '@solidjs/router';
import { createMemo, createResource, createSignal, Show } from 'solid-js';
import { createMemo, createResource, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell';
import ExternalRoleTabs from '~/components/admin/ExternalRoleTabs';
@ -37,25 +37,9 @@ async function loadExternalRoles(): Promise<ExternalRole[]> {
export default function RuntimeRolesPage() {
const [searchParams] = useSearchParams();
const [roles, { refetch }] = createResource(loadExternalRoles);
const [deleting, setDeleting] = createSignal('');
const [deleteError, setDeleteError] = createSignal('');
const [roles] = createResource(loadExternalRoles);
const selectedRoleKey = createMemo(() => (searchParams.roleKey || '').toLowerCase());
const handleDelete = async (id: string, name: string) => {
if (!confirm(`Delete external role "${name}"?`)) return;
try {
setDeleting(id);
const res = await fetch(`${API}/api/admin/roles/${id}`, { method: 'DELETE' });
if (!res.ok) throw new Error('Failed to delete');
refetch();
} catch (err: any) {
setDeleteError(err.message || 'Failed to delete');
} finally {
setDeleting('');
}
};
return (
<AdminShell>
<div class="page-hero-card page-actions">
@ -71,10 +55,6 @@ export default function RuntimeRolesPage() {
<ExternalRoleTabs />
<Show when={deleteError()}>
<div class="error-box">{deleteError()}</div>
</Show>
<section class="card" style="padding: 0; overflow: hidden;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0">
<div>
@ -128,14 +108,6 @@ export default function RuntimeRolesPage() {
<div class="table-actions">
<A class="action-icon-btn" href={`/admin/runtime-roles/${encodeURIComponent(role.roleKey)}`} target="_blank" rel="noreferrer" title="View External Role">👁</A>
<A class="action-icon-btn" href={`/admin/runtime-roles/${encodeURIComponent(role.roleKey)}`} title="Edit External Role"></A>
<button
class="action-icon-btn danger"
disabled={deleting() === role.id}
onClick={() => handleDelete(role.id, role.displayName)}
title="Delete External Role"
>
{deleting() === role.id ? '...' : '🗑'}
</button>
</div>
</td>
</tr>