[CI-4144] OS PLP UI - Update Breadcrumbs to call setrequestconfigs (#128)

* Breacdcrumb changes

* Update urlHelpers

* Lint

* Add mock urlHelper to Breadcrumb story

* Add test cases for urlHelpers

* Complete test cases for urlHelpers

* Update onClick Handler

* Update test case for CioPlp for changes in DefaultQueryStringMap

* Refactor changes based on feedback

* Lint

* Improve pathname update logic

* Fix failed tests

* Lint

---------

Co-authored-by: Evan Yan <evan.yan@constructor.io>

Author: evanyan13

spec/components/Breadcrumbs/Breadcrumbs.test.jsx

@@ -118,7 +118,7 @@ describe('Testing Component: Breadcrumbs', () => {
         <Breadcrumbs {...breadcrumbProps} />
       </CioPlp>,
     );
-    expect(queryAllByRole('link')).toHaveLength(bootsBreadcrumbs.length);
+    expect(queryAllByRole('button')).toHaveLength(bootsBreadcrumbs.length);
     bootsBreadcrumbs.forEach((breadcrumb) => {
       expect(getByText(breadcrumb.breadcrumb)).toBeInTheDocument();
     });

spec/components/CioPlp/CioPlp.server.test.jsx

@@ -57,7 +57,7 @@ describe('CioPlp React Server-Side Rendering', () => {
       </CioPlp>,
     );
     expect(html).toContain(
-      '<div>{&quot;cioClient&quot;:null,&quot;cioClientOptions&quot;:{},&quot;staticRequestConfigs&quot;:{},&quot;itemFieldGetters&quot;:{},&quot;formatters&quot;:{},&quot;callbacks&quot;:{},&quot;urlHelpers&quot;:{&quot;defaultQueryStringMap&quot;:{&quot;query&quot;:&quot;q&quot;,&quot;page&quot;:&quot;page&quot;,&quot;offset&quot;:&quot;offset&quot;,&quot;resultsPerPage&quot;:&quot;numResults&quot;,&quot;filters&quot;:&quot;filters&quot;,&quot;sortBy&quot;:&quot;sortBy&quot;,&quot;sortOrder&quot;:&quot;sortOrder&quot;,&quot;section&quot;:&quot;section&quot;}}}</div>',
+      '<div class=\"cio-plp\"><div>{&quot;cioClient&quot;:null,&quot;cioClientOptions&quot;:{},&quot;staticRequestConfigs&quot;:{},&quot;itemFieldGetters&quot;:{},&quot;formatters&quot;:{},&quot;callbacks&quot;:{},&quot;urlHelpers&quot;:{&quot;defaultQueryStringMap&quot;:{&quot;query&quot;:&quot;q&quot;,&quot;page&quot;:&quot;page&quot;,&quot;offset&quot;:&quot;offset&quot;,&quot;resultsPerPage&quot;:&quot;numResults&quot;,&quot;filters&quot;:&quot;filters&quot;,&quot;sortBy&quot;:&quot;sortBy&quot;,&quot;sortOrder&quot;:&quot;sortOrder&quot;,&quot;section&quot;:&quot;section&quot;}}}</div></div>',
     );
   });
 });

spec/hooks/useBrowseReaults/useBrowseResults.test.js

