From 3858205e520c44a24c912f58565c50b009d45d9f Mon Sep 17 00:00:00 2001 From: 190km Date: Wed, 18 Dec 2024 22:36:57 +0100 Subject: [PATCH 1/6] style: better preview deployment card --- .../preview-deployment-card.tsx | 141 +++++++++++++ .../show-preview-builds.tsx | 2 +- .../show-preview-deployments.tsx | 185 ++++++------------ 3 files changed, 197 insertions(+), 131 deletions(-) create mode 100644 apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx new file mode 100644 index 00000000..c5b381eb --- /dev/null +++ b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx @@ -0,0 +1,141 @@ +import { StatusTooltip } from "@/components/shared/status-tooltip"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { Clock, GitBranch, GitPullRequest, Pencil } from "lucide-react"; +import Link from "next/link"; +import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; +import { DialogAction } from "@/components/shared/dialog-action"; +import { ShowPreviewBuilds } from "./show-preview-builds"; +import { RouterOutputs } from "@/utils/api"; +import { AddPreviewDomain } from "./add-preview-domain"; +import { DateTooltip } from "@/components/shared/date-tooltip"; + +interface PreviewDeploymentCardProps { + appName: string; + serverId: string; + onDeploymentDelete: (deploymentId: string) => void; + deploymentId: string; + deploymentUrl: string; + deployments: RouterOutputs["deployment"]["all"]; + + domainId: string; + domainHost: string; + + pullRequestTitle: string; + pullRequestUrl: string; + status: "running" | "error" | "done" | "idle" | undefined | null; + branch: string; + date: string; + isLoading: boolean; +} + +export function PreviewDeploymentCard({ + appName, + serverId, + + onDeploymentDelete, + deploymentId, + deployments, + + domainId, + domainHost, + + pullRequestTitle, + pullRequestUrl, + isLoading, + status, + branch, + date, +}: PreviewDeploymentCardProps) { + return ( +
+
+ {pullRequestTitle} + + + {status + ?.replace("running", "Running") + .replace("done", "Done") + .replace("error", "Error") + .replace("idle", "Idle") || "Idle"} + +
+
+
+
+ + {domainHost} + +
+ + + +
+
+
+ + Branch: + + {" "} + {branch} + +
+
+ + Deployed: + + + +
+
+ +
+

Pull Request

+
+ + + {pullRequestTitle} + +
+
+
+
+
+ + + + + + + onDeploymentDelete(deploymentId)} + > + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx index 4eb2107f..bff6c929 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx @@ -26,7 +26,7 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => { return ( - + diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx index 45451e78..7be497ed 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx @@ -8,26 +8,18 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { Switch } from "@/components/ui/switch"; import { api } from "@/utils/api"; -import { Pencil, RocketIcon } from "lucide-react"; -import React, { useEffect, useState } from "react"; +import { RocketIcon } from "lucide-react"; +import React, { useState } from "react"; import { toast } from "sonner"; -import { ShowDeployment } from "../deployments/show-deployment"; -import Link from "next/link"; -import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; -import { DialogAction } from "@/components/shared/dialog-action"; -import { AddPreviewDomain } from "./add-preview-domain"; -import { GithubIcon } from "@/components/icons/data-tools-icons"; +import { PreviewDeploymentCard } from "./preview-deployment-card"; import { ShowPreviewSettings } from "./show-preview-settings"; -import { ShowPreviewBuilds } from "./show-preview-builds"; interface Props { applicationId: string; } export const ShowPreviewDeployments = ({ applicationId }: Props) => { - const [activeLog, setActiveLog] = useState(null); const { data } = api.application.one.useQuery({ applicationId }); const { mutateAsync: deletePreviewDeployment, isLoading } = @@ -39,6 +31,21 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => { enabled: !!applicationId, }, ); + + + const handleDeletePreviewDeployment = async (previewDeploymentId: string) => { + deletePreviewDeployment({ + previewDeploymentId: previewDeploymentId, + }) + .then(() => { + refetchPreviewDeployments(); + toast.success("Preview deployment deleted"); + }) + .catch((error) => { + toast.error(error.message); + }); + }; + // const [url, setUrl] = React.useState(""); // useEffect(() => { // setUrl(document.location.origin); @@ -77,125 +84,43 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => { {previewDeployments?.map((previewDeployment) => { const { deployments, domain } = previewDeployment; - return ( -
-
-
- {deployments?.length === 0 ? ( -
- - No deployments found - -
- ) : ( -
- - {previewDeployment?.pullRequestTitle} - - -
- )} -
- {previewDeployment?.pullRequestTitle && ( -
- - Title: {previewDeployment?.pullRequestTitle} - -
- )} - - {previewDeployment?.pullRequestURL && ( -
- - - Pull Request URL - -
- )} -
-
- Domain -
- - {domain?.host} - - - - -
-
-
- -
- {previewDeployment?.createdAt && ( -
- -
- )} - - - - - - - { - deletePreviewDeployment({ - previewDeploymentId: - previewDeployment.previewDeploymentId, - }) - .then(() => { - refetchPreviewDeployments(); - toast.success("Preview deployment deleted"); - }) - .catch((error) => { - toast.error(error.message); - }); - }} - > - - -
-
-
- ); - })} - - )} - + return ( +
+
+ {deployments?.length === 0 ? ( +
+ + No deployments found + +
+ ) : ( + + )} +
+
+ ); + })} + + )} + ) : (
From 3a954746626eb65c270b4ffa2f5fc82f91578568 Mon Sep 17 00:00:00 2001 From: usopp Date: Thu, 19 Dec 2024 01:44:20 +0100 Subject: [PATCH 2/6] chore: lint --- .../preview-deployment-card.tsx | 14 +++++++------- .../show-preview-deployments.tsx | 7 ++----- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx index c5b381eb..521f0afe 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx @@ -13,20 +13,20 @@ import { DateTooltip } from "@/components/shared/date-tooltip"; interface PreviewDeploymentCardProps { appName: string; - serverId: string; + serverId: string | undefined; onDeploymentDelete: (deploymentId: string) => void; deploymentId: string; deploymentUrl: string; deployments: RouterOutputs["deployment"]["all"]; - domainId: string; - domainHost: string; + domainId: string | undefined; + domainHost: string | undefined; - pullRequestTitle: string; - pullRequestUrl: string; + pullRequestTitle: string | undefined; + pullRequestUrl: string | undefined; status: "running" | "error" | "done" | "idle" | undefined | null; - branch: string; - date: string; + branch: string | undefined; + date: string | undefined; isLoading: boolean; } diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx index 7be497ed..2500662d 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx @@ -1,6 +1,3 @@ -import { DateTooltip } from "@/components/shared/date-tooltip"; -import { StatusTooltip } from "@/components/shared/status-tooltip"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, @@ -10,7 +7,7 @@ import { } from "@/components/ui/card"; import { api } from "@/utils/api"; import { RocketIcon } from "lucide-react"; -import React, { useState } from "react"; +import React from "react"; import { toast } from "sonner"; import { PreviewDeploymentCard } from "./preview-deployment-card"; import { ShowPreviewSettings } from "./show-preview-settings"; @@ -95,7 +92,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
) : ( Date: Thu, 19 Dec 2024 01:58:18 +0100 Subject: [PATCH 3/6] chore: lint --- .../preview-deployment-card.tsx | 14 +++++++------- .../show-preview-deployments.tsx | 12 ++++++------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx index 521f0afe..c5b381eb 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx @@ -13,20 +13,20 @@ import { DateTooltip } from "@/components/shared/date-tooltip"; interface PreviewDeploymentCardProps { appName: string; - serverId: string | undefined; + serverId: string; onDeploymentDelete: (deploymentId: string) => void; deploymentId: string; deploymentUrl: string; deployments: RouterOutputs["deployment"]["all"]; - domainId: string | undefined; - domainHost: string | undefined; + domainId: string; + domainHost: string; - pullRequestTitle: string | undefined; - pullRequestUrl: string | undefined; + pullRequestTitle: string; + pullRequestUrl: string; status: "running" | "error" | "done" | "idle" | undefined | null; - branch: string | undefined; - date: string | undefined; + branch: string; + date: string; isLoading: boolean; } diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx index 2500662d..0c060afd 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx @@ -99,15 +99,15 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => { deploymentId={previewDeployment.previewDeploymentId} deploymentUrl={`http://${domain?.host}`} deployments={previewDeployment?.deployments || []} - domainId={domain?.domainId} - domainHost={domain?.host} + domainId={domain?.domainId || ""} + domainHost={domain?.host || ""} pullRequestTitle={ - previewDeployment?.pullRequestTitle + previewDeployment?.pullRequestTitle || "" } - pullRequestUrl={previewDeployment?.pullRequestURL} + pullRequestUrl={previewDeployment?.pullRequestURL || ""} status={previewDeployment.previewStatus} - branch={previewDeployment?.branch} - date={previewDeployment?.createdAt} + branch={previewDeployment?.branch || ""} + date={previewDeployment?.createdAt || ""} isLoading={isLoading} /> )} From 29ce8908eeb913c3e20a2f5fd70f1d8c3cf5a3fe Mon Sep 17 00:00:00 2001 From: 190km Date: Sat, 21 Dec 2024 23:11:55 +0100 Subject: [PATCH 4/6] refactor: remove all the props except id, serverid, isloading, and delete function --- .../preview-deployment-card.tsx | 195 +++++++----------- .../show-preview-deployments.tsx | 91 +++----- 2 files changed, 105 insertions(+), 181 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx index c5b381eb..4d61fdec 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx @@ -1,134 +1,99 @@ -import { StatusTooltip } from "@/components/shared/status-tooltip"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; -import { Clock, GitBranch, GitPullRequest, Pencil } from "lucide-react"; +import { Clock, GitBranch, GitPullRequest } from "lucide-react"; import Link from "next/link"; import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; import { DialogAction } from "@/components/shared/dialog-action"; +import { api } from "@/utils/api"; import { ShowPreviewBuilds } from "./show-preview-builds"; -import { RouterOutputs } from "@/utils/api"; -import { AddPreviewDomain } from "./add-preview-domain"; import { DateTooltip } from "@/components/shared/date-tooltip"; interface PreviewDeploymentCardProps { - appName: string; - serverId: string; - onDeploymentDelete: (deploymentId: string) => void; - deploymentId: string; - deploymentUrl: string; - deployments: RouterOutputs["deployment"]["all"]; - - domainId: string; - domainHost: string; - - pullRequestTitle: string; - pullRequestUrl: string; - status: "running" | "error" | "done" | "idle" | undefined | null; - branch: string; - date: string; - isLoading: boolean; + deploymentId: string; + serverId: string; + onDeploymentDelete: (deploymentId: string) => void; + isLoading: boolean; } export function PreviewDeploymentCard({ - appName, - serverId, - - onDeploymentDelete, - deploymentId, - deployments, - - domainId, - domainHost, - - pullRequestTitle, - pullRequestUrl, - isLoading, - status, - branch, - date, + deploymentId, + serverId, + onDeploymentDelete, + isLoading, }: PreviewDeploymentCardProps) { - return ( -
-
- {pullRequestTitle} - - - {status - ?.replace("running", "Running") - .replace("done", "Done") - .replace("error", "Error") - .replace("idle", "Idle") || "Idle"} - -
-
-
-
- - {domainHost} - -
- - - -
-
-
- - Branch: - - {" "} - {branch} - -
-
- - Deployed: - - - -
-
- -
-

Pull Request

-
- - - {pullRequestTitle} - -
-
-
-
-
- + const { data: previewDeployment } = api.previewDeployment.one.useQuery({ + previewDeploymentId: deploymentId, + }); - - - + if (!previewDeployment) return null; - onDeploymentDelete(deploymentId)} - > - + + onDeploymentDelete(deploymentId)} + > +
+ )} + ) : (
From 7a5b9e3b76946725dbd57e7369aac060d51444f8 Mon Sep 17 00:00:00 2001 From: 190km Date: Mon, 23 Dec 2024 02:34:50 +0100 Subject: [PATCH 5/6] refactor: deleted separate component, and add it to show preview build --- .../preview-deployment-card.tsx | 106 ------ .../show-preview-deployments.tsx | 308 +++++++++++++----- 2 files changed, 227 insertions(+), 187 deletions(-) delete mode 100644 apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx deleted file mode 100644 index 4d61fdec..00000000 --- a/apps/dokploy/components/dashboard/application/preview-deployments/preview-deployment-card.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { Separator } from "@/components/ui/separator"; -import { Clock, GitBranch, GitPullRequest } from "lucide-react"; -import Link from "next/link"; -import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; -import { DialogAction } from "@/components/shared/dialog-action"; -import { api } from "@/utils/api"; -import { ShowPreviewBuilds } from "./show-preview-builds"; -import { DateTooltip } from "@/components/shared/date-tooltip"; - -interface PreviewDeploymentCardProps { - deploymentId: string; - serverId: string; - onDeploymentDelete: (deploymentId: string) => void; - isLoading: boolean; -} - -export function PreviewDeploymentCard({ - deploymentId, - serverId, - onDeploymentDelete, - isLoading, -}: PreviewDeploymentCardProps) { - const { data: previewDeployment } = api.previewDeployment.one.useQuery({ - previewDeploymentId: deploymentId, - }); - - if (!previewDeployment) return null; - - return ( -
-
- {previewDeployment.pullRequestTitle} - - {previewDeployment.previewStatus || "Idle"} - -
-
-
- - {previewDeployment.domain?.host} - -
-
-
- - Branch: - - {previewDeployment.branch} - -
-
- - Deployed: - - - -
-
- -
-

Pull Request

-
- - - {previewDeployment.pullRequestTitle} - -
-
-
-
-
- - - - - onDeploymentDelete(deploymentId)} - > - - -
-
-
- ); -} \ No newline at end of file diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx index fbcc9a72..2ce18731 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx @@ -1,93 +1,239 @@ -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { api } from "@/utils/api"; -import { RocketIcon } from "lucide-react"; import React from "react"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { + Clock, + GitBranch, + GitPullRequest, + Pencil, + RocketIcon, +} from "lucide-react"; +import Link from "next/link"; +import { ShowModalLogs } from "../../settings/web-server/show-modal-logs"; +import { DialogAction } from "@/components/shared/dialog-action"; +import { api } from "@/utils/api"; +import { ShowPreviewBuilds } from "./show-preview-builds"; +import { DateTooltip } from "@/components/shared/date-tooltip"; import { toast } from "sonner"; -import { PreviewDeploymentCard } from "./preview-deployment-card"; +import { StatusTooltip } from "@/components/shared/status-tooltip"; +import { AddPreviewDomain } from "./add-preview-domain"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; import { ShowPreviewSettings } from "./show-preview-settings"; interface Props { - applicationId: string; + applicationId: string; } export const ShowPreviewDeployments = ({ applicationId }: Props) => { - const { data } = api.application.one.useQuery({ applicationId }); + const { data } = api.application.one.useQuery({ applicationId }); - const { mutateAsync: deletePreviewDeployment, isLoading } = - api.previewDeployment.delete.useMutation(); - const { data: previewDeployments, refetch: refetchPreviewDeployments } = - api.previewDeployment.all.useQuery( - { applicationId }, - { - enabled: !!applicationId, - } - ); + const { mutateAsync: deletePreviewDeployment, isLoading } = + api.previewDeployment.delete.useMutation(); - const handleDeletePreviewDeployment = async (previewDeploymentId: string) => { - deletePreviewDeployment({ - previewDeploymentId: previewDeploymentId, - }) - .then(() => { - refetchPreviewDeployments(); - toast.success("Preview deployment deleted"); - }) - .catch((error) => { - toast.error(error.message); - }); - }; + const { data: previewDeployments, refetch: refetchPreviewDeployments } = + api.previewDeployment.all.useQuery( + { applicationId }, + { + enabled: !!applicationId, + } + ); - return ( - - -
- Preview Deployments - See all the preview deployments -
- {data?.isPreviewDeploymentsActive && ( - - )} - - - {data?.isPreviewDeploymentsActive ? ( - <> - {data?.previewDeployments?.length === 0 ? ( -
- - - No preview deployments found - -
- ) : ( -
- {previewDeployments?.map((previewDeployment) => ( - - ))} -
- )} - - ) : ( -
- - - Preview deployments are disabled for this application, please - enable it - - -
- )} - - - ); + const handleDeletePreviewDeployment = async (previewDeploymentId: string) => { + deletePreviewDeployment({ + previewDeploymentId: previewDeploymentId, + }) + .then(() => { + refetchPreviewDeployments(); + toast.success("Preview deployment deleted"); + }) + .catch((error) => { + toast.error(error.message); + }); + }; + + return ( + + +
+ Preview Deployments + See all the preview deployments +
+ {data?.isPreviewDeploymentsActive && ( + + )} + + + {data?.isPreviewDeploymentsActive ? ( + <> +
+ + Preview deployments are a way to test your application before it + is deployed to production. It will create a new deployment for + each pull request you create. + +
+ {!previewDeployments?.length ? ( +
+ + + No preview deployments found + +
+ ) : ( +
+ {previewDeployments.map((previewDeployment) => ( +
+
+ + {previewDeployment.pullRequestTitle} + + + + {previewDeployment.previewStatus + ?.replace("running", "Running") + .replace("done", "Done") + .replace("error", "Error") + .replace("idle", "Idle") || "Idle"} + +
+ +
+
+ + {previewDeployment.domain?.host} + + + + + +
+ +
+
+ + Branch: + + {previewDeployment.branch} + +
+
+ + Deployed: + + + +
+
+ + + +
+

+ Pull Request +

+
+ + + {previewDeployment.pullRequestTitle} + +
+
+
+ +
+
+ + + + + + + + handleDeletePreviewDeployment( + previewDeployment.previewDeploymentId + ) + } + > + + +
+
+
+ ))} +
+ )} + + ) : ( +
+ + + Preview deployments are disabled for this application, please + enable it + + +
+ )} + + + ); }; + +export default ShowPreviewDeployments; From 65ddc22010cb63d0bed5ccaabf8a665d9926f3ac Mon Sep 17 00:00:00 2001 From: 190km Date: Mon, 23 Dec 2024 02:41:08 +0100 Subject: [PATCH 6/6] refactor: removed useless export --- .../preview-deployments/show-preview-deployments.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx index 2ce18731..898d412a 100644 --- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx +++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx @@ -235,5 +235,3 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => { ); }; - -export default ShowPreviewDeployments;