milestone 20: declarative configuration for iac

web/src/features/groups/GroupSourcesEditor.tsx

@@ -5,6 +5,7 @@ import type { Blocklist } from "@/lib/types";
 import { sameSet, toggleSource } from "./sourceSet";
 import InlineError from "@/lib/InlineError";
 import { buttonClass, focusRing, primaryButtonClass } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 interface Props {
 	groupId: number;
@@ -16,6 +17,7 @@ export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 	const sources = useQuery(groupSourcesQuery(groupId));
 	const mutation = useMutation(groupSourcesPutMutation(queryClient));
 	const [selected, setSelected] = useState<number[] | null>(null);
+	const readOnly = useReadOnlyConfig();
 
 	if (sources.isPending) {
 		return (
@@ -58,7 +60,8 @@ export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 			<div className="mt-3 flex gap-2">
 				<button
 					type="button"
-					disabled={!dirty || mutation.isPending}
+					disabled={!dirty || mutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
 					onClick={() =>
 						mutation.mutate({ id: groupId, sourceIds: current }, { onSuccess: () => setSelected(null) })
 					}

web/src/features/groups/GroupsPage.tsx

@@ -12,6 +12,7 @@ import GroupSourcesEditor from "./GroupSourcesEditor";
 import InlineError from "@/lib/InlineError";
 import { focusRing, primaryButtonClass, smallButtonClass, smallInputClass } from "@/ui/classes";
 import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";
 
@@ -23,6 +24,7 @@ export default function GroupsPage() {
 	const queryClient = useQueryClient();
 	const createMutation = useMutation(groupCreateMutation(queryClient));
 	const [newName, setNewName] = useState("");
+	const readOnly = useReadOnlyConfig();
 
 	return (
 		<section>
@@ -44,9 +46,15 @@ export default function GroupsPage() {
 					type="text"
 					value={newName}
 					onChange={(event) => setNewName(event.target.value)}
+					disabled={readOnly}
 					className={smallInputClass}
 				/>
-				<button type="submit" disabled={createMutation.isPending} className={primaryButtonClass}>
+				<button
+					type="submit"
+					disabled={createMutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					className={primaryButtonClass}
+				>
 					Create
 				</button>
 			</form>
@@ -69,6 +77,8 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 	const [confirming, setConfirming] = useState(false);
 	const [expanded, setExpanded] = useState(false);
 	const isDefault = group.id === DEFAULT_GROUP_ID;
+	const readOnly = useReadOnlyConfig();
+	const lockNote = isDefault ? DEFAULT_GROUP_NOTE : readOnly ? READ_ONLY_HINT : undefined;
 
 	return (
 		<li className="rounded border border-zinc-200 p-4 dark:border-zinc-700">
@@ -94,7 +104,12 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 							className={smallInputClass}
 							autoFocus
 						/>
-						<button type="submit" disabled={updateMutation.isPending} className={groupButtonClass}>
+						<button
+							type="submit"
+							disabled={updateMutation.isPending || readOnly}
+							title={readOnly ? READ_ONLY_HINT : undefined}
+							className={groupButtonClass}
+						>
 							Save
 						</button>
 						<button
@@ -115,7 +130,8 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 					<input
 						type="checkbox"
 						checked={group.safe_search}
-						disabled={updateMutation.isPending}
+						disabled={updateMutation.isPending || readOnly}
+						title={readOnly ? READ_ONLY_HINT : undefined}
 						className={focusRing}
 						onChange={(event) =>
 							updateMutation.mutate({
@@ -138,8 +154,8 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 					{!renaming && (
 						<button
 							type="button"
-							disabled={isDefault}
-							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+							disabled={isDefault || readOnly}
+							title={lockNote}
 							onClick={() => {
 								setName(group.name);
 								setRenaming(true);
@@ -168,8 +184,8 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 					) : (
 						<button
 							type="button"
-							disabled={isDefault}
-							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+							disabled={isDefault || readOnly}
+							title={lockNote}
 							onClick={() => setConfirming(true)}
 							className={`${groupButtonClass} text-red-700 dark:text-red-400`}
 						>