nxdns/admin/src/features/configuration/ProtectionGroups.tsx

import { useEffect, useState, type FormEvent } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, useNavigate, useSearch } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
import { formatCount, formatTime } from "@/lib/format";
import InlineError from "@/lib/InlineError";
import {
	blocklistsQuery,
	clientsQuery,
	groupCreateMutation,
	groupDeleteMutation,
	groupSourcesQuery,
	groupUpdateMutation,
	groupsQuery,
	ruleCreateMutation,
	ruleDeleteMutation,
	rulesQuery,
} from "@/lib/queries";
import type { Blocklist, ConfigStatus, Group, Rule, RuleAction, RuleKind } from "@/lib/types";
import ConfirmDialog from "@/ui/ConfirmDialog";
import DefinitionList from "@/ui/DefinitionList";
import Select from "@/ui/Select";
import Switch from "@/ui/Switch";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";
import AuthorityGate from "./AuthorityGate";
import FileModeNote from "./FileModeNote";
import GroupSourcesEditor from "./GroupSourcesEditor";
import QueryPanel from "./QueryPanel";
import { styles as config } from "./styles";

const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";

const KIND_OPTIONS = [
	{ value: "exact", label: "exact" },
	{ value: "wildcard", label: "wildcard" },
	{ value: "regex", label: "regex" },
];

const ACTION_OPTIONS = [
	{ value: "allow", label: "allow" },
	{ value: "block", label: "block" },
];

const styles = stylex.create({
	createForm: {
		display: "flex",
		flexWrap: "wrap",
		alignItems: "center",
		gap: "0.5rem",
		marginBottom: "0.75rem",
	},
	fieldLabel: {
		display: "block",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		fontWeight: 500,
	},
	detailHeading: {
		fontSize: "1.25rem",
		lineHeight: "1.75rem",
		fontWeight: 600,
	},
	controlRow: {
		marginTop: "0.75rem",
		display: "flex",
		flexWrap: "wrap",
		alignItems: "center",
		gap: "0.75rem",
	},
	spacer: {
		marginLeft: "auto",
	},
	destructive: {
		color: colors.danger,
	},
	ruleForm: {
		display: "flex",
		flexDirection: "column",
		gap: "0.75rem",
		marginTop: "1rem",
		maxWidth: "36rem",
	},
	fieldGrid: {
		display: "grid",
		gap: "0.75rem",
		gridTemplateColumns: {
			default: "repeat(1, minmax(0, 1fr))",
			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
		},
	},
	allow: {
		color: colors.primaryOnSurface,
	},
	block: {
		color: colors.danger,
	},
	pattern: {
		fontWeight: 500,
	},
});

export default function ProtectionGroups() {
	const groups = useQuery(groupsQuery());
	return (
		<AuthorityGate>
			{(status) => (
				<div>
					{status.authority === "managed_file" && <FileModeNote path={status.path} />}
					<QueryPanel query={groups}>
						{(rows) => <GroupsMasterDetail groups={rows} status={status} />}
					</QueryPanel>
				</div>
			)}
		</AuthorityGate>
	);
}

/**
 * Master/detail on one group at a time. The selection is `?group=`, so a view
 * of a group is a link and the browser's back button walks the groups the
 * reader looked at.
 */
function GroupsMasterDetail({ groups, status }: { groups: Group[]; status: ConfigStatus }) {
	const search = useSearch({ from: "/shell/configuration/protection" });
	const navigate = useNavigate({ from: "/configuration/protection" });

	const known = groups.some((group) => group.id === search.group);
	const selectedId = known ? search.group : groups[0]?.id;
	const selected = groups.find((group) => group.id === selectedId);

	// An id the URL named that no group has — deleted, or hand-typed — falls
	// back to the first group, and the URL is rewritten to say so. `replace`,
	// because a corrected address is not a place the reader chose to be and a
	// back button that returns to it would trap them.
	useEffect(() => {
		if (selectedId === undefined || selectedId === search.group) return;
		void navigate({ search: { tab: search.tab, group: selectedId }, replace: true });
	}, [navigate, search.group, search.tab, selectedId]);

	const fileMode = status.authority === "managed_file";

	return (
		<div {...stylex.props(config.split)}>
			<div>
				{!fileMode && <CreateGroupForm />}
				<nav aria-label="Groups" {...stylex.props(styles.controlRow)}>
					<ul {...stylex.props(config.masterList)}>
						{groups.map((group) => (
							<li key={group.id}>
								<Link
									to="/configuration/protection"
									search={{ tab: search.tab, group: group.id }}
									activeOptions={{ includeSearch: true }}
									{...stylex.props(
										config.masterLink,
										group.id === selectedId && config.masterLinkActive,
										shared.focusRing,
									)}
								>
									{group.name}
								</Link>
							</li>
						))}
					</ul>
				</nav>
			</div>
			{selected === undefined ? (
				<p {...stylex.props(config.empty)}>
					{fileMode ? "No groups exist." : "No groups exist. Create one with the New group field."}
				</p>
			) : fileMode ? (
				<GroupDetailReadOnly group={selected} />
			) : (
				<GroupDetailEditable group={selected} />
			)}
		</div>
	);
}

