@expcluster/permission-groups 7.0.1

package/web/components/AssignmentsTable.tsx

@@ -0,0 +1,111 @@
+import React, { useContext, useState, useRef } from "react";
+import { Table, Button, Space, Input, InputRef } from "antd";
+import { EditOutlined, SearchOutlined } from "@ant-design/icons";
+
+import { ControlContext, useAccount } from "@clusterio/web_ui";
+import { AssignmentDeleteRequest, AssignmentRecord } from "../../messages";
+import type { WebPlugin } from "..";
+
+import AssignmentForm from "./AssignmentForm";
+import DeletedConfirm from "./DeleteConfirm";
+
+const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
+
+export default function AssignmentsTable() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+	const account = useAccount();
+
+	const searchInput = useRef<InputRef>(null);
+
+	const [assignments, assignmentsSynced] = plugin.useAssignments();
+	const [groups, groupsSynced] = plugin.useGroups();
+
+	const [editing, setEditing] = useState<AssignmentRecord | undefined>();
+	const [open, setOpen] = useState(false);
+
+	const assignmentsArray = [...assignments.values()];
+
+	const groupFilters = [...groups.values()]
+		.filter(group => assignmentsArray.some(assignment => assignment.groupId === group.id))
+		.map(group => ({ text: group.name, value: group.id }))
+
+	return <>
+		<Table
+			columns={[
+				{
+					title: "Player",
+					dataIndex: "name",
+					sorter: (a: AssignmentRecord, b: AssignmentRecord) => strcmp(a.name, b.name),
+					filterIcon: (filtered: boolean) => (
+						<SearchOutlined style={{ color: filtered ? "#1677ff" : undefined }} />
+					),
+					onFilter: (value, record: AssignmentRecord) => (
+						record.name.toLowerCase().includes(String(value).toLowerCase())
+					),
+					filterDropdownProps: {
+						onOpenChange: (open: boolean) => open && setTimeout(() => searchInput.current?.select(), 100),
+					},
+					filterDropdown: ({ selectedKeys, setSelectedKeys, confirm, clearFilters }) => (
+						<div style={{ padding: 4 }} onKeyDown={(e) => e.stopPropagation()}>
+							<Input.Search
+								allowClear
+								ref={searchInput}
+								placeholder={"Search username"}
+								value={selectedKeys[0]}
+								onChange={(e) => setSelectedKeys([e.target.value])}
+								onSearch={() => confirm({ closeDropdown: false })}
+								onClear={() => {
+									clearFilters?.({ closeDropdown: false });
+									confirm({ closeDropdown: true });
+								}}
+							/>
+						</div>
+					),
+				},
+				{
+					title: "Group",
+					width: "40%",
+					filters: groupFilters,
+					onFilter: (value, record: AssignmentRecord) => (
+						record.groupId === value
+					),
+					render: (_: any, a: any) => (
+						groups.get(a.groupId)?.name ?? a.groupId
+					),
+				},
+				...(account.hasAnyPermission(
+					"exp_groups.assignment.update",
+					"exp_groups.assignment.delete",
+				) ? [{
+					title: "Actions",
+					width: "10%",
+					render: (_: any, record: AssignmentRecord) => (
+						<Space>
+							{account.hasPermission("exp_groups.assignment.update") &&
+								<Button icon={<EditOutlined />} onClick={() => {
+									setEditing(record);
+									setOpen(true);
+								}} />
+							}
+							{account.hasPermission("exp_groups.assignment.delete") && <DeletedConfirm
+								onConfirm={() => control.send(new AssignmentDeleteRequest(record.name))}
+							/>}
+						</Space>
+					),
+				}] : []),
+			]}
+			dataSource={assignmentsArray}
+			loading={!assignmentsSynced || !groupsSynced}
+			rowKey={(a) => a.name}
+			pagination={{
+				defaultPageSize: 50,
+				showSizeChanger: true,
+				pageSizeOptions: ["10", "20", "50", "100", "200"],
+				showTotal: (total: number) => `${total} Assignments`,
+			}}
+		/>
+
+		<AssignmentForm open={open} setOpen={setOpen} initial={editing} />
+	</>;
+}

