Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Web] Add resource kind-specific sidenav sections #47882

Merged
merged 2 commits into from
Oct 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e
Submodule e updated from fc67d2 to 03e3eb
24 changes: 22 additions & 2 deletions web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,12 @@ import {
import { zIndexMap } from './zIndexMap';

import {
CustomNavigationSubcategory,
NAVIGATION_CATEGORIES,
STANDALONE_CATEGORIES,
SidenavCategory,
} from './categories';
import { SearchSection } from './Search';
import { ResourcesSection } from './ResourcesSection';

import type * as history from 'history';
import type { TeleportFeature } from 'teleport/types';
Expand Down Expand Up @@ -86,6 +87,20 @@ export type NavigationSubsection = {
icon: (props) => JSX.Element;
parent?: TeleportFeature;
searchableTags?: string[];
/**
* customRouteMatchFn is a custom function for determining whether this subsection is currently active,
* this is useful in cases where a simple base route match isn't sufficient.
*/
customRouteMatchFn?: (currentViewRoute: string) => boolean;
/**
* subCategory is the subcategory (ie. subsection grouping) this subsection should be under, if applicable.
* */
subCategory?: CustomNavigationSubcategory;
rudream marked this conversation as resolved.
Show resolved Hide resolved
/**
* onClick is custom code that can be run when clicking on the subsection.
* Note that this is merely extra logic, and does not replace the default routing behaviour of a subsection which will navigate the user to the route.
*/
onClick?: () => void;
};

function getNavigationSections(
Expand All @@ -94,7 +109,6 @@ function getNavigationSections(
const navigationSections = NAVIGATION_CATEGORIES.map(category => ({
category,
subsections: getSubsectionsForCategory(category, features),
standalone: STANDALONE_CATEGORIES.indexOf(category) !== -1,
}));

return navigationSections;
Expand Down Expand Up @@ -292,6 +306,12 @@ export function Navigation() {
handleSetExpandedSection={handleSetExpandedSection}
currentView={currentView}
/>
<ResourcesSection
expandedSection={debouncedSection}
previousExpandedSection={previousExpandedSection}
handleSetExpandedSection={handleSetExpandedSection}
currentView={currentView}
/>
{navSections.map(section => (
<React.Fragment key={section.category}>
{section.category === 'Add New' && <Divider />}
Expand Down
Loading
Loading