From 4865f4f969d0eb17b672656752502d540bd0dbae Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Tue, 25 Jun 2024 01:58:49 -0600 Subject: [PATCH] feat(#40): add wildcards domains and traefik.me modals --- .../application/domains/generate-domain.tsx | 122 ++++++++++-------- .../domains/generate-traefikme.tsx | 69 ++++++++++ .../application/domains/generate-wildcard.tsx | 69 ++++++++++ server/api/routers/domain.ts | 6 + server/api/services/domain.ts | 32 +++++ 5 files changed, 242 insertions(+), 56 deletions(-) create mode 100644 components/dashboard/application/domains/generate-traefikme.tsx create mode 100644 components/dashboard/application/domains/generate-wildcard.tsx diff --git a/components/dashboard/application/domains/generate-domain.tsx b/components/dashboard/application/domains/generate-domain.tsx index 483d2ec01..5b2b0e750 100644 --- a/components/dashboard/application/domains/generate-domain.tsx +++ b/components/dashboard/application/domains/generate-domain.tsx @@ -1,69 +1,79 @@ -import React from "react"; -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, -} from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { RefreshCcw } from "lucide-react"; +import { GenerateTraefikMe } from "./generate-traefikme"; +import { GenerateWildCard } from "./generate-wildcard"; +import Link from "next/link"; import { api } from "@/utils/api"; -import { RefreshCcw, TrashIcon } from "lucide-react"; -import { toast } from "sonner"; interface Props { applicationId: string; } + export const GenerateDomain = ({ applicationId }: Props) => { - const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation(); - const utils = api.useUtils(); return ( - - - - - - - - Are you sure to generate a new domain? - - - This will generate a new domain and will be used to access to the - application - - - - Cancel - { - await mutateAsync({ - applicationId, - }) - .then((data) => { - utils.domain.byApplicationId.invalidate({ - applicationId: applicationId, - }); - utils.application.readTraefikConfig.invalidate({ - applicationId: applicationId, - }); - toast.success("Generated Domain succesfully"); - }) - .catch(() => { - toast.error("Error to generate Domain"); - }); - }} - > - Confirm - - - - + + + + Generate Domain + + Generate Domains for your applications + + + +
+ +
+ + +
+
+ + ); }; diff --git a/components/dashboard/application/domains/generate-traefikme.tsx b/components/dashboard/application/domains/generate-traefikme.tsx new file mode 100644 index 000000000..264a626f1 --- /dev/null +++ b/components/dashboard/application/domains/generate-traefikme.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; +import { Button } from "@/components/ui/button"; +import { api } from "@/utils/api"; +import { RefreshCcw } from "lucide-react"; +import { toast } from "sonner"; + +interface Props { + applicationId: string; +} +export const GenerateTraefikMe = ({ applicationId }: Props) => { + const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation(); + const utils = api.useUtils(); + return ( + + + + + + + + Are you sure to generate a new domain? + + + This will generate a new domain and will be used to access to the + application + + + + Cancel + { + await mutateAsync({ + applicationId, + }) + .then((data) => { + utils.domain.byApplicationId.invalidate({ + applicationId: applicationId, + }); + utils.application.readTraefikConfig.invalidate({ + applicationId: applicationId, + }); + toast.success("Generated Domain succesfully"); + }) + .catch(() => { + toast.error("Error to generate Domain"); + }); + }} + > + Confirm + + + + + ); +}; diff --git a/components/dashboard/application/domains/generate-wildcard.tsx b/components/dashboard/application/domains/generate-wildcard.tsx new file mode 100644 index 000000000..11babebdb --- /dev/null +++ b/components/dashboard/application/domains/generate-wildcard.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; +import { Button } from "@/components/ui/button"; +import { api } from "@/utils/api"; +import { SquareAsterisk } from "lucide-react"; +import { toast } from "sonner"; + +interface Props { + applicationId: string; +} +export const GenerateWildCard = ({ applicationId }: Props) => { + const { mutateAsync, isLoading } = api.domain.generateWildcard.useMutation(); + const utils = api.useUtils(); + return ( + + + + + + + + Are you sure to generate a new wildcard domain? + + + This will generate a new domain and will be used to access to the + application + + + + Cancel + { + await mutateAsync({ + applicationId, + }) + .then((data) => { + utils.domain.byApplicationId.invalidate({ + applicationId: applicationId, + }); + utils.application.readTraefikConfig.invalidate({ + applicationId: applicationId, + }); + toast.success("Generated Domain succesfully"); + }) + .catch((e) => { + toast.error(`Error to generate Domain: ${e.message}`); + }); + }} + > + Confirm + + + + + ); +}; diff --git a/server/api/routers/domain.ts b/server/api/routers/domain.ts index 31c9028e8..ec7f13d4f 100644 --- a/server/api/routers/domain.ts +++ b/server/api/routers/domain.ts @@ -13,6 +13,7 @@ import { findDomainById, findDomainsByApplicationId, generateDomain, + generateWildcard, removeDomainById, updateDomainById, } from "../services/domain"; @@ -41,6 +42,11 @@ export const domainRouter = createTRPCRouter({ .mutation(async ({ input }) => { return generateDomain(input); }), + generateWildcard: protectedProcedure + .input(apiFindDomainByApplication) + .mutation(async ({ input }) => { + return generateWildcard(input); + }), update: protectedProcedure .input(apiUpdateDomain) .mutation(async ({ input }) => { diff --git a/server/api/services/domain.ts b/server/api/services/domain.ts index 699a0a65f..d7e4a271c 100644 --- a/server/api/services/domain.ts +++ b/server/api/services/domain.ts @@ -55,6 +55,38 @@ export const generateDomain = async ( return domain; }; + +export const generateWildcard = async ( + input: typeof apiFindDomainByApplication._type, +) => { + const application = await findApplicationById(input.applicationId); + const admin = await findAdmin(); + + if (!admin.host) { + throw new TRPCError({ + code: "BAD_REQUEST", + message: "We need a host to generate a wildcard domain", + }); + } + const domain = await createDomain({ + applicationId: application.applicationId, + host: generateWildcardDomain(application.appName, admin.host || ""), + port: 3000, + certificateType: "none", + https: false, + path: "/", + }); + + return domain; +}; + +export const generateWildcardDomain = ( + appName: string, + serverDomain: string, +) => { + return `${appName}-${serverDomain}`; +}; + export const findDomainById = async (domainId: string) => { const domain = await db.query.domains.findFirst({ where: eq(domains.domainId, domainId),