fix: edit roles and permissions

supertokens · Oct 27, 2023 · dba0c25 · dba0c25
1 parent c37f0df
commit dba0c25
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 246 deletions.
diff --git a/src/ui/components/userDetail/userRoles/UserRolesList.tsx b/src/ui/components/userDetail/userRoles/UserRolesList.tsx
@@ -113,7 +113,7 @@ export default function UserRolesList(props: UserRolesListProps) {
 				<DeleteUserRoleDialog
 					roleToDelete={roleToDelete}
 					userId={userId}
-					roles={roles}
+					assignedRoles={assignedRoles}
 					setAssignedRoles={setAssignedRoles}
 					closeDialog={() => {
 						setRoleToDelete(undefined);

diff --git a/src/ui/components/userroles/components/EditPermissions.tsx b/src/ui/components/userroles/components/EditPermissions.tsx
diff --git a/src/ui/components/userroles/components/RolesTable.tsx b/src/ui/components/userroles/components/RolesTable.tsx
@@ -17,7 +17,8 @@ import { useCallback, useEffect, useState } from "react";
 
 import useRolesService from "../../../../api/userroles/role";
 import Badge from "../../badge";
-import Button from "../../button";
+
+import { ReactComponent as TrashIcon } from "../../../../assets/trash.svg";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../table";
 import { PlaceholderTableRows } from "../../usersListTable/UsersListTable";
@@ -63,35 +64,9 @@ export function RolesTable() {
 			<Table className="theme-blue">
 				<TableHeader>
 					<TableRow>
-						<TableHead className="roles-column">
-							<div className="checkbox-text-container">
-								<input
-									type="checkbox"
-									name="check"
-									id="check"
-									onChange={(e) => {
-										if (e.currentTarget.checked) {
-											setSelectedRolesToDelete(roles.map(({ role }) => role));
-										} else {
-											setSelectedRolesToDelete([]);
-										}
-									}}
-								/>
-								User Roles
-							</div>
-						</TableHead>
+						<TableHead className="roles-column">User Roles</TableHead>
 						<TableHead>
-							<div className="delete-btn-container">
-								Permissions
-								<Button
-									onClick={() => {
-										if (selectedRolesToDelete.length > 0) setShowDeleteDialog(true);
-									}}
-									color={selectedRolesToDelete.length > 0 ? "danger" : "gray"}
-									size="sm">
-									Delete
-								</Button>
-							</div>
+							<div className="delete-btn-container">Permissions</div>
 						</TableHead>
 					</TableRow>
 				</TableHeader>
@@ -113,49 +88,42 @@ export function RolesTable() {
 									setSelectedRole(roles[index]);
 									setShowEditDialog(true);
 								}}>
+								<TableCell>{role}</TableCell>
 								<TableCell>
-									<div className="checkbox-text-container">
-										<input
-											type="checkbox"
-											name="check"
-											id="check"
-											checked={selected}
-											onChange={(e) => {
+									<div className="permissions-container">
+										<div
+											id="permissions"
+											className="permissions">
+											{permissions.map((permission) => {
+												return (
+													<Badge
+														key={permission}
+														text={permission}
+													/>
+												);
+											})}
+										</div>
+										<button
+											onClick={(e) => {
 												e.stopPropagation();
-												if (e.currentTarget.checked) {
-													setSelectedRolesToDelete([...selectedRolesToDelete, role]);
-												} else {
-													setSelectedRolesToDelete(
-														selectedRolesToDelete.filter((r) => r !== role)
-													);
-												}
+												setShowDeleteDialog(true);
+												setSelectedRole(roles[index]);
 											}}
-											onClick={(e) => e.stopPropagation()}
-										/>
-										{role}
-									</div>
-								</TableCell>
-								<TableCell>
-									<div className="permissions-container">
-										{permissions.map((permission) => {
-											return (
-												<Badge
-													key={permission}
-													text={permission}
-												/>
-											);
-										})}
+											className="delete-role">
+											<TrashIcon />
+										</button>
 									</div>
 								</TableCell>
 							</TableRow>
 						);
 					})}
 				</TableBody>
 			</Table>
-			{showDeleteDialog ? (
+			{showDeleteDialog && selectedRole ? (
 				<DeleteRolesDialog
 					closeDialog={() => setShowDeleteDialog(false)}
 					selectedRoles={selectedRolesToDelete}
+					selectedRole={selectedRole?.role}
 					resetSelectedRoles={() => setSelectedRolesToDelete([])}
 				/>
 			) : null}

diff --git a/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx b/src/ui/components/userroles/components/dialogs/DeleteRoles.tsx
@@ -25,10 +25,12 @@ import { useUserRolesContext } from "../../context/UserRolesContext";
 import "./deleteRoles.scss";
 
 export default function DeleteRolesDialog({
+	selectedRole,
 	selectedRoles,
 	closeDialog,
 	resetSelectedRoles,
 }: {
+	selectedRole: string;
 	selectedRoles: string[];
 	closeDialog: () => void;
 	resetSelectedRoles: () => void;
@@ -40,26 +42,20 @@ export default function DeleteRolesDialog({
 	const [isDeletingRoles, setIsDeletingRoles] = useState(false);
 
 	async function handleDeleteRoles() {
-		if (selectedRoles.length < 1) {
+		if (typeof selectedRole !== "string") {
 			return;
 		}
-		const promises = [];
-
 		setIsDeletingRoles(true);
 
-		for (let i = 0; i < selectedRoles.length; i++) {
-			promises.push(deleteRole(selectedRoles[i]));
-		}
-
 		try {
-			await Promise.all(promises);
+			await deleteRole(selectedRole);
 			showToast({
 				iconImage: getImageUrl("checkmark-green.svg"),
 				toastType: "success",
 				children: "Role deleted successfully!",
 			});
 			const filteredRoles = roles.filter((r) => {
-				return selectedRoles.includes(r.role) === false;
+				return r.role !== selectedRole;
 			});
 
 			setRoles(filteredRoles);
@@ -81,7 +77,8 @@ export default function DeleteRolesDialog({
 			<DialogContent>
 				<DialogHeader>Delete Roles?</DialogHeader>
 				<p className="you-sure-text">
-					Are you sure you want to delete the selected Roles? This action is irreversible.
+					Are you sure you want to delete Role: <span className="red">{selectedRole}</span>? This action is
+					irreversible.
 				</p>
 				<DialogFooter border="border-none">
 					<Button

diff --git a/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx b/src/ui/components/userroles/components/dialogs/DeleteUserRole.tsx
@@ -11,13 +11,13 @@ export default function DeleteUserRoleDialog({
 	closeDialog,
 	roleToDelete,
 	userId,
-	roles,
+	assignedRoles,
 	setAssignedRoles,
 }: {
 	closeDialog: () => void;
 	roleToDelete: string;
 	userId: string;
-	roles: string[];
+	assignedRoles: string[];
 	setAssignedRoles: (roles: string[]) => void;
 }) {
 	const { showToast } = useContext(PopupContentContext);
@@ -33,7 +33,7 @@ export default function DeleteUserRoleDialog({
 				toastType: "success",
 				children: "Role deleted successfully!",
 			});
-			setAssignedRoles(roles.filter((role) => role !== roleToDelete));
+			setAssignedRoles(assignedRoles.filter((role) => role !== roleToDelete));
 		} catch (error) {
 			showToast({
 				iconImage: getImageUrl("form-field-error-icon.svg"),

diff --git a/src/ui/components/userroles/components/dialogs/EditRole.tsx b/src/ui/components/userroles/components/dialogs/EditRole.tsx
@@ -1,14 +1,18 @@
 import { useState } from "react";
 
+import { getImageUrl } from "../../../../../utils";
 import Badge from "../../../badge";
 import Button from "../../../button";
+import IconButton from "../../../common/iconButton";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../../../dialog";
+import TagsInputField from "../../../inputField/TagsInputField";
 import { Role } from "../../types";
-import EditPermissions from "../EditPermissions";
 import "./editRole.scss";
 
 export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDialog: () => void; selectedRole: Role }) {
-	const [isInEditingMode, setIsInEditingMode] = useState(true);
+	const [isInEditingMode, setIsInEditingMode] = useState(false);
+
+	const [permissions, setPermissions] = useState(selectedRole.permissions);
 
 	return (
 		<Dialog closeDialog={closeDialog}>
@@ -22,13 +26,10 @@ export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDia
 								<span className="role-name">{selectedRole.role}</span>
 							</div>
 							<div>
-								<EditPermissions
-									selectedRole={selectedRole}
+								<TagsInputField
+									tags={permissions}
 									label="Add Permissions"
-									onPermissionsChange={() => {
-										alert("hi");
-									}}
-									permissions={[]}
+									onTagsChange={setPermissions}
 									focusText="Write permission name and press enter to add it in the list."
 								/>
 							</div>
@@ -64,11 +65,15 @@ export default function EditRoleDialog({ closeDialog, selectedRole }: { closeDia
 							</div>
 						</div>
 						<DialogFooter justifyContent="space-between">
-							<Button
-								color="gray"
-								onClick={() => setIsInEditingMode(true)}>
-								Edit
-							</Button>
+							<IconButton
+								size="small"
+								text="Edit"
+								tint="var(--color-link)"
+								icon={getImageUrl("edit.svg")}
+								onClick={() => {
+									setIsInEditingMode(true);
+								}}
+							/>
 							<Button
 								onClick={closeDialog}
 								color="gray-outline">