Skip to content

Commit 7c17cfb

Browse files
SiumauricioSiumauricio
committed
refactor: improve button structure and tooltip integration across dashboard components
- Refactored button components in the dashboard to enhance structure and readability. - Integrated tooltips directly within button elements for better user experience. - Updated tooltip descriptions for clarity across various database actions (Deploy, Reload, Start, Stop) for Redis, MySQL, PostgreSQL, and MariaDB. - Ensured consistent formatting and improved code maintainability.
1 parent c6a2887 commit 7c17cfb

File tree

6 files changed

+988
-914
lines changed

6 files changed

+988
-914
lines changed

‎apps/dokploy/components/dashboard/application/general/show.tsx‎

Lines changed: 103 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -76,25 +76,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
7676
});
7777
}}
7878
>
79-
<Tooltip>
80-
<TooltipTrigger asChild>
81-
<Button
82-
variant="default"
83-
isLoading={data?.applicationStatus === "running"}
84-
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
85-
>
86-
<Rocket className="size-4 mr-1" />
87-
Deploy
88-
</Button>
89-
</TooltipTrigger>
90-
<TooltipPrimitive.Portal>
91-
<TooltipContent sideOffset={5} className="z-[60]">
92-
<p>
93-
Downloads the source code and performs a complete build
94-
</p>
95-
</TooltipContent>
96-
</TooltipPrimitive.Portal>
97-
</Tooltip>
79+
<Button
80+
variant="default"
81+
isLoading={data?.applicationStatus === "running"}
82+
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
83+
>
84+
<Tooltip>
85+
<TooltipTrigger asChild>
86+
<div className="flex items-center">
87+
<Rocket className="size-4 mr-1" />
88+
Deploy
89+
</div>
90+
</TooltipTrigger>
91+
<TooltipPrimitive.Portal>
92+
<TooltipContent sideOffset={5} className="z-[60]">
93+
<p>
94+
Downloads the source code and performs a complete build
95+
</p>
96+
</TooltipContent>
97+
</TooltipPrimitive.Portal>
98+
</Tooltip>
99+
</Button>
98100
</DialogAction>
99101
<DialogAction
100102
title="Reload Application"
@@ -114,23 +116,25 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
114116
});
115117
}}
116118
>
117-
<Tooltip>
118-
<TooltipTrigger asChild>
119-
<Button
120-
variant="secondary"
121-
isLoading={isReloading}
122-
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
123-
>
124-
<RefreshCcw className="size-4 mr-1" />
125-
Reload
126-
</Button>
127-
</TooltipTrigger>
128-
<TooltipPrimitive.Portal>
129-
<TooltipContent sideOffset={5} className="z-[60]">
130-
<p>Reload the application without rebuilding it</p>
131-
</TooltipContent>
132-
</TooltipPrimitive.Portal>
133-
</Tooltip>
119+
<Button
120+
variant="secondary"
121+
isLoading={isReloading}
122+
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
123+
>
124+
<Tooltip>
125+
<TooltipTrigger asChild>
126+
<div className="flex items-center">
127+
<RefreshCcw className="size-4 mr-1" />
128+
Reload
129+
</div>
130+
</TooltipTrigger>
131+
<TooltipPrimitive.Portal>
132+
<TooltipContent sideOffset={5} className="z-[60]">
133+
<p>Reload the application without rebuilding it</p>
134+
</TooltipContent>
135+
</TooltipPrimitive.Portal>
136+
</Tooltip>
137+
</Button>
134138
</DialogAction>
135139
<DialogAction
136140
title="Rebuild Application"
@@ -149,25 +153,28 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
149153
});
150154
}}
151155
>
152-
<Tooltip>
153-
<TooltipTrigger asChild>
154-
<Button
155-
variant="secondary"
156-
isLoading={data?.applicationStatus === "running"}
157-
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
158-
>
159-
<Hammer className="size-4 mr-1" />
160-
Rebuild
161-
</Button>
162-
</TooltipTrigger>
163-
<TooltipPrimitive.Portal>
164-
<TooltipContent sideOffset={5} className="z-[60]">
165-
<p>
166-
Only rebuilds the application without downloading new code
167-
</p>
168-
</TooltipContent>
169-
</TooltipPrimitive.Portal>
170-
</Tooltip>
156+
<Button
157+
variant="secondary"
158+
isLoading={data?.applicationStatus === "running"}
159+
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
160+
>
161+
<Tooltip>
162+
<TooltipTrigger asChild>
163+
<div className="flex items-center">
164+
<Hammer className="size-4 mr-1" />
165+
Rebuild
166+
</div>
167+
</TooltipTrigger>
168+
<TooltipPrimitive.Portal>
169+
<TooltipContent sideOffset={5} className="z-[60]">
170+
<p>
171+
Only rebuilds the application without downloading new
172+
code
173+
</p>
174+
</TooltipContent>
175+
</TooltipPrimitive.Portal>
176+
</Tooltip>
177+
</Button>
171178
</DialogAction>
172179