package/web/components/DeleteConfirm.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button, Popconfirm } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { TooltipPlacement } from "antd/es/tooltip";
+
+export default function DeletedConfirm(props: { onConfirm: () => void, placement?: TooltipPlacement }) {
+    return <Popconfirm
+        title="Delete?"
+        okText="Delete"
+		okButtonProps={{ danger: true }}
+        onConfirm={props.onConfirm}
+        placement={props.placement}
+    >
+        <Button danger icon={<DeleteOutlined />} />
+    </Popconfirm>
+}

package/web/components/GroupForm.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, useEffect } from "react";
+import { Modal, Form, Input, Switch } from "antd";
+import { useNavigate } from "react-router-dom";
+
+import { ControlContext } from "@clusterio/web_ui";
+import * as messages from "../../messages";
+
+export default function GroupForm({ open, setOpen }: {
+	open: boolean,
+	setOpen: (open: boolean) => void,
+}) {
+	const control = useContext(ControlContext);
+	const navigate = useNavigate();
+
+	const [form] = Form.useForm();
+
+	async function submit(values: any) {
+		const group = await control.send(new messages.GroupCreateRequest(
+			values.name, new messages.GroupPermissions(Boolean(values.isBlacklist), [])
+		));
+		navigate(`/permission_groups/${group.id}/view`);
+		setOpen(false);
+	}
+
+	useEffect(() => {
+		if (open) form.resetFields();
+	}, [open]);
+
+	return <Modal
+		title="Create Group"
+		open={open}
+		onCancel={() => setOpen(false)}
+		onOk={() => form.submit()}
+	>
+		<Form form={form} onFinish={submit}>
+			<Form.Item name="name" label="Name" rules={[{ required: true }]}>
+				<Input />
+			</Form.Item>
+
+			<Form.Item name="isBlacklist" label="Grant all by default" valuePropName="checked">
+				<Switch />
+			</Form.Item>
+		</Form>
+	</Modal>;
+}

package/web/components/GroupViewPage.tsx

