Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: reset form fields in delete dialog on reopen #2546

Merged
merged 6 commits into from
Oct 28, 2024
Merged

fix: reset form fields in delete dialog on reopen #2546

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e983e2
fix: reset form fields in delete dialog on reopen
Vardhaman619 Oct 21, 2024
74b366e
Merge branch 'main' into fix-reset-form-fields-in-delete-dialog
Vardhaman619 Oct 23, 2024
ecca656
fix: remaining dialog form reset
Vardhaman619 Oct 24, 2024
cf40e91
Merge branch 'main' into fix-reset-form-fields-in-delete-dialog
Vardhaman619 Oct 24, 2024
8618c05
fix: minor typo
Vardhaman619 Oct 24, 2024
95df676
[autofix.ci] apply automated fixes
autofix-ci[bot] Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
const [open, setOpen] = useState(false);

const formSchema = z.object({
name: z.string().refine((v) => v === permission.name, "Please confirm the role's name"),
name: z
.string()
.refine((v) => v === permission.name, "Please confirm the role's name"),
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved
});

const form = useForm<z.infer<typeof formSchema>>({
Expand All @@ -68,8 +70,13 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
deletePermission.mutate({ permissionId: permission.id });
}

function handleDialogOpenChange(newState: boolean) {
setOpen(newState);
form.reset();
}

return (
<Dialog open={open} onOpenChange={(o) => setOpen(o)}>
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent className="border-alert p-4 max-w-md mx-auto">
<DialogHeader>
Expand All @@ -79,10 +86,15 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
<form
className="flex flex-col space-y-8"
onSubmit={form.handleSubmit(onSubmit)}
>
<Alert variant="alert">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
<AlertDescription>
This action is not reversible. Please be certain.
</AlertDescription>
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved
</Alert>

<FormField
Expand All @@ -93,8 +105,10 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
<FormLabel className="font-normal text-content-subtle">
{" "}
Enter the permission's name{" "}
<span className="font-medium text-content break-all">{permission.name}</span> to
continue:
<span className="font-medium text-content break-all">
{permission.name}
</span>{" "}
to continue:
</FormLabel>
<FormControl>
<Input {...field} autoComplete="off" className="w-full" />
Expand Down
27 changes: 19 additions & 8 deletions apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,27 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
async function onSubmit(values: z.infer<typeof formSchema>) {
createPermission.mutate(values);
}
function handleDialogOpenChange(newState: boolean) {
setOpen(newState);
form.reset();
}

return (
<Dialog open={open} onOpenChange={setOpen}>
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create a new permission</DialogTitle>
<DialogDescription>Permissions allow your key to do certain actions.</DialogDescription>
<DialogDescription>
Permissions allow your key to do certain actions.
</DialogDescription>
</DialogHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-8"
>
<FormField
control={form.control}
name="name"
Expand All @@ -97,10 +106,10 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
<Input placeholder="domain.create" {...field} />
</FormControl>
<FormDescription>
A unique key to identify your permission. We suggest using <code>.</code> (dot)
separated names, to structure your hierarchy. For example we use{" "}
<code>api.create_key</code> or <code>api.update_api</code> in our own
permissions.
A unique key to identify your permission. We suggest using{" "}
<code>.</code> (dot) separated names, to structure your
hierarchy. For example we use <code>api.create_key</code> or{" "}
<code>api.update_api</code> in our own permissions.
</FormDescription>
<FormMessage />
</FormItem>
Expand All @@ -119,7 +128,9 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
</FormLabel>
<FormControl>
<Textarea
rows={form.getValues().description?.split("\n").length ?? 3}
rows={
form.getValues().description?.split("\n").length ?? 3
}
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved
placeholder="Create a new domain in this account."
{...field}
/>
Expand Down
29 changes: 22 additions & 7 deletions apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
const [open, setOpen] = useState(false);

const formSchema = z.object({
name: z.string().refine((v) => v === role.name, "Please confirm the role's name"),
name: z
.string()
.refine((v) => v === role.name, "Please confirm the role's name"),
});

const form = useForm<z.infer<typeof formSchema>>({
Expand All @@ -69,22 +71,32 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
deleteRole.mutate({ roleId: role.id });
}

function handleDialogOpenChange(newState: boolean) {
setOpen(newState);
form.reset();
}

return (
<Dialog open={open} onOpenChange={(o) => setOpen(o)}>
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent className="border-alert">
<DialogHeader>
<DialogTitle>Delete Role</DialogTitle>
<DialogDescription>
This role will be deleted, keys with this role will be disconnected from all permissions
granted by this role.
This role will be deleted, keys with this role will be disconnected
from all permissions granted by this role.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
<form
className="flex flex-col space-y-8"
onSubmit={form.handleSubmit(onSubmit)}
>
<Alert variant="alert">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
<AlertDescription>
This action is not reversible. Please be certain.
</AlertDescription>
</Alert>

<FormField
Expand All @@ -95,7 +107,10 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
<FormLabel className="font-normal text-content-subtle">
{" "}
Enter the role's key{" "}
<span className="font-medium text-content">{role.name}</span> to continue:
<span className="font-medium text-content">
{role.name}
</span>{" "}
to continue:
</FormLabel>
<FormControl>
<Input {...field} autoComplete="off" />
Expand Down
36 changes: 27 additions & 9 deletions apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const formSchema = z.object({
z.object({
label: z.string(),
value: z.string(),
}),
})
)
.optional(),
});
Expand Down Expand Up @@ -92,18 +92,27 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
permissionIds: values.permissionOptions?.map((o) => o.value),
});
}
function handleDialogOpenChange(newState: boolean) {
setOpen(newState);
form.reset();
}

