Merge pull request #938 from 190km/preview-deployment-view

style(preview-deployment): better preview deployment card

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx

@@ -26,7 +26,7 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline">View Builds</Button>
+				<Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
 				<DialogHeader>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx

@@ -1,6 +1,23 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
+import React from "react";
-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,
+  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 { StatusTooltip } from "@/components/shared/status-tooltip";
+import { AddPreviewDomain } from "./add-preview-domain";
 import {
   Card,
   CardContent,
@@ -8,41 +25,38 @@ 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 { 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 { ShowPreviewSettings } from "./show-preview-settings";
-import { ShowPreviewBuilds } from "./show-preview-builds";
 
 interface Props {
   applicationId: string;
 }
 
 export const ShowPreviewDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
   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 [url, setUrl] = React.useState("");
+
-	// useEffect(() => {
+  const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
-	// 	setUrl(document.location.origin);
+    deletePreviewDeployment({
-	// }, []);
+      previewDeploymentId: previewDeploymentId,
+    })
+      .then(() => {
+        refetchPreviewDeployments();
+        toast.success("Preview deployment deleted");
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      });
+  };
 
   return (
     <Card className="bg-background">
@@ -65,7 +79,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
                 each pull request you create.
               </span>
             </div>
-						{data?.previewDeployments?.length === 0 ? (
+            {!previewDeployments?.length ? (
               <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
                 <RocketIcon className="size-8 text-muted-foreground" />
                 <span className="text-base text-muted-foreground">
@@ -74,125 +88,136 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
               </div>
             ) : (
               <div className="flex flex-col gap-4">
-								{previewDeployments?.map((previewDeployment) => {
+                {previewDeployments.map((previewDeployment) => (
-									const { deployments, domain } = previewDeployment;
-
-									return (
                   <div
-											key={previewDeployment?.previewDeploymentId}
+                    key={previewDeployment.previewDeploymentId}
-											className="flex flex-col  justify-between rounded-lg border p-4 gap-2"
+                    className="w-full border rounded-xl"
                   >
-											<div className="flex justify-between gap-2 max-sm:flex-wrap">
+                    <div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
-												<div className="flex flex-col gap-2">
+                      <span className="text-lg font-bold">
-													{deployments?.length === 0 ? (
+                        {previewDeployment.pullRequestTitle}
-														<div>
-															<span className="text-sm text-muted-foreground">
-																No deployments found
-															</span>
-														</div>
-													) : (
-														<div className="flex items-center gap-2">
-															<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-																{previewDeployment?.pullRequestTitle}
                       </span>
+                      <Badge
+                        variant="outline"
+                        className="text-sm font-medium gap-x-2"
+                      >
                         <StatusTooltip
                           status={previewDeployment.previewStatus}
                           className="size-2.5"
                         />
+                        {previewDeployment.previewStatus
+                          ?.replace("running", "Running")
+                          .replace("done", "Done")
+                          .replace("error", "Error")
+                          .replace("idle", "Idle") || "Idle"}
+                      </Badge>
                     </div>
-													)}
-													<div className="flex flex-col gap-1">
-														{previewDeployment?.pullRequestTitle && (
-															<div className="flex items-center gap-2">
-																<span className="break-all text-sm text-muted-foreground w-fit">
-																	Title: {previewDeployment?.pullRequestTitle}
-																</span>
-															</div>
-														)}
 
-														{previewDeployment?.pullRequestURL && (
+                    <div className="md:p-6 p-2 md:pt-0 space-y-4">
-															<div className="flex items-center gap-2">
+                      <div className="flex sm:flex-row flex-col items-center gap-2">
-																<GithubIcon />
                         <Link
+                          href={`http://${previewDeployment.domain?.host}`}
                           target="_blank"
-																	href={previewDeployment?.pullRequestURL}
+                          className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
-																	className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
                         >
-																	Pull Request URL
+                          {previewDeployment.domain?.host}
-																</Link>
-															</div>
-														)}
-													</div>
-													<div className="flex flex-col ">
-														<span>Domain </span>
-														<div className="flex flex-row items-center gap-4">
-															<Link
-																target="_blank"
-																href={`http://${domain?.host}`}
-																className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-															>
-																{domain?.host}
                         </Link>
+
                         <AddPreviewDomain
                           previewDeploymentId={
                             previewDeployment.previewDeploymentId
                           }
-																domainId={domain?.domainId}
+                          domainId={previewDeployment.domain?.domainId}
                         >
-																<Button variant="outline" size="sm">
+                          <Button
-																	<Pencil className="size-4 text-muted-foreground" />
+                            className="sm:w-auto w-full"
+                            size="sm"
+                            variant="outline"
+                          >
+                            <Pencil className="size-4" />
+                            Edit
                           </Button>
                         </AddPreviewDomain>
                       </div>
+
+                      <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
+                        <div className="flex items-center space-x-2">
+                          <GitBranch className="size-5 text-gray-400" />
+                          <span>Branch:</span>
+                          <Badge className="p-2" variant="blank">
+                            {previewDeployment.branch}
+                          </Badge>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Clock className="size-5 text-gray-400" />
+                          <span>Deployed:</span>
+                          <Badge className="p-2" variant="blank">
+                            <DateTooltip date={previewDeployment.createdAt} />
+                          </Badge>
                         </div>
                       </div>
 
-												<div className="flex flex-col sm:items-end gap-2 max-sm:w-full">
+                      <Separator />
-													{previewDeployment?.createdAt && (
-														<div className="text-sm capitalize text-muted-foreground">
-															<DateTooltip
-																date={previewDeployment?.createdAt}
-															/>
-														</div>
-													)}
-													<ShowPreviewBuilds
-														deployments={previewDeployment?.deployments || []}
-														serverId={data?.serverId || ""}
-													/>
 
+                      <div className="rounded-lg bg-muted p-4">
+                        <h3 className="mb-2 text-sm font-medium">
+                          Pull Request
+                        </h3>
+                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                          <GitPullRequest className="size-5 text-gray-400" />
+                          <Link
+                            className="hover:text-blue-500/95 hover:underline"
+                            target="_blank"
+                            href={previewDeployment.pullRequestURL}
+                          >
+                            {previewDeployment.pullRequestTitle}
+                          </Link>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
+                      <div className="flex flex-wrap justify-end gap-2">
                         <ShowModalLogs
                           appName={previewDeployment.appName}
                           serverId={data?.serverId || ""}
                         >
-														<Button variant="outline">View Logs</Button>
+                          <Button
+                            className="sm:w-auto w-full"
+                            variant="outline"
+                            size="sm"
+                          >
+                            View Logs
+                          </Button>
                         </ShowModalLogs>
 
+                        <ShowPreviewBuilds
+                          deployments={previewDeployment.deployments || []}
+                          serverId={data?.serverId || ""}
+                        />
+
                         <DialogAction
                           title="Delete Preview"
                           description="Are you sure you want to delete this preview?"
-														onClick={() => {
+                          onClick={() =>
-															deletePreviewDeployment({
+                            handleDeletePreviewDeployment(
-																previewDeploymentId:
+                              previewDeployment.previewDeploymentId
-																	previewDeployment.previewDeploymentId,
+                            )
-															})
+                          }
-																.then(() => {
+                        >
-																	refetchPreviewDeployments();
+                          <Button
-																	toast.success("Preview deployment deleted");
+                            className="sm:w-auto w-full"
-																})
+                            variant="destructive"
-																.catch((error) => {
+                            isLoading={isLoading}
-																	toast.error(error.message);
+                            size="sm"
-																});
-														}}
                           >
-														<Button variant="destructive" isLoading={isLoading}>
                             Delete Preview
                           </Button>
                         </DialogAction>
                       </div>
                     </div>
                   </div>
-									);
+                ))}
-								})}
               </div>
             )}
           </>