optimize code

Signed-off-by: yuye-aws <[email protected]>
ruanyl · Oct 17, 2023 · 66d838c · 66d838c
1 parent 71b4134
commit 66d838c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 53 deletions.
diff --git a/src/core/public/chrome/nav_links/nav_links_service.ts b/src/core/public/chrome/nav_links/nav_links_service.ts
@@ -126,9 +126,6 @@ type LinksUpdater = (navLinks: Map<string, NavLinkWrapper>) => Map<string, NavLi
 
 export class NavLinksService {
   private readonly stop$ = new ReplaySubject(1);
-  private navLinks$ = new BehaviorSubject<ReadonlyMap<string, ChromeNavLink> | undefined>(
-    undefined
-  );
 
   public start({ application, http }: StartDeps): ChromeNavLinks {
     const appLinks$ = application.applications$.pipe(
@@ -145,6 +142,9 @@ export class NavLinksService {
     // manual link modifications to be able to re-apply then after every
     // availableApps$ changes.
     const linkUpdaters$ = new BehaviorSubject<LinksUpdater[]>([]);
+    const displayedNavLinks$ = new BehaviorSubject<ReadonlyMap<string, ChromeNavLink> | undefined>(
+      undefined
+    );
     const allNavLinks$ = new BehaviorSubject<ReadonlyMap<string, NavLinkWrapper>>(new Map());
 
     combineLatest([appLinks$, linkUpdaters$])
@@ -161,20 +161,20 @@ export class NavLinksService {
 
     return {
       getNavLinks$: () => {
-        return combineLatest([allNavLinks$, this.navLinks$]).pipe(
+        return combineLatest([allNavLinks$, displayedNavLinks$]).pipe(
           map(([allNavLinks, navLinks]) =>
-            navLinks === undefined ? sortNavLinks(allNavLinks) : sortChromeNavLinks(navLinks)
+            navLinks === undefined ? sortLinks(allNavLinks) : sortLinks(navLinks)
           ),
           takeUntil(this.stop$)
         );
       },
 
-      setNavLinks: (filteredNavLinks: ReadonlyMap<string, ChromeNavLink>) => {
-        this.navLinks$.next(filteredNavLinks);
+      setNavLinks: (navLinks: ReadonlyMap<string, ChromeNavLink>) => {
+        displayedNavLinks$.next(navLinks);
       },
 
       getAllNavLinks$: () => {
-        return allNavLinks$.pipe(map(sortNavLinks), takeUntil(this.stop$));
+        return allNavLinks$.pipe(map(sortLinks), takeUntil(this.stop$));
       },
 
       get(id: string) {
@@ -183,7 +183,7 @@ export class NavLinksService {
       },
 
       getAll() {
-        return sortNavLinks(allNavLinks$.value);
+        return sortLinks(allNavLinks$.value);
       },
 
       has(id: string) {
@@ -235,16 +235,9 @@ export class NavLinksService {
   }
 }
 
-function sortNavLinks(navLinks: ReadonlyMap<string, NavLinkWrapper>) {
-  return sortBy(
-    [...navLinks.values()].map((link) => link.properties),
-    'order'
-  );
-}
-
-function sortChromeNavLinks(chromeNavLinks: ReadonlyMap<string, ChromeNavLink>) {
+function sortLinks(links: ReadonlyMap<string, NavLinkWrapper | ChromeNavLink>) {
   return sortBy(
-    [...chromeNavLinks.values()].map((link) => link as Readonly<ChromeNavLink>),
+    [...links.values()].map((link) => ('properties' in link ? link.properties : link)),
     'order'
   );
 }
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -67,38 +67,28 @@ function getAllCategories(allCategorizedLinks: Record<string, CollapsibleNavLink
   return allCategories;
 }
 
-function getOrderedCategories(
-  mainCategories: Record<string, CollapsibleNavLink[]>,
-  categoryDictionary: ReturnType<typeof getAllCategories>
-) {
-  return sortBy(
-    Object.keys(mainCategories),
-    (categoryName) => categoryDictionary[categoryName]?.order
-  );
-}
-
-function getMergedNavLinks(
-  orderedCategories: string[],
+function getSortedLinksAndCategories(
   uncategorizedLinks: CollapsibleNavLink[],
   categoryDictionary: ReturnType<typeof getAllCategories>
-): Array<string | CollapsibleNavLink> {
-  const uncategorizedLinksWithOrder = sortBy(
-    uncategorizedLinks.filter((link) => link.order !== null),
-    'order'
-  );
+): Array<AppCategory | CollapsibleNavLink> {
+  // uncategorized links and categories are ranked according the order
+  // if order is not defined, categories will be placed above uncategorized links
+  const categories = Object.values(categoryDictionary).filter(
+    (category) => category !== undefined
+  ) as AppCategory[];
+  const uncategorizedLinksWithOrder = uncategorizedLinks.filter((link) => link.order !== null);
   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],
+  const categoriesWithOrder = categories.filter((category) => category.order !== null);
+  const categoriesWithoutOrder = categories.filter((category) => category.order === null);
+  const sortedLinksAndCategories = sortBy(
+    [...uncategorizedLinksWithOrder, ...categoriesWithOrder],
     '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];
+  );
+  return [
+    ...sortedLinksAndCategories,
+    ...categoriesWithoutOrder,
+    ...uncategorizedLinksWithoutOrder,
+  ];
 }
 
 function getCategoryLocalStorageKey(id: string) {
@@ -166,9 +156,7 @@ export function CollapsibleNav({
   const groupedNavLinks = groupBy(allNavLinks, (link) => link?.category?.id);
   const { undefined: uncategorizedLinks = [], ...allCategorizedLinks } = groupedNavLinks;
   const categoryDictionary = getAllCategories(allCategorizedLinks);
-  const orderedCategories = getOrderedCategories(allCategorizedLinks, categoryDictionary);
-  const mergedNavLinks = getMergedNavLinks(
-    orderedCategories,
+  const sortedLinksAndCategories = getSortedLinksAndCategories(
     uncategorizedLinks,
     categoryDictionary
   );
@@ -227,9 +215,10 @@ export function CollapsibleNav({
       )}
 
       <EuiFlexItem className="eui-yScroll">
-        {mergedNavLinks.map((item, i) => {
-          if (typeof item === 'string') {
-            const category = categoryDictionary[item]!;
+        {sortedLinksAndCategories.map((item, i) => {
+          if (!('title' in item)) {
+            // CollapsibleNavLink has title property, while AppCategory does not have
+            const category = item;
             const opensearchLinkLogo =
               category.id === DEFAULT_APP_CATEGORIES.opensearchDashboards.id
                 ? logos.Mark.url
@@ -253,7 +242,7 @@ export function CollapsibleNav({
                     defaultMessage: 'Primary navigation links, {category}',
                     values: { category: category.label },
                   })}
-                  listItems={allCategorizedLinks[item].map((link) => readyForEUI(link))}
+                  listItems={allCategorizedLinks[item.id].map((link) => readyForEUI(link))}
                   maxWidth="none"
                   color="subdued"
                   gutterSize="none"