[Serverless nav] Limit number of recent items (#181284)

elastic · Apr 22, 2024 · f10463a · f10463a
1 parent 078dd22
commit f10463a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/packages/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx b/packages/shared-ux/chrome/navigation/__jest__/build_nav_tree.test.tsx
@@ -129,11 +129,7 @@ describe('builds navigation tree', () => {
     ]);
 
     const navTree: NavigationTreeDefinitionUI = {
-      body: [
-        {
-          type: 'recentlyAccessed',
-        },
-      ],
+      body: [{ type: 'recentlyAccessed' }],
     };
 
     const { findByTestId } = renderNavigation({
@@ -146,4 +142,30 @@ describe('builds navigation tree', () => {
       'RecentThis is an exampleAnother example'
     );
   });
+
+  test('should limit the number of recently accessed items to 5', async () => {
+    const recentlyAccessed$ = of([
+      { label: 'Item1', link: '/app/foo/1', id: '1' },
+      { label: 'Item2', link: '/app/foo/2', id: '2' },
+      { label: 'Item3', link: '/app/foo/3', id: '3' },
+      { label: 'Item4', link: '/app/foo/4', id: '4' },
+      { label: 'Item5', link: '/app/foo/5', id: '5' },
+      { label: 'Item6', link: '/app/foo/6', id: '6' },
+      { label: 'Item7', link: '/app/foo/7', id: '7' },
+    ]);
+
+    const navTree: NavigationTreeDefinitionUI = {
+      body: [{ type: 'recentlyAccessed' }],
+    };
+
+    const { queryAllByTestId } = renderNavigation({
+      navTreeDef: of(navTree),
+      services: { recentlyAccessed$ },
+    });
+
+    const items = await queryAllByTestId(/nav-recentlyAccessed-item/);
+    expect(items).toHaveLength(5);
+    const itemsText = items.map((item) => item.textContent);
+    expect(itemsText).toEqual(['Item1', 'Item2', 'Item3', 'Item4', 'Item5']);
+  });
 });
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx
@@ -318,15 +318,9 @@ const nodeToEuiCollapsibleNavProps = (
   return { items, isVisible };
 };
 
-// Temporary solution to prevent showing the outline when the page load when the
-// accordion is auto-expanded if one of its children is active
-// Once https://github.com/elastic/eui/pull/7314 is released in Kibana we can
-// safely remove this CSS class.
 const className = css`
-  .euiAccordion__childWrapper,
-  .euiAccordion__children,
-  .euiCollapsibleNavAccordion__children {
-    outline: none;
+  .euiAccordion__childWrapper {
+    transition: none; // Remove the transition as it does not play well with dynamic links added to the accordion
   }
 `;
 

diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { FC } from 'react';
-import { EuiCollapsibleNavItem } from '@elastic/eui';
+import React, { FC, useMemo } from 'react';
+import { EuiCollapsibleNavItem, type EuiCollapsibleNavItemProps } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
 import type { ChromeRecentlyAccessedHistoryItem } from '@kbn/core-chrome-browser';
 import type { Observable } from 'rxjs';
@@ -16,6 +16,8 @@ import { useNavigation as useServices } from '../../services';
 
 import { getI18nStrings } from '../i18n_strings';
 
+const MAX_RECENTLY_ACCESS_ITEMS = 5;
+
 export interface Props {
   /**
    * Optional observable for recently accessed items. If not provided, the
@@ -31,30 +33,35 @@ export interface Props {
 
 export const RecentlyAccessed: FC<Props> = ({
   recentlyAccessed$: recentlyAccessedProp$,
-  defaultIsCollapsed = false,
+  defaultIsCollapsed = true,
 }) => {
   const strings = getI18nStrings();
   const { recentlyAccessed$, basePath, navigateToUrl } = useServices();
   const recentlyAccessed = useObservable(recentlyAccessedProp$ ?? recentlyAccessed$, []);
 
-  if (recentlyAccessed.length === 0) {
-    return null;
-  }
+  const navItems = useMemo<EuiCollapsibleNavItemProps[]>(
+    () =>
+      recentlyAccessed.slice(0, MAX_RECENTLY_ACCESS_ITEMS).map((recent) => {
+        const { id, label, link } = recent;
+        const href = basePath.prepend(link);
 
-  const navItems = recentlyAccessed.map((recent) => {
-    const { id, label, link } = recent;
-    const href = basePath.prepend(link);
+        return {
+          id,
+          title: label,
+          href,
+          'data-test-subj': `nav-recentlyAccessed-item nav-recentlyAccessed-item-${id}`,
+          onClick: (e: React.MouseEvent) => {
+            e.preventDefault();
+            navigateToUrl(href);
+          },
+        };
+      }),
+    [basePath, navigateToUrl, recentlyAccessed]
+  );
 
-    return {
-      id,
-      title: label,
-      href,
-      onClick: (e: React.MouseEvent) => {
-        e.preventDefault();
-        navigateToUrl(href);
-      },
-    };
-  });
+  if (navItems.length === 0) {
+    return null;
+  }
 
   return (
     <EuiCollapsibleNavItem