milestone 20: declarative configuration for iac

web/src/features/clients/ClientEditDialog.tsx

@@ -4,6 +4,7 @@ import { clientUpdateMutation } from "@/lib/queries";
 import type { Client, Group } from "@/lib/types";
 import InlineError from "@/lib/InlineError";
 import { buttonClass, primaryButtonClass, smallInputClass } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 interface Props {
 	client: Client;
@@ -18,6 +19,7 @@ export default function ClientEditDialog({ client, groups, onClose }: Props) {
 	const mutation = useMutation(clientUpdateMutation(queryClient));
 	const [name, setName] = useState(client.name);
 	const [groupId, setGroupId] = useState(client.group_id);
+	const readOnly = useReadOnlyConfig();
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
@@ -67,7 +69,12 @@ export default function ClientEditDialog({ client, groups, onClose }: Props) {
 						<button type="button" onClick={onClose} className={buttonClass}>
 							Cancel
 						</button>
-						<button type="submit" disabled={mutation.isPending} className={primaryButtonClass}>
+						<button
+							type="submit"
+							disabled={mutation.isPending || readOnly}
+							title={readOnly ? READ_ONLY_HINT : undefined}
+							className={primaryButtonClass}
+						>
 							Save
 						</button>
 					</div>