From c3e2b0d0f1e834fa64a21f6c87c6c19032aebc02 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Mon, 28 Jul 2025 01:12:43 -0600 Subject: [PATCH] feat(dashboard): enhance application and database forms with tooltips for better user guidance --- .../dashboard/project/add-application.tsx | 16 +- .../dashboard/project/add-database.tsx | 25 ++- .../settings/servers/handle-servers.tsx | 18 +- .../settings/servers/show-servers.tsx | 30 +-- .../servers/welcome-stripe/create-server.tsx | 14 +- .../servers/welcome-stripe/create-ssh-key.tsx | 199 +++++++++++------- biome.json | 3 +- 7 files changed, 180 insertions(+), 125 deletions(-) diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx index a6946df7d..137f75a51 100644 --- a/apps/dokploy/components/dashboard/project/add-application.tsx +++ b/apps/dokploy/components/dashboard/project/add-application.tsx @@ -220,7 +220,21 @@ export const AddApplication = ({ projectId, projectName }: Props) => { name="appName" render={({ field }) => ( - App Name + + App Name + + + + + + +

+ This will be the name of the Docker Swarm service +

+ + + + diff --git a/apps/dokploy/components/dashboard/project/add-database.tsx b/apps/dokploy/components/dashboard/project/add-database.tsx index 2e676c9b5..6b07baa81 100644 --- a/apps/dokploy/components/dashboard/project/add-database.tsx +++ b/apps/dokploy/components/dashboard/project/add-database.tsx @@ -1,5 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { AlertTriangle, Database } from "lucide-react"; +import { AlertTriangle, Database, HelpCircle } from "lucide-react"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; @@ -43,6 +43,12 @@ import { } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { Textarea } from "@/components/ui/textarea"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { slugify } from "@/lib/slug"; import { api } from "@/utils/api"; @@ -416,7 +422,22 @@ export const AddDatabase = ({ projectId, projectName }: Props) => { name="appName" render={({ field }) => ( - App Name + + App Name + + + + + + +

+ This will be the name of the Docker Swarm + service +

+ + + + diff --git a/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx index a2c9b50a6..1ff2f09dc 100644 --- a/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx +++ b/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx @@ -1,3 +1,11 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { PlusIcon } from "lucide-react"; +import Link from "next/link"; +import { useTranslation } from "next-i18next"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; +import { z } from "zod"; import { AlertBlock } from "@/components/shared/alert-block"; import { Button } from "@/components/ui/button"; import { @@ -30,14 +38,6 @@ import { } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { PlusIcon } from "lucide-react"; -import { useTranslation } from "next-i18next"; -import Link from "next/link"; -import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; const Schema = z.object({ name: z.string().min(1, { @@ -218,7 +218,7 @@ export const HandleServers = ({ serverId }: Props) => { {!canCreateMoreServers && ( - + You cannot create more servers,{" "} Please upgrade your plan diff --git a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx index d6465cf09..191aab9ce 100644 --- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx +++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx @@ -1,3 +1,9 @@ +import { format } from "date-fns"; +import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useTranslation } from "next-i18next"; +import { toast } from "sonner"; import { AlertBlock } from "@/components/shared/alert-block"; import { DialogAction } from "@/components/shared/dialog-action"; import { Badge } from "@/components/ui/badge"; @@ -27,12 +33,6 @@ import { TableRow, } from "@/components/ui/table"; import { api } from "@/utils/api"; -import { format } from "date-fns"; -import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react"; -import { useTranslation } from "next-i18next"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import { toast } from "sonner"; import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal"; import { TerminalModal } from "../web-server/terminal-modal"; import { ShowServerActions } from "./actions/show-server-actions"; @@ -115,24 +115,6 @@ export const ShowServers = () => { ) : (
- {!canCreateMoreServers && ( - -
- -
- You cannot create more servers,{" "} - - Please upgrade your plan - -
- -
- - )} -
diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx index 3a112af20..b895f385b 100644 --- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx +++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx @@ -1,3 +1,9 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import Link from "next/link"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; +import { z } from "zod"; import { AlertBlock } from "@/components/shared/alert-block"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; @@ -22,12 +28,6 @@ import { } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import Link from "next/link"; -import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; const Schema = z.object({ name: z.string().min(1, { @@ -108,7 +108,7 @@ export const CreateServer = ({ stepper }: Props) => {
{!canCreateMoreServers && ( - + You cannot create more servers,{" "} Please upgrade your plan diff --git a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx index d7ab5e329..ad386cc49 100644 --- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx +++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx @@ -1,18 +1,22 @@ +import copy from "copy-to-clipboard"; +import { CopyIcon, ExternalLinkIcon, Loader2 } from "lucide-react"; +import Link from "next/link"; +import { useEffect, useRef, useState } from "react"; +import { toast } from "sonner"; import { CodeEditor } from "@/components/shared/code-editor"; import { Card, CardContent } from "@/components/ui/card"; +import { Label } from "@/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { api } from "@/utils/api"; -import copy from "copy-to-clipboard"; -import { ExternalLinkIcon, Loader2 } from "lucide-react"; -import { CopyIcon } from "lucide-react"; -import Link from "next/link"; -import { useEffect, useRef } from "react"; -import { toast } from "sonner"; export const CreateSSHKey = () => { const { data, refetch } = api.sshKey.all.useQuery(); const generateMutation = api.sshKey.generate.useMutation(); const { mutateAsync, isLoading } = api.sshKey.create.useMutation(); const hasCreatedKey = useRef(false); + const [selectedOption, setSelectedOption] = useState<"manual" | "provider">( + "manual", + ); const cloudSSHKey = data?.find( (sshKey) => sshKey.name === "dokploy-cloud-ssh-key", @@ -60,89 +64,122 @@ export const CreateSSHKey = () => {
) : ( <> -
+

- You have two options to add SSH Keys to your server: + Choose how to add SSH Keys to your server:

-
    -
  • 1. Add The SSH Key to Server Manually
    • + {/* Radio button options */} +
    + { + setSelectedOption(value as "manual" | "provider"); + }} + className="grid gap-3" + > +
    + + +
    -
  • - 2. Add the public SSH Key when you create a server in your - preffered provider (Hostinger, Digital Ocean, Hetzner, etc){" "} -
    • -
- -
- - Option 1 - -
    -
  • - 1. Login to your server{" "} -
    • -
  • - 2. When you are logged in run the following command -
    - > ~/.ssh/authorized_keys`} - readOnly - className="font-mono opacity-60" - /> - -
    -
    • -
  • - 3. You're done, follow the next step to insert the details - of your server. -
    • -
+
+ + +
+
-
- - Option 2 - -
-
-
- Copy Public Key - + + {/* Content based on selected option */} + {selectedOption === "manual" && ( +
+ + Manual Setup Instructions + +
    +
  • + 1. Login to your server +
    • +
  • + 2. When you are logged in run the following command +
    + > ~/.ssh/authorized_keys`} + readOnly + className="font-mono opacity-60" + /> + +
    +
    • +
  • + 3. You're done, follow the next step to insert the + details of your server. +
    • +
+
+ )} + + {selectedOption === "provider" && ( +
+ + Provider Setup Instructions + +
+
+
+ Copy Public Key + +
+

+ Use this public key when creating a server in your + preferred provider (Hostinger, Digital Ocean, Hetzner, + etc.) +

+ + View Tutorial +
- - View Tutorial - -
+ )}
)} diff --git a/biome.json b/biome.json index 3309d3a86..a26024c86 100644 --- a/biome.json +++ b/biome.json @@ -19,7 +19,8 @@ }, "complexity": { "noUselessCatch": "off", - "noBannedTypes": "off" + "noBannedTypes": "off", + "noUselessFragments": "off" }, "correctness": { "useExhaustiveDependencies": "off",