function CreateGroupForm() {
	const queryClient = useQueryClient();
	const create = useMutation(groupCreateMutation(queryClient));
	const [newName, setNewName] = useState("");
	return (
		<>
			<form
				{...stylex.props(styles.createForm)}
				onSubmit={(event: FormEvent) => {
					event.preventDefault();
					const name = newName.trim();
					if (name === "") return;
					create.mutate({ name }, { onSuccess: () => setNewName("") });
				}}
			>
				<label {...stylex.props(styles.fieldLabel)} htmlFor="new-group-name">
					New group
				</label>
				<input
					id="new-group-name"
					type="text"
					value={newName}
					onChange={(event) => setNewName(event.target.value)}
					{...stylex.props(shared.smallInput, shared.focusRing)}
				/>
				<button
					type="submit"
					disabled={create.isPending}
					{...stylex.props(shared.primaryButton, shared.focusRing)}
				>
					Create
				</button>
			</form>
			<InlineError error={create.error} />
		</>
	);
}

function ClientCountLink({ group }: { group: Group }) {
	const clients = useQuery(clientsQuery());
	const count = clients.data?.filter((client) => client.group_id === group.id).length;
	return (
		<p {...stylex.props(config.note)}>
			<Link to="/clients" search={{ group: group.id }} {...stylex.props(shared.focusRing)}>
				{count === undefined
					? "Clients in this group"
					: `${formatCount(count)} client${count === 1 ? "" : "s"} in this group`}
			</Link>
		</p>
	);
}

function GroupDetailReadOnly({ group }: { group: Group }) {
	return (
		<div>
			<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
			<section {...stylex.props(config.panel)}>
				<h3 {...stylex.props(config.panelHeading)}>Settings</h3>
				<p {...stylex.props(config.panelDescription)}>
					The group's name and whether its clients get safe search.
				</p>
				<DefinitionList
					items={[
						{ label: "Name", zonKey: "groups[].name", value: group.name },
						{ label: "Safe search", zonKey: "groups[].safe_search", value: String(group.safe_search) },
					]}
				/>
			</section>
			<GroupSourcesReadOnly group={group} />
			<GroupRules group={group} editable={false} />
			<ClientCountLink group={group} />
		</div>
	);
}

function GroupSourcesReadOnly({ group }: { group: Group }) {
	const blocklists = useQuery(blocklistsQuery());
	const assigned = useQuery(groupSourcesQuery(group.id));
	return (
		<section {...stylex.props(config.panel)}>
			<h3 {...stylex.props(config.panelHeading)}>
				Assigned sources
				<code {...stylex.props(shared.mono, config.panelKey)}>group_sources</code>
			</h3>
			<p {...stylex.props(config.panelDescription)}>The blocklists that apply to clients in this group.</p>
			<QueryPanel query={assigned}>
				{(sourceIds) => (
					<QueryPanel query={blocklists}>
						{(catalogue) => <AssignedSources sourceIds={sourceIds} catalogue={catalogue} />}
					</QueryPanel>
				)}
			</QueryPanel>
		</section>
	);
}

function AssignedSources({ sourceIds, catalogue }: { sourceIds: number[]; catalogue: Blocklist[] }) {
	const assigned = catalogue.filter((source) => sourceIds.includes(source.id));
	if (assigned.length === 0) return <p {...stylex.props(config.empty)}>This group is assigned no sources.</p>;
	return (
		<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
			<table {...stylex.props(config.table)}>
				<thead>
					<tr>
						<th {...stylex.props(shared.th)}>Source</th>
						<th {...stylex.props(shared.th)}>URL</th>
					</tr>
				</thead>
				<tbody>
					{assigned.map((source) => (
						<tr key={source.id}>
							<td {...stylex.props(shared.td)}>{source.name}</td>
							<td {...stylex.props(shared.td, shared.mono)}>{source.url}</td>
						</tr>
					))}
				</tbody>
			</table>
		</div>
	);
}

