From a6582ef835d702e157ae7e7b50405551de77b43b Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Mon, 20 May 2024 14:05:27 -0400
Subject: [PATCH] fix: button responders on acl page never worked

---
 app/routes/_data.acls._index/editor.tsx | 113 +++++++++++++-----------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/app/routes/_data.acls._index/editor.tsx b/app/routes/_data.acls._index/editor.tsx
index b93f18a..f1e5451 100644
--- a/app/routes/_data.acls._index/editor.tsx
+++ b/app/routes/_data.acls._index/editor.tsx
@@ -13,16 +13,16 @@ import { toast } from '~/components/Toaster'
 
 import Fallback from './fallback'
 
-type EditorProperties = {
-	readonly acl: string;
-	readonly setAcl: (acl: string) => void;
-	readonly mode: 'edit' | 'diff';
+interface EditorProperties {
+	readonly acl: string
+	readonly setAcl: (acl: string) => void
+	readonly mode: 'edit' | 'diff'
 
 	readonly data: {
-		hasAclWrite: boolean;
-		currentAcl: string;
-		aclType: string;
-	};
+		hasAclWrite: boolean
+		currentAcl: 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'>
-					{loading ? (
-						<Fallback acl={acl} where='client'/>
-					) : (
-						mode === 'edit' ? (
-							<CodeMirror
-								value={acl}
-								theme={light ? githubLight : githubDark}
-								extensions={[aclType]}
-								readOnly={!data.hasAclWrite}
-								onChange={value => {
-									setAcl(value)
-								}}
-							/>
-						) : (
-							<CodeMirrorMerge
-								theme={light ? githubLight : githubDark}
-								orientation='a-b'
-							>
-								<CodeMirrorMerge.Original
-									readOnly
-									value={data.currentAcl}
-									extensions={[aclType]}
-								/>
-								<CodeMirrorMerge.Modified
-									readOnly
-									value={acl}
-									extensions={[aclType]}
-								/>
-							</CodeMirrorMerge>
-						)
-					)}
+				<div className="overflow-y-scroll h-editor text-sm">
+					{loading
+						? (
+							<Fallback acl={acl} where="client" />
+							)
+						: (
+								mode === 'edit'
+									? (
+										<CodeMirror
+											value={acl}
+											theme={light ? githubLight : githubDark}
+											extensions={[aclType]}
+											readOnly={!data.hasAclWrite}
+											onChange={(value) => {
+												setAcl(value)
+											}}
+										/>
+										)
+									: (
+										<CodeMirrorMerge
+											theme={light ? githubLight : githubDark}
+											orientation="a-b"
+										>
+											<CodeMirrorMerge.Original
+												readOnly
+												value={data.currentAcl}
+												extensions={[aclType]}
+											/>
+											<CodeMirrorMerge.Modified
+												readOnly
+												value={acl}
+												extensions={[aclType]}
+											/>
+										</CodeMirrorMerge>
+										)
+							)}
 				</div>
 			</div>
 
 			<Button
-				variant='heavy'
-				className='mr-2'
+				variant="heavy"
+				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 : (
-					<Spinner className='w-3 h-3'/>
-				)}
+				{fetcher.state === 'idle'
+					? undefined
+					: (
+						<Spinner className="w-3 h-3" />
+						)}
 				Save
 			</Button>
-			<Button onPress={() => {
-				setAcl(data.currentAcl)
-			}}
+			<Button
+				isDisabled={fetcher.state === 'loading' || data.currentAcl === acl}
+				onPress={() => {
+					setAcl(data.currentAcl)
+				}}
 			>
 				Discard Changes
 			</Button>