Merge pull request #355 from Dokploy/canary

v0.6.3
Dokploy · Aug 17, 2024 · 385fbf4 · 385fbf4
2 parents 3590f3b + 44e75ee
commit 385fbf4
Show file tree

Hide file tree

Showing 31 changed files with 3,186 additions and 83 deletions.
diff --git a/.husky/commit-msg → .config/.husky/commit-msg b/.husky/commit-msg → .config/.husky/commit-msg
diff --git a/.husky/install.mjs → .config/.husky/install.mjs b/.husky/install.mjs → .config/.husky/install.mjs
diff --git a/.husky/pre-commit → .config/.husky/pre-commit b/.husky/pre-commit → .config/.husky/pre-commit
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -46,6 +46,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					<div className="flex flex-col pt-2 relative">
 						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
 							<CodeEditor
+								lineWrapping
 								value={data || "Empty"}
 								disabled
 								className="font-mono"

diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -144,6 +144,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
@@ -53,7 +53,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 					<div className="flex flex-row items-center gap-2 flex-wrap">
 						<span>Webhook URL: </span>
 						<div className="flex flex-row items-center gap-2">
-							<span className="text-muted-foreground">
+							<span className="break-all text-muted-foreground">
 								{`${url}/api/deploy/${data?.refreshToken}`}
 							</span>
 							<RefreshToken applicationId={applicationId} />
