Merge pull request #3386 from bluewave-labs/feat/remove-team-member

Add ability to remove team members

client/src/Pages/Account/EditUser/index.tsx

@@ -11,12 +11,17 @@ import { ConfigBox, BasePage } from "@/Components/design-elements";
 import { UserRoles } from "@/Types/User";
 import { useTranslation } from "react-i18next";
 import type { UserRole, User } from "@/Types/User";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material";
 import { useEditUserForm } from "@/Hooks/useEditUserForm";
-import { useGet, usePatch } from "@/Hooks/UseApi";
+import { useGet, usePatch, useDelete } from "@/Hooks/UseApi";
 import type { EditUserFormData } from "@/Validation/editUser";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { DialogInput } from "@/Components/inputs/Dialog";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
 
 interface RoleOption {
 	id: UserRole;
@@ -29,6 +34,12 @@ const EditUserPage = () => {
 	const { userId } = useParams<{ userId: string }>();
 	const { resolver, defaults } = useEditUserForm();
 	const { patch, loading: isSaving } = usePatch();
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const navigate = useNavigate();
+	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+	const currentUser = useSelector((state: RootState) => state.auth.user);
+	const isSuperAdmin = useIsSuperAdmin();
+	const isAdmin = useIsAdmin();
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
@@ -60,6 +71,20 @@ const EditUserPage = () => {
 		setValue("role", newRoles, { shouldValidate: true });
 	};
 
+	const canDeleteUser =
+		isAdmin &&
+		userId !== currentUser?.id &&
+		!user?.role?.includes("demo") &&
+		(isSuperAdmin || user?.role?.every((r) => r !== "admin" && r !== "superadmin"));
+
+	const handleDeleteUser = async () => {
+		const result = await deleteFn(`/auth/users/${userId}`);
+		setShowDeleteDialog(false);
+		if (result) {
+			navigate("/account", { state: { tab: "team" } });
+		}
+	};
+
 	const onSubmit = async (data: EditUserFormData) => {
 		await patch(`/auth/users/${userId}`, data);
 	};
@@ -165,17 +190,45 @@ const EditUserPage = () => {
 							</Stack>
 						}
 					/>
-					<Button
-						type="submit"
-						variant="contained"
-						color="primary"
-						loading={isSaving}
-						sx={{ alignSelf: "flex-end", minWidth: 100 }}
+					<Stack
+						gap={LAYOUT.XS}
+						direction="row"
+						justifyContent={"flex-end"}
+						width="100%"
 					>
-						{t("common.buttons.save")}
-					</Button>
+						{canDeleteUser && (
+							<Button
+								variant="contained"
+								color="error"
+								onClick={() => setShowDeleteDialog(true)}
+								sx={{ minWidth: 100 }}
+							>
+								{t("common.buttons.removeUser")}
+							</Button>
+						)}
+						<Button
+							type="submit"
+							variant="contained"
+							color="primary"
+							loading={isSaving}
+							sx={{ minWidth: 100 }}
+						>
+							{t("common.buttons.save")}
+						</Button>
+					</Stack>
 				</Stack>
 			</form>
+			<DialogInput
+				open={showDeleteDialog}
+				title={t("pages.editUser.dialog.removeUser.title")}
+				content={t("pages.editUser.dialog.removeUser.content", {
+					name: `${user?.firstName} ${user?.lastName}`,
+				})}
+				onCancel={() => setShowDeleteDialog(false)}
+				onConfirm={handleDeleteUser}
+				confirmText={t("common.buttons.removeUser")}
+				loading={isDeleting}
+			/>
 		</BasePage>
 	);
 };

client/src/Pages/Account/components/TeamTable.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Table } from "@/Components/design-elements";
 import type { Header } from "@/Components/design-elements/Table";
-import { useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { User } from "@/Types/User";
 
 interface TeamTableProps {
@@ -13,7 +13,7 @@ interface TeamTableProps {
 export const TeamTable = ({ users }: TeamTableProps) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const isSuperAdmin = useIsSuperAdmin();
+	const isAdmin = useIsAdmin();
 
 	const headers: Header<User>[] = [
 		{
@@ -45,7 +45,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 	];
 
 	const handleRowClick = (row: User) => {
-		if (isSuperAdmin) {
+		if (isAdmin) {
 			navigate(`/account/team/${row.id}`);
 		}
 	};
@@ -54,7 +54,7 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 		<Table
 			headers={headers}
 			data={users}
-			onRowClick={isSuperAdmin ? handleRowClick : undefined}
+			onRowClick={isAdmin ? handleRowClick : undefined}
 		/>
 	);
 };

client/src/locales/en.json

@@ -46,7 +46,8 @@
 			"sendTestEmail": "Send test email",
 			"exportToJSON": "Export to JSON",
 			"importFromJSON": "Import from JSON",
-			"clearFilters": "Clear filters"
+			"clearFilters": "Clear filters",
+			"removeUser": "Remove user"
 		},
 		"charts": {
 			"labels": {
@@ -626,6 +627,12 @@
 					"title": "Roles",
 					"description": "Assign roles to the user. Multiple roles can be selected."
 				}
+			},
+			"dialog": {
+				"removeUser": {
+					"title": "Remove user",
+					"content": "Are you sure you want to remove {{name}} from your team? This action cannot be undone."
+				}
 			}
 		},
 		"incidents": {