refactor(authz): display team members information agregated in the table

[dcoa]

Context

The Team Members tab renders one row per role assignment. The new design regroups it into one row per user, with that user's assignments nested underneath an expandable row.

Important

It follows the API contract defined in openedx-authz. It needs the backend implementation here openedx/openedx-authz#451

Changes summary

Data

• The Team Members table now uses the user-grouped endpoint GET /api/authz/v1/users/ instead of /assignments/.
• Added TeamMember and TeamMemberAssignment types that match the API.

Team Members table

• One row per user: username (with "(Me)" for the current user), email, their first role shown as "Role in Scope", a "+N more roles" toggle, and the View action.
• The toggle opens a breakdown card: Role / Scope / Organization, "Showing X of Y", and "View all roles".
• Only one row can be expanded at a time, via the new shared useExclusiveRowExpansion hook.
• Styling: more row spacing, fixed column widths only from md up (the table scrolls on small screens), the breakdown header matches the Roles & Permissions category rows, and icons use the primary color.

Shared

• The user page (audit table) shows "All courses" / "All libraries" and "All platform" for org-wide and platform-wide roles.
• The "All Organizations" label now says "All platform" to match the Team Members table.
• ViewMoreLink is now a button instead of a link. Making the action accessible.
• The scope icon now comes from the scope key instead of the role. New helpers getAggregateScopeType and getScopeContextType detect org-wide and platform-wide scopes.

Errors & permissions

• The home page waits for the permission check, then shows 403 Access Denied if the user can't view course or library teams.
• The table shows one toast per failed request, instead of two.
• The loading spinner now announces itself to screen readers (role="status" and a label).

Testing instructions

1. Make sure to use the backend implementation specified above.
2. Add uses with different roles and add different roles to a user. Make sure you have users with:
   • a single role
   • more than 3 roles
   • an org-wide role (e.g. course-v1:MyOrg+*)
   • a platform-wide role (e.g. course-v1:* or lib:*)

In Team Members tab

1. There is one row per user, showing username, email and their first assigned role.
2. Users with more than one role show "+N more roles". Clicking it opens the role breakdown, and only one breakdown can be open at a time.
3. The breakdown footer shows "Showing X of Y". "View all roles" appears when not all roles are listed, and opens the user's page.
4. An org-wide role shows the org name in the row, and "All courses" / "All libraries" in the breakdown.
5. A platform-wide role shows "All platform" with a globe icon in the row and in the breakdown's Organization column.
6. The Organization, Role, Scope and search filters narrow the list, and the "Showing N users of M." count updates.

In User audit page
7. Org-wide and platform-wide roles show "All courses" / "All libraries" and "All platform".

Edge cases
8. A user with no team view permission sees the 403 Access Denied page.

Additional information

Closes openedx/openedx-authz#407
Closes #174
Address #156

Supported by claude

[openedx-webhooks]

Thanks for the pull request, @dcoa!

This repository is currently maintained by @openedx/committers-frontend.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[codecov]

Codecov Report

❌ Patch coverage is 99.37888% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 98.70%. Comparing base (8242c1c) to head (bfe22e1).
⚠️ Report is 3 commits behind head on master.

Files with missing lines	Patch %	Lines
src/authz-module/data/hooks.ts	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #222      +/-   ##
==========================================
+ Coverage   98.53%   98.70%   +0.17%     
==========================================
  Files          73       80       +7     
  Lines        1299     1393      +94     
  Branches      426      465      +39     
==========================================
+ Hits         1280     1375      +95     
+ Misses         19       18       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[arbrandes]

Heads-up: master is now the App Repository, per the frontend-base landing (#226, #227). The micro-frontend tree this PR targets lives on the legacy-mfe branch, which is where Open edX release/* branches keep being cut from. This PR will need retargeting to legacy-mfe, or porting to the new master.

[dcoa]

@jacobo-dominguez-wgu @jesusbalderramawgu @bra-i-am friendly reminder for review help

[bra-i-am]

Testing behavior

In Team Members tab

• Users with more than one role show "+N more roles". Clicking it opens the role breakdown, and only one breakdown can be open at a time. (1 y 2)
• The breakdown footer shows "Showing X of Y". "View all roles" appears when not all roles are listed, and opens the user's page. (3)
• A platform-wide role shows "All platform" with a globe icon in the row and in the breakdown's Organization column. (4)
• An org-wide role shows the org name in the row, and "All courses" / "All libraries" in the breakdown. (5)
• The Organization, Role, Scope and search filters narrow the list, and the "Showing N users of M." count updates.

In User audit page

• Org-wide and platform-wide roles show "All courses" / "All libraries" and "All platform".

Edge cases

• A user with no team view permission sees the 403 Access Denied page.

[bra-i-am]

LGTM!!

[bra-i-am]

Suggested change

	// An aggregate scope covers every course/library across the platform or within one org,
	// so it names no single resource and the API sends an empty display name for it.

[bra-i-am]

nit:

Suggested change

	scopeIcon = Business;
	scopeIcon = AccountBalance;

According to the mockup, this is the correct icon:

Additionally, to keep consistency, this icon should live in the RESOURCE_ICONS object

[dcoa]

Thanks for point this out, I will update it. The Figma was updated yesterday so I was not aware of the new icon.

[carlos-marquez-wgu]

I went through all test instructions and compared against the figma, everything works and looks great, thanks, @dcoa !

nit: I just noticed a couple things

In the new figma, this pagination dropdown was moved from the right side to the center

Currently and in old figma

New figma

---

Not sure if this a known trade off or is just fine, but I noticed columns width change between pages

[dcoa]

thanks @carlos-marquez-wgu I will merge this PR as it is, because it is large enough. I will review the columns resize in a following PR and I will comment the footer change in one of the issues created as Enhancements to represent the changes implemented in the design this week.

[BryanttV]

Hi @dcoa! Thanks for the PR. I tested it, and it works great! I just have two comments:

1. When filtering by org, the chip that appears still has the old organization icon. Can we update it?

   

2. I created this task for the refactoring of the user assignments table UI. It still depends on the backend task, but just keeping it on your radar so you can start when ready.

[openedx-semantic-release-bot]

🎉 This PR is included in version 1.0.0-alpha.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