function GroupDetailEditable({ group }: { group: Group }) {
	const queryClient = useQueryClient();
	const blocklists = useQuery(blocklistsQuery());
	const update = useMutation(groupUpdateMutation(queryClient));
	const remove = useMutation(groupDeleteMutation(queryClient));
	const [renaming, setRenaming] = useState(false);
	const [name, setName] = useState(group.name);
	const [confirming, setConfirming] = useState(false);
	const isDefault = group.id === DEFAULT_GROUP_ID;

	return (
		<div>
			{renaming ? (
				<form
					{...stylex.props(styles.controlRow)}
					onSubmit={(event: FormEvent) => {
						event.preventDefault();
						const trimmed = name.trim();
						if (trimmed === "") return;
						update.mutate(
							{ id: group.id, input: { name: trimmed, safe_search: group.safe_search } },
							{ onSuccess: () => setRenaming(false) },
						);
					}}
				>
					<input
						type="text"
						aria-label={`New name for ${group.name}`}
						value={name}
						onChange={(event) => setName(event.target.value)}
						{...stylex.props(shared.smallInput, shared.focusRing)}
						autoFocus
					/>
					<button
						type="submit"
						disabled={update.isPending}
						{...stylex.props(shared.smallButton, shared.focusRing)}
					>
						Save
					</button>
					<button
						type="button"
						onClick={() => {
							setName(group.name);
							setRenaming(false);
						}}
						{...stylex.props(shared.smallButton, shared.focusRing)}
					>
						Cancel
					</button>
				</form>
			) : (
				<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
			)}

			<div {...stylex.props(styles.controlRow)}>
				<Switch
					isSelected={group.safe_search}
					isDisabled={update.isPending}
					onChange={(safeSearch) =>
						update.mutate({ id: group.id, input: { name: group.name, safe_search: safeSearch } })
					}
				>
					Safe search
				</Switch>
				<span {...stylex.props(styles.spacer)}>
					{!renaming && (
						<button
							type="button"
							disabled={isDefault}
							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
							onClick={() => {
								setName(group.name);
								setRenaming(true);
							}}
							{...stylex.props(shared.smallButton, shared.focusRing)}
						>
							Rename group
						</button>
					)}{" "}
					<button
						type="button"
						disabled={isDefault || remove.isPending}
						title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
						onClick={() => setConfirming(true)}
						{...stylex.props(shared.smallButton, styles.destructive, shared.focusRing)}
					>
						Delete group
					</button>
				</span>
			</div>
			{isDefault && <p {...stylex.props(config.note)}>{DEFAULT_GROUP_NOTE}</p>}
			<InlineError error={update.error ?? remove.error} />

			<section {...stylex.props(config.panel)}>
				<h3 {...stylex.props(config.panelHeading)}>Assigned sources</h3>
				<p {...stylex.props(config.panelDescription)}>The blocklists that apply to clients in this group.</p>
				<QueryPanel query={blocklists}>
					{(catalogue) => <GroupSourcesEditor groupId={group.id} blocklists={catalogue} />}
				</QueryPanel>
			</section>

			<GroupRules group={group} editable />
			<ClientCountLink group={group} />

			<ConfirmDialog
				isOpen={confirming}
				title="Delete group"
				message={`Delete group "${group.name}"? Its clients fall back to the default group.`}
				confirmLabel="Delete"
				onConfirm={() => {
					setConfirming(false);
					remove.mutate(group.id);
				}}
				onCancel={() => setConfirming(false)}
			/>
		</div>
	);
}

/**
 * The rules that apply to the selected group, and nothing else. Rules are
 * always scoped to a group, so the group-centred page is the only place they
 * need to be read: a flat list of every rule in the household was a list of
 * facts about no particular policy.
 */
function GroupRules({ group, editable }: { group: Group; editable: boolean }) {
	const rules = useQuery(rulesQuery());
	return (
		<section {...stylex.props(config.panel)}>
			<h3 {...stylex.props(config.panelHeading)}>
				Rules
				{!editable && <code {...stylex.props(shared.mono, config.panelKey)}>rules</code>}
			</h3>
			<p {...stylex.props(config.panelDescription)}>
				This group's own block and allow patterns, applied before any list.
			</p>
			<QueryPanel query={rules}>
				{(all) => {
					const scoped = all.filter((rule) => rule.group_id === group.id);
					return (
						<>
							{scoped.length === 0 ? (
								<p {...stylex.props(config.empty)}>
									No allow or block rules for this group.
									{editable && " Add one below."}
								</p>
							) : (
								<RulesTable rules={scoped} editable={editable} />
							)}
							{editable && <CreateRuleForm group={group} />}
						</>
					);
				}}
			</QueryPanel>
		</section>
	);
}

