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 { useState, useMemo, useCallback, useEffect } from 'react';
import { ContentTabs } from './ContentTabs';
import { ScopeTrail } from './ScopeTrail';
import { useScope } from '../hooks/useScope';
function healthToColor(health: string): string {
@@ -166,22 +165,38 @@ function LayoutContent() {
const isAdminPage = location.pathname.startsWith('/admin');
const breadcrumb = useMemo(() => {
if (!isAdminPage) return [];
const LABELS: Record<string, string> = {
admin: 'Admin',
rbac: 'Users & Roles',
audit: 'Audit Log',
oidc: 'OIDC',
database: 'Database',
opensearch: 'OpenSearch',
appconfig: 'App Config',
};
const parts = location.pathname.split('/').filter(Boolean);
return parts.map((part, i) => ({
label: LABELS[part] ?? part,
...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
}));
}, [location.pathname, isAdminPage]);
if (isAdminPage) {
const LABELS: Record<string, string> = {
admin: 'Admin',
rbac: 'Users & Roles',
audit: 'Audit Log',
oidc: 'OIDC',
database: 'Database',
opensearch: 'OpenSearch',
appconfig: 'App Config',
};
const parts = location.pathname.split('/').filter(Boolean);
return parts.map((part, i) => ({
label: LABELS[part] ?? part,
...(i < parts.length - 1 ? { href: '/' + parts.slice(0, i + 1).join('/') } : {}),
}));
}
// 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(() => {
logout();
@@ -250,12 +265,7 @@ function LayoutContent() {
/>
{!isAdminPage && (
<>
<ContentTabs active={scope.tab} onChange={setTab} />
<div style={{ padding: '0 1.5rem', paddingTop: '0.5rem' }}>
<ScopeTrail scope={scope} onNavigate={(path) => navigate(path)} />
</div>
</>
<ContentTabs active={scope.tab} onChange={setTab} />
)}
<main style={{ flex: 1, overflow: 'auto', padding: isAdminPage ? '1.5rem' : '0.75rem 1.5rem' }}>