mirror of
https://github.com/tale/headplane.git
synced 2026-08-31 01:09:25 +00:00
feat: replace button and toast provider with base-ui
This commit is contained in:
@@ -122,10 +122,10 @@ export default function Page({ loaderData: { access, writable, policy } }: Route
|
||||
</Tabs>
|
||||
<Button
|
||||
className="mr-2"
|
||||
isDisabled={
|
||||
disabled={
|
||||
disabled || fetcher.state !== "idle" || codePolicy.length === 0 || codePolicy === policy
|
||||
}
|
||||
onPress={() => {
|
||||
onClick={() => {
|
||||
const formData = new FormData();
|
||||
formData.append("policy", codePolicy);
|
||||
fetcher.submit(formData, { method: "PATCH" });
|
||||
@@ -135,8 +135,8 @@ export default function Page({ loaderData: { access, writable, policy } }: Route
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
isDisabled={disabled || fetcher.state !== "idle" || codePolicy === policy}
|
||||
onPress={() => {
|
||||
disabled={disabled || fetcher.state !== "idle" || codePolicy === policy}
|
||||
onClick={() => {
|
||||
// Reset the editor to the original policy
|
||||
setCodePolicy(policy);
|
||||
}}
|
||||
|
||||
@@ -140,11 +140,7 @@ export default function Page({ loaderData, actionData }: Route.ComponentProps) {
|
||||
</Form>
|
||||
{isOidcConnectorEnabled ? (
|
||||
<Link to="/oidc/start">
|
||||
<Button
|
||||
className="mt-2 w-full"
|
||||
isDisabled={oidcErrorCodes.length > 0}
|
||||
variant="light"
|
||||
>
|
||||
<Button className="mt-2 w-full" disabled={oidcErrorCodes.length > 0} variant="light">
|
||||
Single Sign-On
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@@ -170,7 +170,7 @@ function Domain({ domain, id, isDragging, isDisabled }: DomainProps) {
|
||||
<input name="domain" type="hidden" value={domain} />
|
||||
<Button
|
||||
className={cn("px-2 py-1 rounded-md", "text-red-500 dark:text-red-400")}
|
||||
isDisabled={isDisabled}
|
||||
disabled={isDisabled}
|
||||
type="submit"
|
||||
>
|
||||
Remove
|
||||
|
||||
@@ -114,7 +114,7 @@ function NameserverList({ isGlobal, isDisabled, nameservers, overrideLocalDns, n
|
||||
<input name="split_name" type="hidden" value={isGlobal ? "global" : name} />
|
||||
<Button
|
||||
className={cn("px-2 py-1 rounded-md", "text-red-500 dark:text-red-400")}
|
||||
isDisabled={isDisabled}
|
||||
disabled={isDisabled}
|
||||
type="submit"
|
||||
>
|
||||
Remove
|
||||
|
||||
@@ -55,7 +55,7 @@ export default function ManageRecords({ records, isDisabled }: Props) {
|
||||
<input name="record_type" type="hidden" value={record.type} />
|
||||
<Button
|
||||
className={cn("px-2 py-1 rounded-md", "text-red-500 dark:text-red-400")}
|
||||
isDisabled={isDisabled}
|
||||
disabled={isDisabled}
|
||||
type="submit"
|
||||
>
|
||||
Remove
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function RenameTailnet({ name, isDisabled }: Props) {
|
||||
value={name}
|
||||
/>
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>Rename Tailnet</Button>
|
||||
<Button disabled={isDisabled}>Rename Tailnet</Button>
|
||||
<DialogPanel isDisabled={isDisabled}>
|
||||
<Title>Rename Tailnet</Title>
|
||||
<Text className="mb-8">
|
||||
|
||||
@@ -11,7 +11,7 @@ interface Props {
|
||||
export default function Modal({ isEnabled, isDisabled }: Props) {
|
||||
return (
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>{isEnabled ? "Disable" : "Enable"} Magic DNS</Button>
|
||||
<Button disabled={isDisabled}>{isEnabled ? "Disable" : "Enable"} Magic DNS</Button>
|
||||
<DialogPanel isDisabled={isDisabled}>
|
||||
<Title>{isEnabled ? "Disable" : "Enable"} Magic DNS</Title>
|
||||
<Text>
|
||||
|
||||
+1
-1
@@ -164,7 +164,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
||||
<Button
|
||||
className="h-8 p-1 px-2"
|
||||
variant="ghost"
|
||||
onPress={async () => {
|
||||
onClick={async () => {
|
||||
await navigator.clipboard.writeText(
|
||||
"curl -fsSL https://tailscale.com/install.sh | sh",
|
||||
);
|
||||
|
||||
@@ -102,7 +102,7 @@ export default function MachineMenu({
|
||||
isFullButton ? (
|
||||
<Button
|
||||
className="flex items-center gap-x-2"
|
||||
onPress={() => {
|
||||
onClick={() => {
|
||||
// We need to use JS to open the SSH URL
|
||||
// in a new WINDOW since href can only
|
||||
// do a new TAB.
|
||||
@@ -125,7 +125,7 @@ export default function MachineMenu({
|
||||
"group-hover:pointer-events-auto",
|
||||
)}
|
||||
variant="ghost"
|
||||
onPress={() => {
|
||||
onClick={() => {
|
||||
// We need to use JS to open the SSH URL
|
||||
// in a new WINDOW since href can only
|
||||
// do a new TAB.
|
||||
|
||||
@@ -100,7 +100,7 @@ export default function Tags({ machine, isOpen, setIsOpen, existingTags }: TagsP
|
||||
{item}
|
||||
<Button
|
||||
className="rounded-md p-0.5"
|
||||
onPress={() => {
|
||||
onClick={() => {
|
||||
setTags(tags.filter((tag) => tag !== item));
|
||||
}}
|
||||
>
|
||||
@@ -127,8 +127,8 @@ export default function Tags({ machine, isOpen, setIsOpen, existingTags }: TagsP
|
||||
</Select>
|
||||
<Button
|
||||
className={cn("rounded-md p-1", tagIsInvalid && "opacity-50 cursor-not-allowed")}
|
||||
isDisabled={tagIsInvalid}
|
||||
onPress={() => {
|
||||
disabled={tagIsInvalid}
|
||||
onClick={() => {
|
||||
setTags([...tags, tag]);
|
||||
setTag("tag:");
|
||||
}}
|
||||
|
||||
@@ -142,7 +142,7 @@ export default function Page({
|
||||
Learn More
|
||||
</Link>
|
||||
</p>
|
||||
<Button onPress={() => setShowRouting(true)}>Review</Button>
|
||||
<Button onClick={() => setShowRouting(true)}>Review</Button>
|
||||
</div>
|
||||
<Card
|
||||
className={cn(
|
||||
@@ -174,7 +174,7 @@ export default function Page({
|
||||
</div>
|
||||
<Button
|
||||
className="mt-1.5 px-1.5 py-0.5"
|
||||
onPress={() => setShowRouting(true)}
|
||||
onClick={() => setShowRouting(true)}
|
||||
variant="ghost"
|
||||
>
|
||||
Edit
|
||||
@@ -204,7 +204,7 @@ export default function Page({
|
||||
</div>
|
||||
<Button
|
||||
className="mt-1.5 px-1.5 py-0.5"
|
||||
onPress={() => setShowRouting(true)}
|
||||
onClick={() => setShowRouting(true)}
|
||||
variant="ghost"
|
||||
>
|
||||
Edit
|
||||
@@ -237,7 +237,7 @@ export default function Page({
|
||||
</div>
|
||||
<Button
|
||||
className="mt-1.5 px-1.5 py-0.5"
|
||||
onPress={() => setShowRouting(true)}
|
||||
onClick={() => setShowRouting(true)}
|
||||
variant="ghost"
|
||||
>
|
||||
Edit
|
||||
|
||||
@@ -89,7 +89,7 @@ export default function AddAuthKey({
|
||||
setIsOpen(open);
|
||||
}}
|
||||
>
|
||||
<Button className="my-4" onPress={() => setIsOpen(true)}>
|
||||
<Button className="my-4" onClick={() => setIsOpen(true)}>
|
||||
Create pre-auth key
|
||||
</Button>
|
||||
{createdKey ? (
|
||||
@@ -100,7 +100,7 @@ export default function AddAuthKey({
|
||||
<code className="min-w-0 flex-1 truncate font-mono text-sm">{createdKey}</code>
|
||||
<Button
|
||||
className="shrink-0"
|
||||
onPress={async () => {
|
||||
onClick={async () => {
|
||||
await navigator.clipboard.writeText(createdKey);
|
||||
toast("Copied key to clipboard");
|
||||
}}
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function AddDomain({ domains, isDisabled }: AddDomainProps) {
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>Add domain</Button>
|
||||
<Button disabled={isDisabled}>Add domain</Button>
|
||||
<DialogPanel>
|
||||
<Title>Add domain</Title>
|
||||
<Text className="mb-4">
|
||||
|
||||
@@ -27,7 +27,7 @@ export default function AddGroup({ groups, isDisabled }: AddGroupProps) {
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>Add group</Button>
|
||||
<Button disabled={isDisabled}>Add group</Button>
|
||||
<DialogPanel>
|
||||
<Title>Add group</Title>
|
||||
<Text className="mb-4">
|
||||
|
||||
@@ -27,7 +27,7 @@ export default function AddUser({ users, isDisabled }: AddUserProps) {
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>Add user</Button>
|
||||
<Button disabled={isDisabled}>Add user</Button>
|
||||
<DialogPanel>
|
||||
<Title>Add user</Title>
|
||||
<Text className="mb-4">
|
||||
|
||||
@@ -37,7 +37,7 @@ export default function RestrictionTable({ children, type, values, isDisabled }:
|
||||
<input name={type} type="hidden" value={value} />
|
||||
<Button
|
||||
className={cn("px-2 py-1 rounded-md", "text-red-500 dark:text-red-400")}
|
||||
isDisabled={isDisabled}
|
||||
disabled={isDisabled}
|
||||
type="submit"
|
||||
>
|
||||
Remove
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function UserPrompt({ hostname }: UserPromptProps) {
|
||||
<Button
|
||||
variant="heavy"
|
||||
className="w-full"
|
||||
onPress={() => {
|
||||
onClick={() => {
|
||||
// We can't use the navigate hook here as we need to do a
|
||||
// full page reload to ensure the SSH connection is established
|
||||
window.location.href = `${__PREFIX__}/ssh?hostname=${hostname}&username=${username}`;
|
||||
|
||||
@@ -12,7 +12,7 @@ interface CreateUserProps {
|
||||
export default function CreateUser({ isOidc, isDisabled }: CreateUserProps) {
|
||||
return (
|
||||
<Dialog>
|
||||
<Button isDisabled={isDisabled}>Add user</Button>
|
||||
<Button disabled={isDisabled}>Add user</Button>
|
||||
<DialogPanel>
|
||||
<Title>Create a Headscale user</Title>
|
||||
<Text className="mb-6">
|
||||
|
||||
Reference in New Issue
Block a user