Skip to content

Commit 4e9630e

Browse files
SiumauricioSiumauricio
authored
Merge pull request #2256 from Dokploy/feat/enhancements-cloud-version-ui
feat(dashboard): enhance application and database forms with tooltips…
2 parents 11d5843 + c3e2b0d commit 4e9630e

File tree

7 files changed

+180
-125
lines changed

7 files changed

+180
-125
lines changed

‎apps/dokploy/components/dashboard/project/add-application.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,21 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
220220
name="appName"
221221
render={({ field }) => (
222222
<FormItem>
223-
<FormLabel>App Name</FormLabel>
223+
<FormLabel className="flex items-center gap-2">
224+
App Name
225+
<TooltipProvider delayDuration={0}>
226+
<Tooltip>
227+
<TooltipTrigger asChild>
228+
<HelpCircle className="size-4 text-muted-foreground" />
229+
</TooltipTrigger>
230+
<TooltipContent side="right">
231+
<p>
232+
This will be the name of the Docker Swarm service
233+
</p>
234+
</TooltipContent>
235+
</Tooltip>
236+
</TooltipProvider>
237+
</FormLabel>
224238
<FormControl>
225239
<Input placeholder="my-app" {...field} />
226240
</FormControl>

‎apps/dokploy/components/dashboard/project/add-database.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { zodResolver } from "@hookform/resolvers/zod";
2-
import { AlertTriangle, Database } from "lucide-react";
2+
import { AlertTriangle, Database, HelpCircle } from "lucide-react";
33
import { useState } from "react";
44
import { useForm } from "react-hook-form";
55
import { toast } from "sonner";
@@ -43,6 +43,12 @@ import {
4343
} from "@/components/ui/select";
4444
import { Switch } from "@/components/ui/switch";
4545
import { Textarea } from "@/components/ui/textarea";
46+
import {
47+
Tooltip,
48+
TooltipContent,
49+
TooltipProvider,
50+
TooltipTrigger,
51+
} from "@/components/ui/tooltip";
4652
import { slugify } from "@/lib/slug";
4753
import { api } from "@/utils/api";
4854

@@ -416,7 +422,22 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
416422
name="appName"
417423
render={({ field }) => (
418424
<FormItem>
419-
<FormLabel>App Name</FormLabel>
425+
<FormLabel className="flex items-center gap-2">
426+
App Name
427+
<TooltipProvider delayDuration={0}>
428+
<Tooltip>
429+
<TooltipTrigger asChild>
430+
<HelpCircle className="size-4 text-muted-foreground" />
431+
</TooltipTrigger>
432+
<TooltipContent side="right">
433+
<p>
434+
This will be the name of the Docker Swarm
435+
service
436+
</p>
437+
</TooltipContent>
438+
</Tooltip>
439+
</TooltipProvider>
440+
</FormLabel>
420441
<FormControl>
421442
<Input placeholder="my-app" {...field} />
422443
</FormControl>

‎apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
import { zodResolver } from "@hookform/resolvers/zod";
2+
import { PlusIcon } from "lucide-react";
3+
import Link from "next/link";
4+
import { useTranslation } from "next-i18next";
5+
import { useEffect, useState } from "react";
6+
import { useForm } from "react-hook-form";
7+
import { toast } from "sonner";
8+
import { z } from "zod";
19
import { AlertBlock } from "@/components/shared/alert-block";
210
import { Button } from "@/components/ui/button";
311
import {
@@ -30,14 +38,6 @@ import {
3038
} from "@/components/ui/select";
3139
import { Textarea } from "@/components/ui/textarea";
3240
import { api } from "@/utils/api";
33-
import { zodResolver } from "@hookform/resolvers/zod";
34-
import { PlusIcon } from "lucide-react";
35-
import { useTranslation } from "next-i18next";
36-
import Link from "next/link";
37-
import { useEffect, useState } from "react";
38-
import { useForm } from "react-hook-form";
39-
import { toast } from "sonner";
40-
import { z } from "zod";
4141

4242
const Schema = z.object({
4343
name: z.string().min(1, {
@@ -218,7 +218,7 @@ export const HandleServers = ({ serverId }: Props) => {
218218
</AlertBlock>
219219
</div>
220220
{!canCreateMoreServers && (
221-
<AlertBlock type="warning">
221+
<AlertBlock type="warning" className="mt-4">
222222
You cannot create more servers,{" "}
223223
<Link href="/dashboard/settings/billing" className="text-primary">
224224
Please upgrade your plan

‎apps/dokploy/components/dashboard/settings/servers/show-servers.tsx‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { format } from "date-fns";
2+
import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react";
3+
import Link from "next/link";
4+
import { useRouter } from "next/router";
5+
import { useTranslation } from "next-i18next";
6+
import { toast } from "sonner";
17
import { AlertBlock } from "@/components/shared/alert-block";
28
import { DialogAction } from "@/components/shared/dialog-action";
39
import { Badge } from "@/components/ui/badge";
@@ -27,12 +33,6 @@ import {
2733
TableRow,
2834
} from "@/components/ui/table";
2935
import { api } from "@/utils/api";
30-
import { format } from "date-fns";
31-
import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react";
32-
import { useTranslation } from "next-i18next";
33-
import Link from "next/link";
34-
import { useRouter } from "next/router";
35-
import { toast } from "sonner";
3636
import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
3737
import { TerminalModal } from "../web-server/terminal-modal";
3838
import { ShowServerActions } from "./actions/show-server-actions";
@@ -115,24 +115,6 @@ export const ShowServers = () => {
115115
</div>
116116
) : (
117117
<div className="flex flex-col gap-4 min-h-[25vh]">
118-
{!canCreateMoreServers && (
119-
<AlertBlock type="warning">
120-
<div className="flex flex-row items-center gap-3 justify-center">
121-
<span>
122-
<div>
123-
You cannot create more servers,{" "}
124-
<Link
125-
href="/dashboard/settings/billing"
126-
className="text-primary"
127-
>
128-
Please upgrade your plan
129-
</Link>
130-
</div>
131-
</span>
132-
</div>
133-
</AlertBlock>
134-
)}
135-
136118
<Table>
137119
<TableCaption>
138120
<div className="flex flex-col gap-4">

‎apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { zodResolver } from "@hookform/resolvers/zod";
2+
import Link from "next/link";
3+
import { useEffect, useState } from "react";
4+
import { useForm } from "react-hook-form";
5+
import { toast } from "sonner";
6+
import { z } from "zod";
17
import { AlertBlock } from "@/components/shared/alert-block";
28
import { Button } from "@/components/ui/button";
39
import { Card, CardContent } from "@/components/ui/card";
@@ -22,12 +28,6 @@ import {
2228
} from "@/components/ui/select";
2329
import { Textarea } from "@/components/ui/textarea";
2430
import { api } from "@/utils/api";
25-
import { zodResolver } from "@hookform/resolvers/zod";
26-
import Link from "next/link";
27-
import { useEffect, useState } from "react";
28-
import { useForm } from "react-hook-form";
29-
import { toast } from "sonner";
30-
import { z } from "zod";
3131

3232
const Schema = z.object({
3333
name: z.string().min(1, {
@@ -108,7 +108,7 @@ export const CreateServer = ({ stepper }: Props) => {
108108
<Card className="bg-background flex flex-col gap-4">
109109
<div className="flex flex-col gap-2 pt-5 px-4">
110110
{!canCreateMoreServers && (
111-
<AlertBlock type="warning">
111+
<AlertBlock type="warning" className="mt-2">
112112
You cannot create more servers,{" "}
113113
<Link href="/dashboard/settings/billing" className="text-primary">
114114
Please upgrade your plan

0 commit comments

Comments
 (0)