@@ -72,7 +72,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 						{deployments?.map((deployment) => (
 							<div
 								key={deployment.deploymentId}
-								className="flex items-center justify-between rounded-lg border p-4"
+								className="flex items-center justify-between rounded-lg border p-4 gap-2"
 							>
 								<div className="flex flex-col">
 									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
@@ -87,7 +87,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 										{deployment.title}
 									</span>
 									{deployment.description && (
-										<span className="text-sm text-muted-foreground">
+										<span className="break-all text-sm text-muted-foreground">
 											{deployment.description}
 										</span>
 									)}

diff --git a/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx b/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
@@ -104,6 +104,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
 									</FormDescription>
 									<FormControl>
 										<CodeEditor
+											lineWrapping
 											wrapperClassName="h-[35rem] font-mono"
 											placeholder={`http:
 routers:

diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -55,6 +55,7 @@ interface Props {
 
 export const AddTemplate = ({ projectId }: Props) => {
 	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
 	const { data } = api.compose.templates.useQuery();
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const { data: tags, isLoading: isLoadingTags } =
@@ -75,14 +76,14 @@ export const AddTemplate = ({ projectId }: Props) => {
 		}) || [];
 
 	return (
-		<Dialog>
+		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="w-full">
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"
 					onSelect={(e) => e.preventDefault()}
 				>
 					<PuzzleIcon className="size-4 text-muted-foreground" />
-					<span>Templates</span>
+					<span>Template</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl p-0">
@@ -283,6 +284,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																				utils.project.one.invalidate({
 																					projectId,
 																				});
+																				setOpen(false);
 																			})
 																			.catch(() => {
 																				toast.error(

diff --git a/apps/dokploy/components/dashboard/settings/github/github-setup.tsx b/apps/dokploy/components/dashboard/settings/github/github-setup.tsx
@@ -9,36 +9,11 @@ import {
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
+import { format } from "date-fns";
 import { BadgeCheck } from "lucide-react";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { RemoveGithubApp } from "./remove-github-app";
-export const generateName = () => {
-	const n1 = ["Blue", "Green", "Red", "Orange", "Violet", "Indigo", "Yellow"];
-	const n2 = [
-		"One",
-		"Two",
-		"Three",
-		"Four",
-		"Five",
-		"Six",
-		"Seven",
-		"Eight",
-		"Nine",
-		"Zero",
-	];
-	return `Dokploy-${n1[Math.round(Math.random() * (n1.length - 1))]}-${
-		n2[Math.round(Math.random() * (n2.length - 1))]
-	}`;
-};
-function slugify(text: string) {
-	return text
-		.toLowerCase()
-		.replace(/[\s\^&*()+=!]+/g, "-")
-		.replace(/[\$.,*+~()'"!:@^&]+/g, "")
-		.replace(/-+/g, "-")
-		.replace(/^-+|-+$/g, "");
-}
 
 export const GithubSetup = () => {
 	const [isOrganization, setIsOrganization] = useState(false);
@@ -52,10 +27,9 @@ export const GithubSetup = () => {
 		const manifest = JSON.stringify(
 			{
 				redirect_url: `${origin}/api/redirect?authId=${data?.authId}`,
-				name: generateName(),
+				name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}`,
 				url: origin,
 				hook_attributes: {
-					// JUST FOR TESTING
 					url: `${url}/api/deploy/github`,
 					// url: `${origin}/api/webhook`, // Aquí especificas la URL del endpoint de tu webhook
 				},
@@ -95,16 +69,16 @@ export const GithubSetup = () => {
 						</div>
 						<div className="flex items-end gap-4 flex-wrap">
 							<RemoveGithubApp />
-							{/* <Link
-								href={`https://github.com/settings/apps/${data?.githubAppName}`}
+							<Link
+								href={`${data?.githubAppName}`}
 								target="_blank"
 								className={buttonVariants({
 									className: "w-fit",
 									variant: "secondary",
 								})}
 							>
 								<span className="text-sm">Manage Github App</span>
-							</Link> */}
+							</Link>
 						</div>
 					</div>
 				) : (
@@ -119,9 +93,9 @@ export const GithubSetup = () => {
 
 								<div className="flex flex-row gap-4">
 									<Link
-										href={`https://github.com/apps/${slugify(
-											data.githubAppName,
-										)}/installations/new?state=gh_setup:${data?.authId}`}
+										href={`${
+											data.githubAppName
+										}/installations/new?state=gh_setup:${data?.authId}`}
 										className={buttonVariants({ className: "w-fit" })}
 									>
 										Install Github App

diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx
@@ -22,7 +22,7 @@ export const ShowDestinations = () => {
 				<CardHeader>
 					<CardTitle className="text-xl">SSH Keys</CardTitle>
 					<CardDescription>
-						Use SSH to beeing able cloning from private repositories.
+						Use SSH to be able to clone from private repositories.
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="space-y-2 pt-4">

diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
@@ -39,6 +39,7 @@ const addPermissions = z.object({
 	canAccessToTraefikFiles: z.boolean().optional().default(false),
 	canAccessToDocker: z.boolean().optional().default(false),
 	canAccessToAPI: z.boolean().optional().default(false),
+	canAccessToSSHKeys: z.boolean().optional().default(false),
 });
 
 type AddPermissions = z.infer<typeof addPermissions>;
@@ -82,6 +83,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 				canAccessToTraefikFiles: data.canAccessToTraefikFiles,
 				canAccessToDocker: data.canAccessToDocker,
 				canAccessToAPI: data.canAccessToAPI,
+				canAccessToSSHKeys: data.canAccessToSSHKeys,
 			});
 		}
 	}, [form, form.formState.isSubmitSuccessful, form.reset, data]);
@@ -98,6 +100,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 			accesedServices: data.accesedServices || [],
 			canAccessToDocker: data.canAccessToDocker,
 			canAccessToAPI: data.canAccessToAPI,
+			canAccessToSSHKeys: data.canAccessToSSHKeys,
 		})
 			.then(async () => {
 				toast.success("Permissions updated");
@@ -270,6 +273,26 @@ export const AddUserPermissions = ({ userId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="canAccessToSSHKeys"
+							render={({ field }) => (
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<div className="space-y-0.5">
+										<FormLabel>Access to SSH Keys</FormLabel>
+										<FormDescription>
+											Allow to users to access to the SSH Keys section
+										</FormDescription>
+									</div>
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="accesedProjects"

diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx
@@ -106,6 +106,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:

diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx
@@ -109,6 +109,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:

diff --git a/apps/dokploy/components/layouts/settings-layout.tsx b/apps/dokploy/components/layouts/settings-layout.tsx
@@ -79,6 +79,16 @@ export const SettingsLayout = ({ children }: Props) => {
 									},
 								]
 							: []),
+						...(user?.canAccessToSSHKeys
+							? [
+									{
+										title: "SSH Keys",
+										label: "",
+										icon: KeyRound,
+										href: "/dashboard/settings/ssh-keys",
+									},
+								]
+							: []),
 					]}
 				/>
 			</div>

diff --git a/apps/dokploy/components/shared/code-editor.tsx b/apps/dokploy/components/shared/code-editor.tsx
@@ -3,13 +3,15 @@ import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
 	language?: "yaml" | "json" | "properties";
+	lineWrapping?: boolean;
 }
 
 export const CodeEditor = ({
@@ -36,6 +38,7 @@ export const CodeEditor = ({
 						: language === "json"
 							? json()
 							: StreamLanguage.define(properties),
+					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}
 				editable={!props.disabled}

diff --git a/apps/dokploy/drizzle/0030_little_kabuki.sql b/apps/dokploy/drizzle/0030_little_kabuki.sql
@@ -0,0 +1 @@
+ALTER TABLE "user" ADD COLUMN "canAccessToSSHKeys" boolean DEFAULT false NOT NULL;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE "user" ADD COLUMN "canAccessToSSHKeys" boolean DEFAULT false NOT NULL;