[ActiveProjectUsers] Clean up state management

[imnasnainaec]

Also, with ListItemText, prefer child over primary (since we're not using secondary).

---

This change is 

Summary by CodeRabbit

• New Features

  • Improved user roles display with better handling and translations.

• Bug Fixes

  • Enhanced stability of user interface components with improved state management.

• Style

  • Updated user information display formatting for consistency across the application.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors ListItemText component usage across multiple UserList and ProjectUsers components, changing from the primary prop to children property. Additionally, ActiveProjectUsers.tsx is enhanced with async user role fetching and state management improvements using cancellation to prevent memory leaks on unmounted components.

Changes

Cohort / File(s)	Summary
ListItemText Refactoring src/components/ProjectUsers/ProjectSpeakersList.tsx, src/components/ProjectUsers/UserList.tsx, src/components/SiteSettings/UserManagement/UserList.tsx	Changed ListItemText rendering from primary prop to children property, preserving displayed text with no behavioral changes.
Active Project Users Enhancement src/components/ProjectUsers/ActiveProjectUsers.tsx	Introduced async user roles state management with cancellation cleanup. Added effect for sorting projectUsers and guard conditions requiring defined userRoles. Updated ListItemText rendering pattern and tightened manageUser condition with role validation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

frontend, project, refactor

Suggested reviewers

• jasonleenaylor

Poem

🐰 ListItemText hops with glee,
From primary props to children so free,
Async roles fetch without a leak,
Cancellation cleanup—state so sleek,
The UI refactors, clean and bright!

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[ActiveProjectUsers] Clean up state management' directly reflects the PR's primary objectives: state management cleanup in ActiveProjectUsers and Material-UI ListItemText refactoring across multiple files.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch project-users-cleanup

---

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

[codecov]

Codecov Report

❌ Patch coverage is 72.72727% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 65.91%. Comparing base (51f3cbd) to head (b36d8a2).

Files with missing lines	Patch %	Lines
src/components/ProjectUsers/ActiveProjectUsers.tsx	72.72%	1 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4142      +/-   ##
==========================================
- Coverage   74.78%   65.91%   -8.88%     
==========================================
  Files         300      244      -56     
  Lines       11044     6219    -4825     
  Branches     1381      792     -589     
==========================================
- Hits         8259     4099    -4160     
+ Misses       2386     1862     -524     
+ Partials      399      258     -141     

Flag	Coverage Δ
backend	?
frontend	65.91% <72.72%> (+0.01%)	⬆️

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.