Add instance filter to users page

packages/web_ui/src/components/InputInstance.tsx

@@ -0,0 +1,42 @@
+import { Select } from "antd";
+
+import { InputComponentProps } from "../BaseWebPlugin";
+import { useInstances } from "../model/instance";
+
+interface BaseInputInstanceProps extends InputComponentProps {
+	includeAll?: boolean;
+}
+
+function BaseInputInstance(props: BaseInputInstanceProps) {
+	const [instances, synced] = useInstances();
+
+	const options = [
+		...(props.includeAll ? [{ label: "All instances", value: null }] : []),
+		...[...instances.values()].map(instance => ({
+			label: instance.name ?? `Instance ${instance.id}`,
+			value: instance.id,
+		})),
+	];
+
+	return (
+		<Select
+			showSearch
+			optionFilterProp="label"
+			style={{ minWidth: 175 }}
+			onChange={value => props.onChange(value ?? null)}
+			value={props.value}
+			options={options}
+			allowClear={props.fieldDefinition.optional}
+			disabled={!synced || props.disabled}
+			loading={!synced}
+		/>
+	);
+}
+
+export function InputInstanceWithAll(props: InputComponentProps) {
+	return <BaseInputInstance {...props} includeAll />;
+}
+
+export function InputInstance(props: InputComponentProps) {
+	return <BaseInputInstance {...props} />;
+}

packages/web_ui/src/components/UsersPage.tsx

@@ -19,6 +19,7 @@ import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import UsersTable from "./UsersTable";
+import { InputInstanceWithAll } from "./InputInstance";
 
 function CreateUserButton() {
 	let control = useContext(ControlContext);
@@ -366,18 +367,26 @@ function BulkUserActionButton() {
 }
 
 export default function UsersPage() {
-	let account = useAccount();
+	const account = useAccount();
+	const [instanceId, setInstanceId] = useState<number | null>(null);
 
 	return <PageLayout nav={[{ name: "Users" }]}>
 		<PageHeader
 			title="Users"
 			extra={<Space>
-				{account.hasPermission("core.user.create") ? <CreateUserButton /> : undefined}
+				{account.hasAllPermission("core.instance.list", "core.instance.subscribe")
+					&& <InputInstanceWithAll
+						value={instanceId}
+						onChange={value => setInstanceId(value as number)}
+						fieldDefinition={{ optional: true } as any}
+						disabled={false}
+					/>}
+				{account.hasPermission("core.user.create") && <CreateUserButton />}
 				{account.hasAnyPermission("core.user.bulk_import", "core.user.bulk_export")
-					? <BulkUserActionButton /> : undefined}
+					&& <BulkUserActionButton />}
 			</Space>}
 		/>
-		<UsersTable />
+		<UsersTable instanceId={instanceId ?? undefined}/>
 		<PluginExtra component="UsersPage" />
 	</PageLayout>;
 }