93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
import { type FetcherWithComponents } from '@remix-run/react'
|
|
import { type Dispatch, type SetStateAction } from 'react'
|
|
|
|
import Dialog from '~/components/Dialog'
|
|
import Switch from '~/components/Switch'
|
|
import { type Machine, type Route } from '~/types'
|
|
import { cn } from '~/utils/cn'
|
|
|
|
type RoutesProperties = {
|
|
readonly machine: Machine;
|
|
readonly routes: Route[];
|
|
readonly fetcher: FetcherWithComponents<unknown>;
|
|
readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
|
|
}
|
|
|
|
// TODO: Support deleting routes
|
|
export default function Routes({ machine, routes, fetcher, state }: RoutesProperties) {
|
|
return (
|
|
<Dialog>
|
|
<Dialog.Panel control={state}>
|
|
{close => (
|
|
<>
|
|
<Dialog.Title>
|
|
Edit route settings of {machine.givenName}
|
|
</Dialog.Title>
|
|
<Dialog.Text>
|
|
Connect to devices you can't install Tailscale on
|
|
by advertising IP ranges as subnet routes.
|
|
</Dialog.Text>
|
|
<div className={cn(
|
|
'rounded-lg overflow-y-auto my-2',
|
|
'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
|
|
'border border-zinc-200 dark:border-zinc-700'
|
|
)}
|
|
>
|
|
{routes.length === 0 ? (
|
|
<div
|
|
className={cn(
|
|
'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
|
|
'items-center justify-center',
|
|
'text-ui-600 dark:text-ui-300'
|
|
)}
|
|
>
|
|
<p>
|
|
No routes are advertised on this machine.
|
|
</p>
|
|
</div>
|
|
) : undefined}
|
|
{routes.map(route => (
|
|
<div
|
|
key={route.node.id}
|
|
className={cn(
|
|
'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
|
|
'items-center justify-between'
|
|
)}
|
|
>
|
|
<p>
|
|
{route.prefix}
|
|
</p>
|
|
<Switch
|
|
defaultSelected={route.enabled}
|
|
label='Enabled'
|
|
onChange={checked => {
|
|
const form = new FormData()
|
|
form.set('id', machine.id)
|
|
form.set('_method', 'routes')
|
|
form.set('route', route.id)
|
|
|
|
form.set('enabled', String(checked))
|
|
fetcher.submit(form, {
|
|
method: 'POST'
|
|
})
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className='mt-6 flex justify-end gap-2 mt-6'>
|
|
<Dialog.Action
|
|
variant='cancel'
|
|
isDisabled={fetcher.state === 'submitting'}
|
|
onPress={close}
|
|
>
|
|
Close
|
|
</Dialog.Action>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Dialog.Panel>
|
|
</Dialog>
|
|
)
|
|
}
|