diff --git a/packages/ui-tests/stories/navigation/Navigation.stories.tsx b/packages/ui-tests/stories/navigation/Navigation.stories.tsx
index b42869c59..081b66a23 100644
--- a/packages/ui-tests/stories/navigation/Navigation.stories.tsx
+++ b/packages/ui-tests/stories/navigation/Navigation.stories.tsx
@@ -1,10 +1,27 @@
-import { Navigation, Shell, SourceCodeProvider } from '@kaoto/kaoto/testing';
+import {
+ EntitiesContext,
+ EntitiesProvider,
+ Navigation,
+ Shell,
+ SourceCodeProvider,
+ SourceSchemaType,
+ EntitiesContextResult,
+} from '@kaoto/kaoto/testing';
import { StoryFn } from '@storybook/react';
-import { withRouter, reactRouterOutlet, reactRouterParameters } from 'storybook-addon-remix-react-router';
+import { reactRouterOutlet, reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router';
export default {
title: 'Navigation/Navigation',
- decorators: [withRouter],
+ decorators: [
+ withRouter,
+ (Story: StoryFn) => (
+
+
+
+
+
+ ),
+ ],
parameters: {
reactRouter: reactRouterParameters({
routing: reactRouterOutlet({
@@ -15,18 +32,32 @@ export default {
component: Navigation,
};
-const NavigationTemplate: StoryFn = () => {
+const RouteNavigationTemplate: StoryFn = () => {
return ;
};
-const ShellTemplate: StoryFn = () => {
+const KameletNavigationTemplate: StoryFn = () => {
+ return (
+
+
+
+ );
+};
+
+const PipeNavigationTemplate: StoryFn = () => {
return (
-
-
-
+
+
+
);
};
-export const NavigationOpen = NavigationTemplate.bind({});
+const ShellTemplate: StoryFn = () => {
+ return ;
+};
+
+export const RouteNavigationOpen = RouteNavigationTemplate.bind({});
+export const KameletNavigationOpen = KameletNavigationTemplate.bind({});
+export const PipeNavigationOpen = PipeNavigationTemplate.bind({});
export const NavigationWithTopBar = ShellTemplate.bind({});
diff --git a/packages/ui/src/layout/Navigation.test.tsx b/packages/ui/src/layout/Navigation.test.tsx
new file mode 100644
index 000000000..56f32e70b
--- /dev/null
+++ b/packages/ui/src/layout/Navigation.test.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { EntitiesContextResult } from '../hooks/entities';
+import { SourceSchemaType } from '../models/camel';
+import { EntitiesContext } from '../providers';
+import { Navigation } from './Navigation';
+
+describe('Navigation Component', () => {
+ it.each([
+ SourceSchemaType.Route,
+ SourceSchemaType.Kamelet,
+ SourceSchemaType.Pipe,
+ SourceSchemaType.KameletBinding,
+ SourceSchemaType.Integration,
+ ])('navigation sidebar for: %s', (currentSchemaType) => {
+ const wrapper = render(
+
+
+
+
+ ,
+ );
+
+ expect(wrapper.asFragment()).toMatchSnapshot();
+ });
+});
diff --git a/packages/ui/src/layout/Navigation.tsx b/packages/ui/src/layout/Navigation.tsx
index 6b0f02b4d..e075deedd 100644
--- a/packages/ui/src/layout/Navigation.tsx
+++ b/packages/ui/src/layout/Navigation.tsx
@@ -1,15 +1,47 @@
import { Nav, NavExpandable, NavItem, NavList, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
import clsx from 'clsx';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useContext, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Links } from '../router/links.models';
import { NavElements } from './navigation.models';
+import { EntitiesContext } from '../providers';
+import { SourceSchemaType } from '../models/camel';
interface INavigationSidebar {
isNavOpen: boolean;
}
export const Navigation: FunctionComponent = (props) => {
const currentLocation = useLocation();
+ const { currentSchemaType } = useContext(EntitiesContext)!;
+
+ const navElements: NavElements = useMemo(
+ () => [
+ {
+ title: 'Visualization',
+ children: [
+ { title: 'Design', to: Links.Home },
+ { title: 'Source Code', to: Links.SourceCode },
+ ],
+ },
+ {
+ title: 'Beans',
+ to: Links.Beans,
+ hidden: () => !NAVIGATION_ELEMENTS.Beans.includes(currentSchemaType),
+ },
+ {
+ title: 'Metadata',
+ to: Links.Metadata,
+ hidden: () => !NAVIGATION_ELEMENTS.Metadata.includes(currentSchemaType),
+ },
+ {
+ title: 'Pipe ErrorHandler',
+ to: Links.PipeErrorHandler,
+ hidden: () => !NAVIGATION_ELEMENTS.PipeErrorHandler.includes(currentSchemaType),
+ },
+ { title: 'Catalog', to: Links.Catalog },
+ ],
+ [currentSchemaType],
+ );
return (