feat: [FC-0099] add button & modal for adding new team members #3

bra-i-am · 2025-09-26T20:46:20Z

Warning

This PR depends on #5 for getting the roles and permissions metadata.
TODO: Add a toast when trying to add an already-assigned role to a user

This pull request adds a complete "Add New Team Member" workflow to the Libraries Team Manager, allowing users to add new members to a library and assign them roles.

Main changes

Added new API methods (addTeamMembers, getTeamRoles) and types (AddTeamMembersRequest, PutTeamMembersResponse, TeamRole) to support adding team members and fetching available roles. [1] [2]
Introduced React Query hooks (useAddTeamMember, useTeamRoles) for adding team members and fetching roles.
Created UI components: AddNewTeamMemberTrigger (button and toast), AddNewTeamMemberModal (form and modal), and integrated them into the team manager page. [1] [2] [3]
Updated context (LibraryAuthZProvider) and props to use the new TeamRole type for richer role information, ensuring role descriptions and user counts are available throughout the UI. [1] [2]
Enhanced the AuthZTitle component to accept React elements as actions, enabling the new trigger button and future extensibility. [1] [2]

Evidence

Screencast.from.15-10-25.16.45.16.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
Navigate to http://apps.local.openedx.io:2025/admin-console/authz/libraries/< your_library_id >
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
Click the button "Add New Team Member"
Type a username or email, select a role, and click save; if the user exists, it should be displayed in the team members table; otherwise, you should see a proper error

Additional Information

US: Add library team member openedx-authz#47

openedx-webhooks · 2025-09-26T20:46:25Z

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.

sarina · 2025-09-29T18:20:40Z

@bra-i-am #2 merged, could you rebase and mark ready for review?

codecov · 2025-09-29T20:25:09Z

Codecov Report

❌ Patch coverage is 96.12403% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 91.89%. Comparing base (b507311) to head (a273c49).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
.../AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx	95.83%	3 Missing ⚠️
...-module/libraries-manager/LibrariesTeamManager.tsx	75.00%	1 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master       #3      +/-   ##
==========================================
+ Coverage   89.96%   91.89%   +1.93%     
==========================================
  Files          25       28       +3     
  Lines         269      395     +126     
  Branches       34       54      +20     
==========================================
+ Hits          242      363     +121     
- Misses         27       31       +4     
- Partials        0        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.

bra-i-am · 2025-09-29T20:36:56Z

@sarina, this PR is ready, thanks!

dcoa · 2025-09-29T22:39:07Z

src/types.ts

  slug: string;
 }

+export interface TeamRole {


Important
The API contract for getting the roles and permissions is under validation here openedx/openedx-authz#16 (comment), waiting for the backend team feedback, it should not impact hardly what is managed in this PR.

Regarding to this we decided that for the MVP the backend will retrieve only the mapping of roles and permission and any extra data will leave in the frontend (short-term). Here the PR with the metadata information #5

@bra-i-am hope for your review there and I hope the changes here are minimal after that.

sarina · 2025-09-30T02:19:28Z

@bra-i-am can you please ensure your PR title contains the FC number (FC-99 in this case) when you're working on Axim funded contribution projects? This helps the team who triages incoming PRs to the project know we have these under control. Thanks!

dcoa · 2025-09-30T02:40:47Z

src/authz-module/data/api.ts

+  return camelCaseObject(res.data);
+};
+
+export const getTeamRoles = async (libraryId: string): Promise<TeamRole[]> => {


[enhancement] not blocking for the current iteration but this endpoint can be used for other scopes within the AuthZ module, a more generic parameter is better.

dcoa · 2025-09-30T02:42:20Z

src/authz-module/data/hooks.ts

 });
