From b928e94e515669da8b4fe70d28de37284340a898 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 12 Jul 2025 23:26:50 -0600
Subject: [PATCH] refactor(users): improve role assignment UI and logic

- Enhanced the role assignment component by conditionally rendering roles and disabling the owner role in the selection.
- Updated the display of role permissions and descriptions for better clarity and user experience.
- Changed the button label from "Assign Role" to "Save Role" to better reflect the action being performed.
---
 .../settings/users/add-permissions-v2.tsx     | 102 ++++++++++--------
 1 file changed, 58 insertions(+), 44 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions-v2.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions-v2.tsx
index 53ed26f97..e92d48c9b 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-permissions-v2.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-permissions-v2.tsx
@@ -142,7 +142,7 @@ export const AddUserPermissionsV2 = ({ userId }: Props) => {
 
 	const isFullAccessRole =
 		selectedRole &&
-		(selectedRole.name === "owner" || selectedRole.name === "admin"); // Owner permission indicator
+		(selectedRole.name === "owner" || selectedRole.name === "admin");
 
 	const onAssignRole = async (data: AssignRoleForm) => {
 		try {
@@ -266,49 +266,63 @@ export const AddUserPermissionsV2 = ({ userId }: Props) => {
 															<h4 className="text-sm font-medium">
 																Default Roles
 															</h4>
-															{defaultRoles?.roles?.map((role) => (
-																<FormItem
-																	key={role.roleId}
-																	className="flex items-center space-x-3 space-y-0"
-																>
-																	<FormControl>
-																		<RadioGroupItem value={role.roleId || ""} />
-																	</FormControl>
-																	<FormLabel className="font-normal">
-																		<div className="flex items-center gap-2">
-																			<span className="font-medium capitalize">
-																				{role.name}
-																			</span>
-																			{role.name === "owner" && (
-																				<Badge
-																					variant="default"
-																					className="text-xs"
-																				>
-																					Full Access
-																				</Badge>
+															{defaultRoles?.roles?.map((role) => {
+																const isOwner = role.name === "owner";
+																const isAdmin = role.name === "admin";
+																if (isOwner) {
+																	return null;
+																}
+																return (
+																	<FormItem
+																		key={role.roleId}
+																		className="flex items-center space-x-3 space-y-0"
+																	>
+																		<FormControl>
+																			<RadioGroupItem
+																				value={role.roleId || ""}
+																				disabled={isOwner}
+																			/>
+																		</FormControl>
+																		<FormLabel className="font-normal">
+																			<div className="flex items-center gap-2">
+																				<span className="font-medium capitalize">
+																					{role.name}
+																				</span>
+																				{isAdmin && (
+																					<Badge
+																						variant="default"
+																						className="text-xs"
+																					>
+																						Full Access
+																					</Badge>
+																				)}
+																			</div>
+																			<div className="text-xs text-muted-foreground">
+																				{role.description}
+																			</div>
+																			{!isOwner && (
+																				<div className="flex flex-wrap gap-1 mt-1">
+																					{role.permissions?.map(
+																						(permission) => (
+																							<Badge
+																								key={permission.name}
+																								variant={
+																									isOwner
+																										? "default"
+																										: "secondary"
+																								}
+																								className="text-xs"
+																							>
+																								{permission.description}
+																							</Badge>
+																						),
+																					)}
+																				</div>
 																			)}
-																		</div>
-																		<div className="text-xs text-muted-foreground">
-																			{role.description}
-																		</div>
-																		<div className="flex flex-wrap gap-1 mt-1">
-																			{role.permissions?.map((permission) => (
-																				<Badge
-																					key={permission.name}
-																					variant={
-																						role.name === "owner"
-																							? "default"
-																							: "secondary"
-																					}
-																					className="text-xs"
-																				>
-																					{permission.description}
-																				</Badge>
-																			))}
-																		</div>
-																	</FormLabel>
-																</FormItem>
-															))}
+																		</FormLabel>
+																	</FormItem>
+																);
+															})}
 														</div>
 
 														<Separator />
@@ -608,7 +622,7 @@ export const AddUserPermissionsV2 = ({ userId }: Props) => {
 
 								<DialogFooter>
 									<Button type="submit" disabled={isAssigningRole}>
-										{isAssigningRole ? "Assigning..." : "Assign Role"}
+										{isAssigningRole ? "Assigning..." : "Save Role"}
 									</Button>
 								</DialogFooter>
 							</form>