[SiteSettings > UserManagament > ConfirmDeletion] Refactor

[imnasnainaec]

Depends on #4133

Part of #4110

User w/o projects:

User w/ projects:

---

This change is 

Summary by CodeRabbit

• New Features

  • Vernacular writing system identifiers now shown with each user project.
  • New UserProjectsList component displays per-user projects in site settings.

• Improvements

  • User deletion dialog shows name, username and email; delete button disabled while projects load.
  • Project list sorting improved to show active projects first and then by project name.

• Tests

  • Added unit tests for deletion dialog and project list loading, empty-state and rendering.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new ProjectVernacular field to user project data (backend and frontend), introduces a UserProjectsList component that fetches/sorts projects and signals readiness, updates ConfirmDeletion to use the new component and prop-driven deletion, adds sorting utility and tests for both components.

Changes

Cohort / File(s)	Summary
Backend Data Model & Controller Backend/Models/User.cs, Backend/Controllers/UserController.cs	Adds ProjectVernacular (string, required) to UserProjectInfo and sets it from project.VernacularWritingSystem.Bcp47 in GetUserProjects, expanding the returned project info shape.
Frontend Types src/api/models/user-project-info.ts	Adds projectVernacular: string to the UserProjectInfo TypeScript interface to match backend changes.
New Component src/components/SiteSettings/UserManagement/UserProjectsList.tsx	Adds UserProjectsList component: fetches getUserProjects(userId), sorts via new utility, manages loading/empty/error states, invokes optional onLoaded callback, and renders project entries (including vernacular and role labels).
Refactor: ConfirmDeletion src/components/SiteSettings/UserManagement/ConfirmDeletion.tsx	Replaces inline project fetching with UserProjectsList, adds deleteUser(userId: string) and handleCloseModal() props, tracks loaded state to gate the Delete button, and updates header/secondary user info display.
Utilities src/utilities/userProjectUtilities.ts	Adds compareUserProjectInfo(a, b) to sort projects by active status (active first) then projectName with localeCompare.
Tests src/components/SiteSettings/UserManagement/tests/ConfirmDeletion.test.tsx, src/components/SiteSettings/UserManagement/tests/UserProjectsList.test.tsx	Adds tests: ConfirmDeletion renders appropriately, disables delete while projects load and enables after; UserProjectsList tests loading/no-user/no-projects and project rendering with role labels and onLoaded invocation.

Sequence Diagram(s)

sequenceDiagram
  participant Confirm as "ConfirmDeletion\n(component)"
  participant List as "UserProjectsList\n(component)"
  participant API as "getUserProjects\n(API)"
  participant Toast as "Toast\n(notification)"

  Note over Confirm,List: User modal opens
  Confirm->>List: mount with userId
  List->>API: getUserProjects(userId)
  API-->>List: projects[]
  alt fetch success
    List->>List: sort projects (compareUserProjectInfo)
    List-->>Confirm: onLoaded()
    List-->>Confirm: render project items
  else fetch error
    List->>Toast: show warning
    List-->>Confirm: onLoaded()
  end
  Confirm->>Confirm: enable Delete button (once loaded)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested labels

project

Suggested reviewers

• jasonleenaylor

Poem

🐇 I hopped through code to add a name,

vernacular strings now join the game.
A list that loads, sorts, and hums so sweet,
the delete button waits till projects meet.
Cheers from this rabbit — carrots for this feat! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references a specific component (SiteSettings > UserManagement > ConfirmDeletion) and indicates a refactor, which aligns with the primary change of refactoring the ConfirmDeletion component to use a new UserProjectsList component and adjusting its props.

_{✏️ 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 site-settings-delete-user

---

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 77.50000% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 74.87%. Comparing base (200b5ba) to head (1de0223).
⚠️ Report is 34 commits behind head on master.

Files with missing lines	Patch %	Lines
...s/SiteSettings/UserManagement/UserProjectsList.tsx	82.14%	4 Missing and 1 partial ⚠️
src/utilities/userProjectUtilities.ts	25.00%	1 Missing and 2 partials ⚠️
...ts/SiteSettings/UserManagement/ConfirmDeletion.tsx	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4136      +/-   ##
==========================================
+ Coverage   74.76%   74.87%   +0.11%     
==========================================
  Files         295      298       +3     
  Lines       10958    10971      +13     
  Branches     1371     1375       +4     
==========================================
+ Hits         8193     8215      +22     
+ Misses       2368     2357      -11     
- Partials      397      399       +2     

Flag	Coverage Δ
backend	86.55% <100.00%> (+<0.01%)	⬆️
frontend	65.93% <76.31%> (+0.20%)	⬆️

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.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

Backend/Controllers/UserController.cs (1)

256-262: ⚠️ Potential issue | 🟠 Major

Avoid possible null dereference when reading VernacularWritingSystem.
Line 261 can throw if project.VernacularWritingSystem is null, which would fail the whole request. Use a null-safe fallback.

🛠️ Suggested fix

-                        ProjectVernacular = project.VernacularWritingSystem.Bcp47,
+                        ProjectVernacular = project.VernacularWritingSystem?.Bcp47 ?? "",

🤖 Fix all issues with AI agents

In `@src/components/SiteSettings/UserManagement/ConfirmDeletion.tsx`:
- Line 46: The inline arrow passed to UserProjectsList as onLoaded creates a new
function each render causing UserProjectsList's effect to re-run; fix by
memoizing the callback in this component (import useCallback) and replace the
inline onLoaded={() => setLoaded(true)} with a stable handler like const
handleLoaded = useCallback(() => setLoaded(true), [setLoaded]) and pass
onLoaded={handleLoaded} so the prop reference stays stable across renders.

🧹 Nitpick comments (1)

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

64-64: Nitpick: Simplify the cancel button handler.

The wrapper function is unnecessary since handleCloseModal takes no arguments.

♻️ Suggested simplification

-            onClick={() => props.handleCloseModal()}
+            onClick={props.handleCloseModal}

[jasonleenaylor]

src/utilities/userProjectUtilities.ts line 3 at r2 (raw file):

import { UserProjectInfo } from "api/models";

export function compareUserProjectInfo(

a class comment describing how this sorts or a more descriptive name would be good.

[jasonleenaylor]

@jasonleenaylor reviewed 8 files and all commit messages, and made 1 comment.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @imnasnainaec).