refactor with type RecentNavLink

Signed-off-by: yuye-aws <yuyezhu@amazon.com>
ruanyl · Aug 21, 2023 · 3261510 · 3261510
1 parent 5ed0c86
commit 3261510
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -48,11 +48,16 @@ import { AppCategory } from '../../../../types';
 import { InternalApplicationStart } from '../../../application';
 import { HttpStart } from '../../../http';
 import { OnIsLockedUpdate } from './';
-import { createEuiListItem, createRecentChromeNavLink, emptyRecentlyVisited } from './nav_link';
+import {
+  createEuiListItem,
+  createRecentChromeNavLink,
+  emptyRecentlyVisited,
+  ChromeOrRecentNavLink,
+} from './nav_link';
 import { ChromeBranding } from '../../chrome_service';
 import { CollapsibleNavHeader } from './collapsible_nav_header';
 
-function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
+function getAllCategories(allCategorizedLinks: Record<string, ChromeOrRecentNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
 
   for (const [key, value] of Object.entries(allCategorizedLinks)) {
@@ -63,7 +68,7 @@ function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>)
 }
 
 function getOrderedCategories(
-  mainCategories: Record<string, ChromeNavLink[]>,
+  mainCategories: Record<string, ChromeOrRecentNavLink[]>,
   categoryDictionary: ReturnType<typeof getAllCategories>
 ) {
   return sortBy(
@@ -74,9 +79,9 @@ function getOrderedCategories(
 
 function getMergedNavLinks(
   orderedCategories: string[],
-  uncategorizedLinks: ChromeNavLink[],
+  uncategorizedLinks: ChromeOrRecentNavLink[],
   categoryDictionary: ReturnType<typeof getAllCategories>
-): Array<string | ChromeNavLink> {
+): Array<string | ChromeOrRecentNavLink> {
   const uncategorizedLinksWithOrder = sortBy(
     uncategorizedLinks.filter((link) => link.order !== null),
     'order'
@@ -148,16 +153,17 @@ export function CollapsibleNav({
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
   const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
+  const allNavLinks: ChromeOrRecentNavLink[] = [...navLinks];
   if (recentlyAccessed.length) {
-    navLinks.push(
+    allNavLinks.push(
       ...recentlyAccessed.map((link) => createRecentChromeNavLink(link, navLinks, basePath))
     );
   } else {
-    navLinks.push(emptyRecentlyVisited);
+    allNavLinks.push(emptyRecentlyVisited);
   }
   const appId = useObservable(observables.appId$, '');
   const lockRef = useRef<HTMLButtonElement>(null);
-  const groupedNavLinks = groupBy(navLinks, (link) => link?.category?.id);
+  const groupedNavLinks = groupBy(allNavLinks, (link) => link?.category?.id);
   const { undefined: uncategorizedLinks = [], ...allCategorizedLinks } = groupedNavLinks;
   const categoryDictionary = getAllCategories(allCategorizedLinks);
   const orderedCategories = getOrderedCategories(allCategorizedLinks, categoryDictionary);
@@ -167,7 +173,7 @@ export function CollapsibleNav({
     categoryDictionary
   );
 
-  const readyForEUI = (link: ChromeNavLink, needsIcon: boolean = false) => {
+  const readyForEUI = (link: ChromeOrRecentNavLink, needsIcon: boolean = false) => {
     return createEuiListItem({
       link,
       appId,

diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx
@@ -38,8 +38,9 @@ import { relativeToAbsolute } from '../../nav_links/to_nav_link';
 export const isModifiedOrPrevented = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
   event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.defaultPrevented;
 
+export type ChromeOrRecentNavLink = ChromeNavLink | RecentNavLink;
 interface Props {
-  link: ChromeNavLink;
+  link: ChromeNavLink | RecentNavLink;
   appId?: string;
   basePath?: HttpStart['basePath'];
   dataTestSubj: string;
@@ -90,6 +91,8 @@ export function createEuiListItem({
   };
 }
 
+export type RecentNavLink = Omit<ChromeNavLink, 'baseUrl'>;
+
 const recentlyVisitedCategory: AppCategory = {
   id: 'recentlyVisited',
   label: i18n.translate('core.ui.recentlyVisited.label', {
@@ -113,7 +116,7 @@ export function createRecentChromeNavLink(
   recentLink: ChromeRecentlyAccessedHistoryItem,
   navLinks: ChromeNavLink[],
   basePath: HttpStart['basePath']
-): ChromeNavLink {
+): RecentNavLink {
   const { link, label } = recentLink;
   const href = relativeToAbsolute(basePath.prepend(link));
   const navLink = navLinks.find((nl) => href.startsWith(nl.baseUrl));
@@ -129,10 +132,8 @@ export function createRecentChromeNavLink(
     });
   }
 
-  // As RecentChromeNavLink is only used in function createEuiListItem, value for baseUrl does not affect
   return {
     href,
-    baseUrl: href,
     id: recentLink.id,
     externalLink: true,
     category: recentlyVisitedCategory,
@@ -141,13 +142,12 @@ export function createRecentChromeNavLink(
 }
 
 // As emptyRecentlyVisited is disabled, values for id, href and baseUrl does not affect
-export const emptyRecentlyVisited: ChromeNavLink = {
-  href: '',
-  baseUrl: '',
+export const emptyRecentlyVisited: RecentNavLink = {
   id: '',
+  href: '',
   disabled: true,
   category: recentlyVisitedCategory,
-  title: i18n.translate('core.ui.EmptyRecentlyVisitied', {
+  title: i18n.translate('core.ui.EmptyRecentlyVisited', {
     defaultMessage: 'No recently visited items',
   }),
 };