@@ -0,0 +1,287 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Button, Checkbox, Input, Space, Spin, Alert } from "antd";
+
+import { ControlContext, useAccount, useDefaultModPack, PageLayout, PageHeader, notifyErrorHandler } from "@clusterio/web_ui";
+import DeletedConfirm from "./DeleteConfirm";
+
+import * as messages from "../../messages";
+import type { WebPlugin } from "..";
+
+const DOMAIN_MAPPING = {
+	"Admin": ["admin", "cheat", "permission", "infinity", "editor", "spawn"],
+	"Building & Crafting": ["mining", "build", "craft", "deconstruct", "rotate", "entity"],
+	"Inventory": ["inventory", "stack", "cursor", "slot", "quick_bar", "item", "equipment"],
+	"Blueprints": ["blueprint", "copy", "paste", "undo", "redo", "upgrade"],
+	"Trains": ["train", "station", "schedule", "interrupt", "rolling_stock"],
+	"Circuit Network": ["combinator", "circuit", "signal", "wire", "cable", "speaker", "display_panel"],
+	"GUI": ["gui", "open"],
+	"Pins & Alerts": ["pin", "alert", "tag"],
+	"Logistics": ["logistic", "filter", "request"],
+	"Space": ["space", "surface", "planet", "rocket"],
+	"Toggles": ["toggle", "switch", "swap", "set"],
+};
+
+function getDomain(name: string) {
+	const n = name.toLowerCase();
+
+	for (const [domain, keywords] of Object.entries(DOMAIN_MAPPING)) {
+		if (keywords.some(k => n.includes(k))) return domain;
+	}
+
+	return "Other";
+}
+
+export default function GroupViewPage() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+	const navigate = useNavigate();
+	const account = useAccount();
+
+	const { id } = useParams();
+	const groupId = Number(id);
+
+	const [groups, synced] = plugin.useGroups();
+	const group = groups.get(groupId);
+
+	const [name, setName] = useState("");
+
+	const defaultModPack = useDefaultModPack();
+	const [definesJson, setDefinesJson] = useState<Record<string, number> | null>(null);
+
+	const [permissionState, setPermissionState] = useState<Record<string, boolean>>({});
+	const [baselineState, setBaselineState] = useState<Record<string, boolean>>({});
+	const [search, setSearch] = useState("");
+
+	const canUpdate = Boolean(account.hasPermission("exp_groups.group.update"));
+	const canDelete = Boolean(account.hasPermission("exp_groups.group.delete"));
+
+	// fetch defines
+	useEffect(() => {
+		if (!defaultModPack?.exportManifest?.assets?.defines) return;
+		if (definesJson) return;
+
+		const assetName = defaultModPack.exportManifest.assets.defines;
+		
+		(async () => {
+			const response = await fetch(`${staticRoot}${assetName}`);
+			const json = await response.json();
+			setDefinesJson(json.input_action ?? {});
+		})().catch(notifyErrorHandler("Failed to load permissions"));
+	}, [defaultModPack]);
+
+	// initialise permissions
+	useEffect(() => {
+		if (!group || !definesJson) return;
+		if (Object.keys(permissionState).length) return;
+
+		const { isBlacklist, permissions } = group.permissions;
+
+		const base = Object.fromEntries(
+			Object.keys(definesJson).map(p => [
+				p, isBlacklist !== permissions.includes(p)
+			])
+		);
+
+		setPermissionState(base);
+		setBaselineState(base);
+	}, [group, definesJson]);
+
+	// sync name
+	useEffect(() => {
+		if (group) setName(group.name);
+	}, [group]);
+
+	// derived data
+	const allPermissions = useMemo(() => (
+		Object.keys(definesJson ?? {})
+	), [definesJson]);
+
+	const filtered = useMemo(() => allPermissions.filter(p =>
+		p.toLowerCase().includes(search.toLowerCase())
+	), [allPermissions, search]);
+
+	const grouped = useMemo(() => {
+		const map = new Map<string, string[]>();
+
+		for (const p of filtered) {
+			const domain = getDomain(p);
+			if (!map.has(domain)) map.set(domain, []);
+			map.get(domain)!.push(p);
+		}
+
+		const sorted = [...map.entries()].sort(([a], [b]) => a.localeCompare(b));
+
+		for (const [, perms] of sorted) {
+			perms.sort((a, b) => a.localeCompare(b));
+		}
+
+		return sorted;
+	}, [filtered]);
+
+	const permissionChanged = Object.keys(permissionState).some(
+		k => permissionState[k] !== baselineState[k]
+	);
+	const metaChanged = group ? name !== group.name : false;
+	const edited = permissionChanged || metaChanged;
+
+	function applyChanges() {
+		if (!group) return;
+
+		const whitelist: string[] = [];
+		const blacklist: string[] = [];
+
+		for (const [perm, enabled] of Object.entries(permissionState)) {
+			if (enabled) whitelist.push(perm);
+			else blacklist.push(perm);
+		}
+
+		const isBlacklist = blacklist.length < whitelist.length;
+		const permissions = isBlacklist ? blacklist : whitelist;
+
+		control.send(new messages.GroupUpdateRequest(
+			new messages.GroupRecord(group.id, name, new messages.GroupPermissions(isBlacklist, permissions))
+		))
+		.then(() => setBaselineState(permissionState))
+		.catch(notifyErrorHandler("Error applying changes"));
+	}
+
+	function revertChanges() {
+		if (!group) return;
+		setPermissionState(baselineState);
+		setName(group.name);
+	}
+
+	if (!synced) {
+		return <PageLayout nav={[{ name: "exp_groups" }, { name: String(groupId) }]}>
+			<Spin />
+		</PageLayout>;
+	}
+
+	if (!group) {
+		return <PageLayout nav={[{ name: "exp_groups" }, { name: String(groupId) }]}>
+			<PageHeader title="Group not found" />
+		</PageLayout>;
+	}
+
+	return <PageLayout nav={[{ name: "Permission Groups", path: "/permission_groups" }, { name: group.name }]}>
+		<PageHeader
+			title={group.name}
+			extra={<Space wrap>
+				{canDelete && <DeletedConfirm placement="bottomRight" onConfirm={async () => {
+					control.send(new messages.GroupDeleteRequest(group.id));
+					navigate(`/permission_groups`);
+				}}/>}
+			</Space>}
+		/>
+
+		{edited && (
+			<div style={{
+				position: "fixed",
+				bottom: 24,
+				left: "50%",
+				transform: "translateX(-50%)",
+				background: "#2a1912",
+				borderRadius: 8,
+				padding: "10px 14px",
+				display: "flex",
+				gap: 12,
+				zIndex: 1000,
+			}}>
+				<span>You have unsaved changes</span>
+				<Space>
+					<Button onClick={revertChanges}>Revert</Button>
+					<Button type="primary" onClick={applyChanges}>Apply</Button>
+				</Space>
+			</div>
+		)}
+
+		<div style={{ marginBottom: 16, display: "flex", gap: 12 }}>
+			<label style={{ width: 110 }}>Name</label>
+			<Input value={name} disabled={!canUpdate} onChange={e => setName(e.target.value)} />
+		</div>
+
+		<h3>Permissions</h3>
+
+		{!defaultModPack?.exportManifest?.assets?.defines && (
+			<Alert
+				type="warning"
+				message="Missing export"
+				description="An export of the default mod pack is required to modify permissions."
+				style={{ marginBottom: 16 }}
+				showIcon
+			/>
+		)}
+
+		{defaultModPack?.exportManifest?.assets?.defines && !definesJson && <Spin />}
+
+		{definesJson && <>
+			<Input.Search
+				placeholder="Search permissions"
+				allowClear
+				onChange={e => setSearch(e.target.value)}
+				style={{ marginBottom: 16 }}
+			/>
+
+			<Space direction="vertical" style={{ width: "100%" }}>
+				{grouped.map(([groupName, permissions]) => (
+					<div key={groupName} style={{ border: "1px solid #424242", padding: 12, borderRadius: 6 }}>
+						
+						<Space style={{ width: "100%", justifyContent: "space-between" }}>
+							<strong>{groupName}</strong>
+							<Space>
+								<Button
+									size="small"
+									disabled={!canUpdate}
+									onClick={() => {
+										setPermissionState(prev => {
+											const next = { ...prev };
+											for (const p of permissions) next[p] = true;
+											return next;
+										});
+									}}
+								>
+									Select all
+								</Button>
+
+								<Button
+									size="small"
+									disabled={!canUpdate}
+									onClick={() => {
+										setPermissionState(prev => {
+											const next = { ...prev };
+											for (const p of permissions) next[p] = false;
+											return next;
+										});
+									}}
+								>
+									Clear
+								</Button>
+							</Space>
+						</Space>
+
+						<div style={{
+							marginTop: 12,
+							display: "grid",
+							gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+							gap: 8,
+						}}>
+							{permissions.map(p => (
+								<Checkbox
+									key={p}
+									checked={permissionState[p]}
+									disabled={!canUpdate}
+									onChange={e =>
+										setPermissionState(prev => ({ ...prev, [p]: e.target.checked }))
+									}
+								>
+									{p}
+								</Checkbox>
+							))}
+						</div>
+					</div>
+				))}
+			</Space>
+		</>}
+	</PageLayout>;
+}

