From 13c686c2284453cb754d94e1a892211651a5e928 Mon Sep 17 00:00:00 2001 From: Lorenzo Migliorero Date: Wed, 24 Jul 2024 18:47:52 +0200 Subject: [PATCH 1/6] feat: condition certificate --- .../application/domains/add-domain.tsx | 131 +++++---- .../application/domains/show-domains.tsx | 21 +- .../application/domains/update-domain.tsx | 254 ------------------ server/db/schema/domain.ts | 4 +- 4 files changed, 98 insertions(+), 312 deletions(-) delete mode 100644 components/dashboard/application/domains/update-domain.tsx diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index 17adf275..59cc05c3 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -29,38 +29,52 @@ import { import { Switch } from "@/components/ui/switch"; import { api } from "@/utils/api"; import { zodResolver } from "@hookform/resolvers/zod"; -import { PlusIcon } from "lucide-react"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; import { z } from "zod"; +const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -// const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -// .regex(hostnameRegex -const addDomain = z.object({ - host: z.string().min(1, "Hostname is required"), +const domain = z.object({ + host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), path: z.string().min(1), - port: z.number(), + port: z + .number() + .min(1, { message: "Port must be at least 1" }) + .max(65535, { message: "Port must be 65535 or below" }), https: z.boolean(), certificateType: z.enum(["letsencrypt", "none"]), }); -type AddDomain = z.infer; +type Domain = z.infer; interface Props { applicationId: string; - children?: React.ReactNode; + domainId?: string; + children: React.ReactNode; } export const AddDomain = ({ applicationId, - children = , + domainId = "", + children, }: Props) => { + const [isOpen, setIsOpen] = useState(false); const utils = api.useUtils(); + const { data } = api.domain.one.useQuery( + { + domainId, + }, + { + enabled: !!domainId, + }, + ); - const { mutateAsync, isError, error } = api.domain.create.useMutation(); + const { mutateAsync, isError, error } = domainId + ? api.domain.update.useMutation() + : api.domain.create.useMutation(); - const form = useForm({ + const form = useForm({ defaultValues: { host: "", https: false, @@ -68,15 +82,29 @@ export const AddDomain = ({ port: 3000, certificateType: "none", }, - resolver: zodResolver(addDomain), + resolver: zodResolver(domain), }); useEffect(() => { - form.reset(); - }, [form, form.reset, form.formState.isSubmitSuccessful]); + if (data) { + form.reset(data); + } + }, [form, form.reset, data]); - const onSubmit = async (data: AddDomain) => { + const dictionary = { + success: domainId ? "Domain Updated" : "Domain Created", + error: domainId + ? "Error to update the domain" + : "Error to create the domain", + submit: domainId ? "Update" : "Create", + dialogDescription: domainId + ? "In this section you can edit a domain" + : "In this section you can add domains", + }; + + const onSubmit = async (data: Domain) => { await mutateAsync({ + domainId, applicationId, host: data.host, https: data.https, @@ -85,27 +113,27 @@ export const AddDomain = ({ certificateType: data.certificateType, }) .then(async () => { - toast.success("Domain Created"); + toast.success(dictionary.success); await utils.domain.byApplicationId.invalidate({ applicationId, }); await utils.application.readTraefikConfig.invalidate({ applicationId }); + setIsOpen(false); }) .catch(() => { - toast.error("Error to create the domain"); + toast.error(dictionary.error); + setIsOpen(false); }); }; return ( - + - + {children} Domain - - In this section you can add custom domains - + {dictionary.dialogDescription} {isError && {error?.message}} @@ -169,33 +197,36 @@ export const AddDomain = ({ ); }} /> - ( - - Certificate - + + + + + + + + None + + Letsencrypt (Default) + + + + + + )} + /> + )} - - None - - Letsencrypt (Default) - - - - - - )} - /> - Create + {dictionary.submit} diff --git a/components/dashboard/application/domains/show-domains.tsx b/components/dashboard/application/domains/show-domains.tsx index 5aed3524..d7724ce7 100644 --- a/components/dashboard/application/domains/show-domains.tsx +++ b/components/dashboard/application/domains/show-domains.tsx @@ -8,13 +8,11 @@ import { } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { api } from "@/utils/api"; -import { ExternalLink, GlobeIcon, RefreshCcw } from "lucide-react"; +import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react"; import Link from "next/link"; -import React from "react"; import { AddDomain } from "./add-domain"; import { DeleteDomain } from "./delete-domain"; import { GenerateDomain } from "./generate-domain"; -import { UpdateDomain } from "./update-domain"; interface Props { applicationId: string; @@ -43,7 +41,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
{data && data?.length > 0 && ( - Add Domain + )} {data && data?.length > 0 && ( @@ -61,7 +61,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
- Add Domain + @@ -90,7 +92,14 @@ export const ShowDomains = ({ applicationId }: Props) => { {item.https ? "HTTPS" : "HTTP"}
- + + +
diff --git a/components/dashboard/application/domains/update-domain.tsx b/components/dashboard/application/domains/update-domain.tsx deleted file mode 100644 index 6614a480..00000000 --- a/components/dashboard/application/domains/update-domain.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import { AlertBlock } from "@/components/shared/alert-block"; -import { Button } from "@/components/ui/button"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; -import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Switch } from "@/components/ui/switch"; -import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { PenBoxIcon } from "lucide-react"; -import { useEffect } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; - -const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; - -const updateDomain = z.object({ - host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), - path: z.string().min(1), - port: z - .number() - .min(1, { message: "Port must be at least 1" }) - .max(65535, { message: "Port must be 65535 or below" }), - https: z.boolean(), - certificateType: z.enum(["letsencrypt", "none"]), -}); - -type UpdateDomain = z.infer; - -interface Props { - domainId: string; -} - -export const UpdateDomain = ({ domainId }: Props) => { - const utils = api.useUtils(); - const { data, refetch } = api.domain.one.useQuery( - { - domainId, - }, - { - enabled: !!domainId, - }, - ); - const { mutateAsync, isError, error } = api.domain.update.useMutation(); - - const form = useForm({ - defaultValues: { - host: "", - https: true, - path: "/", - port: 3000, - certificateType: "none", - }, - resolver: zodResolver(updateDomain), - }); - - useEffect(() => { - if (data) { - form.reset({ - host: data.host || "", - port: data.port || 3000, - path: data.path || "/", - https: data.https, - certificateType: data.certificateType, - }); - } - }, [form, form.reset, data]); - - const onSubmit = async (data: UpdateDomain) => { - await mutateAsync({ - domainId, - host: data.host, - https: data.https, - path: data.path, - port: data.port, - certificateType: data.certificateType, - }) - .then(async (data) => { - toast.success("Domain Updated"); - await refetch(); - await utils.domain.byApplicationId.invalidate({ - applicationId: data?.applicationId, - }); - await utils.application.readTraefikConfig.invalidate({ - applicationId: data?.applicationId, - }); - }) - .catch(() => { - toast.error("Error to update the domain"); - }); - }; - return ( - - - - - - - Domain - - In this section you can add custom domains - - - {isError && {error?.message}} - -
- -
-
- ( - - Host - - - - - - - )} - /> - - { - return ( - - Path - - - - - - ); - }} - /> - - { - return ( - - Container Port - - { - field.onChange(Number.parseInt(e.target.value)); - }} - /> - - - - ); - }} - /> - ( - - Certificate - - - - )} - /> - ( - -
- HTTPS - - Automatically provision SSL Certificate. - -
- - - - - )} - /> -
-
-
- - - - - - - - ); -}; diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts index 3ceca6b5..dad92090 100644 --- a/server/db/schema/domain.ts +++ b/server/db/schema/domain.ts @@ -13,8 +13,8 @@ export const domains = pgTable("domain", { .$defaultFn(() => nanoid()), host: text("host").notNull(), https: boolean("https").notNull().default(false), - port: integer("port").default(80), - path: text("path").default("/"), + port: integer("port").default(80).notNull(), + path: text("path").default("/").notNull(), uniqueConfigKey: serial("uniqueConfigKey"), createdAt: text("createdAt") .notNull() From fa5b75e6fbd4df6147b36391c6136bdde4812a68 Mon Sep 17 00:00:00 2001 From: Lorenzo Migliorero Date: Wed, 24 Jul 2024 19:01:18 +0200 Subject: [PATCH 2/6] fix: type --- __test__/traefik/traefik.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__test__/traefik/traefik.test.ts b/__test__/traefik/traefik.test.ts index f10eefb3..f6af400d 100644 --- a/__test__/traefik/traefik.test.ts +++ b/__test__/traefik/traefik.test.ts @@ -63,8 +63,8 @@ const baseDomain: Domain = { domainId: "", host: "", https: false, - path: null, - port: null, + path: "", + port: 3000, uniqueConfigKey: 1, }; From 115c8641e74e106b2cdbc460d04660c97e95f3a9 Mon Sep 17 00:00:00 2001 From: Lorenzo Migliorero Date: Thu, 25 Jul 2024 08:59:10 +0200 Subject: [PATCH 3/6] fix: nullable type --- __test__/traefik/traefik.test.ts | 4 ++-- components/dashboard/application/domains/add-domain.tsx | 5 +++-- server/db/schema/domain.ts | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/__test__/traefik/traefik.test.ts b/__test__/traefik/traefik.test.ts index f6af400d..f10eefb3 100644 --- a/__test__/traefik/traefik.test.ts +++ b/__test__/traefik/traefik.test.ts @@ -63,8 +63,8 @@ const baseDomain: Domain = { domainId: "", host: "", https: false, - path: "", - port: 3000, + path: null, + port: null, uniqueConfigKey: 1, }; diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index 59cc05c3..b8ccae1c 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -37,11 +37,12 @@ const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; const domain = z.object({ host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), - path: z.string().min(1), + path: z.string().min(1).nullable(), port: z .number() .min(1, { message: "Port must be at least 1" }) - .max(65535, { message: "Port must be 65535 or below" }), + .max(65535, { message: "Port must be 65535 or below" }) + .nullable(), https: z.boolean(), certificateType: z.enum(["letsencrypt", "none"]), }); diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts index dad92090..3ceca6b5 100644 --- a/server/db/schema/domain.ts +++ b/server/db/schema/domain.ts @@ -13,8 +13,8 @@ export const domains = pgTable("domain", { .$defaultFn(() => nanoid()), host: text("host").notNull(), https: boolean("https").notNull().default(false), - port: integer("port").default(80).notNull(), - path: text("path").default("/").notNull(), + port: integer("port").default(80), + path: text("path").default("/"), uniqueConfigKey: serial("uniqueConfigKey"), createdAt: text("createdAt") .notNull() From 4cacc6b3d12e47fdc8a0f28d07a6394cdc2b41e4 Mon Sep 17 00:00:00 2001 From: Lorenzo Migliorero Date: Thu, 25 Jul 2024 09:15:13 +0200 Subject: [PATCH 4/6] fix: type --- .../application/domains/add-domain.tsx | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index b8ccae1c..623779dd 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -37,12 +37,11 @@ const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; const domain = z.object({ host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), - path: z.string().min(1).nullable(), + path: z.string().min(1), port: z .number() .min(1, { message: "Port must be at least 1" }) - .max(65535, { message: "Port must be 65535 or below" }) - .nullable(), + .max(65535, { message: "Port must be 65535 or below" }), https: z.boolean(), certificateType: z.enum(["letsencrypt", "none"]), }); @@ -75,20 +74,26 @@ export const AddDomain = ({ ? api.domain.update.useMutation() : api.domain.create.useMutation(); + const defaultValues: Domain = { + host: "", + https: false, + path: "/", + port: 3000, + certificateType: "none", + }; + const form = useForm({ - defaultValues: { - host: "", - https: false, - path: "/", - port: 3000, - certificateType: "none", - }, + defaultValues, resolver: zodResolver(domain), }); useEffect(() => { if (data) { - form.reset(data); + form.reset({ + ...data, + path: data.path || defaultValues.path, + port: data.port || defaultValues.port, + }); } }, [form, form.reset, data]); @@ -107,11 +112,7 @@ export const AddDomain = ({ await mutateAsync({ domainId, applicationId, - host: data.host, - https: data.https, - path: data.path, - port: data.port, - certificateType: data.certificateType, + ...data, }) .then(async () => { toast.success(dictionary.success); From ee58672d587829db4a7d3973a67e27316aed9d61 Mon Sep 17 00:00:00 2001 From: Lorenzo Migliorero Date: Thu, 25 Jul 2024 11:03:14 +0200 Subject: [PATCH 5/6] refactor: dry validation rules --- .../application/domains/add-domain.tsx | 42 ++++++++---------- server/db/schema/domain.ts | 43 +++++++------------ server/db/validations/index.ts | 25 +++++++++++ 3 files changed, 57 insertions(+), 53 deletions(-) create mode 100644 server/db/validations/index.ts diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index 623779dd..76899a7c 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -28,23 +28,14 @@ import { } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; -import { z } from "zod"; -const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -const domain = z.object({ - host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), - path: z.string().min(1), - port: z - .number() - .min(1, { message: "Port must be at least 1" }) - .max(65535, { message: "Port must be 65535 or below" }), - https: z.boolean(), - certificateType: z.enum(["letsencrypt", "none"]), -}); +import { domain } from "@/server/db/validations"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { flushSync } from "react-dom"; +import type z from "zod"; type Domain = z.infer; @@ -74,16 +65,7 @@ export const AddDomain = ({ ? api.domain.update.useMutation() : api.domain.create.useMutation(); - const defaultValues: Domain = { - host: "", - https: false, - path: "/", - port: 3000, - certificateType: "none", - }; - const form = useForm({ - defaultValues, resolver: zodResolver(domain), }); @@ -91,8 +73,9 @@ export const AddDomain = ({ if (data) { form.reset({ ...data, - path: data.path || defaultValues.path, - port: data.port || defaultValues.port, + /* Convert null to undefined */ + path: data.path || undefined, + port: data.port || undefined, }); } }, [form, form.reset, data]); @@ -120,11 +103,19 @@ export const AddDomain = ({ applicationId, }); await utils.application.readTraefikConfig.invalidate({ applicationId }); + + /* + Reset form if it was a new domain + Flushsync is needed for a bug witht he react-hook-form reset method + https://github.com/orgs/react-hook-form/discussions/7589#discussioncomment-10060621 + */ + if (!domainId) { + flushSync(() => form.reset()); + } setIsOpen(false); }) .catch(() => { toast.error(dictionary.error); - setIsOpen(false); }); }; return ( @@ -239,6 +230,7 @@ export const AddDomain = ({ Automatically provision SSL Certificate. +
({ references: [applications.applicationId], }), })); -const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -const createSchema = createInsertSchema(domains, { - domainId: z.string().min(1), - host: z.string().min(1), - path: z.string().min(1), - port: z.number(), - https: z.boolean(), - applicationId: z.string(), - certificateType: z.enum(["letsencrypt", "none"]), -}); -export const apiCreateDomain = createSchema - .pick({ - host: true, - path: true, - port: true, - https: true, - applicationId: true, - certificateType: true, - }) - .required(); +const createSchema = createInsertSchema(domains, domain._def.schema.shape); + +export const apiCreateDomain = createSchema.pick({ + host: true, + path: true, + port: true, + https: true, + applicationId: true, + certificateType: true, +}); export const apiFindDomain = createSchema .pick({ @@ -59,19 +49,16 @@ export const apiFindDomain = createSchema }) .required(); -export const apiFindDomainByApplication = createSchema - .pick({ - applicationId: true, - }) - .required(); +export const apiFindDomainByApplication = createSchema.pick({ + applicationId: true, +}); export const apiUpdateDomain = createSchema .pick({ - domainId: true, host: true, path: true, port: true, https: true, certificateType: true, }) - .required(); + .merge(createSchema.pick({ domainId: true }).required()); diff --git a/server/db/validations/index.ts b/server/db/validations/index.ts new file mode 100644 index 00000000..fcb6117a --- /dev/null +++ b/server/db/validations/index.ts @@ -0,0 +1,25 @@ +import { z } from "zod"; + +export const domain = z + .object({ + host: z.string().regex(/^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/, { + message: "Invalid hostname", + }), + path: z.string().min(1).optional(), + port: z + .number() + .min(1, { message: "Port must be at least 1" }) + .max(65535, { message: "Port must be 65535 or below" }) + .optional(), + https: z.boolean().optional(), + certificateType: z.enum(["letsencrypt", "none"]).optional(), + }) + .superRefine((input, ctx) => { + if (input.https && !input.certificateType) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + path: ["certificateType"], + message: "Required", + }); + } + }); From fe51dd6b0a98a1bffdcdfa5eab036ff754ccc269 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Fri, 26 Jul 2024 01:04:52 -0600 Subject: [PATCH 6/6] refactor: remove flush sync --- .../application/domains/add-domain.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index 76899a7c..71e44f92 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -34,7 +34,6 @@ import { toast } from "sonner"; import { domain } from "@/server/db/validations"; import { zodResolver } from "@hookform/resolvers/zod"; -import { flushSync } from "react-dom"; import type z from "zod"; type Domain = z.infer; @@ -52,7 +51,7 @@ export const AddDomain = ({ }: Props) => { const [isOpen, setIsOpen] = useState(false); const utils = api.useUtils(); - const { data } = api.domain.one.useQuery( + const { data, refetch } = api.domain.one.useQuery( { domainId, }, @@ -61,7 +60,7 @@ export const AddDomain = ({ }, ); - const { mutateAsync, isError, error } = domainId + const { mutateAsync, isError, error, isLoading } = domainId ? api.domain.update.useMutation() : api.domain.create.useMutation(); @@ -74,11 +73,15 @@ export const AddDomain = ({ form.reset({ ...data, /* Convert null to undefined */ - path: data.path || undefined, - port: data.port || undefined, + path: data?.path || undefined, + port: data?.port || undefined, }); } - }, [form, form.reset, data]); + + if (!domainId) { + form.reset({}); + } + }, [form, form.reset, data, isLoading]); const dictionary = { success: domainId ? "Domain Updated" : "Domain Created", @@ -104,13 +107,8 @@ export const AddDomain = ({ }); await utils.application.readTraefikConfig.invalidate({ applicationId }); - /* - Reset form if it was a new domain - Flushsync is needed for a bug witht he react-hook-form reset method - https://github.com/orgs/react-hook-form/discussions/7589#discussioncomment-10060621 - */ - if (!domainId) { - flushSync(() => form.reset()); + if (domainId) { + refetch(); } setIsOpen(false); })