fix: update breadcrumbs behaviour

Author: jamiehenson

src/components/Layout/Breadcrumbs.test.tsx

@@ -37,50 +37,61 @@ describe('Breadcrumbs', () => {
     jest.clearAllMocks();
   });
 
-  it('renders relevant breadcrumb nodes', () => {
+  it('renders all breadcrumb nodes from activePage tree', () => {
     render(<Breadcrumbs />);
     expect(screen.getByText('Home')).toBeInTheDocument();
     expect(screen.getByText('Section 1')).toBeInTheDocument();
-    expect(screen.queryByText('Subsection 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Subsection 1')).toBeInTheDocument();
     expect(screen.getByText('Current Page')).toBeInTheDocument();
   });
 
   it('includes relevant links on the breadcrumb nodes', () => {
     render(<Breadcrumbs />);
     expect(screen.getByText('Home')).toHaveAttribute('href', '/docs');
     expect(screen.getByText('Section 1')).toHaveAttribute('href', '/section-1');
-    expect(screen.queryByText('Subsection 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Subsection 1')).toHaveAttribute('href', '#');
     expect(screen.getByText('Current Page')).toHaveAttribute('href', '/section-1/subsection-1/page-1');
   });
 
-  it('disables the link for the current page', () => {
+  it('disables the link for the current page and non-linked nodes', () => {
     render(<Breadcrumbs />);
+
+    // Current page (last item) should be disabled
     expect(screen.getByText('Current Page')).toHaveClass('text-gui-unavailable');
     expect(screen.getByText('Current Page')).toHaveClass('pointer-events-none');
+
+    // Non-linked nodes (link='#') should be disabled
+    expect(screen.getByText('Subsection 1')).toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Subsection 1')).toHaveClass('pointer-events-none');
+
+    // Active links should not be disabled
+    expect(screen.getByText('Section 1')).not.toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Section 1')).not.toHaveClass('pointer-events-none');
+  });
+
+  it('shows only the last active node in mobile view', () => {
+    render(<Breadcrumbs />);
+
+    // All items except index 0 should have 'hidden sm:flex' classes
+    expect(screen.getByText('Section 1')).not.toHaveClass('hidden');
+    expect(screen.getByText('Subsection 1')).toHaveClass('hidden', 'sm:flex');
+    expect(screen.getByText('Current Page')).toHaveClass('hidden', 'sm:flex');
   });
 
-  it('removes duplicate links from breadcrumb nodes', () => {
+  it('correctly identifies last active node when current page is non-linked', () => {
     mockUseLayoutContext.mockReturnValue({
       activePage: {
         tree: [
           { page: { name: 'Section 1', link: '/section-1' } },
-          { page: { name: 'Duplicate Section', link: '/section-1' } },
-          { page: { name: 'Current Page', link: '/section-1/page-1' } },
+          { page: { name: 'Subsection 1', link: '/section-1/subsection-1' } },
+          { page: { name: 'Current Page', link: '#' } },
         ],
       },
     });
 
     render(<Breadcrumbs />);
-
-    // Should only show one instance of the duplicate link
-    const section1Links = screen.getAllByText('Section 1');
-    expect(section1Links).toHaveLength(1);
-
-    // Should not render the duplicate with different text
-    expect(screen.queryByText('Duplicate Section')).not.toBeInTheDocument();
-
-    // Should still render other breadcrumb elements
-    expect(screen.getByText('Home')).toBeInTheDocument();
-    expect(screen.getByText('Current Page')).toBeInTheDocument();
+    expect(screen.getByText('Section 1')).toHaveClass('hidden', 'sm:flex');
+    expect(screen.getByText('Subsection 1')).not.toHaveClass('hidden');
+    expect(screen.getByText('Current Page')).toHaveClass('hidden', 'sm:flex');
   });
 });

src/components/Layout/Breadcrumbs.tsx

@@ -1,31 +1,21 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
 import Icon from '@ably/ui/core/Icon';
 import cn from '@ably/ui/core/utils/cn';
-import { hierarchicalKey, PageTreeNode } from './utils/nav';
+import { hierarchicalKey } from './utils/nav';
+
+const linkStyles =
+  'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500 focus-base transition-colors';
 
 const Breadcrumbs: React.FC = () => {
   const { activePage } = useLayoutContext();
 
-  const breadcrumbNodes = useMemo(() => {
-    const filteredNodes = activePage?.tree.filter((node) => node.page.link !== '#') ?? [];
-    const uniqueNodes = filteredNodes.reduce((acc: PageTreeNode[], current) => {
-      const isDuplicate = acc.some((item) => item.page.link === current.page.link);
-      if (!isDuplicate) {
-        acc.push(current);
-      }
-      return acc;
-    }, []);
-    return uniqueNodes;
-  }, [activePage?.tree]);
-
-  if (breadcrumbNodes.length === 0) {
+  if (!activePage?.tree || activePage.tree.length === 0) {
     return null;
   }
 
-  const linkStyles =
-    'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500';
+  const lastActiveNodeIndex = activePage.tree.toReversed().findIndex((node) => node.page.link !== '#') ?? 0;
 
   return (
     <nav aria-label="breadcrumb" className="flex mt-8 items-center gap-1">
@@ -35,17 +25,18 @@ const Breadcrumbs: React.FC = () => {
       <Icon
         name="icon-gui-chevron-right-micro"
         size="16px"
-        additionalCSS={cn('rotate-180 sm:rotate-0', { 'hidden sm:flex': breadcrumbNodes.length === 1 })}
+        color="text-neutral-900 dark:text-neutral-400"
+        additionalCSS={cn('rotate-180 sm:rotate-0', { 'hidden sm:flex': activePage.tree.length === 1 })}
       />
-      {breadcrumbNodes.map((node, index) => (
+      {activePage.tree.map((node, index) => (
         <React.Fragment key={hierarchicalKey(node.page.link, index, activePage.tree)}>
           {index > 0 ? <Icon name="icon-gui-chevron-right-micro" size="16px" additionalCSS="hidden sm:flex" /> : null}
           <Link
             to={node.page.link}
             className={cn(linkStyles, {
               'text-gui-unavailable dark:text-gui-unavailable-dark pointer-events-none':
-                index === breadcrumbNodes.length - 1,
-              'hidden sm:flex': index !== breadcrumbNodes.length - 2,
+                index === activePage.tree.length - 1 || node.page.link === '#',
+              'hidden sm:flex': index !== lastActiveNodeIndex,
             })}
           >
             {node.page.name}