From e2da9ac03d1cd0f7525172e5e5b626cbca7d6f1a Mon Sep 17 00:00:00 2001
From: Danielv123 <danielv@danielv.no>
Date: Fri, 9 Feb 2024 06:30:43 +0300
Subject: [PATCH] Make role tag in users table clickable

As per issue #572
---
 packages/web_ui/src/components/UsersPage.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web_ui/src/components/UsersPage.tsx b/packages/web_ui/src/components/UsersPage.tsx
index 4ab13fac..c487adf5 100644
--- a/packages/web_ui/src/components/UsersPage.tsx
+++ b/packages/web_ui/src/components/UsersPage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Button, Form, Input, Modal, Space, Table, Tag } from "antd";
 
 import * as lib from "@clusterio/lib";
@@ -49,7 +49,7 @@ function CreateUserButton() {
 		>
 			<Form form={form}>
 				<Form.Item name="userName" label="Name">
-					<Input/>
+					<Input />
 				</Form.Item>
 			</Form>
 		</Modal>
@@ -97,7 +97,9 @@ export default function UsersPage() {
 					title: "Roles",
 					key: "roles",
 					render: (_, user) => (
-						[...user.roleIds].map(id => <Tag key={id}>{(roles.get(id) || { name: id }).name}</Tag>)
+						[...user.roleIds].map(id => <Link to={`/roles/${id}/view`} onClick={e => e.stopPropagation()}>
+							<Tag key={id}>{(roles.get(id) || { name: id }).name}</Tag>
+						</Link>)
 					),
 				},
 				{