From 8a0ffbe754b9af2c63c23eafb1afd1e3000b50a7 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 26 May 2024 03:06:31 -0600
Subject: [PATCH] refactor: prevent to updates download automatically

---
 .../cluster/registry/add-docker-registry.tsx  |  2 +-
 .../registry/add-self-docker-registry.tsx     |  5 +-
 .../dashboard/settings/users/delete-user.tsx  |  2 +-
 components/dashboard/settings/web-server.tsx  | 12 +--
 .../settings/web-server/update-server.tsx     | 98 +++++++++++++++++++
 .../settings/web-server/update-webserver.tsx  |  6 +-
 package.json                                  |  4 +-
 pages/index.tsx                               |  2 +-
 server/api/routers/settings.ts                |  2 +-
 9 files changed, 112 insertions(+), 21 deletions(-)
 create mode 100644 components/dashboard/settings/web-server/update-server.tsx

diff --git a/components/dashboard/settings/cluster/registry/add-docker-registry.tsx b/components/dashboard/settings/cluster/registry/add-docker-registry.tsx
index 04ac3270..8d9eab16 100644
--- a/components/dashboard/settings/cluster/registry/add-docker-registry.tsx
+++ b/components/dashboard/settings/cluster/registry/add-docker-registry.tsx
@@ -201,7 +201,7 @@ export const AddRegistry = () => {
 										<FormLabel>Registry URL</FormLabel>
 										<FormControl>
 											<Input
-												placeholder="https://aws_account_id.dkr.ecr.us-west-2.amazonaws.com"
+												placeholder="aws_account_id.dkr.ecr.us-west-2.amazonaws.com"
 												{...field}
 											/>
 										</FormControl>
diff --git a/components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx b/components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx
index 52e8c1e7..ef4ad03f 100644
--- a/components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx
+++ b/components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx
@@ -157,10 +157,7 @@ export const AddSelfHostedRegistry = () => {
 									<FormItem>
 										<FormLabel>Registry URL</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="https://registry.dokploy.com"
-												{...field}
-											/>
+											<Input placeholder="registry.dokploy.com" {...field} />
 										</FormControl>
 										<FormDescription>
 											Point a DNS record to the VPS IP address.
diff --git a/components/dashboard/settings/users/delete-user.tsx b/components/dashboard/settings/users/delete-user.tsx
index f3904795..36f5de2c 100644
--- a/components/dashboard/settings/users/delete-user.tsx
+++ b/components/dashboard/settings/users/delete-user.tsx
@@ -26,7 +26,7 @@ export const DeleteUser = ({ authId }: Props) => {
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
 				<DropdownMenuItem
-					className="w-full cursor-pointer"
+					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
 					onSelect={(e) => e.preventDefault()}
 				>
 					Delete User
diff --git a/components/dashboard/settings/web-server.tsx b/components/dashboard/settings/web-server.tsx
index f892ec1e..32656581 100644
--- a/components/dashboard/settings/web-server.tsx
+++ b/components/dashboard/settings/web-server.tsx
@@ -27,10 +27,9 @@ import { DockerTerminalModal } from "./web-server/docker-terminal-modal";
 import { ShowMainTraefikConfig } from "./web-server/show-main-traefik-config";
 import { ShowServerTraefikConfig } from "./web-server/show-server-traefik-config";
 import { ShowServerMiddlewareConfig } from "./web-server/show-server-middleware-config";
-import { UpdateWebServer } from "./web-server/update-webserver";
+import { UpdateServer } from "./web-server/update-server";
 
 export const WebServer = () => {
-	const [fetchAfterFirstRender, setFetchAfterFirstRender] = useState(false);
 	const { data, refetch } = api.admin.one.useQuery();
 	const { mutateAsync: reloadServer, isLoading } =
 		api.settings.reloadServer.useMutation();
@@ -61,13 +60,6 @@ export const WebServer = () => {
 
 	const { mutateAsync: updateDockerCleanup } =
 		api.settings.updateDockerCleanup.useMutation();
-	const { data: query } = api.settings.checkAndUpdateImage.useQuery(void 0, {
-		enabled: fetchAfterFirstRender,
-	});
-
-	useEffect(() => {
-		setFetchAfterFirstRender(true);
-	}, []);
 
 	return (
 		<Card className="rounded-lg w-full bg-transparent">
@@ -279,7 +271,7 @@ export const WebServer = () => {
 						</DropdownMenuContent>
 					</DropdownMenu>
 
-					{query ? <UpdateWebServer /> : null}
+					<UpdateServer />
 				</div>
 
 				<div className="flex items-center flex-wrap justify-between gap-4">
diff --git a/components/dashboard/settings/web-server/update-server.tsx b/components/dashboard/settings/web-server/update-server.tsx
new file mode 100644
index 00000000..bbca5ece
--- /dev/null
+++ b/components/dashboard/settings/web-server/update-server.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { RefreshCcw } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import Link from "next/link";
+import { UpdateWebServer } from "./update-webserver";
+
+export const UpdateServer = () => {
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState<null | boolean>(
+		null,
+	);
+	const { mutateAsync: checkAndUpdateImage, isLoading } =
+		api.settings.checkAndUpdateImage.useMutation();
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="secondary">
+					<RefreshCcw className="h-4 w-4" />
+					Updates
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:m:max-w-lg ">
+				<DialogHeader>
+					<DialogTitle>Web Server Update</DialogTitle>
+					<DialogDescription>
+						Check new releases and update your dokploy
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<span className="text-sm text-muted-foreground">
+						We suggest to update your dokploy to the latest version only if you:
+					</span>
+					<ul className="list-disc list-inside text-sm text-muted-foreground">
+						<li>Want to try the latest features</li>
+						<li>Some bug that is blocking to use some features</li>
+					</ul>
+					<AlertBlock type="info">
+						Please we recommend to see the latest version to see if there are
+						any breaking changes before updating. Go to{" "}
+						<Link
+							href="https://github.com/Dokploy/dokploy/releases"
+							target="_blank"
+							className="text-foreground"
+						>
+							Dokploy Releases
+						</Link>{" "}
+						to check the latest version.
+					</AlertBlock>
+
+					<div className="w-full flex flex-col gap-4">
+						{isUpdateAvailable === false && (
+							<div className="flex flex-col items-center gap-3">
+								<RefreshCcw className="size-6 self-center text-muted-foreground" />
+								<span className="text-sm text-muted-foreground">
+									You are using the latest version
+								</span>
+							</div>
+						)}
+						{isUpdateAvailable ? (
+							<UpdateWebServer />
+						) : (
+							<Button
+								className="w-full"
+								onClick={async () => {
+									await checkAndUpdateImage()
+										.then(async (e) => {
+											setIsUpdateAvailable(e);
+										})
+										.catch(() => {
+											setIsUpdateAvailable(false);
+											toast.error("Error to check updates");
+										});
+									toast.success("Check updates");
+								}}
+								isLoading={isLoading}
+							>
+								Check updates
+							</Button>
+						)}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
diff --git a/components/dashboard/settings/web-server/update-webserver.tsx b/components/dashboard/settings/web-server/update-webserver.tsx
index fd76db58..47d38310 100644
--- a/components/dashboard/settings/web-server/update-webserver.tsx
+++ b/components/dashboard/settings/web-server/update-webserver.tsx
@@ -19,7 +19,11 @@ export const UpdateWebServer = () => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button className="relative" variant="secondary" isLoading={isLoading}>
+				<Button
+					className="relative w-full"
+					variant="secondary"
+					isLoading={isLoading}
+				>
 					<span className="absolute -right-1 -top-2 flex h-3 w-3">
 						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
 						<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
diff --git a/package.json b/package.json
index 074abed7..f4816086 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
     "db:truncate": "tsx -r dotenv/config ./server/db/reset.ts",
     "db:studio": "drizzle-kit studio",
     "lint": "biome lint",
-    "db:seed": "dotenv tsx ./server/db/seed.ts",
-    "db:clean": "dotenv tsx ./server/db/reset.ts",
+    "db:seed": "tsx -r dotenv/config ./server/db/seed.ts",
+    "db:clean": "tsx -r dotenv/config ./server/db/reset.ts",
     "docker:build": "./docker/build.sh",
     "docker:push": "./docker/push.sh",
     "docker:build:canary": "./docker/build.sh canary",
diff --git a/pages/index.tsx b/pages/index.tsx
index ea2b9b45..162e021c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -193,7 +193,7 @@ export default function Home({ hasAdmin }: Props) {
 							<div className="mt-4 text-sm flex flex-row justify-center gap-2">
 								<Link
 									className="hover:underline text-muted-foreground"
-									href="https://docs.dokploy.com/reset-password"
+									href="https://docs.dokploy.com/get-started/reset-password"
 									target="_blank"
 								>
 									Lost your password?
diff --git a/server/api/routers/settings.ts b/server/api/routers/settings.ts
index dabb3308..dc16a618 100644
--- a/server/api/routers/settings.ts
+++ b/server/api/routers/settings.ts
@@ -181,7 +181,7 @@ export const settingsRouter = createTRPCRouter({
 			return true;
 		}),
 
-	checkAndUpdateImage: adminProcedure.query(async () => {
+	checkAndUpdateImage: adminProcedure.mutation(async () => {
 		return await pullLatestRelease();
 	}),
 	updateServer: adminProcedure.mutation(async () => {