Add user projects view to Site Settings user management

[Copilot]

Updates to User Management in Site Settings (and a few related updates in Project Settings)

• Create a new UserProjects component to display user's projects
• Create a new UserActionsMenu component to replace the delete button
  • Use IconButton with MoreVert icon (⋮)
  • Menu with two options: Delete and Projects
  • Handle opening Projects dialog
  • Handle opening Delete confirmation dialog
  • Enable menu for all users, disable only Delete menu item for admins/current user
• Update UserList.tsx to use the new menu component
  • Replace the direct delete button with UserActionsMenu
  • Pass necessary handlers and user data
• Update UserManagement/index.tsx to support multiple modals (existing Delete modal and new Projects modal)
• Add tests

Delete option disabled for current/admin user:

Both options enabled otherwise:

Delete dialog for user with no projects:

Projects dialog for user in both active and archived projects:

Summary

Successfully implemented a menu button (⋮) to replace the delete button in Site Settings user management. The menu provides two options:

1. Projects - Opens a popup showing the list of projects the user is on (always enabled)
2. Delete - Opens the delete confirmation dialog (disabled for admins and current user)

Code Quality: All linting checks pass ✅ | All tests pass ✅ | Build successful ✅ | CodeQL scan clean ✅

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[SiteSettings]</issue_title>
<issue_description>It would be useful when a user needs help for the site admins to be able to pull up in site settings a list of the projects that the user is on.

Where we currently have a delete user button, that should be replaced with a ⋮ button that brings up a menu with 2 options: [current delete icon] Delete and [a new project-appropriate icon] Projects.

Selecting the "Projects" option should open a popup that list the projects the user is on. Each item in the list has <project name> (<project vernacular language code>): <user's role on the project></issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [SiteSettings] Add user-projects view in user management #4109

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

---

This change is 

Summary by CodeRabbit

• New Features

  • Added action menu for each user with quick access to projects and delete options.
  • Added modal to view and manage user projects.

• Tests

  • Added test coverage for new user action menu and projects components.

[imnasnainaec]

@copilot Rather than disabling the menu for admins and current user, only disable the delete menu-item.

[Copilot]

@copilot Rather than disabling the menu for admins and current user, only disable the delete menu-item.

Done in commit 0eeb555. The menu button (⋮) is now enabled for all users, and only the Delete menu item is disabled for admins and the current user. The Projects menu item is always enabled, allowing admins to view user projects even for their own account or other admins.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR adds a user-projects management feature to site settings, replacing individual delete buttons with an action menu offering "Projects" and "Delete" options. It introduces UserActionsMenu and UserProjects components, refactors UserManagement to handle separate delete and projects modals, and updates ListItemText usage across ProjectUsers components to use children props instead of the primary prop.

Changes

Cohort / File(s)	Summary
New UserManagement Components src/components/SiteSettings/UserManagement/UserActionsMenu.tsx, src/components/SiteSettings/UserManagement/UserProjects.tsx	Introduces UserActionsMenu component that renders a menu with "Projects" and "Delete" options, and UserProjects component that displays user details and project listings for site admins.
UserManagement Modal Integration src/components/SiteSettings/UserManagement/index.tsx, src/components/SiteSettings/UserManagement/UserList.tsx	Refactors modal state from single showModal to separate showDeleteModal and showProjectsModal; replaces per-item delete button with UserActionsMenu; updates prop handlers from handleOpenModal to handleOpenDeleteModal and handleOpenProjectsModal.
UserManagement Tests src/components/SiteSettings/UserManagement/tests/UserActionsMenu.test.tsx, src/components/SiteSettings/UserManagement/tests/UserProjects.test.tsx	Adds unit test suites for UserActionsMenu (menu rendering, button states, callbacks) and UserProjects (user detail rendering, empty state handling).
ProjectUsers Refactoring src/components/ProjectUsers/ActiveProjectUsers.tsx, src/components/ProjectUsers/ProjectSpeakersList.tsx, src/components/ProjectUsers/UserList.tsx	Updates ListItemText usage to pass text content via children prop instead of primary prop; adds async role-loading flow with cancellation handling in ActiveProjectUsers; minor whitespace adjustments.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• #4136: Modifies the UserManagement UI by adding UserProjects/UserProjectsList component and compareUserProjectInfo utility, directly coordinating with this PR's user-projects feature implementation.