return (
<Dialog open={open} onOpenChange={setOpen}>
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create a new role</DialogTitle>
<DialogDescription>Roles group permissions together.</DialogDescription>
<DialogDescription>
Roles group permissions together.
</DialogDescription>
</DialogHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-8"
>
<FormField
control={form.control}
name="name"
Expand All @@ -114,8 +123,8 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
<Input placeholder="domain.manager" {...field} />
</FormControl>
<FormDescription>
A unique name for your role. You will use this when managing roles through the
API. These are not customer facing.
A unique name for your role. You will use this when managing
roles through the API. These are not customer facing.
</FormDescription>
<FormMessage />
</FormItem>
Expand All @@ -134,7 +143,9 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
</FormLabel>
<FormControl>
<Textarea
rows={form.getValues().description?.split("\n").length ?? 3}
rows={
form.getValues().description?.split("\n").length ?? 3
}
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved
placeholder="Manage domains and DNS records "
{...field}
/>
Expand Down Expand Up @@ -164,7 +175,10 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
selected={field.value ?? []}
setSelected={(cb) => {
if (typeof cb === "function") {
return form.setValue("permissionOptions", cb(field.value ?? []));
return form.setValue(
"permissionOptions",
cb(field.value ?? [])
);
}
}}
/>
Expand All @@ -175,7 +189,11 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
) : null}
<DialogFooter>
<Button type="submit">
{createRole.isLoading ? <Loading className="w-4 h-4" /> : "Create"}
{createRole.isLoading ? (
<Loading className="w-4 h-4" />
) : (
"Create"
)}
</Button>
</DialogFooter>
</form>
Expand Down
53 changes: 38 additions & 15 deletions apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { Button } from "@/components/ui/button";
import type React from "react";
import { useState } from "react";

import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toaster";

Expand Down Expand Up @@ -46,8 +52,12 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
const [open, setOpen] = useState(false);

const formSchema = z.object({
name: z.string().refine((v) => v === namespace.name, "Please confirm the namespace name"),
intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
name: z
.string()
.refine((v) => v === namespace.name, "Please confirm the namespace name"),
intent: z
.string()
.refine((v) => v === intent, "Please confirm your intent"),
});

const form = useForm<z.infer<typeof formSchema>>({
Expand All @@ -58,7 +68,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
const deleteNamespace = trpc.ratelimit.namespace.delete.useMutation({
async onSuccess() {
toast.message("Namespace Deleted", {
description: "Your namespace and all its overridden identifiers have been deleted.",
description:
"Your namespace and all its overridden identifiers have been deleted.",
});

await revalidate();
Expand All @@ -70,20 +81,26 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
},
});

const isValid = form.watch("intent") === intent && form.watch("name") === namespace.name;
const isValid =
form.watch("intent") === intent && form.watch("name") === namespace.name;
Vardhaman619 marked this conversation as resolved.
Show resolved Hide resolved

async function onSubmit(_values: z.infer<typeof formSchema>) {
deleteNamespace.mutate({ namespaceId: namespace.id });
}

function handleDialogOpenChange(newState: boolean) {
setOpen(newState);
form.reset();
}

return (
<>
<Card className="relative border-2 border-alert">
<CardHeader>
<CardTitle>Delete</CardTitle>
<CardDescription>
This namespace will be deleted, along with all of its identifiers and data. This action
cannot be undone.
This namespace will be deleted, along with all of its identifiers
and data. This action cannot be undone.
</CardDescription>
</CardHeader>

Expand All @@ -93,17 +110,20 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
</Button>
</CardFooter>
</Card>
<Dialog open={open} onOpenChange={(o) => setOpen(o)}>
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogContent className="border-alert">
<DialogHeader>
<DialogTitle>Delete namespace</DialogTitle>
<DialogDescription>
This namespace will be deleted, along with all of its identifiers and data. This
action cannot be undone.
This namespace will be deleted, along with all of its identifiers
and data. This action cannot be undone.
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
<form
className="flex flex-col space-y-8"
onSubmit={form.handleSubmit(onSubmit)}
>
<Alert variant="alert">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>
Expand All @@ -118,9 +138,11 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
<FormItem>
<FormLabel className="font-normal text-content-subtle">
{" "}
Enter the namespcae name{" "}
<span className="font-medium text-content">{namespace.name}</span> to
continue:
Enter the namespace name{" "}
<span className="font-medium text-content">
{namespace.name}
</span>{" "}
to continue:
</FormLabel>
<FormControl>
<Input {...field} autoComplete="off" />
Expand All @@ -136,7 +158,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
render={({ field }) => (
<FormItem>
<FormLabel className="font-normal text-content-subtle">
To verify, type <span className="font-medium text-content">{intent}</span>{" "}
To verify, type{" "}
<span className="font-medium text-content">{intent}</span>{" "}
below:
</FormLabel>
<FormControl>
Expand Down
Loading
Loading