Skip to content

Commit bb5c6be

Browse files
SiumauricioSiumauricio
committed
Add conditional rendering for watchPaths field based on triggerType in SaveGithubProvider and SaveGithubProviderCompose components.
1 parent 144d480 commit bb5c6be

File tree

2 files changed

+156
-146
lines changed

2 files changed

+156
-146
lines changed

‎apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx‎

Lines changed: 79 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
9292

9393
const repository = form.watch("repository");
9494
const githubId = form.watch("githubId");
95+
const triggerType = form.watch("triggerType");
9596

9697
const { data: repositories, isLoading: isLoadingRepositories } =
9798
api.github.getGithubRepositories.useQuery(
@@ -428,85 +429,88 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
428429
</FormItem>
429430
)}
430431
/>
431-
<FormField
432-
control={form.control}
433-
name="watchPaths"
434-
render={({ field }) => (
435-
<FormItem className="md:col-span-2">
436-
<div className="flex items-center gap-2">
437-
<FormLabel>Watch Paths</FormLabel>
438-
<TooltipProvider>
439-
<Tooltip>
440-
<TooltipTrigger asChild>
441-
<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
442-
</TooltipTrigger>
443-
<TooltipContent>
444-
<p>
445-
Add paths to watch for changes. When files in these
446-
paths change, a new deployment will be triggered.
447-
</p>
448-
</TooltipContent>
449-
</Tooltip>
450-
</TooltipProvider>
451-
</div>
452-
<div className="flex flex-wrap gap-2 mb-2">
453-
{field.value?.map((path, index) => (
454-
<Badge
455-
key={index}
456-
variant="secondary"
457-
className="flex items-center gap-1"
458-
>
459-
{path}
460-
<X
461-
className="size-3 cursor-pointer hover:text-destructive"
462-
onClick={() => {
463-
const newPaths = [...(field.value || [])];
464-
newPaths.splice(index, 1);
465-
field.onChange(newPaths);
432+
{triggerType === "push" && (
433+
<FormField
434+
control={form.control}
435+
name="watchPaths"
436+
render={({ field }) => (
437+
<FormItem className="md:col-span-2">
438+
<div className="flex items-center gap-2">
439+
<FormLabel>Watch Paths</FormLabel>
440+
<TooltipProvider>
441+
<Tooltip>
442+
<TooltipTrigger asChild>
443+
<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
444+
</TooltipTrigger>
445+
<TooltipContent>
446+
<p>
447+
Add paths to watch for changes. When files in
448+
these paths change, a new deployment will be
449+
triggered.
450+
</p>
451+
</TooltipContent>
452+
</Tooltip>
453+
</TooltipProvider>
454+
</div>
455+
<div className="flex flex-wrap gap-2 mb-2">
456+
{field.value?.map((path, index) => (
457+
<Badge
458+
key={index}
459+
variant="secondary"
460+
className="flex items-center gap-1"
461+
>
462+
{path}
463+
<X
464+
className="size-3 cursor-pointer hover:text-destructive"
465+
onClick={() => {
466+
const newPaths = [...(field.value || [])];
467+
newPaths.splice(index, 1);
468+
field.onChange(newPaths);
469+
}}
470+
/>
471+
</Badge>
472+
))}
473+
</div>
474+
<div className="flex gap-2">
475+
<FormControl>
476+
<Input
477+
placeholder="Enter a path to watch (e.g., src/*, dist/*)"
478+
onKeyDown={(e) => {
479+
if (e.key === "Enter") {
480+
e.preventDefault();
481+
const input = e.currentTarget;
482+
const path = input.value.trim();
483+
if (path) {
484+
field.onChange([...(field.value || []), path]);
485+
input.value = "";
486+
}
487+
}
466488
}}
467489
/>
468-
</Badge>
469-
))}
470-
</div>
471-
<div className="flex gap-2">
472-
<FormControl>
473-
<Input
474-
placeholder="Enter a path to watch (e.g., src/*, dist/*)"
475-
onKeyDown={(e) => {
476-
if (e.key === "Enter") {
477-
e.preventDefault();
478-
const input = e.currentTarget;
479-
const path = input.value.trim();
480-
if (path) {
481-
field.onChange([...(field.value || []), path]);
482-
input.value = "";
483-
}
490+
</FormControl>
491+
<Button
492+
type="button"
493+
variant="outline"
494+
size="icon"
495+
onClick={() => {
496+
const input = document.querySelector(
497+
'input[placeholder*="Enter a path"]',
498+
) as HTMLInputElement;
499+
const path = input.value.trim();
500+
if (path) {
501+
field.onChange([...(field.value || []), path]);
502+
input.value = "";
484503
}
485504
}}
486-
/>
487-
</FormControl>
488-
<Button
489-
type="button"
490-
variant="outline"
491-
size="icon"
492-
onClick={() => {
493-
const input = document.querySelector(
494-
'input[placeholder*="Enter a path"]',
495-
) as HTMLInputElement;
496-
const path = input.value.trim();
497-
if (path) {
498-
field.onChange([...(field.value || []), path]);
499-
input.value = "";
500-
}
501-
}}
502-
>
503-
<Plus className="size-4" />
504-
</Button>
505-
</div>
506-
<FormMessage />
507-
</FormItem>
508-
)}
509-
/>
505+
>
506+
<Plus className="size-4" />
507+
</Button>
508+
</div>
509+
<FormMessage />
510+
</FormItem>
511+
)}
512+
/>
513+
)}
510514

511515
<FormField
512516
control={form.control}

‎apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx‎

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
9393

9494
const repository = form.watch("repository");
9595
const githubId = form.watch("githubId");
96-
96+
const triggerType = form.watch("triggerType");
9797
const { data: repositories, isLoading: isLoadingRepositories } =
9898
api.github.getGithubRepositories.useQuery(
9999
{
@@ -431,84 +431,90 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
431431
</FormItem>
432432
)}
433433
/>
434-
<FormField
435-
control={form.control}
436-
name="watchPaths"
437-
render={({ field }) => (
438-
<FormItem className="md:col-span-2">
439-
<div className="flex items-center gap-2">
440-
<FormLabel>Watch Paths</FormLabel>
441-
<TooltipProvider>
442-
<Tooltip>
443-
<TooltipTrigger>
444-
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
445-
?
446-
</div>
447-
</TooltipTrigger>
448-
<TooltipContent>
449-
<p>
450-
Add paths to watch for changes. When files in these
451-
paths change, a new deployment will be triggered.
452-
</p>
453-
</TooltipContent>
454-
</Tooltip>
455-
</TooltipProvider>
456-
</div>
457-
<div className="flex flex-wrap gap-2 mb-2">
458-
{field.value?.map((path, index) => (
459-
<Badge key={index} variant="secondary">
460-
{path}
461-
<X
462-
className="ml-1 size-3 cursor-pointer"
463-
onClick={() => {
464-
const newPaths = [...(field.value || [])];
465-
newPaths.splice(index, 1);
466-
form.setValue("watchPaths", newPaths);
434+
{triggerType === "push" && (
435+
<FormField
436+
control={form.control}
437+
name="watchPaths"
438+
render={({ field }) => (
439+
<FormItem className="md:col-span-2">
440+
<div className="flex items-center gap-2">
441+
<FormLabel>Watch Paths</FormLabel>
442+
<TooltipProvider>
443+
<Tooltip>
444+
<TooltipTrigger>
445+
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
446+
?
447+
</div>
448+
</TooltipTrigger>
449+
<TooltipContent>
450+
<p>
451+
Add paths to watch for changes. When files in
452+
these paths change, a new deployment will be
453+
triggered.
454+
</p>
455+
</TooltipContent>
456+
</Tooltip>
457+
</TooltipProvider>
458+
</div>
459+
<div className="flex flex-wrap gap-2 mb-2">
460+
{field.value?.map((path, index) => (
461+
<Badge key={index} variant="secondary">
462+
{path}
463+
<X
464+
className="ml-1 size-3 cursor-pointer"
465+
onClick={() => {
466+
const newPaths = [...(field.value || [])];
467+
newPaths.splice(index, 1);
468+
form.setValue("watchPaths", newPaths);
469+
}}
470+
/>
471+
</Badge>
472+
))}
473+
</div>
474+
<FormControl>
475+
<div className="flex gap-2">
476+
<Input
477+
placeholder="Enter a path to watch (e.g., src/*, dist/*)"
478+
onKeyDown={(e) => {
479+
if (e.key === "Enter") {
480+
e.preventDefault();
481+
const input = e.currentTarget;
482+
const value = input.value.trim();
483+
if (value) {
484+
const newPaths = [
485+
...(field.value || []),
486+
value,
487+
];
488+
form.setValue("watchPaths", newPaths);
489+
input.value = "";
490+
}
491+
}
467492
}}
468493
/>
469-
</Badge>
470-
))}
471-
</div>
472-
<FormControl>
473-
<div className="flex gap-2">
474-
<Input
475-
placeholder="Enter a path to watch (e.g., src/*, dist/*)"
476-
onKeyDown={(e) => {
477-
if (e.key === "Enter") {
478-
e.preventDefault();
479-
const input = e.currentTarget;
494+
<Button
495+
type="button"
496+
variant="secondary"
497+
onClick={() => {
498+
const input = document.querySelector(
499+
'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
500+
) as HTMLInputElement;
480501
const value = input.value.trim();
481502
if (value) {
482503
const newPaths = [...(field.value || []), value];
483504
form.setValue("watchPaths", newPaths);
484505
input.value = "";
485506
}
486-
}
487-
}}
488-
/>
489-
<Button
490-
type="button"
491-
variant="secondary"
492-
onClick={() => {
493-
const input = document.querySelector(
494-
'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
495-
) as HTMLInputElement;
496-
const value = input.value.trim();
497-
if (value) {
498-
const newPaths = [...(field.value || []), value];
499-
form.setValue("watchPaths", newPaths);
500-
input.value = "";
501-
}
502-
}}
503-
>
504-
Add
505-
</Button>
506-
</div>
507-
</FormControl>
508-
<FormMessage />
509-
</FormItem>
510-
)}
511-
/>
507+
}}
508+
>
509+
Add
510+
</Button>
511+
</div>
512+
</FormControl>
513+
<FormMessage />
514+
</FormItem>
515+
)}
516+
/>
517+
)}
512518
<FormField
513519
control={form.control}
514520
name="enableSubmodules"

0 commit comments

Comments
 (0)