refactor: update ShowDeployments component and remove ShowRollbacks

- Enhanced the ShowDeployments component to conditionally display rollback options based on deployment status and type.
- Removed the ShowRollbacks component and its references from the application, streamlining the UI and functionality.

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

@@ -184,33 +184,37 @@ export const ShowDeployments = ({
 											View
 										</Button>
 
-										{deployment?.rollback && (
-											<DialogAction
-												title="Rollback to this deployment"
-												description="Are you sure you want to rollback to this deployment?"
-												type="default"
-												onClick={async () => {
-													await rollback({
-														rollbackId: deployment.rollback.rollbackId,
-													})
-														.then(() => {
-															toast.success("Rollback initiated successfully");
+										{deployment?.rollback &&
+											deployment.status === "done" &&
+											type === "application" && (
+												<DialogAction
+													title="Rollback to this deployment"
+													description="Are you sure you want to rollback to this deployment?"
+													type="default"
+													onClick={async () => {
+														await rollback({
+															rollbackId: deployment.rollback.rollbackId,
 														})
-														.catch(() => {
-															toast.error("Error initiating rollback");
-														});
-												}}
-											>
-												<Button
-													variant="secondary"
-													size="sm"
-													isLoading={isRollingBack}
+															.then(() => {
+																toast.success(
+																	"Rollback initiated successfully",
+																);
+															})
+															.catch(() => {
+																toast.error("Error initiating rollback");
+															});
+													}}
 												>
-													<ArrowDownToLine className="size-4 text-primary group-hover:text-red-500" />
-													Rollback
-												</Button>
-											</DialogAction>
-										)}
+													<Button
+														variant="secondary"
+														size="sm"
+														isLoading={isRollingBack}
+													>
+														<ArrowDownToLine className="size-4 text-primary group-hover:text-red-500" />
+														Rollback
+													</Button>
+												</DialogAction>
+											)}
 									</div>
 								</div>
 							</div>

apps/dokploy/components/dashboard/application/rollbacks/show-rollbacks.tsx

@@ -1,225 +0,0 @@
-import { api } from "@/utils/api";
-import {
-	Loader2,
-	RefreshCcw,
-	Settings,
-	ArrowDownToLine,
-	CalendarClock,
-	Box,
-	Trash2,
-} from "lucide-react";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { ShowRollbackSettings } from "./show-rollback-settings";
-import { ShowEnv } from "./show-env";
-import { format } from "date-fns";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { toast } from "sonner";
-
-interface Props {
-	applicationId: string;
-}
-
-export const ShowRollbacks = ({ applicationId }: Props) => {
-	const { data: application } = api.application.one.useQuery(
-		{
-			applicationId,
-		},
-		{
-			enabled: !!applicationId,
-		},
-	);
-	const { data, isLoading, refetch } = api.rollback.all.useQuery(
-		{
-			applicationId,
-		},
-		{
-			enabled: !!applicationId,
-		},
-	);
-
-	const { mutateAsync: rollbackVersion, isLoading: isRollingBack } =
-		api.rollback.rollback.useMutation();
-
-	const { mutateAsync: deleteRollback, isLoading: isDeleting } =
-		api.rollback.delete.useMutation();
-
-	if (!application?.rollbackActive) {
-		return (
-			<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
-				<CardHeader className="px-0">
-					<div className="flex justify-between items-center">
-						<div className="flex flex-col gap-2">
-							<CardTitle className="text-xl font-bold flex items-center gap-2">
-								Rollbacks
-							</CardTitle>
-							<CardDescription>
-								Rollback to a previous deployment.
-							</CardDescription>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent className="py-0">
-					<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg">
-						<Settings className="size-8 mb-4 text-muted-foreground" />
-						<p className="text-lg font-medium text-muted-foreground">
-							Rollbacks Not Enabled
-						</p>
-						<p className="text-sm text-muted-foreground mt-1 text-center max-w-md">
-							Enable rollbacks to keep track of previous deployments and roll
-							back when needed.
-						</p>
-						<ShowRollbackSettings applicationId={applicationId}>
-							<Button variant="outline" className="mt-4">
-								Configure Rollbacks
-							</Button>
-						</ShowRollbackSettings>
-					</div>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
-			<CardHeader className="px-0">
-				<div className="flex justify-between items-center">
-					<div className="flex flex-col gap-2">
-						<CardTitle className="text-xl font-bold flex items-center gap-2">
-							Rollbacks
-						</CardTitle>
-						<CardDescription>
-							Rollback to a previous deployment.
-						</CardDescription>
-					</div>
-					<ShowRollbackSettings applicationId={applicationId}>
-						<Button variant="outline" className="mt-4">
-							Configure Rollbacks
-						</Button>
-					</ShowRollbackSettings>
-				</div>
-			</CardHeader>
-			<CardContent className="px-0 py-0">
-				{isLoading ? (
-					<div className="flex gap-4   w-full items-center justify-center text-center mx-auto min-h-[45vh]">
-						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
-						<span className="text-sm text-muted-foreground/70">
-							Loading rollbacks...
-						</span>
-					</div>
-				) : data && data.length > 0 ? (
-					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
-						{data.map((rollback) => {
-							return (
-								<div
-									key={rollback.rollbackId}
-									className="flex flex-col rounded-lg border text-card-foreground shadow-sm"
-								>
-									<div className="p-6 flex flex-col gap-4">
-										<div className="flex items-start justify-between">
-											<div className="flex items-start gap-4">
-												<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
-													<ArrowDownToLine className="size-5 text-primary" />
-												</div>
-												<div className="space-y-1">
-													<h3 className="font-medium leading-none flex items-center gap-2">
-														Version {rollback.version}
-													</h3>
-													<div className="flex items-center gap-4 text-sm text-muted-foreground">
-														<div className="flex items-center gap-1">
-															<CalendarClock className="size-3.5" />
-															<span>
-																{format(
-																	new Date(rollback.createdAt),
-																	"MMM dd, yyyy HH:mm",
-																)}
-															</span>
-														</div>
-														{rollback.image && (
-															<div className="flex items-center gap-1">
-																<Box className="size-3.5" />
-																<code className="text-xs bg-muted px-1 py-0.5 rounded">
-																	{rollback.image}
-																</code>
-															</div>
-														)}
-													</div>
-												</div>
-											</div>
-
-											<div className="flex flex-col items-center gap-2">
-												<Button
-													variant="outline"
-													size="sm"
-													className="text-xs"
-													isLoading={isRollingBack}
-													onClick={async () => {
-														await rollbackVersion({
-															rollbackId: rollback.rollbackId,
-														})
-															.then(() => {
-																refetch();
-																toast.success("Rollback successful");
-															})
-															.catch(() => {
-																toast.error("Error rolling back");
-															});
-													}}
-												>
-													Rollback to this version
-												</Button>
-												<ShowEnv env={rollback.env} />
-												<DialogAction
-													title="Delete Rollback"
-													description="Are you sure you want to delete this rollback?"
-													type="destructive"
-													onClick={async () => {
-														await deleteRollback({
-															rollbackId: rollback.rollbackId,
-														})
-															.then(() => {
-																refetch();
-																toast.success("Rollback deleted successfully");
-															})
-															.catch(() => {
-																toast.error("Error deleting rollback");
-															});
-													}}
-												>
-													<Button
-														variant="ghost"
-														size="icon"
-														className="group hover:bg-red-500/10 "
-														isLoading={isDeleting}
-													>
-														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-													</Button>
-												</DialogAction>
-											</div>
-										</div>
-									</div>
-								</div>
-							);
-						})}
-					</div>
-				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg min-h-[30vh]">
-						<RefreshCcw className="size-8 mb-4 text-muted-foreground" />
-						<p className="text-lg font-medium text-muted-foreground">
-							No rollbacks
-						</p>
-						<p className="text-sm text-muted-foreground mt-1">
-							No rollbacks found for this application.
-						</p>
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-};

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -12,7 +12,6 @@ import { ShowEnvironment } from "@/components/dashboard/application/environment/
 import { ShowGeneralApplication } from "@/components/dashboard/application/general/show";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { ShowPreviewDeployments } from "@/components/dashboard/application/preview-deployments/show-preview-deployments";
-import { ShowRollbacks } from "@/components/dashboard/application/rollbacks/show-rollbacks";
 import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
@@ -235,7 +234,6 @@ const Service = (
 												Preview Deployments
 											</TabsTrigger>
 											<TabsTrigger value="schedules">Schedules</TabsTrigger>
-											<TabsTrigger value="rollbacks">Rollbacks</TabsTrigger>
 											<TabsTrigger value="deployments">Deployments</TabsTrigger>
 											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
@@ -312,11 +310,6 @@ const Service = (
 											/>
 										</div>
 									</TabsContent>
-									<TabsContent value="rollbacks">
-										<div className="flex flex-col gap-4  pt-2.5">
-											<ShowRollbacks applicationId={applicationId} />
-										</div>
-									</TabsContent>
 									<TabsContent value="schedules">
 										<div className="flex flex-col gap-4  pt-2.5">
 											<ShowSchedules