Add frontend support for displaying user projects in deletion confirmation

Co-authored-by: imnasnainaec <6411521+imnasnainaec@users.noreply.github.com>

Author: Copilot

public/locales/en/translation.json

@@ -133,6 +133,9 @@
     "userList": "Users",
     "deleteUser": {
       "confirm": "Confirm deleting user from The Combine database.",
+      "loadingProjects": "Loading user projects...",
+      "projectsTitle": "This user has roles in the following projects:",
+      "noProjects": "This user has no project roles.",
       "toastSuccess": "User successfully deleted from The Combine.",
       "toastFailure": "Failed to delete user from The Combine."
     },

src/backend/index.ts

@@ -38,6 +38,12 @@ import { FileWithSpeakerId } from "types/word";
 import { Bcp47Code } from "types/writingSystem";
 import { convertGoalToEdit } from "utilities/goalUtilities";
 
+export interface UserProjectInfo {
+  projectId: string;
+  projectName: string;
+  role: Role;
+}
+
 export const baseURL = `${RuntimeConfig.getInstance().baseUrl()}`;
 const apiBaseURL = `${baseURL}/v1`;
 const config_parameters: Api.ConfigurationParameters = { basePath: baseURL };
@@ -767,6 +773,17 @@ export async function deleteUser(userId: string): Promise<void> {
   await userApi.deleteUser({ userId }, defaultOptions());
 }
 
+/** Note: Only usable by site admins. */
+export async function getUserProjects(
+  userId: string
+): Promise<UserProjectInfo[]> {
+  const response = await axiosInstance.get<UserProjectInfo[]>(
+    `/users/${userId}/projects`,
+    defaultOptions()
+  );
+  return response.data;
+}
+
 /** Checks whether email address is okay: unchanged or not taken by a different user. */
 export async function isEmailOkay(email: string): Promise<boolean> {
   const user = await getCurrentUser();

src/components/SiteSettings/UserManagement/ConfirmDeletion.tsx

@@ -1,8 +1,9 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
-import { Fragment, ReactElement } from "react";
+import { Fragment, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { User } from "api/models";
+import { getUserProjects, UserProjectInfo } from "backend";
 
 interface ConfirmDeletionProps {
   user?: User;
@@ -14,10 +15,32 @@ export default function ConfirmDeletion(
   props: ConfirmDeletionProps
 ): ReactElement {
   const { t } = useTranslation();
+  const [userProjects, setUserProjects] = useState<UserProjectInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (props.user) {
+      setLoading(true);
+      getUserProjects(props.user.id)
+        .then((projects) => {
+          setUserProjects(projects);
+        })
+        .catch((err) => {
+          console.error("Failed to fetch user projects:", err);
+          setUserProjects([]);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    } else {
+      setUserProjects([]);
+    }
+  }, [props.user]);
 
   if (!props.user) {
     return <Fragment />;
   }
+
   return (
     <Box sx={{ maxWidth: 500 }}>
       <Stack spacing={2}>
@@ -29,6 +52,31 @@ export default function ConfirmDeletion(
           {t("siteSettings.deleteUser.confirm")}
         </Typography>
 
+        {loading ? (
+          <Typography align="center">
+            {t("siteSettings.deleteUser.loadingProjects")}
+          </Typography>
+        ) : userProjects.length > 0 ? (
+          <>
+            <Typography align="center" variant="subtitle1">
+              {t("siteSettings.deleteUser.projectsTitle")}
+            </Typography>
+            <Box sx={{ maxHeight: 200, overflowY: "auto" }}>
+              <Stack spacing={1}>
+                {userProjects.map((project) => (
+                  <Typography key={project.projectId} variant="body2">
+                    • {project.projectName} ({project.role})
+                  </Typography>
+                ))}
+              </Stack>
+            </Box>
+          </>
+        ) : (
+          <Typography align="center" variant="body2">
+            {t("siteSettings.deleteUser.noProjects")}
+          </Typography>
+        )}
+
         <Stack direction="row" justifyContent="space-evenly">
           <Button
             color="secondary"