@@ -69,7 +69,7 @@ describe('Testing Hook: useBrowseResults', () => {
 
     const url = getUrlFromState(
       { filterValue: '123', filters, resultsPerPage, page },
-      { baseUrl: 'https://example.com/browse/123' },
+      'https://example.com/browse/123',
     );
 
     window.location.href = url;

spec/hooks/useSearchResults/useSearchResults.test.js

@@ -74,7 +74,7 @@ describe('Testing Hook: useSearchResults', () => {
     const page = 1;
     const url = getUrlFromState(
       { query, filters, resultsPerPage, page },
-      { baseUrl: 'https://example.com/search' },
+      'https://example.com/search',
     );
 
     window.location.href = url;

spec/urlHelpers.test.tsx

@@ -14,9 +14,7 @@ import { RequestConfigs } from '../src/types';
 describe('Testing Default UrlHelpers: getUrlFromState', () => {
   test('Should encode all request parameters as defined in defaultQueryStringMap', () => {
     const url = new URL(
-      getUrlFromState(testRequestState as RequestConfigs, {
-        baseUrl: 'https://www.example.com/a/random/path',
-      }),
+      getUrlFromState(testRequestState as RequestConfigs, 'https://www.example.com/a/random/path'),
     );
     const params = url.searchParams;
 
@@ -49,9 +47,7 @@ describe('Testing Default UrlHelpers: getUrlFromState', () => {
   });
 
   test('Should not encode parameters not defined in defaultQueryStringMap', () => {
-    const urlString = getUrlFromState(testRequestState as RequestConfigs, {
-      baseUrl: 'https://www.example.com/a/random/path',
-    });
+    const urlString = getUrlFromState(testRequestState as RequestConfigs, 'https://www.example.com/a/random/path');
     const url = new URL(urlString);
     const params = url.searchParams;
 
@@ -72,6 +68,50 @@ describe('Testing Default UrlHelpers: getUrlFromState', () => {
     expect(params.has(testRequestState.filterName)).toBe(false);
     expect(params.has(testRequestState.filterValue)).toBe(false);
   });
+
+  test('Should update pathname when filterName and filterValue are provided', () => {
+    const url = new URL(
+      getUrlFromState(testRequestState as RequestConfigs, 'https://www.example.com/a/random/path'),
+    )
+
+    expect(url.pathname).toBe('/group_id/Styles');    
+  });
+
+  test('Should handle empty pathname correctly', () => {
+    const url = new URL(
+      getUrlFromState(testRequestState as RequestConfigs, 'https://www.example.com'),
+    );
+    expect(url.pathname).toBe('/group_id/Styles');
+  });
+
+  test('Should replace existing group_id in pathname', () => {
+    const url = new URL(
+      getUrlFromState(
+        testRequestState as RequestConfigs, 
+        'https://www.example.com/path/group_id/old-value'
+      ),
+    );
+    expect(url.pathname).toBe('/path/group_id/Styles');
+  });
+
+  test('Should replace existing collection_id in pathname', () => {
+    const url = new URL(
+      getUrlFromState(
+        { ...testRequestState, filterName: 'collection_id' } as RequestConfigs,
+        'https://www.example.com/path/collection_id/old-value'
+      ),
+    );
+    expect(url.pathname).toBe('/path/collection_id/Styles');
+  });
+
+  test('Should retain pathname when filterName and filterValue are not provided', () => {
+    const { filterName, filterValue, ...testRequestStateWithoutFilters } = testRequestState;
+    const url = new URL(
+      getUrlFromState(testRequestStateWithoutFilters as RequestConfigs, 'https://www.example.com/a/random/path'),
+    )
+
+    expect(url.pathname).toBe('/a/random/path');
+  });
 });
 
 describe('Testing Default UrlHelpers: getStateFromUrl', () => {

src/components/Breadcrumbs/BreadcrumbElement.tsx

@@ -5,22 +5,37 @@ import ChevronRightIcon from './ChevronRightIcon';
 
 export default function BreadcrumbElement({
   path,
+  groupId,
   breadcrumb,
   isCurrentPage = false,
+  onClick,
 }: BreadcrumbProps) {
   // If it's a parent breadcrumb but doesn't have a path and label OR
   // It is a current page and it doesn't have a label, don't render.
   if ((!isCurrentPage && !path && !breadcrumb) || (isCurrentPage && !breadcrumb)) {
     return null;
   }
+
+  const handleClick = () => {
+    if (onClick && groupId) {
+      onClick(groupId);
+    }
+  };
+
   return (
     <>
       <li
         className={concatStyles(
           'cio-plp-breadcrumb',
           !isCurrentPage && 'cio-plp-parent-breadcrumb',
         )}>
-        {!isCurrentPage ? <a href={path}>{breadcrumb}</a> : <span>{breadcrumb}</span>}
+        {!isCurrentPage ? (
+          <button type='button' onClick={handleClick}>
+            {breadcrumb}
+          </button>
+        ) : (
+          <span>{breadcrumb}</span>
+        )}
       </li>
       {!isCurrentPage && <ChevronRightIcon />}
     </>

src/components/Breadcrumbs/Breadcrumbs.css

@@ -14,6 +14,7 @@
   justify-content: center;
   padding: 4px 8px;
   text-align: center;
+  cursor: pointer;
 }
 
 .cio-plp-parent-breadcrumb {
@@ -39,6 +40,16 @@
   font-weight: 500;
 }
 
+.cio-plp-breadcrumb button {
+  color: rgba(0, 0, 0, 0.85);
+  background: none;
+  border: none;
+  padding: 0px;
+  font-size: medium;
+  font-weight: 500;
+  cursor: pointer;
+}
+
 .cio-plp-more-breadcrumbs-menu {
   position: relative;
   display: inline-block;

src/components/Breadcrumbs/index.tsx

@@ -7,19 +7,19 @@ import BreadcrumbElement from './BreadcrumbElement';
 import MoreBreadcrumbsMenu from './MoreBreadcrumbsMenu';
 
 export default function Breadcrumbs(props: BreadcrumbsProps) {
-  const { breadcrumbs = [], currentPage } = useCioBreadcrumb(props);
+  const { breadcrumbs = [], currentPage, onBreadcrumbClick } = useCioBreadcrumb(props);
   if (!currentPage && (!breadcrumbs || breadcrumbs.length === 0)) return null;
 
   const { firstItems, middle, lastItems } = splitBreadcrumbs(breadcrumbs);
   return (
     <nav aria-label='plp-breadcrumbs'>
       <ul className='cio-breadcrumbs-container'>
         {firstItems.map((breadcrumb) => (
-          <BreadcrumbElement key={breadcrumb.path} {...breadcrumb} />
+          <BreadcrumbElement key={breadcrumb.path} {...breadcrumb} onClick={onBreadcrumbClick} />
         ))}
         {middle.length > 0 && <MoreBreadcrumbsMenu breadcrumbs={middle} />}
         {lastItems.map((breadcrumb) => (
-          <BreadcrumbElement key={breadcrumb.path} {...breadcrumb} />
+          <BreadcrumbElement key={breadcrumb.path} {...breadcrumb} onClick={onBreadcrumbClick} />
         ))}
         <BreadcrumbElement breadcrumb={currentPage} isCurrentPage />
       </ul>

src/components/Breadcrumbs/types.ts

@@ -4,6 +4,7 @@ export type BreadcrumbsProps = UseCioBreadcrumbProps;
 
 export interface BreadcrumbProps extends Partial<Breadcrumb> {
   isCurrentPage?: boolean;
+  onClick?: (path: string) => void;
 }
 
 export interface MoreBreadcrumbsMenuProps {

src/hooks/useCioBreadcrumb.ts

@@ -1,8 +1,10 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { PlpItemGroup } from '../types';
+import useRequestConfigs from './useRequestConfigs';
 
 export interface Breadcrumb {
   path: string;
+  groupId: string;
   breadcrumb: string;
 }
 
@@ -14,6 +16,7 @@ const generateBreadcrumbs = (currentGroup?: PlpItemGroup) => {
 
     return {
       path: pathAccumulator,
+      groupId: parent.groupId,
       breadcrumb: parent.displayName,
     };
   });
@@ -37,9 +40,17 @@ export interface UseCioBreadcrumbProps {
 
 export default function useCioBreadcrumb(props: UseCioBreadcrumbProps) {
   const { groups, filterValue } = props;
+  const { setRequestConfigs } = useRequestConfigs();
 
   const currentGroup = useMemo(() => getCurrentGroup(groups, filterValue), [groups, filterValue]);
   const breadcrumbs = generateBreadcrumbs(currentGroup);
 
-  return { breadcrumbs, currentPage: currentGroup?.displayName };
+  const onBreadcrumbClick = useCallback(
+    (groupId: string) => {
+      setRequestConfigs({ filterName: 'groupId', filterValue: groupId });
+    },
+    [setRequestConfigs],
+  );
+
+  return { breadcrumbs, currentPage: currentGroup?.displayName, onBreadcrumbClick };
 }