@expcluster/permission-groups 7.0.1

package/web/components/RoleMappingsTable.tsx

@@ -0,0 +1,107 @@
+import React, { useContext, useState } from "react";
+import { Table, Button, Space, Tag } from "antd";
+import { EditOutlined } from "@ant-design/icons";
+
+import { ControlContext, useAccount, useRoles } from "@clusterio/web_ui";
+import { RoleMappingRecord, RoleMappingDeleteRequest } from "../../messages";
+import type { WebPlugin } from "..";
+
+import RoleMappingForm from "./RoleMappingForm";
+import DeletedConfirm from "./DeleteConfirm";
+
+export default function RoleMappingsTable() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+	const account = useAccount();
+
+	const [roleMappings, roleMappingsSynced] = plugin.useRoleMappings();
+	const [groups, groupsSynced] = plugin.useGroups();
+	const [roles, rolesSynced] = useRoles();
+
+	const [editing, setEditing] = useState<RoleMappingRecord | undefined>();
+	const [open, setOpen] = useState(false);
+
+	const roleMappingArray = [...roleMappings.values()];
+
+	const roleFilters = [...roles.values()]
+		.filter(role => roleMappingArray.some(mapping => mapping.roleIds.has(role.id)))
+		.map(role => ({ text: role.name, value: role.id }));
+
+	const groupFilters = [...groups.values()]
+		.filter(group => roleMappingArray.some(mapping => mapping.groupId === group.id))
+		.map(group => ({ text: group.name, value: group.id }))
+
+	return <>
+		<Table
+			columns={[
+				{
+					title: "Priority",
+					dataIndex: "priority",
+					width: "10%",
+				},
+				{
+					title: "Roles",
+					filters: roleFilters,
+					onFilter: (value, record: RoleMappingRecord) => (
+						record.roleIds.has(value as number)
+					),
+					render: (_: any, record: RoleMappingRecord) => (
+						[...record.roleIds].map(id => <Tag key={id}>{roles.get(id)?.name ?? id}</Tag>)
+					),
+				},
+				{
+					title: "Group",
+					width: "30%",
+					filters: groupFilters,
+					onFilter: (value, record: RoleMappingRecord) => (
+						record.groupId === value
+					),
+					render: (_: any, record: RoleMappingRecord) => (
+						groups.get(record.groupId)?.name ?? record.groupId
+					),
+				},
+				{
+					title: "Enabled",
+					width: "10%",
+					filters: [
+						{ text: "Enabled", value: true },
+						{ text: "Disabled", value: false },
+					],
+					onFilter: (value, record: RoleMappingRecord) => (
+						record.enabled === value
+					),
+					render: (_: any, record: RoleMappingRecord) => (
+						record.enabled ? "Yes" : "No"
+					),
+				},
+				...(account.hasAnyPermission(
+					"exp_groups.role_mapping.update",
+					"exp_groups.role_mapping.delete",
+				) ? [{
+					title: "Actions",
+					width: "10%",
+					render: (_: any, record: any) => (
+						<Space>
+							{account.hasPermission("exp_groups.role_mapping.update") && <Button
+								icon={<EditOutlined />}
+								onClick={() => {
+									setEditing(record);
+									setOpen(true);
+								}}
+							/>}
+							{account.hasPermission("exp_groups.role_mapping.delete") && <DeletedConfirm
+								onConfirm={() => control.send(new RoleMappingDeleteRequest(record.id))}
+							/>}
+						</Space>
+					),
+				}] : []),
+			]}
+			dataSource={roleMappingArray.sort((a, b) => b.priority - a.priority)}
+			loading={!roleMappingsSynced || !groupsSynced || !rolesSynced}
+			rowKey={(m) => m.id}
+			pagination={false}
+		/>
+
+		<RoleMappingForm open={open} setOpen={setOpen} initial={editing} />
+	</>;
+}