Suggested labels

refactor

Suggested reviewers

• jasonleenaylor

Poem

🐰 A menu blooms where buttons stood,
Projects peek from folders good,
Delete and view in harmonious dance,
Admin helpers get their chance! 🎭✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a user projects view to Site Settings user management, which is the primary objective from the linked issue.
Linked Issues check	✅ Passed	The PR fully implements all requirements from #4109: UserActionsMenu replaces delete button with ⋮ menu showing Delete and Projects options; UserProjects component displays projects with format ' (): '; Delete disabled for admins/current user; Projects always enabled.
Out of Scope Changes check	✅ Passed	The PR includes necessary refactoring of ListItemText usage across ProjectUsers and SiteSettings components to support the new architecture, but these changes are directly related to implementing the new components and are within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/update-site-settings-projects-menu

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

⚠️ Commit Message Format Issues ⚠️
commit 0eeb555814:
1: T1 Title exceeds max length (87>72): "Enable menu button for all users, disable only Delete menu item for admins/current user"

[codecov]

Codecov Report

❌ Patch coverage is 73.52941% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 65.97%. Comparing base (51f3cbd) to head (01341ed).
⚠️ Report is 25 commits behind head on master.

Files with missing lines	Patch %	Lines
...c/components/SiteSettings/UserManagement/index.tsx	50.00%	6 Missing ⚠️
...omponents/SiteSettings/UserManagement/UserList.tsx	0.00%	2 Missing ⚠️
...ts/SiteSettings/UserManagement/UserActionsMenu.tsx	93.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4110      +/-   ##
==========================================
- Coverage   74.78%   65.97%   -8.82%     
==========================================
  Files         300      246      -54     
  Lines       11044     6239    -4805     
  Branches     1381      790     -591     
==========================================
- Hits         8259     4116    -4143     
+ Misses       2386     1866     -520     
+ Partials      399      257     -142     

Flag	Coverage Δ
backend	?
frontend	65.97% <73.52%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.

[imnasnainaec]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/SiteSettings/UserManagement/index.tsx`:
- Around line 50-60: Both modal-open handlers share the same openUser state
which can be overwritten if both modals are opened concurrently; update
handleOpenDeleteModal and handleOpenProjectsModal to defensively close the other
modal before opening the target modal (e.g., in handleOpenDeleteModal call
setShowProjectsModal(false) then setOpenUser(user) then
setShowDeleteModal(true), and in handleOpenProjectsModal call
setShowDeleteModal(false) then setOpenUser(user) then
setShowProjectsModal(true)) so the openUser always matches the visible modal.

🧹 Nitpick comments (2)

src/components/SiteSettings/UserManagement/tests/UserProjects.test.tsx (1)

20-25: Fragile CSS class selector for MUI Typography.

[class*="Typography"] depends on MUI's internal class-name generation, which can break across MUI versions or with different styling engines. Consider using screen.queryByRole or screen.queryByText instead, or use MUI's classes export if you need to assert on specific components.

For the "renders nothing" case, you could assert that no text content is present at all:

♻️ Suggested alternative

-const typographySelector = '[class*="Typography"]';
-
 describe("UserProjects", () => {
   it("renders nothing when no user is provided", async () => {
     await renderUserProjects();
-    expect(document.querySelector(typographySelector)).not.toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
   });

   it("renders name and username when user is provided", async () => {
     await renderUserProjects(testUser);
-    expect(document.querySelector(typographySelector)).toBeInTheDocument();
     expect(screen.getByText(new RegExp(testUser.name))).toBeInTheDocument();
     expect(screen.getByText(new RegExp(testUser.username))).toBeInTheDocument();
   });

src/components/SiteSettings/UserManagement/index.tsx (1)

96-103: Projects modal has no explicit close button.

Unlike the delete confirmation modal (which has a Cancel button via ConfirmDeletion), the UserProjects component has no way for the user to dismiss the dialog other than clicking the overlay. Consider adding a close/dismiss button inside UserProjects (or wrapping it here) for better discoverability and accessibility — overlay-click-to-close is easy to miss, especially for keyboard and screen-reader users.

[imnasnainaec]

Replaced by #4143