Skip to content

Commit

Permalink
fix(Navigation): Remove items unrelated to current schema
Browse files Browse the repository at this point in the history
fix: #1444
  • Loading branch information
lordrip committed Sep 18, 2024
1 parent 8f8173f commit a7b7a3d
Show file tree
Hide file tree
Showing 7 changed files with 923 additions and 29 deletions.
49 changes: 40 additions & 9 deletions packages/ui-tests/stories/navigation/Navigation.stories.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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({});
26 changes: 26 additions & 0 deletions packages/ui/src/layout/Navigation.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
70 changes: 52 additions & 18 deletions packages/ui/src/layout/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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)}
Expand All @@ -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}>
Expand All @@ -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}
>
Expand All @@ -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],
};
5 changes: 5 additions & 0 deletions packages/ui/src/layout/Shell.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Loading

0 comments on commit a7b7a3d

Please sign in to comment.