173180
{data?.applicationStatus === "idle" ? (
@@ -188,26 +195,28 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
188195
});
189196
}}
190197
>
191-
<Tooltip>
192-
<TooltipTrigger asChild>
193-
<Button
194-
variant="secondary"
195-
isLoading={isStarting}
196-
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
197-
>
198-
<CheckCircle2 className="size-4 mr-1" />
199-
Start
200-
</Button>
201-
</TooltipTrigger>
202-
<TooltipPrimitive.Portal>
203-
<TooltipContent sideOffset={5} className="z-[60]">
204-
<p>
205-
Start the application (requires a previous successful
206-
build)
207-
</p>
208-
</TooltipContent>
209-
</TooltipPrimitive.Portal>
210-
</Tooltip>
198+
<Button
199+
variant="secondary"
200+
isLoading={isStarting}
201+
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
202+
>
203+
<Tooltip>
204+
<TooltipTrigger asChild>
205+
<div className="flex items-center">
206+
<CheckCircle2 className="size-4 mr-1" />
207+
Start
208+
</div>
209+
</TooltipTrigger>
210+
<TooltipPrimitive.Portal>
211+
<TooltipContent sideOffset={5} className="z-[60]">
212+
<p>
213+
Start the application (requires a previous successful
214+
build)
215+
</p>
216+
</TooltipContent>
217+
</TooltipPrimitive.Portal>
218+
</Tooltip>
219+
</Button>
211220
</DialogAction>
212221
) : (
213222
<DialogAction
@@ -226,23 +235,25 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
226235
});
227236
}}
228237
>
229-
<Tooltip>
230-
<TooltipTrigger asChild>
231-
<Button
232-
variant="destructive"
233-
isLoading={isStopping}
234-
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
235-
>
236-
<Ban className="size-4 mr-1" />
237-
Stop
238-
</Button>
239-
</TooltipTrigger>
240-
<TooltipPrimitive.Portal>
241-
<TooltipContent sideOffset={5} className="z-[60]">
242-
<p>Stop the currently running application</p>
243-
</TooltipContent>
244-
</TooltipPrimitive.Portal>
245-
</Tooltip>
238+
<Button
239+
variant="destructive"
240+
isLoading={isStopping}
241+
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
242+
>
243+
<Tooltip>
244+
<TooltipTrigger asChild>
245+
<div className="flex items-center">
246+
<Ban className="size-4 mr-1" />
247+
Stop
248+
</div>
249+
</TooltipTrigger>
250+
<TooltipPrimitive.Portal>
251+
<TooltipContent sideOffset={5} className="z-[60]">
252+
<p>Stop the currently running application</p>
253+
</TooltipContent>
254+
</TooltipPrimitive.Portal>
255+
</Tooltip>
256+
</Button>
246257
</DialogAction>
247258
)}
248259
</TooltipProvider>

0 commit comments

Comments
 (0)