feat: [FC-0099] add filters and sorting functionality to the team table #8

bra-i-am · 2025-10-02T15:16:23Z

Warning

This PR depends on #5 for getting the roles and permissions metadata.

This pull request introduces filtering and sorting capabilities to the Team Members table.

Evidence

Screencast.from.15-10-25.16.32.43.webm

Testing instructions

Create and set up a local environment (Tutor recommended)
Run LMS and CMS, then clone the repo in the current branch and run the dev server npm run dev
Add the URL to the CORS_WHITELIST in both LMS/CMS settings.py

# admin console MFE
CORS_ORIGIN_WHITELIST.append("http://apps.local.openedx.io:2025")
LOGIN_REDIRECT_WHITELIST.append("apps.local.openedx.io:2025")
CSRF_TRUSTED_ORIGINS.append("http://apps.local.openedx.io:2025")

Go to the Studio and create a library
Install the plugin https://github.com/openedx/openedx-authz by running tutor dev exec lms pip install git+https://github.com/openedx/openedx-authz
Run the migrations tutor dev exec lms python manage.py lms migrate openedx_authz
Load the default policies by running tutor dev exec lms python manage.py lms load_policies
Go to http://local.openedx.io:8000/api-docs/#/authz/authz_v1_roles_users_update and add roles to some users, following the structure

{
  "role": "library_author", // Create another with "library_admin" to be able to filter
  "scope": "lib:OpenedX:testlib", // Id of the previously created library
  "users": [
    "admin"
    // more usernames or emails if wanted
  ]
}

Navigate to http://apps.local.openedx.io:2025/admin-console/authz/libraries/< your_library_id > and modify the filters; data should be properly filtered and sorted

Additional Information

US: Filter and sort team members openedx-authz#50

openedx-webhooks · 2025-10-02T15:16:29Z

Thanks for the pull request, @bra-i-am!

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.

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:

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 · 2025-10-02T15:19:04Z

Codecov Report

❌ Patch coverage is 97.43590% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.55%. Comparing base (431314e) to head (0962368).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/authz-module/data/api.ts	69.23%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master       #8      +/-   ##
==========================================
+ Coverage   92.44%   93.55%   +1.11%     
==========================================
  Files          31       37       +6     
  Lines         463      605     +142     
  Branches       81      119      +38     
==========================================
+ Hits          428      566     +138     
- Misses         34       38       +4     
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 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.

dcoa · 2025-10-09T16:02:21Z

src/authz-module/libraries-manager/components/TeamTable.tsx

+      manualSortBy
+      fetchData={debounce(handleTableFetch, 1000)}
      data={rows}
      itemCount={rows?.length}


Needs to be updated with the backend

Suggested change

itemCount={rows?.length}

itemCount={teamMembers?.count || 0}

dcoa · 2025-10-09T16:20:10Z

src/authz-module/data/api.ts

