rename web/ to admin/, along with the web-named build and cli identifiers

2026-08-16 00:17:58 +02:00
parent 5b3d1cd65c
commit 1e97c80f6b
136 changed files with 196 additions and 196 deletions
@@ -0,0 +1,196 @@
+import { useReducer, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { clientPrefixesPutMutation } from "@/lib/queries";
+import type { ClientPrefix, Group } from "@/lib/types";
+import { defaultGroupId } from "@/lib/defaultGroup";
+import { firstProblem, initPrefixEditor, isDirty, prefixEditorReducer, toInputs } from "./prefixEditor";
+import InlineError from "@/lib/InlineError";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+interface Props {
+	prefixes: ClientPrefix[];
+	groups: Group[];
+}
+
+const styles = stylex.create({
+	section: {
+		marginTop: "2.5rem",
+	},
+	heading: {
+		fontSize: "1.25rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	empty: {
+		marginTop: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	rows: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+		marginTop: "1rem",
+		listStyleType: "none",
+		padding: 0,
+	},
+	row: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	prefixInput: {
+		width: "13rem",
+	},
+	priorityInput: {
+		width: "5rem",
+	},
+	removeButton: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: "transparent",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	validation: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	actions: {
+		display: "flex",
+		gap: "0.5rem",
+		marginTop: "1rem",
+	},
+});
+
+export default function PrefixesEditor({ prefixes, groups }: Props) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(clientPrefixesPutMutation(queryClient));
+	const [state, dispatch] = useReducer(prefixEditorReducer, prefixes, initPrefixEditor);
+	const [validation, setValidation] = useState<string | null>(null);
+	const dirty = isDirty(state);
+	const fallbackGroupId = defaultGroupId(groups);
+	const readOnly = useReadOnlyConfig();
+	const groupOptions = groups.map((group) => ({ value: String(group.id), label: group.name }));
+
+	const save = () => {
+		const problem = firstProblem(state.rows);
+		setValidation(problem);
+		if (problem !== null) return;
+		mutation.mutate(toInputs(state.rows), {
+			onSuccess: (stored) => dispatch({ type: "reset", prefixes: stored }),
+		});
+	};
+
+	return (
+		<section {...stylex.props(styles.section)}>
+			<h2 {...stylex.props(styles.heading)}>Client prefixes</h2>
+			<p {...stylex.props(styles.intro)}>
+				Prefixes assign a group to whole address ranges. The list is saved as a whole; the highest priority
+				match wins.
+			</p>
+			{state.rows.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No prefixes configured.</p>
+			) : (
+				<ul {...stylex.props(styles.rows)}>
+					{state.rows.map((row, index) => (
+						<li key={index} {...stylex.props(styles.row)}>
+							<input
+								type="text"
+								aria-label={`Prefix ${index + 1}`}
+								placeholder="192.168.1.0/24"
+								value={row.prefix}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { prefix: event.target.value } })
+								}
+								{...stylex.props(shared.smallInput, styles.prefixInput, shared.focusRing)}
+							/>
+							<Select
+								aria-label={`Group for prefix ${index + 1}`}
+								variant="inline"
+								value={String(row.group_id)}
+								onChange={(value) =>
+									dispatch({ type: "edit", index, patch: { group_id: Number(value) } })
+								}
+								options={groupOptions}
+							/>
+							<input
+								type="text"
+								inputMode="numeric"
+								aria-label={`Priority for prefix ${index + 1}`}
+								placeholder="100"
+								value={row.priority}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { priority: event.target.value } })
+								}
+								{...stylex.props(shared.smallInput, styles.priorityInput, shared.focusRing)}
+							/>
+							<button
+								type="button"
+								onClick={() => dispatch({ type: "remove", index })}
+								{...stylex.props(styles.removeButton, shared.focusRing)}
+							>
+								Remove
+							</button>
+						</li>
+					))}
+				</ul>
+			)}
+			{validation !== null && (
+				<p role="alert" {...stylex.props(styles.validation)}>
+					{validation}
+				</p>
+			)}
+			<InlineError error={mutation.error} />
+			<div {...stylex.props(styles.actions)}>
+				<button
+					type="button"
+					onClick={() => dispatch({ type: "add", groupId: fallbackGroupId })}
+					{...stylex.props(shared.button, shared.focusRing)}
+				>
+					Add prefix
+				</button>
+				<button
+					type="button"
+					onClick={save}
+					disabled={!dirty || mutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					Save prefixes
+				</button>
+				{dirty && (
+					<button
+						type="button"
+						onClick={() => {
+							setValidation(null);
+							dispatch({ type: "reset", prefixes });
+						}}
+						{...stylex.props(shared.button, shared.focusRing)}
+					>
+						Discard changes
+					</button>
+				)}
+			</div>
+		</section>
+	);
+}