From 8256c898759aa15f4705589afff600c93f214bc7 Mon Sep 17 00:00:00 2001
From: Paulo Gomes da Cruz Junior <paulo.cruz@gov.bc.ca>
Date: Thu, 14 Nov 2024 08:56:51 -0800
Subject: [PATCH] fix(SILVA-564): added breadcrumb and updated menu (#467)

---
 .../__test__/components/PageTitle.test.tsx    | 114 ++++++++++++++++++
 .../src/components/BCHeaderwSide/constants.ts |  14 ++-
 .../src/components/BCHeaderwSide/index.tsx    |   2 +
 frontend/src/components/PageTitle/index.tsx   |  43 +++++--
 4 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/__test__/components/PageTitle.test.tsx

diff --git a/frontend/src/__test__/components/PageTitle.test.tsx b/frontend/src/__test__/components/PageTitle.test.tsx
new file mode 100644
index 00000000..4d1e5895
--- /dev/null
+++ b/frontend/src/__test__/components/PageTitle.test.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PageTitle from '../../components/PageTitle';
+import { describe, it, expect, vi } from 'vitest';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
+  return {
+    ...actual,
+    useLocation: vi.fn(),
+  };
+});
+
+vi.mock('../../components/BCHeaderwSide/constants', async () => {
+  const actual = await vi.importActual('../../components/BCHeaderwSide/constants');
+  return {
+    ...actual,
+    leftMenu: [
+      {
+        name: 'Main',
+        items: [
+          {
+            name: 'Submain',
+            link: '/submain',
+            breadcrumb: true,
+            subItems: [
+              {
+                name: 'Test Page',
+                link: '/test',
+                breadcrumb: true,
+              }
+            ]
+          },
+          {
+            name: 'Intramain',
+            link: '/intramain',
+            breadcrumb: false,
+            subItems: [
+              {
+                name: 'Internal Affairs',
+                link: '/intramain',
+                breadcrumb: false,
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+});
+
+describe('PageTitle Component', () => {
+
+  it('renders the title correctly', () => {
+    (useLocation as vi.Mock).mockReturnValue({ pathname: '/test' });
+    render(
+      <MemoryRouter initialEntries={['/test']}>
+      <PageTitle 
+        title="Test Title"
+        subtitle='Not what you expected' />
+      </MemoryRouter>
+  );
+    const titleElement = screen.getByText(/Test Title/i);
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('renders the breadcrumb correctly', () => {
+    (useLocation as vi.Mock).mockReturnValue({ pathname: '/test' });
+    render(
+      <MemoryRouter initialEntries={['/test']}>
+      <PageTitle 
+        title="Test Title"
+        subtitle='Not what you expected' />
+      </MemoryRouter>
+    );
+    
+    const titleElement = screen.getByText(/Submain/i);
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('renders empty breadcrumb if no path found on list', () => {
+    (useLocation as vi.Mock).mockReturnValue({ pathname: '/homer' });
+    render(
+      <MemoryRouter initialEntries={['/homer']}>
+      <PageTitle 
+        title="Test Title"
+        subtitle='Not what you expected' />
+      </MemoryRouter>
+    );
+    
+    const olElement = screen.getByRole('list');
+    const listItems = olElement.querySelectorAll('li');    
+    expect(olElement).toBeInTheDocument();
+    expect(listItems.length).toBe(0);
+  });
+
+  it('should not render breadcrumb if breadcrumb is false', () => {
+    (useLocation as vi.Mock).mockReturnValue({ pathname: '/intramain' });
+    render(
+      <MemoryRouter initialEntries={['/intramain']}>
+      <PageTitle 
+        title="Internal Affairs"
+        subtitle='Your secret, our secret' />
+      </MemoryRouter>
+    );
+
+    const olElement = screen.getByRole('list');
+    const listItems = olElement.querySelectorAll('li');    
+    expect(olElement).toBeInTheDocument();
+    expect(listItems.length).toBe(0);
+  });
+
+});
\ No newline at end of file
diff --git a/frontend/src/components/BCHeaderwSide/constants.ts b/frontend/src/components/BCHeaderwSide/constants.ts
index 074342bc..c642efc6 100644
--- a/frontend/src/components/BCHeaderwSide/constants.ts
+++ b/frontend/src/components/BCHeaderwSide/constants.ts
@@ -5,6 +5,7 @@ export type LeftMenuItem = {
   icon?: keyof typeof Icons;
   link: string;
   disabled: boolean;
+  breadcrumb: boolean;
   subItems?: LeftMenuItem[];
 }
 
@@ -22,16 +23,19 @@ const mainActivitiesItems: LeftMenu[] = [
         icon: 'MapBoundaryVegetation',
         link: '/opening',
         disabled: false,
+        breadcrumb: false,
         subItems: [
           {
             name: 'Home page',
             link: '/opening',
-            disabled: false
+            disabled: false,
+            breadcrumb: false
           },
           {
             name: 'Silviculture search',
             link: '/silviculture-search',
-            disabled: false
+            disabled: false,
+            breadcrumb: true
           }
         ]
       }
@@ -47,13 +51,15 @@ const managementItems: LeftMenu[] = [
         name: 'Settings',
         icon: 'Settings',
         link: '#',
-        disabled: true
+        disabled: true,
+        breadcrumb: false
       },
       {
         name: 'Notifications',
         icon: 'Notification',
         link: '#',
-        disabled: true
+        disabled: true,
+        breadcrumb: false
       }
     ]
   }
diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
index 0295c581..f88efece 100644
--- a/frontend/src/components/BCHeaderwSide/index.tsx
+++ b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -101,6 +101,8 @@ function BCHeaderwSide(): JSX.Element {
                           title={subItem.name}
                           renderIcon={IconComponent}
                           isActive={isActive}
+                          isSideNavExpanded={isActive}
+                          defaultExpanded={isActive}
                         >
                           {subItem.subItems.map(subSubItem => (
                             <SideNavMenuItem
diff --git a/frontend/src/components/PageTitle/index.tsx b/frontend/src/components/PageTitle/index.tsx
index 5b9596f5..fe2d7876 100644
--- a/frontend/src/components/PageTitle/index.tsx
+++ b/frontend/src/components/PageTitle/index.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
-
-import {
-  Column,
-  IconButton
-} from '@carbon/react';
-import { Favorite, FavoriteFilled } from '@carbon/icons-react';
-
+import { useLocation } from 'react-router-dom';
+import { Column, Breadcrumb, BreadcrumbItem } from "@carbon/react";
+import { leftMenu, LeftMenuItem } from '../../components/BCHeaderwSide/constants';
 import Subtitle from '../Subtitle';
 
 import './styles.scss';
@@ -17,14 +13,43 @@ interface PageTitleProps {
   activity?: string;
 }
 
-const PageTitle = ({
+const PageTitle: React.FC<PageTitleProps> = ({
   title,
   subtitle
 }: PageTitleProps) => {
- 
+
+  const currentLocation = useLocation().pathname;
+
+  // This will return up to the second level, even if we use just the first one
+  const extractCurrentItems = (): LeftMenuItem[] => {
+    for (const item of leftMenu) {
+      if (item.items) {
+        for (const subItem of item.items) {
+          if (subItem.link === currentLocation && subItem.breadcrumb) {
+            return [subItem];
+          }
+
+          if (subItem.subItems) {
+            for (const subSubItem of subItem.subItems) {
+              if (subSubItem.link === currentLocation && subSubItem.breadcrumb) {
+                return [subItem];
+              }
+            }
+          }
+        }
+      }
+    }
+    return [];
+  }
+
 
   return (
     <Column className="title-section">
+      <Breadcrumb>
+          {extractCurrentItems().map(item => (
+            <BreadcrumbItem key={item.name} href={item.link}>{item.name}</BreadcrumbItem>
+          ))}
+          </Breadcrumb>
       <div className="title-favourite">
         <h1>{title}</h1>
       </div>