milestone 20: declarative configuration for iac

web/src/features/upstreams/UpstreamsPage.tsx

@@ -6,6 +6,7 @@ import type { Upstream, UpstreamInput } from "@/lib/types";
 import { raiseRestartBanner } from "../settings/restartBanner";
 import UpstreamForm from "./UpstreamForm";
 import { dangerLinkButtonClass, focusRing, linkButtonClass, tableWrapClass, tdClass, thClass } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 export default function UpstreamsPage() {
 	const queryClient = useQueryClient();
@@ -16,6 +17,7 @@ export default function UpstreamsPage() {
 	const save = useMutation(upstreamUpdateMutation(queryClient));
 	const toggle = useMutation(upstreamUpdateMutation(queryClient));
 	const remove = useMutation(upstreamDeleteMutation(queryClient));
+	const readOnly = useReadOnlyConfig();
 
 	async function submitForm(input: UpstreamInput) {
 		if (editing === null) {
@@ -84,7 +86,8 @@ export default function UpstreamsPage() {
 											type="checkbox"
 											aria-label={`${u.url} enabled`}
 											checked={u.enabled}
-											disabled={toggle.isPending}
+											disabled={toggle.isPending || readOnly}
+											title={readOnly ? READ_ONLY_HINT : undefined}
 											onChange={() => toggleEnabled(u)}
 											className={focusRing}
 										/>
@@ -95,14 +98,17 @@ export default function UpstreamsPage() {
 											<button
 												type="button"
 												onClick={() => setEditing(u)}
-												className={linkButtonClass}
+												disabled={readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												className={`${linkButtonClass} disabled:opacity-50`}
 											>
 												Edit
 											</button>
 											<button
 												type="button"
 												onClick={() => deleteUpstream(u)}
-												disabled={remove.isPending}
+												disabled={remove.isPending || readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
 												className={dangerLinkButtonClass}
 											>
 												Delete
@@ -121,6 +127,7 @@ export default function UpstreamsPage() {
 				key={editing?.id ?? "add"}
 				initial={editing ?? undefined}
 				busy={editing === null ? create.isPending : save.isPending}
+				readOnly={readOnly}
 				error={formError}
 				onSubmit={submitForm}
 				onCancel={editing === null ? undefined : () => setEditing(null)}