function RulesTable({ rules, editable }: { rules: Rule[]; editable: boolean }) {
	const queryClient = useQueryClient();
	const remove = useMutation(ruleDeleteMutation(queryClient));
	const [pendingDelete, setPendingDelete] = useState<Rule | null>(null);

	return (
		<>
			<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
				<table {...stylex.props(config.table)}>
					<thead>
						<tr>
							<th {...stylex.props(shared.th)}>Pattern</th>
							<th {...stylex.props(shared.th)}>Kind</th>
							<th {...stylex.props(shared.th)}>Action</th>
							<th {...stylex.props(shared.th)}>Created</th>
							{editable && (
								<th {...stylex.props(shared.th)}>
									<span {...stylex.props(shared.srOnly)}>Actions</span>
								</th>
							)}
						</tr>
					</thead>
					<tbody>
						{rules.map((rule) => (
							<tr key={rule.id}>
								<td {...stylex.props(shared.td, styles.pattern)}>{rule.pattern}</td>
								<td {...stylex.props(shared.td)}>{rule.kind}</td>
								<td {...stylex.props(shared.td)}>
									<span {...stylex.props(rule.action === "allow" ? styles.allow : styles.block)}>
										{rule.action}
									</span>
								</td>
								<td {...stylex.props(shared.td)}>{formatTime(rule.created_at)}</td>
								{editable && (
									<td {...stylex.props(shared.td)}>
										<button
											type="button"
											onClick={() => setPendingDelete(rule)}
											disabled={remove.isPending}
											{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
										>
											Delete
										</button>
									</td>
								)}
							</tr>
						))}
					</tbody>
				</table>
			</div>
			<InlineError error={remove.error} />
			<ConfirmDialog
				isOpen={pendingDelete !== null}
				title="Delete rule"
				message={
					pendingDelete === null
						? ""
						: `Delete the ${pendingDelete.action} rule for "${pendingDelete.pattern}"?`
				}
				confirmLabel="Delete"
				onConfirm={() => {
					if (pendingDelete !== null) remove.mutate(pendingDelete.id);
					setPendingDelete(null);
				}}
				onCancel={() => setPendingDelete(null)}
			/>
		</>
	);
}

function CreateRuleForm({ group }: { group: Group }) {
	const queryClient = useQueryClient();
	const create = useMutation(ruleCreateMutation(queryClient));
	const [pattern, setPattern] = useState("");
	const [kind, setKind] = useState<RuleKind>("exact");
	const [action, setAction] = useState<RuleAction>("block");

	function onSubmit(event: FormEvent) {
		event.preventDefault();
		// A regex pattern is stored and matched byte for byte, so the UI must not
		// edit it: trimming here would make a UI-created rule differ from the same
		// bytes posted to /api/rules. Name-shaped kinds are normalized server-side,
		// so trimming them only spares a pasted space a 400.
		const sent = kind === "regex" ? pattern : pattern.trim();
		create.mutate({ group_id: group.id, pattern: sent, kind, action }, { onSuccess: () => setPattern("") });
	}

	return (
		<form onSubmit={onSubmit} {...stylex.props(styles.ruleForm)}>
			<h4 {...stylex.props(styles.fieldLabel)}>Create rule in {group.name}</h4>
			<div>
				<label htmlFor="rule-pattern" {...stylex.props(styles.fieldLabel)}>
					Pattern
				</label>
				<input
					id="rule-pattern"
					type="text"
					required
					value={pattern}
					onChange={(event) => setPattern(event.target.value)}
					placeholder="ads.example.com, *.example.com or ^ad[0-9]+-"
					// A phone keyboard capitalizing the first letter is silent for
					// exact and wildcard (normalized server-side) but fatal for a
					// regex, which matches the lowercase query name byte for byte.
					autoCapitalize="none"
					autoCorrect="off"
					spellCheck={false}
					{...stylex.props(shared.input, shared.focusRing)}
				/>
			</div>
			<div {...stylex.props(styles.fieldGrid)}>
				<Select
					label="Kind"
					value={kind}
					onChange={(value) => setKind(value as RuleKind)}
					options={KIND_OPTIONS}
				/>
				<Select
					label="Action"
					value={action}
					onChange={(value) => setAction(value as RuleAction)}
					options={ACTION_OPTIONS}
				/>
			</div>
			<div>
				<button
					type="submit"
					disabled={create.isPending}
					{...stylex.props(shared.primaryButton, shared.focusRing)}
				>
					{create.isPending ? "Creating…" : "Create rule"}
				</button>
			</div>
			<InlineError error={create.error} />
		</form>
	);
}