fix(ui): move scope trail into TopBar breadcrumb instead of separate element
This commit is contained in:
@@ -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' }}>
|
||||
|
||||
Reference in New Issue
Block a user