diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx index c1c4e508e917..d78c2e58ed24 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx @@ -72,6 +72,30 @@ function getOrderedCategories( ); } +function getMergedNavLinks( + orderedCategories: string[], + uncategorizedLinks: ChromeNavLink[], + categoryDictionary: ReturnType +): Array { + const uncategorizedLinksWithOrder = sortBy( + uncategorizedLinks.filter((link) => link.order !== null), + 'order' + ); + const uncategorizedLinksWithoutOrder = uncategorizedLinks.filter((link) => link.order === null); + const orderedCategoryWithOrder = orderedCategories + .filter((categoryName) => categoryDictionary[categoryName]?.order !== null) + .map((categoryName) => ({ categoryName, order: categoryDictionary[categoryName]?.order })); + const orderedCategoryWithoutOrder = orderedCategories.filter( + (categoryName) => categoryDictionary[categoryName]?.order === null + ); + const mergedNavLinks = sortBy( + [...uncategorizedLinksWithOrder, ...orderedCategoryWithOrder], + 'order' + ).map((navLink) => ('categoryName' in navLink ? navLink.categoryName : navLink)); + // if order is not defined , categorized links will be placed before uncategorized links + return [...mergedNavLinks, ...orderedCategoryWithoutOrder, ...uncategorizedLinksWithoutOrder]; +} + function getCategoryLocalStorageKey(id: string) { return `core.navGroup.${id}`; } @@ -127,9 +151,14 @@ export function CollapsibleNav({ const appId = useObservable(observables.appId$, ''); const lockRef = useRef(null); const groupedNavLinks = groupBy(navLinks, (link) => link?.category?.id); - const { undefined: unknowns = [], ...allCategorizedLinks } = groupedNavLinks; + const { undefined: uncategorizedLinks = [], ...allCategorizedLinks } = groupedNavLinks; const categoryDictionary = getAllCategories(allCategorizedLinks); const orderedCategories = getOrderedCategories(allCategorizedLinks, categoryDictionary); + const mergedNavLinks = getMergedNavLinks( + orderedCategories, + uncategorizedLinks, + categoryDictionary + ); const readyForEUI = (link: ChromeNavLink, needsIcon: boolean = false) => { return createEuiListItem({ @@ -246,47 +275,50 @@ export function CollapsibleNav({ ) */} - {/* OpenSearchDashboards, Observability, Security, and Management sections */} - {orderedCategories.map((categoryName) => { - const category = categoryDictionary[categoryName]!; - const opensearchLinkLogo = - category.id === 'opensearchDashboards' ? logos.Mark.url : category.euiIconType; + {/* merged NavLinks */} + {mergedNavLinks.map((item, i) => { + if (typeof item === 'string') { + const category = categoryDictionary[item]!; + const opensearchLinkLogo = + category.id === 'opensearchDashboards' ? logos.Mark.url : category.euiIconType; - return ( - setIsCategoryOpen(category.id, isCategoryOpen, storage)} - data-test-subj={`collapsibleNavGroup-${category.id}`} - data-test-opensearch-logo={opensearchLinkLogo} - > - readyForEUI(link))} - maxWidth="none" - color="subdued" - gutterSize="none" - size="s" - /> - - ); + return ( + + setIsCategoryOpen(category.id, isCategoryOpen, storage) + } + data-test-subj={`collapsibleNavGroup-${category.id}`} + data-test-opensearch-logo={opensearchLinkLogo} + > + readyForEUI(link))} + maxWidth="none" + color="subdued" + gutterSize="none" + size="s" + /> + + ); + } else { + return ( + + + + + + ); + } })} - {/* Things with no category (largely for custom plugins) */} - {unknowns.map((link, i) => ( - - - - - - ))} - {/* Docking button only for larger screens that can support it*/} diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts index 70f0cbfc4cc9..c445346cd6f8 100644 --- a/src/plugins/workspace/public/plugin.ts +++ b/src/plugins/workspace/public/plugin.ts @@ -173,7 +173,7 @@ export class WorkspacesPlugin implements Plugin<{}, {}, WorkspacesPluginSetupDep ...chromeNavLink, hidden: currentWorkspace !== null, euiIconType: 'logoOpenSearch', - order: 1000, + order: 0, }; filteredNavLinks.set(chromeNavLink.id, homeNavLink); } else { @@ -239,7 +239,7 @@ export class WorkspacesPlugin implements Plugin<{}, {}, WorkspacesPluginSetupDep baseUrl: overviewUrl, href: overviewUrl, euiIconType: 'grid', - order: 1000, + order: 0, }; filteredNavLinks.set(overviewId, overviewNavLink); }