From ebbec69c8d2b86844e7ed1cdafa2e902439a5205 Mon Sep 17 00:00:00 2001
From: OpenShift Cherrypick Robot <openshift-cherrypick-robot@redhat.com>
Date: Tue, 7 Oct 2025 22:39:45 +0200
Subject: [PATCH] [redhat-3.14] web: make team name clickable in Teams View
 (PROJQUAY-9514) (#4329)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* web: make team name clickable in Teams View (PROJQUAY-9347)

users can now click team name to navigate to team management page
where team description can be edited, matching old Angular UI behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Brady Pratt <bpratt@redhat.com>

* web: show team desc if no members (PROJQUAY-9347)

allow setting the team description even if there are no members yet

Signed-off-by: Brady Pratt <bpratt@redhat.com>

---------

Signed-off-by: Brady Pratt <bpratt@redhat.com>
Co-authored-by: Brady Pratt <bpratt@redhat.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 web/cypress/e2e/teams-and-membership.cy.ts    | 34 +++++++++++++++++++
 .../ManageMembers/ManageMembersList.tsx       |  3 ++
 .../TeamsView/TeamsViewList.tsx               | 17 +++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/web/cypress/e2e/teams-and-membership.cy.ts b/web/cypress/e2e/teams-and-membership.cy.ts
index c5fda4945..231defcda 100644
--- a/web/cypress/e2e/teams-and-membership.cy.ts
+++ b/web/cypress/e2e/teams-and-membership.cy.ts
@@ -248,4 +248,38 @@ describe('Teams and membership page', () => {
     cy.get(`[data-testid="edit-team-description-btn"]`).should('not.exist');
     cy.get(`[data-testid="${user}-delete-icon"]`).should('not.exist');
   });
+
+  it('Can click team name to navigate to team management page and edit description', () => {
+    const team = 'arsenal';
+    const newDescription = 'updated team description';
+    cy.visit('/organization/testorg?tab=Teamsandmembership');
+    cy.get('#Teams').click();
+
+    // Search for a single team
+    cy.get('#teams-view-search').type(`${team}`);
+    cy.contains('1 - 1 of 1');
+
+    // Click on team name to navigate to team management page
+    cy.contains('td', team).contains('a', team).click();
+    cy.url().should('include', `teams/${team}`);
+
+    // Verify team name is displayed
+    cy.get('[data-testid="teamname-title"]').contains(team).should('exist');
+
+    // Edit team description
+    cy.get('[data-testid="edit-team-description-btn"]').click();
+    cy.get('[data-testid="team-description-text-area"]').clear();
+    cy.get('[data-testid="team-description-text-area"]').type(newDescription);
+    cy.get('[data-testid="save-team-description-btn"]').click();
+
+    // verify success alert
+    cy.get('.pf-v5-c-alert.pf-m-success')
+      .contains(`Successfully updated team:${team} description`)
+      .should('exist');
+
+    // verify description is updated
+    cy.get('[data-testid="team-description-text"]')
+      .contains(newDescription)
+      .should('exist');
+  });
 });
diff --git a/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx b/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx
index 81508b2c9..42dd010f6 100644
--- a/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx
+++ b/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx
@@ -528,6 +528,9 @@ export default function ManageMembersList(props: ManageMembersListProps) {
     return (
       <>
         <Conditional if={pageInReadOnlyMode}>{teamSyncedConfig}</Conditional>
+        <PageSection variant={PageSectionVariants.light}>
+          {teamDescriptionComponent}
+        </PageSection>
         <Empty
           title="There are no viewable members for this team"
           icon={CubesIcon}
diff --git a/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/TeamsViewList.tsx b/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/TeamsViewList.tsx
index 604b6edd5..842be4a03 100644
--- a/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/TeamsViewList.tsx
+++ b/web/src/routes/OrganizationsList/Organization/Tabs/TeamsAndMembership/TeamsView/TeamsViewList.tsx
@@ -278,7 +278,22 @@ export default function TeamsViewList(props: TeamsViewListProps) {
                     isSelected: selectedTeams.some((t) => t.name === team.name),
                   }}
                 />
-                <Td dataLabel={teamViewColumnNames.teamName}>{team.name}</Td>
+                <Td dataLabel={teamViewColumnNames.teamName}>
+                  {team.can_view ? (
+                    <Link
+                      to={getTeamMemberPath(
+                        location.pathname,
+                        props.organizationName,
+                        team.name,
+                        searchParams.get('tab'),
+                      )}
+                    >
+                      {team.name}
+                    </Link>
+                  ) : (
+                    team.name
+                  )}
+                </Td>
                 <Td
                   dataLabel={teamViewColumnNames.members}
                   data-testid={`member-count-for-${team.name}`}