Skip to content

Commit f78dc55

Browse files
SiumauricioSiumauricio
authored
Merge pull request #2244 from jhon2c/feat/improve-server-ux
feat(ux): Improve UX Based on Community Feedback
2 parents 5812b12 + d561068 commit f78dc55

File tree

6 files changed

+291
-259
lines changed

6 files changed

+291
-259
lines changed

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

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { zodResolver } from "@hookform/resolvers/zod";
2+
import { Folder, HelpCircle } from "lucide-react";
3+
import { 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 {
@@ -37,12 +43,6 @@ import {
3743
} from "@/components/ui/tooltip";
3844
import { slugify } from "@/lib/slug";
3945
import { api } from "@/utils/api";
40-
import { zodResolver } from "@hookform/resolvers/zod";
41-
import { Folder, HelpCircle } from "lucide-react";
42-
import { useState } from "react";
43-
import { useForm } from "react-hook-form";
44-
import { toast } from "sonner";
45-
import { z } from "zod";
4646

4747
const AddTemplateSchema = z.object({
4848
name: z.string().min(1, {
@@ -75,6 +75,8 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
7575
const slug = slugify(projectName);
7676
const { data: servers } = api.server.withSSHKey.useQuery();
7777

78+
const hasServers = servers && servers.length > 0;
79+
7880
const { mutateAsync, isLoading, error, isError } =
7981
api.application.create.useMutation();
8082

@@ -155,62 +157,64 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
155157
</FormItem>
156158
)}
157159
/>
158-
<FormField
159-
control={form.control}
160-
name="serverId"
161-
render={({ field }) => (
162-
<FormItem>
163-
<TooltipProvider delayDuration={0}>
164-
<Tooltip>
165-
<TooltipTrigger asChild>
166-
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
167-
Select a Server {!isCloud ? "(Optional)" : ""}
168-
<HelpCircle className="size-4 text-muted-foreground" />
169-
</FormLabel>
170-
</TooltipTrigger>
171-
<TooltipContent
172-
className="z-[999] w-[300px]"
173-
align="start"
174-
side="top"
175-
>
176-
<span>
177-
If no server is selected, the application will be
178-
deployed on the server where the user is logged in.
179-
</span>
180-
</TooltipContent>
181-
</Tooltip>
182-
</TooltipProvider>
160+
{hasServers && (
161+
<FormField
162+
control={form.control}
163+
name="serverId"
164+
render={({ field }) => (
165+
<FormItem>
166+
<TooltipProvider delayDuration={0}>
167+
<Tooltip>
168+
<TooltipTrigger asChild>
169+
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
170+
Select a Server {!isCloud ? "(Optional)" : ""}
171+
<HelpCircle className="size-4 text-muted-foreground" />
172+
</FormLabel>
173+
</TooltipTrigger>
174+
<TooltipContent
175+
className="z-[999] w-[300px]"
176+
align="start"
177+
side="top"
178+
>
179+
<span>
180+
If no server is selected, the application will be
181+
deployed on the server where the user is logged in.
182+
</span>
183+
</TooltipContent>
184+
</Tooltip>
185+
</TooltipProvider>
183186

184-
<Select
185-
onValueChange={field.onChange}
186-
defaultValue={field.value}
187-
>
188-
<SelectTrigger>
189-
<SelectValue placeholder="Select a Server" />
190-
</SelectTrigger>
191-
<SelectContent>
192-
<SelectGroup>
193-
{servers?.map((server) => (
194-
<SelectItem
195-
key={server.serverId}
196-
value={server.serverId}
197-
>
198-
<span className="flex items-center gap-2 justify-between w-full">
199-
<span>{server.name}</span>
200-
<span className="text-muted-foreground text-xs self-center">
201-
{server.ipAddress}
187+
<Select
188+
onValueChange={field.onChange}
189+
defaultValue={field.value}
190+
>
191+
<SelectTrigger>
192+
<SelectValue placeholder="Select a Server" />
193+
</SelectTrigger>
194+
<SelectContent>
195+
<SelectGroup>
196+
{servers?.map((server) => (
197+
<SelectItem
198+
key={server.serverId}
199+
value={server.serverId}
200+
>
201+
<span className="flex items-center gap-2 justify-between w-full">
202+
<span>{server.name}</span>
203+
<span className="text-muted-foreground text-xs self-center">
204+
{server.ipAddress}
205+
</span>
202206
</span>
203-
</span>
204-
</SelectItem>
205-
))}
206-
<SelectLabel>Servers ({servers?.length})</SelectLabel>
207-
</SelectGroup>
208-
</SelectContent>
209-
</Select>
210-
<FormMessage />
211-
</FormItem>
212-
)}
213-
/>
207+
</SelectItem>
208+
))}
209+
<SelectLabel>Servers ({servers?.length})</SelectLabel>
210+
</SelectGroup>
211+
</SelectContent>
212+
</Select>
213+
<FormMessage />
214+
</FormItem>
215+
)}
216+
/>
217+
)}
214218
<FormField
215219
control={form.control}
216220
name="appName"

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

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { zodResolver } from "@hookform/resolvers/zod";
2+
import { CircuitBoard, HelpCircle } from "lucide-react";
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 {
@@ -37,12 +43,6 @@ import {
3743
} from "@/components/ui/tooltip";
3844
import { slugify } from "@/lib/slug";
3945
import { api } from "@/utils/api";
40-
import { zodResolver } from "@hookform/resolvers/zod";
41-
import { CircuitBoard, HelpCircle } from "lucide-react";
42-
import { useEffect, useState } from "react";
43-
import { useForm } from "react-hook-form";
44-
import { toast } from "sonner";
45-
import { z } from "zod";
4646

4747
const AddComposeSchema = z.object({
4848
composeType: z.enum(["docker-compose", "stack"]).optional(),
@@ -78,6 +78,8 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
7878
const { mutateAsync, isLoading, error, isError } =
7979
api.compose.create.useMutation();
8080

81+
const hasServers = servers && servers.length > 0;
82+
8183
const form = useForm<AddCompose>({
8284
defaultValues: {
8385
name: "",
@@ -163,62 +165,64 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
163165
)}
164166
/>
165167
</div>
166-
<FormField
167-
control={form.control}
168-
name="serverId"
169-
render={({ field }) => (
170-
<FormItem>
171-
<TooltipProvider delayDuration={0}>
172-
<Tooltip>
173-
<TooltipTrigger asChild>
174-
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
175-
Select a Server {!isCloud ? "(Optional)" : ""}
176-
<HelpCircle className="size-4 text-muted-foreground" />
177-
</FormLabel>
178-
</TooltipTrigger>
179-
<TooltipContent
180-
className="z-[999] w-[300px]"
181-
align="start"
182-
side="top"
183-
>
184-
<span>
185-
If no server is selected, the application will be
186-
deployed on the server where the user is logged in.
187-
</span>
188-
</TooltipContent>
189-
</Tooltip>
190-
</TooltipProvider>
168+
{hasServers && (
169+
<FormField
170+
control={form.control}
171+
name="serverId"
172+
render={({ field }) => (
173+
<FormItem>
174+
<TooltipProvider delayDuration={0}>
175+
<Tooltip>
176+
<TooltipTrigger asChild>
177+
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
178+
Select a Server {!isCloud ? "(Optional)" : ""}
179+
<HelpCircle className="size-4 text-muted-foreground" />
180+
</FormLabel>
181+
</TooltipTrigger>
182+
<TooltipContent
183+
className="z-[999] w-[300px]"
184+
align="start"
185+
side="top"
186+
>
187+
<span>
188+
If no server is selected, the application will be
189+
deployed on the server where the user is logged in.
190+
</span>
191+
</TooltipContent>
192+
</Tooltip>
193+
</TooltipProvider>
191194

192-
<Select
193-
onValueChange={field.onChange}
194-
defaultValue={field.value}
195-
>
196-
<SelectTrigger>
197-
<SelectValue placeholder="Select a Server" />
198-
</SelectTrigger>
199-
<SelectContent>
200-
<SelectGroup>
201-
{servers?.map((server) => (
202-
<SelectItem
203-
key={server.serverId}
204-
value={server.serverId}
205-
>
206-
<span className="flex items-center gap-2 justify-between w-full">
207-
<span>{server.name}</span>
208-
<span className="text-muted-foreground text-xs self-center">
209-
{server.ipAddress}
195+
<Select
196+
onValueChange={field.onChange}
197+
defaultValue={field.value}
198+
>
199+
<SelectTrigger>
200+
<SelectValue placeholder="Select a Server" />
201+
</SelectTrigger>
202+
<SelectContent>
203+
<SelectGroup>
204+
{servers?.map((server) => (
205+
<SelectItem
206+
key={server.serverId}
207+
value={server.serverId}
208+
>
209+
<span className="flex items-center gap-2 justify-between w-full">
210+
<span>{server.name}</span>
211+
<span className="text-muted-foreground text-xs self-center">
212+
{server.ipAddress}
213+
</span>
210214
</span>
211-
</span>
212-
</SelectItem>
213-
))}
214-
<SelectLabel>Servers ({servers?.length})</SelectLabel>
215-
</SelectGroup>
216-
</SelectContent>
217-
</Select>
218-
<FormMessage />
219-
</FormItem>
220-
)}
221-
/>
215+
</SelectItem>
216+
))}
217+
<SelectLabel>Servers ({servers?.length})</SelectLabel>
218+
</SelectGroup>
219+
</SelectContent>
220+
</Select>
221+
<FormMessage />
222+
</FormItem>
223+
)}
224+
/>
225+
)}
222226
<FormField
223227
control={form.control}
224228
name="appName"

0 commit comments

Comments
 (0)