package/web/index.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useCallback, useSyncExternalStore } from "react";
+import { BaseWebPlugin, PageLayout, PageHeader, useAccount, SectionHeader } from "@clusterio/web_ui";
+import { Button } from "antd";
+
+import * as messages from "../messages";
+import * as lib from "@clusterio/lib";
+
+import GroupsTable from "./components/GroupsTable";
+import AssignmentsTable from "./components/AssignmentsTable";
+import RoleMappingsTable from "./components/RoleMappingsTable";
+import GroupViewPage from "./components/GroupViewPage";
+import GroupForm from "./components/GroupForm";
+import RoleMappingForm from "./components/RoleMappingForm";
+import AssignmentForm from "./components/AssignmentForm";
+
+
+function ExpGroupsPage() {
+	const account = useAccount();
+
+	const [groupOpen, setGroupOpen] = useState(false);
+	const [assignmentOpen, setAssignmentOpen] = useState(false);
+	const [roleMappingOpen, setRoleMappingOpen] = useState(false);
+
+	return <PageLayout nav={[{ name: "Permission Groups" }]}>
+		<PageHeader title="Permission Groups" />
+
+		{account.hasPermission("exp_groups.group.list") && <>
+			<SectionHeader
+				title="Groups"
+				extra={
+					account.hasPermission("exp_groups.group.create")
+						? <Button type="primary" onClick={() => setGroupOpen(true)}>Create</Button>
+						: undefined
+				}
+			/>
+			<GroupsTable />
+			<GroupForm open={groupOpen} setOpen={setGroupOpen} />
+		</>}
+
+		{account.hasPermission("exp_groups.role_mapping.list") && <>
+			<SectionHeader
+				title="Role Mappings"
+				extra={
+					account.hasPermission("exp_groups.role_mapping.create")
+						? <Button type="primary" onClick={() => setRoleMappingOpen(true)}>Create</Button>
+						: undefined
+				}
+			/>
+			<RoleMappingsTable />
+			<RoleMappingForm open={roleMappingOpen} setOpen={setRoleMappingOpen} />
+		</>}
+
+		{account.hasPermission("exp_groups.assignment.list") && <>
+			<SectionHeader
+				title="Assignments"
+				extra={
+					account.hasPermission("exp_groups.assignment.create")
+						? <Button type="primary" onClick={() => setAssignmentOpen(true)}>Create</Button>
+						: undefined
+				}
+			/>
+			<AssignmentsTable />
+			<AssignmentForm open={assignmentOpen} setOpen={setAssignmentOpen} />
+		</>}
+	</PageLayout>;
+}
+
+export class WebPlugin extends BaseWebPlugin {
+	groups = new lib.MapSubscriber(messages.GroupUpdatedEvent, this.control);
+	assignments = new lib.MapSubscriber(messages.ManualAssignmentUpdatedEvent, this.control);
+	roleMappings = new lib.MapSubscriber(messages.RoleMappingUpdatedEvent, this.control);
+
+	async init() {
+		this.pages = [
+			{
+				path: "/permission_groups",
+				sidebarName: "Permission Groups",
+				permission: (account => account.hasAnyPermission(
+                    "exp_groups.group.list",
+                    "exp_groups.assignment.list",
+                    "exp_groups.role_mapping.list",
+                )),
+				content: <ExpGroupsPage />,
+			},
+			{
+				path: "/permission_groups/:id/view",
+				sidebarPath: "/permission_groups",
+				permission: "exp_groups.group.get",
+				content: <GroupViewPage />,
+			},
+		];
+	}
+
+	useGroups() {
+		const subscribe = useCallback((cb: () => void) => this.groups.subscribe(cb), []);
+		return useSyncExternalStore(subscribe, () => this.groups.getSnapshot());
+	}
+
+	useAssignments() {
+		const subscribe = useCallback((cb: () => void) => this.assignments.subscribe(cb), []);
+		return useSyncExternalStore(subscribe, () => this.assignments.getSnapshot());
+	}
+
+	useRoleMappings() {
+		const subscribe = useCallback((cb: () => void) => this.roleMappings.subscribe(cb), []);
+		return useSyncExternalStore(subscribe, () => this.roleMappings.getSnapshot());
+	}
+}

package/webpack.config.js

@@ -0,0 +1,34 @@
+"use strict";
+const path = require("path");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
+
+const common = require("@clusterio/web_ui/webpack.common");
+
+module.exports = (env = {}) => merge(common(env), {
+	context: __dirname,
+	entry: "./web/index.tsx",
+	output: {
+		path: path.resolve(__dirname, "dist", "web"),
+	},
+	plugins: [
+		new webpack.container.ModuleFederationPlugin({
+			name: "exp_groups",
+			library: { type: "window", name: "plugin_exp_groups" },
+			exposes: {
+				"./": "./index.ts",
+				"./package.json": "./package.json",
+				"./web": "./web/index.tsx",
+			},
+			shared: {
+				"@clusterio/lib": { import: false },
+				"@clusterio/web_ui": { import: false },
+				"antd": { import: false },
+				"react": { import: false },
+				"react-dom": { import: false },
+				"react-router": { import: false },
+				"react-router-dom": { import: false },
+			},
+		}),
+	],
+});