milestone 20: declarative configuration for iac

web/src/features/rules/RulesPage.tsx

@@ -6,6 +6,7 @@ import { groupsQuery, ruleCreateMutation, ruleDeleteMutation, rulesQuery } from
 import type { Rule, RuleAction, RuleKind } from "@/lib/types";
 import { defaultGroupId } from "@/lib/defaultGroup";
 import { dangerLinkButtonClass, inputClass, primaryButtonClass, tableWrapClass, tdClass, thClass } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 export default function RulesPage() {
 	const queryClient = useQueryClient();
@@ -19,6 +20,7 @@ export default function RulesPage() {
 	const [kind, setKind] = useState<RuleKind>("exact");
 	const [action, setAction] = useState<RuleAction>("block");
 	const [groupId, setGroupId] = useState(() => defaultGroupId(groups));
+	const readOnly = useReadOnlyConfig();
 
 	function onSubmit(event: FormEvent<HTMLFormElement>) {
 		event.preventDefault();
@@ -77,7 +79,8 @@ export default function RulesPage() {
 										<button
 											type="button"
 											onClick={() => deleteRule(rule)}
-											disabled={remove.isPending}
+											disabled={remove.isPending || readOnly}
+											title={readOnly ? READ_ONLY_HINT : undefined}
 											className={dangerLinkButtonClass}
 										>
 											Delete
@@ -154,7 +157,12 @@ export default function RulesPage() {
 						</select>
 					</div>
 				</div>
-				<button type="submit" disabled={create.isPending} className={primaryButtonClass}>
+				<button
+					type="submit"
+					disabled={create.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					className={primaryButtonClass}
+				>
 					{create.isPending ? "Creating…" : "Create rule"}
 				</button>
 				<InlineError error={create.error} />