+export interface QuerySettings {
+  roles: string | null;
+  search: string | null;
+  ordering: string | null;


Suggested change

ordering: string | null;

order: string | null;

sortBy: string | null;

dcoa · 2025-10-09T16:21:18Z

src/authz-module/data/api.ts

+  if (querySettings.ordering) {
+    url.searchParams.set('ordering', querySettings.ordering);
+  }


Suggested change

if (querySettings.ordering) {

url.searchParams.set('ordering', querySettings.ordering);

}

if (querySettings.sortBy) {

url.searchParams.set('sort_by', querySettings.sortBy);

url.searchParams.set('order', querySettings.order);

}

dcoa · 2025-10-09T16:23:40Z

src/authz-module/data/api.ts

+  url.searchParams.set('page', (querySettings.pageIndex + 1).toString());
+
+  const { data } = await getAuthenticatedHttpClient().get(url);
  return camelCaseObject(data.results);


We need to update the response we can access the total number of users

Suggested change

return camelCaseObject(data.results);

return camelCaseObject(data);

dcoa · 2025-10-09T17:18:33Z

I think is better if you group all the filters over a TeamTable folder, all of them are related to the same component and it is quite large :

/TeamTable
   - /components
      - MultipleChoiceFilter
      - SearchFilter
      - SortDropdown
      - TableControlBar
   - / hooks
      - useQuerySettings
   - index.tsx

dcoa · 2025-10-09T17:37:38Z

src/authz-module/libraries-manager/components/TeamTable/index.tsx

+    >
+      <TableControlBar />
+      <DataTable.Table />
+    </DataTable>


The table controls are not visible, so we needo add the footer component

Suggested change

>

<TableControlBar />

<DataTable.Table />

</DataTable>

>

<TableControlBar />

<DataTable.Table />

<TableFooter />

</DataTable>

jacobo-dominguez-wgu

I tested the filters by username/email, role sorting, and alphabetical sorting — everything seems to be working well!

That said, I noticed a small opportunity to improve the user experience. There’s a slight delay before the skeleton appears when changing the alphabetical sorting, filtering by role or username/email, and when clicking the “Clear filters” button. Occasionally, the skeleton doesn’t appear at all. I’ve attached a short video showing what I observed:

Grabacion.de.pantalla.2025-10-21.a.la.s.3.42.09.p.m.mov

Also, I have a quick question about a potential edge case:
if the admin wants to find and remove all the collaborator roles from an specific email domain so he set the filtering for that, after filters are applied he clicks on edit button for the first row and then removes the team member role, then returns to the table and the filters seem to reset. Is that the expected behavior, or should the filtering persist after returning?

dcoa · 2025-10-22T05:30:03Z

That said, I noticed a small opportunity to improve the user experience. There’s a slight delay before the skeleton appears when changing the alphabetical sorting, filtering by role or username/email, and when clicking the “Clear filters” button.

Yes, that happen because the information is loaded from the cache instead of a request for the backend, but not sure how to improve that delay after the data is cached and printed in the table again.

Also, I have a quick question about a potential edge case:
if the admin wants to find and remove all the collaborator roles from an specific email domain so he set the filtering for that, after filters are applied he clicks on edit button for the first row and then removes the team member role, then returns to the table and the filters seem to reset. Is that the expected behavior, or should the filtering persist after returning?

there is not specification about persistence in the query cross views, I think for the MVP is not a priority but will be considered in future stages.

brian-smith-tcril

Overall this looks great!

The components being added here look like they'd likely be useful to have in more places than just this MFE. It'd be awesome to see what it'd take to get them added to Paragon.

I left a few comments with questions.

Thank you so much for this PR!

src/authz-module/data/api.ts

brian-smith-tcril · 2025-10-22T17:14:49Z

src/authz-module/data/api.ts

+  if (querySettings.sortBy && querySettings.order) {
+    url.searchParams.set('sort_by', querySettings.sortBy);
+    url.searchParams.set('order', querySettings.order);
+  }


Would there be a possible scenario where we'd have sortBy but not order? I know for the current sort options (Name A-Z, Name Z-A) we'll always have both so this isn't a blocking comment.

brian-smith-tcril · 2025-10-22T17:16:59Z

src/authz-module/data/hooks.ts

+  queryKey: authzQueryKeys.teamMembers(scope, querySettings),
+  queryFn: () => getTeamMembers(scope, querySettings),
  staleTime: 1000 * 60 * 30, // refetch after 30 minutes
+  refetchOnWindowFocus: false,


Just curious as to why this is being added. It doesn't seem like something that would be a sort/filter/search specific change.

src/authz-module/libraries-manager/components/TeamTable/components/SortDropdown.tsx

brian-smith-tcril · 2025-10-22T17:59:32Z

src/authz-module/libraries-manager/components/TeamTable/components/SortDropdown.tsx

+  [key: string]: Omit<SortOption, 'label'>;
+}
+
+const SORT_BY_OPTIONS: SortByOptions = {


Not blocking, but it'd be great to update this component to take in the SortByOptions and SORT_LABELS as props so it can be reused.

src/authz-module/libraries-manager/components/TeamTable/components/SortDropdown.tsx

src/authz-module/libraries-manager/components/TeamTable/index.tsx

…able

… filtering and pagination

…utton functionality

…lders

…button text

brian-smith-tcril

LGTM!

I'm still curious about #8 (comment), but I don't feel like it's hurting anything (I'd really only be opposed to having refetchOnWindowFocus set to false for a page where we expect content to be updated rather frequently.

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Oct 2, 2025

openedx-webhooks added this to Contributions Oct 2, 2025

github-project-automation bot moved this to Needs Triage in Contributions Oct 2, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Oct 2, 2025

bra-i-am force-pushed the bc/add-table-filters branch 2 times, most recently from 2e16508 to 6d9adf8 Compare October 6, 2025 21:03

dcoa reviewed Oct 9, 2025

View reviewed changes

dcoa force-pushed the bc/add-table-filters branch 2 times, most recently from 467f8df to 9450e16 Compare October 20, 2025 05:38

bra-i-am marked this pull request as ready for review October 20, 2025 15:55

bra-i-am changed the title ~~feat: add filters and sorting functionality to the team table~~ feat: [FC-0099] add filters and sorting functionality to the team table Oct 20, 2025

jacobo-dominguez-wgu reviewed Oct 21, 2025

View reviewed changes

dcoa force-pushed the bc/add-table-filters branch 2 times, most recently from 98e07b5 to 5dcd6aa Compare October 21, 2025 23:09

dcoa requested review from arbrandes and brian-smith-tcril October 21, 2025 23:25

dcoa force-pushed the bc/add-table-filters branch from 5dcd6aa to 96225f4 Compare October 22, 2025 05:30

brian-smith-tcril reviewed Oct 22, 2025

View reviewed changes

MaferMazu added this to RBAC AuthZ Board Oct 22, 2025

MaferMazu moved this to Ready for testing in RBAC AuthZ Board Oct 22, 2025

dcoa mentioned this pull request Oct 23, 2025

Investigate useDeferedValue instead of debounce #23

Open

feat: add filters and sorting functionality to the team table

1e3749a

bra-i-am and others added 14 commits October 24, 2025 01:34

feat: add lodash.debounce for improved fetchData performance in TeamT…

85d0eff

…able

feat: implement query settings management for team members table with…

f7a35d9

… filtering and pagination

fix: increase staleTime for useTeamMembers hook to 30 minutes

0fcaafe

refactor: simplify TableControlBar layout and restore Clear filters b…

1e05f38

…utton functionality

feat: add internationalization support for sorting and search placeho…

a1984eb

…lders

test: fix issues with failing tests

857f82e

refactor: update SearchFilter to use string & localize Clear filters …

b11b757

…button text

test: add missing comprehensive tests

2b0980e

refactor: update sorting and group all in a Table

85ca129

test: update to use useEvent intead of fireEvent

7e9a404

refactor: user retrival for paginated query in user detail view

ce7e65b

refactor: separation of i18n messages

bd009ee

style: remove comment in API

ce5cabe

fix: adress debaunce time

0962368

dcoa force-pushed the bc/add-table-filters branch from 57a7c3c to 0962368 Compare October 23, 2025 14:35

brian-smith-tcril approved these changes Oct 23, 2025

View reviewed changes

brian-smith-tcril merged commit b332f62 into openedx:master Oct 23, 2025
6 checks passed

github-project-automation bot moved this from Ready for review to Done in RBAC AuthZ Board Oct 23, 2025

github-project-automation bot moved this from Waiting on Author to Done in Contributions Oct 23, 2025

-  ordering: string | null;
+  order: string | null;
+  sortBy: string | null;

	return camelCaseObject(data.results);
	return camelCaseObject(data);

feat: [FC-0099] add filters and sorting functionality to the team table #8

feat: [FC-0099] add filters and sorting functionality to the team table #8

Uh oh!

Conversation

bra-i-am commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Evidence

Testing instructions

Additional Information

Uh oh!

openedx-webhooks commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dcoa Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

dcoa Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

dcoa Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

dcoa Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

dcoa commented Oct 9, 2025

Uh oh!

dcoa Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jacobo-dominguez-wgu left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcoa commented Oct 22, 2025

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brian-smith-tcril Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brian-smith-tcril Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bra-i-am commented Oct 2, 2025 •

edited

Loading

openedx-webhooks commented Oct 2, 2025 •

edited

Loading

codecov bot commented Oct 2, 2025 •

edited

Loading

dcoa Oct 9, 2025 •

edited

Loading

jacobo-dominguez-wgu left a comment •

edited

Loading