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 { 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' }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user