feat: replace button and toast provider with base-ui

This commit is contained in:
Aarnav Tale
2026-03-17 14:32:06 -04:00
parent 5aa17e448d
commit 941971b8c7
29 changed files with 213 additions and 165 deletions
+4 -4
View File
@@ -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);
}}
+1 -5
View File
@@ -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>
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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">
+1 -1
View File
@@ -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
View File
@@ -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",
);
+2 -2
View File
@@ -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.
+3 -3
View File
@@ -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:");
}}
+4 -4
View File
@@ -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">
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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}`;
+1 -1
View File
@@ -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">