rsp2k/headplane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: button responders on acl page never worked

Browse Source
This commit is contained in:
Aarnav Tale 2024-05-20 14:05:27 -04:00
parent 3e51e4861d
commit a6582ef835
No known key found for this signature in database
1 changed files with 61 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/routes/_data.acls._index/editor.tsx
View File

@ -13,16 +13,16 @@ import { toast } from '~/components/Toaster'
import Fallback from './fallback' 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: { readonly data: {
hasAclWrite: boolean; hasAclWrite: boolean
currentAcl: string; currentAcl: string
aclType: string; aclType: string
}; }
} }
export default function Editor({ data, acl, setAcl, mode }: EditorProperties) { 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)') const theme = window.matchMedia('(prefers-color-scheme: light)')
setLight(theme.matches) setLight(theme.matches)
theme.addEventListener('change', theme => { theme.addEventListener('change', (theme) => {
setLight(theme.matches) setLight(theme.matches)
}) })
@ -48,27 +48,31 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
<> <>
<div className={clsx( <div className={clsx(
'border border-gray-200 dark:border-gray-700', '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' ? ( )
: (
mode === 'edit'
? (
<CodeMirror <CodeMirror
value={acl} value={acl}
theme={light ? githubLight : githubDark} theme={light ? githubLight : githubDark}
extensions={[aclType]} extensions={[aclType]}
readOnly={!data.hasAclWrite} readOnly={!data.hasAclWrite}
onChange={value => { onChange={(value) => {
setAcl(value) setAcl(value)
}} }}
/> />
) : ( )
: (
<CodeMirrorMerge <CodeMirrorMerge
theme={light ? githubLight : githubDark} theme={light ? githubLight : githubDark}
orientation='a-b' orientation="a-b"
> >
<CodeMirrorMerge.Original <CodeMirrorMerge.Original
readOnly readOnly
@ -87,25 +91,30 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
</div> </div>
<Button <Button
variant='heavy' variant="heavy"
className='mr-2' className="mr-2"
isDisabled={fetcher.state === 'loading' || !data.hasAclWrite || data.currentAcl === acl}
onPress={() => { onPress={() => {
fetcher.submit({ fetcher.submit({
acl acl,
}, { }, {
method: 'PATCH', method: 'PATCH',
encType: 'application/json' encType: 'application/json',
}) })
toast('Updated tailnet ACL policy') 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 Save
</Button> </Button>
<Button onPress={() => { <Button
isDisabled={fetcher.state === 'loading' || data.currentAcl === acl}
onPress={() => {
setAcl(data.currentAcl) setAcl(data.currentAcl)
}} }}
> >