package/web/components/GroupsTable.tsx

@@ -0,0 +1,49 @@
+import React, { useContext, useState } from "react";
+import { Table } from "antd";
+import { useNavigate } from "react-router-dom";
+
+import { ControlContext } from "@clusterio/web_ui";
+import { GroupRecord } from "../../messages";
+import type { WebPlugin } from "..";
+
+import GroupForm from "./GroupForm";
+
+const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
+
+export default function GroupsTable() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+	const navigate = useNavigate();
+
+	const [groups, synced] = plugin.useGroups();
+
+	const [open, setOpen] = useState(false);
+
+	return <>
+		<Table
+			columns={[
+				{
+					title: "Name",
+					dataIndex: "name",
+					sorter: (a: any, b: GroupRecord) => strcmp(a.name, b.name),
+				},
+				{
+					title: "Permissions",
+					width: "50%",
+					render: (_: any, g: GroupRecord) => (
+						`${g.permissions.permissions.length} ${g.permissions.isBlacklist ? "Disallowed" : "Allowed"}`
+					),
+				},
+			]}
+			dataSource={[...groups.values()]}
+			loading={!synced}
+			rowKey={(g) => g.id}
+			pagination={false}
+			onRow={(g) => ({
+				onClick: () => navigate(`/permission_groups/${g.id}/view`),
+			})}
+		/>
+
+		<GroupForm open={open} setOpen={setOpen} />
+	</>;
+}

