Merge pull request #587 from Danielv123/make-resource-references-clickable

Make resource references clickable

packages/web_ui/src/components/InstanceList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { message, Button, Space, Table } from "antd";
+import { message, Button, Space, Table, Typography } from "antd";
 import CopyOutlined from "@ant-design/icons/CopyOutlined";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import type { ColumnsType } from "antd/es/table";
@@ -10,6 +10,7 @@ import { useHosts } from "../model/host";
 import InstanceStatusTag from "./InstanceStatusTag";
 import StartStopInstanceButton from "./StartStopInstanceButton";
 import { InstanceDetails } from "@clusterio/lib";
+import Link from "./Link";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
 
@@ -55,7 +56,12 @@ export default function InstanceList(props: InstanceListProps) {
 		{
 			title: "Assigned Host",
 			key: "assignedHost",
-			render: (_, instance) => hostName(instance.assignedHost),
+			render: (_, instance) => <Link
+				to={`/hosts/${instance.assignedHost}/view`}
+				onClick={e => e.stopPropagation()}
+			>
+				{hostName(instance.assignedHost)}
+			</Link>,
 			sorter: (a, b) => strcmp(hostName(a.assignedHost), hostName(b.assignedHost)),
 			responsive: ["sm"],
 		},
@@ -68,10 +74,10 @@ export default function InstanceList(props: InstanceListProps) {
 					{publicAddress}
 					<Button
 						type="text"
-						icon={<CopyOutlined/>}
+						icon={<CopyOutlined />}
 						onClick={(e) => {
 							e.stopPropagation();
-							navigator.clipboard.writeText(publicAddress??"");
+							navigator.clipboard.writeText(publicAddress ?? "");
 							message.success("Copied public address!");
 						}}
 					/>

packages/web_ui/src/components/InstanceViewPage.tsx

@@ -23,6 +23,7 @@ import { notifyErrorHandler } from "../util/notify";
 import { useInstance } from "../model/instance";
 import { useHost } from "../model/host";
 import InstanceStatusTag from "./InstanceStatusTag";
+import Link from "./Link";
 
 const { Title } = Typography;
 
@@ -42,7 +43,9 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 		<Descriptions.Item label="Host">
 			{!assigned
 				? <em>Unassigned</em>
-				: host?.name ?? instance.assignedHost
+				: <Link to={`/hosts/${host?.id ?? instance.assignedHost}/view`}>
+					{host?.name ?? instance.assignedHost}
+				</Link>
 			}
 			{account.hasPermission("core.instance.assign") && <AssignInstanceModal
 				id={instance.id}
@@ -104,7 +107,7 @@ function InstanceButtons(props: { instance: lib.InstanceDetails }) {
 	}
 	let instanceButtonsMenuProps: MenuProps = {
 		items: instanceButtonMenuItems,
-		onClick: ({ key }: { key:string }) => {
+		onClick: ({ key }: { key: string }) => {
 			if (key === "export") {
 				setExportingData(true);
 				control.sendTo(
@@ -156,9 +159,10 @@ function InstanceButtons(props: { instance: lib.InstanceDetails }) {
 			"core.instance.extract_players",
 			"core.instance.kill",
 			"core.instance.delete",
-		) && <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
-			<Button>More <DownOutlined /></Button>
-		</Dropdown>}
+		)
+			&& <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
+				<Button>More <DownOutlined /></Button>
+			</Dropdown>}
 	</Space>;
 }
 
@@ -180,7 +184,7 @@ export default function InstanceViewPage() {
 
 		return <PageLayout nav={nav}>
 			<Alert
-				message={"Instance not found" }
+				message={"Instance not found"}
 				showIcon
 				description={<>Instance with id {instanceId} was not found on the controller.</>}
 				type="warning"
@@ -198,8 +202,8 @@ export default function InstanceViewPage() {
 
 	return <PageLayout nav={nav}>
 		<PageHeader
-			title={instance.name??""}
-			extra={<InstanceButtons instance={instance}/>}
+			title={instance.name ?? ""}
+			extra={<InstanceButtons instance={instance} />}
 		/>
 		<InstanceDescription host={host} instance={instance} />
 

packages/web_ui/src/components/Link.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Typography } from "antd";
+import {
+	LinkProps,
+	useHref,
+	useLinkClickHandler,
+} from "react-router-dom";
+import { BaseType } from "antd/es/typography/Base";
+
+const Link = React.forwardRef(
+	(
+		{
+			onClick,
+			replace = false,
+			state,
+			target,
+			to,
+			type,
+			...rest
+		}: LinkProps,
+		ref
+	) => {
+		let href = useHref(to);
+		let handleClick = useLinkClickHandler(to, {
+			replace,
+			state,
+			target,
+		}) as (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
+		return (
+			<Typography.Link
+				{...rest}
+				href={href}
+				onClick={(event) => {
+					onClick?.(event as React.MouseEvent<HTMLAnchorElement, MouseEvent>);
+					if (!event.defaultPrevented) {
+						handleClick(event);
+					}
+				}}
+				ref={ref as React.RefObject<HTMLElement> | null}
+				target={target}
+				type={type as BaseType}
+			/>
+		);
+	}
+);
+export default Link;

packages/web_ui/src/components/PageLayout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Layout, Breadcrumb } from "antd";
+import Link from "./Link";
 
 const { Content } = Layout;
 

packages/web_ui/src/components/UsersPage.tsx

@@ -12,6 +12,7 @@ import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { formatFirstSeen, formatLastSeen, sortFirstSeen, sortLastSeen, useUsers } from "../model/user";
+import Link from "./Link";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
 
@@ -49,7 +50,7 @@ function CreateUserButton() {
 		>
 			<Form form={form}>
 				<Form.Item name="userName" label="Name">
-					<Input/>
+					<Input />
 				</Form.Item>
 			</Form>
 		</Modal>
@@ -97,7 +98,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>)
 					),
 				},
 				{

packages/web_ui/src/index.ts

@@ -28,3 +28,5 @@ export { default as PageHeader } from "./components/PageHeader";
 export { default as PageLayout } from "./components/PageLayout";
 export { default as SavesList } from "./components/SavesList";
 export { default as SectionHeader } from "./components/SectionHeader";
+
+export { default as Link } from "./components/Link";