User Permissions Modal

frontend/src/pages/Users/Table.tsx

@@ -12,10 +12,21 @@ interface Props {
 	isFetching?: boolean;
 	currentUserId?: number;
 	onEditUser?: (id: number) => void;
+	onEditPermissions?: (id: number) => void;
+	onSetPassword?: (id: number) => void;
 	onDeleteUser?: (id: number) => void;
 	onNewUser?: () => void;
 }
-export default function Table({ data, isFetching, currentUserId, onEditUser, onDeleteUser, onNewUser }: Props) {
+export default function Table({
+	data,
+	isFetching,
+	currentUserId,
+	onEditUser,
+	onEditPermissions,
+	onSetPassword,
+	onDeleteUser,
+	onNewUser,
+}: Props) {
 	const columnHelper = createColumnHelper<User>();
 	const columns = useMemo(
 		() => [
@@ -92,16 +103,30 @@ export default function Table({ data, isFetching, currentUserId, onEditUser, onD
 									<IconEdit size={16} />
 									{intl.formatMessage({ id: "user.edit" })}
 								</a>
-								<a className="dropdown-item" href="#">
-									<IconShield size={16} />
-									{intl.formatMessage({ id: "action.permissions" })}
-								</a>
-								<a className="dropdown-item" href="#">
-									<IconLock size={16} />
-									{intl.formatMessage({ id: "user.change-password" })}
-								</a>
 								{currentUserId !== info.row.original.id ? (
 									<>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onEditPermissions?.(info.row.original.id);
+											}}
+										>
+											<IconShield size={16} />
+											{intl.formatMessage({ id: "action.permissions" })}
+										</a>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onSetPassword?.(info.row.original.id);
+											}}
+										>
+											<IconLock size={16} />
+											{intl.formatMessage({ id: "user.change-password" })}
+										</a>
 										<div className="dropdown-divider" />
 										<a
 											className="dropdown-item"
@@ -125,7 +150,7 @@ export default function Table({ data, isFetching, currentUserId, onEditUser, onD
 				},
 			}),
 		],
-		[columnHelper, currentUserId, onEditUser, onDeleteUser],
+		[columnHelper, currentUserId, onEditUser, onDeleteUser, onEditPermissions, onSetPassword],
 	);
 
 	const tableInstance = useReactTable<User>({

frontend/src/pages/Users/TableWrapper.tsx

@@ -5,12 +5,13 @@ import { deleteUser } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useUser, useUsers } from "src/hooks";
 import { intl } from "src/locale";
-import { DeleteConfirmModal, UserModal } from "src/modals";
+import { DeleteConfirmModal, PermissionsModal, UserModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const [editUserId, setEditUserId] = useState(0 as number | "new");
+	const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
 	const [deleteUserId, setDeleteUserId] = useState(0);
 	const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
 	const { data: currentUser } = useUser("me");
@@ -62,10 +63,14 @@ export default function TableWrapper() {
 					isFetching={isFetching}
 					currentUserId={currentUser?.id}
 					onEditUser={(id: number) => setEditUserId(id)}
+					onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
 					onDeleteUser={(id: number) => setDeleteUserId(id)}
 					onNewUser={() => setEditUserId("new")}
 				/>
 				{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}
+				{editUserPermissionsId ? (
+					<PermissionsModal userId={editUserPermissionsId} onClose={() => setEditUserPermissionsId(0)} />
+				) : null}
 				{deleteUserId ? (
 					<DeleteConfirmModal
 						title={intl.formatMessage({ id: "user.delete.title" })}