package/web/components/RoleMappingForm.tsx

@@ -0,0 +1,106 @@
+import React, { useContext, useEffect } from "react";
+import { Modal, Form, Select, InputNumber, Switch, Alert } from "antd";
+
+import { ControlContext, useRoles } from "@clusterio/web_ui";
+import { RoleMappingRecord, RoleMappingCreateRequest, RoleMappingUpdateRequest } from "../../messages";
+import type { WebPlugin } from "..";
+
+export default function RoleMappingForm({ open, setOpen, initial }: {
+	open: boolean,
+	setOpen: (open: boolean) => void,
+	initial?: RoleMappingRecord,
+}) {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+
+	const [groups] = plugin.useGroups();
+	const [roles] = useRoles();
+
+	const [form] = Form.useForm();
+
+	function submit(values: any) {
+		if (initial) {
+			control.send(new RoleMappingUpdateRequest(
+				new RoleMappingRecord(
+					initial.id,
+					new Set(values.roleIds),
+					values.groupId,
+					values.priority,
+					values.enabled,
+				)
+			));
+		} else {
+			control.send(new RoleMappingCreateRequest(
+				values.roleIds,
+				values.groupId,
+				values.priority,
+				values.enabled,
+			));
+		}
+
+		setOpen(false);
+	}
+
+	useEffect(() => {
+		if (open) {
+			form.resetFields();
+			form.setFieldsValue({
+				...initial,
+				roleIds: initial ? [...initial.roleIds] : [],
+			});
+		}
+	}, [open, initial]);
+
+	return <Modal
+		title={initial ? "Edit Role Mapping" : "Create Role Mapping"}
+		open={open}
+		onCancel={() => setOpen(false)}
+		onOk={() => form.submit()}
+	>
+		<Alert
+			type="info"
+			showIcon
+			message="How role mappings work"
+			style={{ marginBottom: 16 }}
+			description={
+				<ul style={{ paddingLeft: 16, margin: 0 }}>
+					<li>Manual assignments always take priority.</li>
+					<li>Mappings are checked in priority order (highest first).</li>
+					<li>A mapping applies only if the user has <b>all listed roles</b>.</li>
+					<li>The first matching mapping assigns the group.</li>
+					<li>If none match, the player is given all permissions.</li>
+				</ul>
+			}
+		/>
+
+		<Form form={form} onFinish={submit}>
+			<Form.Item name="groupId" label="Group" rules={[{ required: true }]}>
+				<Select>
+					{[...groups.values()].map(g => (
+						<Select.Option key={g.id} value={g.id}>
+							{g.name}
+						</Select.Option>
+					))}
+				</Select>
+			</Form.Item>
+
+			<Form.Item name="roleIds" label="Roles" rules={[{ required: true }]}>
+				<Select mode="multiple">
+					{[...roles.values()].map(r => (
+						<Select.Option key={r.id} value={r.id}>
+							{r.name}
+						</Select.Option>
+					))}
+				</Select>
+			</Form.Item>
+
+			<Form.Item name="priority" label="Priority" initialValue={100}>
+				<InputNumber style={{ width: "100%" }} />
+			</Form.Item>
+
+			<Form.Item name="enabled" label="Enabled" valuePropName="checked" initialValue={true}>
+				<Switch />
+			</Form.Item>
+		</Form>
+	</Modal>;
+}