fix: button responders on acl page never worked

app/routes/_data.acls._index/editor.tsx

@@ -13,16 +13,16 @@ import { toast } from '~/components/Toaster'
 
 import Fallback from './fallback'
 
-type EditorProperties = {
+interface EditorProperties {
-	readonly acl: string;
+	readonly acl: string
-	readonly setAcl: (acl: string) => void;
+	readonly setAcl: (acl: string) => void
-	readonly mode: 'edit' | 'diff';
+	readonly mode: 'edit' | 'diff'
 
 	readonly data: {
-		hasAclWrite: boolean;
+		hasAclWrite: boolean
-		currentAcl: string;
+		currentAcl: string
-		aclType: string;
+		aclType: string
-	};
+	}
 }
 
 export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
@@ -36,7 +36,7 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 		const theme = window.matchMedia('(prefers-color-scheme: light)')
 		setLight(theme.matches)
 
-		theme.addEventListener('change', theme => {
+		theme.addEventListener('change', (theme) => {
 			setLight(theme.matches)
 		})
 
@@ -48,66 +48,75 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 		<>
 			<div className={clsx(
 				'border border-gray-200 dark:border-gray-700',
-				'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden'
+				'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
 			)}
 			>
-				<div className='overflow-y-scroll h-editor text-sm'>
+				<div className="overflow-y-scroll h-editor text-sm">
-					{loading ? (
+					{loading
-						<Fallback acl={acl} where='client'/>
+						? (
-					) : (
+							<Fallback acl={acl} where="client" />
-						mode === 'edit' ? (
+							)
-							<CodeMirror
+						: (
-								value={acl}
+								mode === 'edit'
-								theme={light ? githubLight : githubDark}
+									? (
-								extensions={[aclType]}
+										<CodeMirror
-								readOnly={!data.hasAclWrite}
+											value={acl}
-								onChange={value => {
+											theme={light ? githubLight : githubDark}
-									setAcl(value)
+											extensions={[aclType]}
-								}}
+											readOnly={!data.hasAclWrite}
-							/>
+											onChange={(value) => {
-						) : (
+												setAcl(value)
-							<CodeMirrorMerge
+											}}
-								theme={light ? githubLight : githubDark}
+										/>
-								orientation='a-b'
+										)
-							>
+									: (
-								<CodeMirrorMerge.Original
+										<CodeMirrorMerge
-									readOnly
+											theme={light ? githubLight : githubDark}
-									value={data.currentAcl}
+											orientation="a-b"
-									extensions={[aclType]}
+										>
-								/>
+											<CodeMirrorMerge.Original
-								<CodeMirrorMerge.Modified
+												readOnly
-									readOnly
+												value={data.currentAcl}
-									value={acl}
+												extensions={[aclType]}
-									extensions={[aclType]}
+											/>
-								/>
+											<CodeMirrorMerge.Modified
-							</CodeMirrorMerge>
+												readOnly
-						)
+												value={acl}
-					)}
+												extensions={[aclType]}
+											/>
+										</CodeMirrorMerge>
+										)
+							)}
 				</div>
 			</div>
 
 			<Button
-				variant='heavy'
+				variant="heavy"
-				className='mr-2'
+				className="mr-2"
+				isDisabled={fetcher.state === 'loading' || !data.hasAclWrite || data.currentAcl === acl}
 				onPress={() => {
 					fetcher.submit({
-						acl
+						acl,
 					}, {
 						method: 'PATCH',
-						encType: 'application/json'
+						encType: 'application/json',
 					})
 
 					toast('Updated tailnet ACL policy')
 				}}
 			>
-				{fetcher.state === 'idle' ? undefined : (
+				{fetcher.state === 'idle'
-					<Spinner className='w-3 h-3'/>
+					? undefined
-				)}
+					: (
+						<Spinner className="w-3 h-3" />
+						)}
 				Save
 			</Button>
-			<Button onPress={() => {
+			<Button
-				setAcl(data.currentAcl)
+				isDisabled={fetcher.state === 'loading' || data.currentAcl === acl}
-			}}
+				onPress={() => {
+					setAcl(data.currentAcl)
+				}}
 			>
 				Discard Changes
 			</Button>