fix: base bradcrumb item with no link set (#32)

Author: jacobo-dominguez-wgu

src/authz-module/index.scss

@@ -3,11 +3,6 @@
 .authz-libraries {
   --height-action-divider: 30px;
 
-  .pgn__breadcrumb li:first-child a {
-    color: var(--pgn-color-breadcrumb-active);
-    text-decoration: none;
-  }
-
   hr {
     border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
     width: 100%;

src/authz-module/libraries-manager/LibrariesTeamManager.test.tsx

@@ -191,4 +191,12 @@ describe('LibrariesTeamManager', () => {
     expect(readPublicToggle).toBeInTheDocument();
     expect(readPublicToggle).toBeDisabled();
   });
+
+  it('renders correct navigation link label and URL on breadcrumb', () => {
+    renderTeamManager();
+    const navLink = screen.getByRole('link', { name: 'Manage Access' });
+    expect(navLink).toBeInTheDocument();
+    // TODO: Update expected URL when dedicated Manage Access page is created
+    expect(navLink).toHaveAttribute('href', '/authz/libraries/lib-001');
+  });
 });

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -5,6 +5,7 @@ import {
 } from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
 import { useLocation } from 'react-router-dom';
+import { ROUTES } from '@src/authz-module/constants';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
 import RoleCard from '../components/RoleCard';
@@ -23,8 +24,9 @@ const LibrariesTeamManager = () => {
     libraryId, canManageTeam, roles, permissions, resources,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
-  const rootBradecrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
+  const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
+  const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
 
   const [libraryPermissionsByRole, libraryPermissionsByResource] = useMemo(() => {
     if (!roles && !permissions && !resources) { return [null, null]; }
@@ -42,7 +44,9 @@ const LibrariesTeamManager = () => {
     <div className="authz-libraries">
       <AuthZLayout
         context={{ id: libraryId, title: library.title, org: library.org }}
-        navLinks={[{ label: rootBradecrumb }]}
+        // Temporarily setting '/authz/libraries/:libraryId' as the URL for Manage Access breadcrumb for now as
+        // currently we do not have a dedicated page. TODO: Update when such page is created.
+        navLinks={[{ label: rootBreadcrumb, to: teamMembersPath }]}
         activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle={libraryId}

src/authz-module/libraries-manager/LibrariesUserManager.test.tsx

@@ -151,6 +151,17 @@ describe('LibrariesUserManager', () => {
     expect(screen.getByText('Assign Role')).toBeInTheDocument();
   });
 
+  it('renders correct navigation link label and URL on breadcrumb', () => {
+    renderComponent();
+    const navLinkManageAccess = screen.getByRole('link', { name: 'Manage Access' });
+    expect(navLinkManageAccess).toBeInTheDocument();
+    // TODO: Update expected URL when dedicated Manage Access page is created
+    expect(navLinkManageAccess).toHaveAttribute('href', '/authz/libraries/lib:123');
+    const navLinkLibraryTeamManagement = screen.getByRole('link', { name: 'Library Team Management' });
+    expect(navLinkLibraryTeamManagement).toBeInTheDocument();
+    expect(navLinkLibraryTeamManagement).toHaveAttribute('href', '/authz/libraries/lib:123');
+  });
+
   describe('Revoking User Role Flow', () => {
     it('opens confirmation modal when delete role button is clicked', async () => {
       const user = userEvent.setup();

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -22,7 +22,7 @@ const LibrariesUserManager = () => {
   const {
     libraryId, permissions, roles, resources, canManageTeam,
   } = useLibraryAuthZ();
-  const teamMembersPath = `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
+  const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
 
   useEffect(() => {
     if (!canManageTeam) {
@@ -147,7 +147,9 @@ const LibrariesUserManager = () => {
 
       <AuthZLayout
         context={{ id: libraryId, title: library.title, org: library.org }}
-        navLinks={[{ label: rootBreadcrumb }, { label: pageManageTitle, to: teamMembersPath }]}
+        // Temporarily setting '/authz/libraries/:libraryId' as the URL for Manage Access breadcrumb for now as
+        // currently we do not have a dedicated page. TODO: Update when such page is created.
+        navLinks={[{ label: rootBreadcrumb, to: teamMembersPath }, { label: pageManageTitle, to: teamMembersPath }]}
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
         pageSubtitle={<p>{user?.email}</p>}