milestone 20: declarative configuration for iac

web/src/features/clients/PrefixesEditor.tsx

@@ -6,6 +6,7 @@ import { defaultGroupId } from "@/lib/defaultGroup";
 import { firstProblem, initPrefixEditor, isDirty, prefixEditorReducer, toInputs } from "./prefixEditor";
 import InlineError from "@/lib/InlineError";
 import { buttonClass, focusRing, primaryButtonClass, smallInputClass } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 interface Props {
 	prefixes: ClientPrefix[];
@@ -19,6 +20,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 	const [validation, setValidation] = useState<string | null>(null);
 	const dirty = isDirty(state);
 	const fallbackGroupId = defaultGroupId(groups);
+	const readOnly = useReadOnlyConfig();
 
 	const save = () => {
 		const problem = firstProblem(state.rows);
@@ -105,7 +107,8 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 				<button
 					type="button"
 					onClick={save}
-					disabled={!dirty || mutation.isPending}
+					disabled={!dirty || mutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
 					className={primaryButtonClass}
 				>
 					Save prefixes