feat: enhance API management UI with new navigation structure and detailed API workspace (0335d787) · Commits · OOP / code / portal

api-products.example.json

+10 −1

Changes for api-products.example.json: 10 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -19,7 +19,16 @@
		},
		{
		"name": "quality-on-demand",
		"scopes": ["qod-sessions-read", "qod-sessions-write", "qod-sessions-delete"]
		"scopes": [
		"qod-sessions-read",
		"qod-sessions-write",
		"qod-sessions-delete",
		"quality-on-demand:sessions:create",
		"quality-on-demand:sessions:read",
		"quality-on-demand:sessions:delete",
		"quality-on-demand:sessions:update",
		"quality-on-demand:sessions:retrieve-by-device"
		]
		},
		{
		"name": "location-retrieval",

portal-gui/src/app/config/navigation.ts

+36 −17

Changes for portal-gui/src/app/config/navigation.ts: 36 added lines, 17 removed lines.
Original line number	Diff line number	Diff line
		@@ -15,6 +15,27 @@ import { ROUTES } from './route';

		import type { BreadcrumbItem } from '@/types/common';

		export const applicationNavItems: NavItem[] = [
		{
		title: 'Application profiles',
		to: ROUTES.APPLICATION_PROFILES,
		description: 'Onboard and manage edge application profiles.',
		icon: FileText,
		},
		{
		title: 'Instances',
		to: ROUTES.APPLICATION_INSTANCES,
		description: 'Run and manage edge application instances.',
		icon: Server,
		},
		{
		title: 'Deployments',
		to: ROUTES.APPLICATION_DEPLOYMENTS,
		description: 'View application deployments across edge cloud zones.',
		icon: Rocket,
		},
		];

		export const mainNavItems: NavItem[] = [
		{
		title: 'Home',
		@@ -24,7 +45,7 @@ export const mainNavItems: NavItem[] = [
		showInSidebar: true,
		},
		{
		title: 'APIs',
		title: 'API Catalog',
		to: ROUTES.APIS,
		description: 'Browse available APIs',
		icon: BoxesIcon,
		@@ -40,29 +61,24 @@ export const mainNavItems: NavItem[] = [
		roles: ['app-provider'],
		},
		{
		title: 'Applications',
		to: ROUTES.APPLICATIONS,
		description: 'Manage applications',
		title: 'Edge Application Management',
		to: ROUTES.EDGE_APPLICATION_MANAGEMENT,
		description: 'Manage application lifecycles on the edge cloud.',
		icon: Package,
		showInSidebar: true,
		children: [
		{
		title: 'Profiles',
		to: ROUTES.APPLICATION_PROFILES,
		description: 'Manage application profiles',
		title: 'Overview',
		to: `${ROUTES.EDGE_APPLICATION_MANAGEMENT}/overview`,
		description: 'Documentation and interactive API reference.',
		icon: FileText,
		},
		{
		title: 'Instances',
		to: ROUTES.APPLICATION_INSTANCES,
		description: 'View application instances',
		icon: Server,
		},
		{
		title: 'Deployments',
		to: ROUTES.APPLICATION_DEPLOYMENTS,
		description: 'View application deployments',
		title: 'Explore',
		to: ROUTES.APPLICATIONS,
		description:
		'Work with application profiles, instances, and deployments.',
		icon: Rocket,
		children: applicationNavItems,
		},
		],
		},
		@@ -129,6 +145,9 @@ export function getBreadcrumbItems(pathname: string): BreadcrumbItem[] {
		title: item.title,
		to: item.to,
		}));
		if (pathname.startsWith(`${ROUTES.APIS}/`) && trail[0]?.to !== ROUTES.APIS) {
		trail.unshift({ title: 'API Catalog', to: ROUTES.APIS });
		}
		return trail[0]?.to === ROUTES.HOME
		? trail
		: [{ title: 'Home', to: ROUTES.HOME }, ...trail];

portal-gui/src/app/config/route.ts

+6 −4

Changes for portal-gui/src/app/config/route.ts: 6 added lines, 4 removed lines.
Original line number	Diff line number	Diff line
		@@ -6,10 +6,12 @@ export const ROUTES = {
		APIS: '/apis',
		API_CLIENTS: '/api-clients',
		API: '/apis/:id',
		APPLICATIONS: '/applications',
		APPLICATION_PROFILES: '/applications/profiles',
		APPLICATION_INSTANCES: '/applications/instances',
		APPLICATION_DEPLOYMENTS: '/applications/deployments',
		EDGE_APPLICATION_MANAGEMENT: '/apis/edge-application-management',
		APPLICATIONS: '/apis/edge-application-management/explore',
		APPLICATION_PROFILES: '/apis/edge-application-management/explore/profiles',
		APPLICATION_INSTANCES: '/apis/edge-application-management/explore/instances',
		APPLICATION_DEPLOYMENTS:
		'/apis/edge-application-management/explore/deployments',
		APPLICATION: '/applications/profiles/:appId',
		FEDERATION: '/federation',
		FORBIDDEN: '/403',

portal-gui/src/app/router.tsx

+36 −12

Changes for portal-gui/src/app/router.tsx: 36 added lines, 12 removed lines.
Original line number	Diff line number	Diff line
		import { createBrowserRouter } from 'react-router-dom';
		import { createBrowserRouter, Navigate } from 'react-router-dom';
		import { ApiWorkspacePage } from '@/features/apis/api-workspace';

		// Layouts
		import { DashboardLayout } from '@/layouts/dashboard-layout';
		@@ -70,27 +71,50 @@ export const router = createBrowserRouter([
		),
		},

		// API details MUST match /apis/:id
		{
		path: ROUTES.API,
		element: <ApiDetailsPage />,
		},
		// Application lists
		element: <ApiWorkspacePage />,
		children: [
		{ index: true, element: <Navigate to="overview" replace /> },
		{ path: 'overview', element: <ApiDetailsPage /> },
		{
		path: ROUTES.APPLICATIONS,
		path: 'explore',
		element: <ApplicationsPage />,
		children: [
		{ path: 'profiles', element: <ApplicationProfilesPage /> },
		{ path: 'instances', element: <ApplicationInstancesPage /> },
		{ path: 'deployments', element: <DeploymentsPage /> },
		],
		},
		],
		},
		{
		path: '/applications',
		element: <Navigate to={ROUTES.APPLICATIONS} replace />,
		},
		{
		path: ROUTES.APPLICATION_PROFILES,
		element: <ApplicationProfilesPage />,
		path: '/applications/profiles',
		element: <Navigate to={ROUTES.APPLICATION_PROFILES} replace />,
		},
		{
		path: ROUTES.APPLICATION_INSTANCES,
		element: <ApplicationInstancesPage />,
		path: '/applications/instances',
		element: <Navigate to={ROUTES.APPLICATION_INSTANCES} replace />,
		},
		{
		path: ROUTES.APPLICATION_DEPLOYMENTS,
		element: <DeploymentsPage />,
		path: '/applications/deployments',
		element: <Navigate to={ROUTES.APPLICATION_DEPLOYMENTS} replace />,
		},
		{
		path: '/apis/application',
		element: (
		<Navigate to={ROUTES.EDGE_APPLICATION_MANAGEMENT} replace />
		),
		},
		{
		path: '/apis/edge-cloud',
		element: (
		<Navigate to={ROUTES.EDGE_APPLICATION_MANAGEMENT} replace />
		),
		},
		{
		path: ROUTES.FEDERATION,

portal-gui/src/components/common/page-header.tsx

+8 −3

Changes for portal-gui/src/components/common/page-header.tsx: 8 added lines, 3 removed lines.
Original line number	Diff line number	Diff line
		@@ -5,9 +5,14 @@ import { getActiveNavItem } from '@/app/config/navigation';
		type PageHeaderProps = {
		actions?: React.ReactNode;
		children?: React.ReactNode;
		heading?: 'h1' \| 'h2';
		};

		export function PageHeader({ actions, children }: PageHeaderProps) {
		export function PageHeader({
		actions,
		children,
		heading: Heading = 'h1',
		}: PageHeaderProps) {
		const { pathname } = useLocation();
		const page = getActiveNavItem(pathname);
		return (
		@@ -15,9 +20,9 @@ export function PageHeader({ actions, children }: PageHeaderProps) {
		{children}
		<div className="flex items-start justify-between gap-4">
		<div className="space-y-1">
		<h1 className="text-2xl font-semibold tracking-tight">
		<Heading className="text-2xl font-semibold tracking-tight">
		{page?.title}
		</h1>
		</Heading>

		{page?.description && (
		<p className="text-muted-foreground">{page.description}</p>