cameleer/cameleer-server
1
0
Fork 0
Code Issues 43 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: RBAC page reads cmd-k navigation state for tab switch and highlight

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-02 23:40:03 +02:00
parent 69ca52b25e
commit 146398b183
4 changed files with 66 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/pages/Admin/RbacPage.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router';
import { StatCard, Tabs } from '@cameleer/design-system';
import { useRbacStats } from '../../api/queries/admin/rbac';
import styles from './UserManagement.module.css';
@@ -12,9 +13,30 @@ const TABS = [
{ label: 'Roles', value: 'roles' },
];
const VALID_TABS = new Set(TABS.map((t) => t.value));
export default function RbacPage() {
const { data: stats } = useRbacStats();
const location = useLocation();
const navigate = useNavigate();
const [tab, setTab] = useState('users');
const [highlightId, setHighlightId] = useState<string | null>(null);
// Read tab + highlight from location state (set by cmd-k navigation)
useEffect(() => {
const state = location.state as { tab?: string; highlight?: string } | null;
if (!state) return;
if (state.tab && VALID_TABS.has(state.tab)) {
setTab(state.tab);
}
if (state.highlight) {
setHighlightId(state.highlight);
}
// Consume the state so back-navigation doesn't re-trigger
navigate(location.pathname, { replace: true, state: null });
}, [location.state]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div>
@@ -23,11 +45,11 @@ export default function RbacPage() {
<StatCard label="Groups" value={stats?.groupCount ?? 0} />
<StatCard label="Roles" value={stats?.roleCount ?? 0} />
</div>
<Tabs tabs={TABS} active={tab} onChange={setTab} />
<Tabs tabs={TABS} active={tab} onChange={(v) => { setTab(v); setHighlightId(null); }} />
<div className={styles.tabContent}>
{tab === 'users' && <UsersTab />}
{tab === 'groups' && <GroupsTab />}
{tab === 'roles' && <RolesTab />}
{tab === 'users' && <UsersTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
{tab === 'groups' && <GroupsTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
{tab === 'roles' && <RolesTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
</div>
</div>
);