ui: add breadcrumbs for teams page (PROJQUAY-6442)

web/cypress/e2e/breadcrumbs.cy.ts

@@ -122,4 +122,41 @@ describe('Tests for Breadcrumbs', () => {
         });
     });
   });
+
+  it('Teams page', () => {
+    cy.visit('/organization/projectquay/teams/owners?tab=Teamsandmembership');
+    cy.get('nav[test-id="page-breadcrumbs-list"]').within(() => {
+      cy.get('li')
+        .each(($el, index) => {
+          switch (index) {
+            case 0:
+              cy.wrap($el).should('have.text', 'Organization');
+              cy.wrap($el)
+                .children('a')
+                .should('have.attr', 'href', '/organization');
+              break;
+            case 1:
+              cy.wrap($el).should('have.text', 'projectquay');
+              cy.wrap($el)
+                .children('a')
+                .should('have.attr', 'href', '/organization/projectquay');
+              break;
+            case 2:
+              cy.wrap($el).should('have.text', 'owners');
+              cy.wrap($el).children('a').should('have.class', 'disabled-link');
+              cy.wrap($el)
+                .children('a')
+                .should(
+                  'have.attr',
+                  'href',
+                  '/organization/projectquay/teams/owners',
+                );
+              break;
+          }
+        })
+        .then(($lis) => {
+          expect($lis).to.have.length(3);
+        });
+    });
+  });
 });

web/src/components/breadcrumb/Breadcrumb.tsx

@@ -3,7 +3,7 @@ import {
   BreadcrumbItem,
   PageBreadcrumb,
 } from '@patternfly/react-core';
-import {getNavigationRoutes} from 'src/routes/NavigationPath';
+import {getNavigationRoutes, NavigationPath} from 'src/routes/NavigationPath';
 import {Link, useParams, useLocation} from 'react-router-dom';
 import React, {useEffect, useState} from 'react';
 import useBreadcrumbs, {
@@ -13,6 +13,7 @@ import {
   parseOrgNameFromUrl,
   parseRepoNameFromUrl,
   parseTagNameFromUrl,
+  parseTeamNameFromUrl,
   titleCase,
 } from 'src/libs/utils';
 
@@ -35,7 +36,11 @@ export function QuayBreadcrumb() {
     setBreadcrumbItems([]);
   };
 
-  const fetchBreadcrumb = (existingBreadcrumbs, nextBreadcrumb) => {
+  const fetchBreadcrumb = (
+    existingBreadcrumbs,
+    nextBreadcrumb,
+    routerBreadcrumb,
+  ) => {
     // existingBreadcrumbs is a list of breadcrumbs on the page
     // first breadcrumb is either organization or repository
     if (existingBreadcrumbs.length == 0) {
@@ -51,12 +56,23 @@ export function QuayBreadcrumb() {
         'organization/' +
         nextBreadcrumb['title'];
     }
-    // third breadcrumb is repo name
+    // third breadcrumb is repo name or team name
+    //  Eg: /organization/<orgname>/<reponame> or /organization/<orgname>/teams/quay?tab=Teamsandmembership
     else if (existingBreadcrumbs.length == 2) {
-      nextBreadcrumb['title'] = parseRepoNameFromUrl(location.pathname);
-      nextBreadcrumb['pathname'] =
-        location.pathname.split(nextBreadcrumb['title'])[0] +
-        nextBreadcrumb['title'];
+      switch (routerBreadcrumb.match.route.path) {
+        case NavigationPath.repositoryDetail:
+          nextBreadcrumb['title'] = parseRepoNameFromUrl(location.pathname);
+          nextBreadcrumb['pathname'] =
+            location.pathname.split(nextBreadcrumb['title'])[0] +
+            nextBreadcrumb['title'];
+          break;
+        case NavigationPath.teamMember:
+          nextBreadcrumb['title'] = parseTeamNameFromUrl(location.pathname);
+          nextBreadcrumb['pathname'] =
+            location.pathname.split(nextBreadcrumb['title'])[0] +
+            nextBreadcrumb['title'];
+          break;
+      }
     }
     // fourth breadcrumb is tag name
     else if (existingBreadcrumbs.length == 3) {
@@ -86,7 +102,7 @@ export function QuayBreadcrumb() {
       if (object.key != '') {
         newObj['title'] = object.key.replace(/\//, '');
       }
-      newObj = fetchBreadcrumb(result, newObj);
+      newObj = fetchBreadcrumb(result, newObj, object);
       result.push(newObj);
       if (newObj['active']) {
         break;

web/src/routes/NavigationPath.tsx

@@ -165,6 +165,11 @@ export const getNavigationRoutes = () => {
       element: <TagDetails />,
       breadcrumb: Breadcrumb.manifestDigestBreadcrumb,
     },
+    {
+      path: domainRoute(currentRoute, NavigationPath.teamMember),
+      element: <RepositoryDetails />,
+      breadcrumb: Breadcrumb.teamMemberBreadcrumb,
+    },
   ];
   return NavigationRoutes;
 };