fix(ui): move scope trail into TopBar breadcrumb instead of separate element
Some checks failed
CI / cleanup-branch (push) Has been skipped
CI / docker (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / deploy-feature (push) Has been cancelled
CI / build (push) Has been cancelled

This commit is contained in:
hsiegeln
2026-03-28 14:26:36 +01:00
parent 77c73fe3e6
commit d63a9f8ce7

View File

@@ -7,7 +7,6 @@ import { useSearchExecutions } from '../api/queries/executions';
import { useAuthStore } from '../auth/auth-store'; import { useAuthStore } from '../auth/auth-store';
import { useState, useMemo, useCallback, useEffect } from 'react'; import { useState, useMemo, useCallback, useEffect } from 'react';
import { ContentTabs } from './ContentTabs'; import { ContentTabs } from './ContentTabs';
import { ScopeTrail } from './ScopeTrail';
import { useScope } from '../hooks/useScope'; import { useScope } from '../hooks/useScope';
function healthToColor(health: string): string { function healthToColor(health: string): string {
@@ -166,22 +165,38 @@ function LayoutContent() {
const isAdminPage = location.pathname.startsWith('/admin'); const isAdminPage = location.pathname.startsWith('/admin');
const breadcrumb = useMemo(() => { const breadcrumb = useMemo(() => {
if (!isAdminPage) return []; if (isAdminPage) {
const LABELS: Record<string, string> = { const LABELS: Record<string, string> = {
admin: 'Admin', admin: 'Admin',
rbac: 'Users & Roles', rbac: 'Users & Roles',
audit: 'Audit Log', audit: 'Audit Log',
oidc: 'OIDC', oidc: 'OIDC',
database: 'Database', database: 'Database',
opensearch: 'OpenSearch', opensearch: 'OpenSearch',
appconfig: 'App Config', appconfig: 'App Config',
}; };
const parts = location.pathname.split('/').filter(Boolean); const parts = location.pathname.split('/').filter(Boolean);
return parts.map((part, i) => ({ return parts.map((part, i) => ({
label: LABELS[part] ?? part, label: LABELS[part] ?? part,
...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}), ...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
})); }));
}, [location.pathname, isAdminPage]); }
// Scope trail as breadcrumb items
const items: { label: string; href?: string }[] = [
{ label: 'All Applications', href: `/${scope.tab}` },
];
if (scope.appId) {
items.push({ label: scope.appId, href: `/${scope.tab}/${scope.appId}` });
}
if (scope.routeId) {
items.push({ label: scope.routeId });
}
// Last item has no href (current location)
if (items.length > 0 && !scope.routeId && !scope.appId) {
delete items[items.length - 1].href;
}
return items;
}, [location.pathname, isAdminPage, scope.tab, scope.appId, scope.routeId]);
const handleLogout = useCallback(() => { const handleLogout = useCallback(() => {
logout(); logout();
@@ -250,12 +265,7 @@ function LayoutContent() {
/> />
{!isAdminPage && ( {!isAdminPage && (
<> <ContentTabs active={scope.tab} onChange={setTab} />
<ContentTabs active={scope.tab} onChange={setTab} />
<div style={{ padding: '0 1.5rem', paddingTop: '0.5rem' }}>
<ScopeTrail scope={scope} onNavigate={(path) => navigate(path)} />
</div>
</>
)} )}
<main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : '0.75rem 1.5rem' }}> <main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : '0.75rem 1.5rem' }}>