fix(Navigation): Remove items unrelated to current schema

fix: #1444

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) => (
+      <EntitiesProvider>
+        <SourceCodeProvider>
+          <Story />
+        </SourceCodeProvider>
+      </EntitiesProvider>
+    ),
+  ],
   parameters: {
     reactRouter: reactRouterParameters({
       routing: reactRouterOutlet({
@@ -15,18 +32,32 @@ export default {
   component: Navigation,
 };
 
-const NavigationTemplate: StoryFn<typeof Navigation> = () => {
+const RouteNavigationTemplate: StoryFn<typeof Navigation> = () => {
   return <Navigation isNavOpen />;
 };
 
-const ShellTemplate: StoryFn<typeof Shell> = () => {
+const KameletNavigationTemplate: StoryFn<typeof Navigation> = () => {
+  return (
+    <EntitiesContext.Provider value={{ currentSchemaType: SourceSchemaType.Kamelet } as EntitiesContextResult}>
+      <Navigation isNavOpen />
+    </EntitiesContext.Provider>
+  );
+};
+
+const PipeNavigationTemplate: StoryFn<typeof Navigation> = () => {
   return (
-    <SourceCodeProvider>
-      <Shell />
-    </SourceCodeProvider>
+    <EntitiesContext.Provider value={{ currentSchemaType: SourceSchemaType.Pipe } as EntitiesContextResult}>
+      <Navigation isNavOpen />
+    </EntitiesContext.Provider>
   );
 };
 
-export const NavigationOpen = NavigationTemplate.bind({});
+const ShellTemplate: StoryFn<typeof Shell> = () => {
+  return <Shell />;
+};
+
+export const RouteNavigationOpen = RouteNavigationTemplate.bind({});
+export const KameletNavigationOpen = KameletNavigationTemplate.bind({});
+export const PipeNavigationOpen = PipeNavigationTemplate.bind({});
 
 export const NavigationWithTopBar = ShellTemplate.bind({});

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(
+      <Router>
+        <EntitiesContext.Provider value={{ currentSchemaType } as EntitiesContextResult}>
+          <Navigation isNavOpen />
+        </EntitiesContext.Provider>
+      </Router>,
+    );
+
+    expect(wrapper.asFragment()).toMatchSnapshot();
+  });
+});

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<INavigationSidebar> = (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 (
     <PageSidebar isSidebarOpen={props.isNavOpen} id="vertical-sidebar">
@@ -22,7 +54,9 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
                   <NavExpandable
                     id={nav.title}
                     key={nav.title}
-                    className={clsx({ 'pf-v5-u-hidden': nav.hidden })}
+                    data-testid={nav.title}
+                    className={clsx({ 'pf-v5-u-hidden': nav.hidden?.() })}
+                    hidden={nav.hidden?.()}
                     title={nav.title}
                     groupId={nav.title}
                     isActive={nav.children.some((child) => child.to === currentLocation.pathname)}
@@ -32,8 +66,10 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
                       <NavItem
                         id={child.title}
                         key={child.title}
+                        data-testid={child.title}
                         itemId={index}
-                        className={clsx({ 'pf-v5-u-hidden': child.hidden })}
+                        className={clsx({ 'pf-v5-u-hidden': child.hidden?.() })}
+                        hidden={child.hidden?.()}
                         isActive={currentLocation.pathname === child.to}
                       >
                         <Link data-testid={child.title} to={child.to}>
@@ -48,8 +84,10 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
               return (
                 <NavItem
                   id={nav.title}
-                  className={clsx({ 'pf-v5-u-hidden': nav.hidden })}
+                  className={clsx({ 'pf-v5-u-hidden': nav.hidden?.() })}
+                  hidden={nav.hidden?.()}
                   key={nav.title}
+                  data-testid={nav.title}
                   itemId={index}
                   isActive={currentLocation.pathname === nav.to}
                 >
@@ -66,17 +104,13 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
   );
 };
 
-const navElements: NavElements = [
-  {
-    title: 'Visualization',
-    children: [
-      { title: 'Design', to: Links.Home },
-      { title: 'Source Code', to: Links.SourceCode },
-    ],
-  },
-  { title: 'Beans', to: Links.Beans },
-  { title: 'Rest', to: Links.Rest, hidden: true },
-  { title: 'Metadata', to: Links.Metadata },
-  { title: 'Pipe ErrorHandler', to: Links.PipeErrorHandler },
-  { title: 'Catalog', to: Links.Catalog },
-];
+const NAVIGATION_ELEMENTS = {
+  Beans: [SourceSchemaType.Route, SourceSchemaType.Kamelet],
+  Metadata: [
+    SourceSchemaType.Integration,
+    SourceSchemaType.Kamelet,
+    SourceSchemaType.KameletBinding,
+    SourceSchemaType.Pipe,
+  ],
+  PipeErrorHandler: [SourceSchemaType.KameletBinding, SourceSchemaType.Pipe],
+};

packages/ui/src/layout/Shell.scss

@@ -16,3 +16,8 @@
 .pf-v5-c-panel {
   --pf-v5-c-panel--m-scrollable__main--MaxHeight: none;
 }
+
+.pf-v5-u-hidden {
+  display: none;
+  clip: rect(0 0 0 0);
+}