+
+/**
+ * React Query hook to add new team members to a specific library.


Same comment for both hooks https://github.com/openedx/frontend-app-admin-console/pull/3/files#r2389701104

dcoa · 2025-09-30T02:54:07Z

src/authz-module/data/hooks.ts

+ *
+ * @example
+ * ```tsx
+ * const { data: teamRoles, isLoading, isError } = useTeamRoles('lib:123');


[not blocking]

Suggested change

* const { data: teamRoles, isLoading, isError } = useTeamRoles('lib:123');

* const { data: teamRoles } = useTeamRoles('lib:123');

useSuspenseQuery does not return isLoading, isError , those are managed by Suspense and ErrorBoundary respectively.

dcoa · 2025-09-30T03:02:38Z

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

+          <ModalDialog.CloseButton variant="tertiary" disabled={isLoading}>
+            {intl.formatMessage(messages['libraries.authz.manage.add.member.cancel.button'])}
+          </ModalDialog.CloseButton>
+          <Button


[enhancement] not blocking, Paragon has a component to work with buttons and states https://paragon-openedx.netlify.app/components/statefulbutton/

dcoa · 2025-09-30T03:17:55Z

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx

+    }));
+  };
+
+  const handleAddTeamMember = () => {


There is only one thing that is missing here, that is after a partial success the input, should display the error users in red (o just display the error users for now) and remove the completed ones.

Initial input

After submitting

Solved 👍

dcoa · 2025-09-30T03:21:12Z

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx

+        />
+      )}
+
+      {additionMessage && (


[enhancement] In the future should be reusable component across the application, for know is perfect, thank you

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

dcoa · 2025-10-09T13:59:27Z

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

+        <AddNewTeamMemberModal
+          isOpen={isOpen}
+          isError={isError}
+          close={close}


I think a extra function is needed here to reset the state when a error happens, something like:

const handleClose = () => { setFormValues(DEFAULT_FORM_VALUES); setIsError(false) close(); }

Solved 👍

dcoa · 2025-10-21T14:53:52Z

@brian-smith-tcril
I just want to double check before removing the commit, I'm not being able to replicate the comma issue with both commits applied.

Screencast.from.2025-10-22.01-24-15.webm

However, I create a issue for finding a better way to manage the issue #14

jacobo-dominguez-wgu · 2025-10-21T15:21:05Z

src/authz-module/components/AuthZTitle.test.tsx

+    render(<AuthZTitle {...defaultProps} actions={actions} />);
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    expect(screen.getByTestId('custom-action')).toBeInTheDocument();


A getByText query would be more focused on what the user sees on screen, since we are moving away from querying from testId

Thanks for highlighting this, I will manage all that testId refactors in a separate PR, after the ulmo cut.

brian-smith-tcril · 2025-10-21T17:15:06Z

@brian-smith-tcril I just want to double check before removing the commit, I'm not being able to replicate the comma issue with both commits applied.

Screencast.from.2025-10-22.01-24-15.webm
However, I create a issue for finding a better way to manage the issue #14

Very odd. I just tried again and it's working as expected for me now. Must have been an environment issue on my side. Sorry about that!

brian-smith-tcril

LGTM!

The non-blocking issues have been documented:

jacobo-dominguez-wgu

Tested on the sandbox and looks fine, good work!

…NewTeamMemberTrigger tests

… AddNewTeamMemberTrigger

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

openedx-webhooks added this to Contributions Sep 26, 2025

github-project-automation bot moved this to Needs Triage in Contributions Sep 26, 2025

arbrandes self-requested a review September 29, 2025 18:35

bra-i-am force-pushed the bc/CONSOLE#642 branch from b0c02c9 to 937dacb Compare September 29, 2025 19:29

bra-i-am marked this pull request as ready for review September 29, 2025 20:36

bra-i-am requested a review from dcoa September 29, 2025 20:37

bra-i-am changed the title ~~feat: add button for adding new team members~~ feat: add button & modal for adding new team members Sep 29, 2025

mphilbrick211 moved this from Needs Triage to Ready for Review in Contributions Sep 29, 2025

dcoa reviewed Sep 29, 2025

View reviewed changes

dcoa requested a review from holaontiveros September 30, 2025 02:07

sarina added the FC Relates to an Axim Funded Contribution project label Sep 30, 2025

dcoa reviewed Sep 30, 2025

View reviewed changes

bra-i-am changed the title ~~feat: add button & modal for adding new team members~~ feat: add button & modal for adding new team members [FC-99] Oct 2, 2025

bra-i-am changed the title ~~feat: add button & modal for adding new team members [FC-99]~~ feat: add button & modal for adding new team members [FC-99] Oct 2, 2025

bra-i-am changed the title ~~feat: add button & modal for adding new team members [FC-99]~~ feat: [FC-99] add button & modal for adding new team members Oct 2, 2025

dcoa reviewed Oct 2, 2025

View reviewed changes

src/authz-module/libraries-manager/LibrariesTeamManager.tsx Outdated Show resolved Hide resolved

bra-i-am force-pushed the bc/CONSOLE#642 branch from e3fae1d to 1d168cd Compare October 8, 2025 21:07

bra-i-am marked this pull request as draft October 8, 2025 21:08

dcoa reviewed Oct 9, 2025

View reviewed changes

jacobo-dominguez-wgu reviewed Oct 21, 2025

View reviewed changes

brian-smith-tcril mentioned this pull request Oct 21, 2025

testId refactors #17

Closed

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

View reviewed changes

jacobo-dominguez-wgu approved these changes Oct 21, 2025

View reviewed changes

bra-i-am and others added 19 commits October 22, 2025 08:22

feat: add team roles management and update related hooks and types

0bb49c1

feat: implement add new team member functionality with modal and actions

de03216

test: add some missing tests

7387ed9

test: add unit tests for AddNewTeamMemberModal and update context mocks

b93512a

test: add toast close functionality and loading state handling in Add…

7d298d1

…NewTeamMemberTrigger tests

fix: update LibrariesAuthZTeamView to include canManageTeam check for…

fbf2680

… AddNewTeamMemberTrigger

fix: correct API endpoint paths and update authorization scope format

1e0a652

refactor: improve error handling & address PR feedback

9b85aee

refactor: group AddNewTeamMemberModal in 1 folder

3d0cf35

fix: reset modal values to close action

b10b614

refactor: replace useAddTeamMember with useAssignTeamMembersRole

58dc7bd

feat: add tooltip

6afc0da

test: fix test after rebase

0b9c7b5

refactor: enhance user intruction with placeholder

57ab33c

style: remove unnecessary inline style

398c747

fix: remove the error style on change the textarea value

fb5e1b8

fix: add useState to display toast

92e8467

fix: remove empty strings from the user input

b661b81

fix: validate error users to apply style

a273c49

dcoa force-pushed the bc/CONSOLE#642 branch from 62c99e8 to a273c49 Compare October 21, 2025 21:30

brian-smith-tcril merged commit 52fbb7e into openedx:master Oct 21, 2025
6 checks passed

github-project-automation bot moved this from Ready for Review to Done in Contributions Oct 21, 2025

brian-smith-tcril mentioned this pull request Oct 30, 2025

Avoid using getByTestId #28

Closed

jacobo-dominguez-wgu mentioned this pull request Nov 3, 2025

Replacing the usage of getByTestId and data-testid #30

Merged

5 tasks

	* const { data: teamRoles, isLoading, isError } = useTeamRoles('lib:123');
	* const { data: teamRoles } = useTeamRoles('lib:123');

feat: [FC-0099] add button & modal for adding new team members #3

feat: [FC-0099] add button & modal for adding new team members #3

Uh oh!

Conversation

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

Uh oh!

Main changes

Evidence

Testing instructions

Additional Information

Uh oh!

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

Uh oh!

Uh oh!

sarina commented Sep 29, 2025

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

bra-i-am commented Sep 29, 2025

Uh oh!

dcoa Sep 29, 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!

Choose a reason for hiding this comment

Uh oh!

sarina commented Sep 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcoa commented Oct 21, 2025

Uh oh!

jacobo-dominguez-wgu Oct 21, 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!

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril commented Oct 21, 2025

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

jacobo-dominguez-wgu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

bra-i-am commented Sep 26, 2025 •

edited

Loading

openedx-webhooks commented Sep 26, 2025 •

edited

Loading

codecov bot commented Sep 29, 2025 •

edited

Loading

dcoa Sep 29, 2025 •

edited

Loading

jacobo-dominguez-wgu Oct 21, 2025 •

edited

Loading