From bb5c6bebffea6413086d581c52c75ae7500b0423 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 26 Apr 2025 22:20:37 -0600
Subject: [PATCH] Add conditional rendering for watchPaths field based on
 triggerType in SaveGithubProvider and SaveGithubProviderCompose components.

---
 .../general/generic/save-github-provider.tsx  | 154 +++++++++---------
 .../generic/save-github-provider-compose.tsx  | 148 +++++++++--------
 2 files changed, 156 insertions(+), 146 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
index e1fa90bf..0bf1ac8a 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
@@ -92,6 +92,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
+	const triggerType = form.watch("triggerType");
 
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
@@ -428,85 +429,88 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge
-												key={index}
-												variant="secondary"
-												className="flex items-center gap-1"
-											>
-												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														field.onChange(newPaths);
+						{triggerType === "push" && (
+							<FormField
+								control={form.control}
+								name="watchPaths"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<div className="flex items-center gap-2">
+											<FormLabel>Watch Paths</FormLabel>
+											<TooltipProvider>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+													</TooltipTrigger>
+													<TooltipContent>
+														<p>
+															Add paths to watch for changes. When files in
+															these paths change, a new deployment will be
+															triggered.
+														</p>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</div>
+										<div className="flex flex-wrap gap-2 mb-2">
+											{field.value?.map((path, index) => (
+												<Badge
+													key={index}
+													variant="secondary"
+													className="flex items-center gap-1"
+												>
+													{path}
+													<X
+														className="size-3 cursor-pointer hover:text-destructive"
+														onClick={() => {
+															const newPaths = [...(field.value || [])];
+															newPaths.splice(index, 1);
+															field.onChange(newPaths);
+														}}
+													/>
+												</Badge>
+											))}
+										</div>
+										<div className="flex gap-2">
+											<FormControl>
+												<Input
+													placeholder="Enter a path to watch (e.g., src/*, dist/*)"
+													onKeyDown={(e) => {
+														if (e.key === "Enter") {
+															e.preventDefault();
+															const input = e.currentTarget;
+															const path = input.value.trim();
+															if (path) {
+																field.onChange([...(field.value || []), path]);
+																input.value = "";
+															}
+														}
 													}}
 												/>
-											</Badge>
-										))}
-									</div>
-									<div className="flex gap-2">
-										<FormControl>
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const path = input.value.trim();
-														if (path) {
-															field.onChange([...(field.value || []), path]);
-															input.value = "";
-														}
+											</FormControl>
+											<Button
+												type="button"
+												variant="outline"
+												size="icon"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder*="Enter a path"]',
+													) as HTMLInputElement;
+													const path = input.value.trim();
+													if (path) {
+														field.onChange([...(field.value || []), path]);
+														input.value = "";
 													}
 												}}
-											/>
-										</FormControl>
-										<Button
-											type="button"
-											variant="outline"
-											size="icon"
-											onClick={() => {
-												const input = document.querySelector(
-													'input[placeholder*="Enter a path"]',
-												) as HTMLInputElement;
-												const path = input.value.trim();
-												if (path) {
-													field.onChange([...(field.value || []), path]);
-													input.value = "";
-												}
-											}}
-										>
-											<Plus className="size-4" />
-										</Button>
-									</div>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+											>
+												<Plus className="size-4" />
+											</Button>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 
 						<FormField
 							control={form.control}
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
index f4fe8661..97b57f0b 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
@@ -93,7 +93,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
-
+	const triggerType = form.watch("triggerType");
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
@@ -431,84 +431,90 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
+						{triggerType === "push" && (
+							<FormField
+								control={form.control}
+								name="watchPaths"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<div className="flex items-center gap-2">
+											<FormLabel>Watch Paths</FormLabel>
+											<TooltipProvider>
+												<Tooltip>
+													<TooltipTrigger>
+														<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+															?
+														</div>
+													</TooltipTrigger>
+													<TooltipContent>
+														<p>
+															Add paths to watch for changes. When files in
+															these paths change, a new deployment will be
+															triggered.
+														</p>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</div>
+										<div className="flex flex-wrap gap-2 mb-2">
+											{field.value?.map((path, index) => (
+												<Badge key={index} variant="secondary">
+													{path}
+													<X
+														className="ml-1 size-3 cursor-pointer"
+														onClick={() => {
+															const newPaths = [...(field.value || [])];
+															newPaths.splice(index, 1);
+															form.setValue("watchPaths", newPaths);
+														}}
+													/>
+												</Badge>
+											))}
+										</div>
+										<FormControl>
+											<div className="flex gap-2">
+												<Input
+													placeholder="Enter a path to watch (e.g., src/*, dist/*)"
+													onKeyDown={(e) => {
+														if (e.key === "Enter") {
+															e.preventDefault();
+															const input = e.currentTarget;
+															const value = input.value.trim();
+															if (value) {
+																const newPaths = [
+																	...(field.value || []),
+																	value,
+																];
+																form.setValue("watchPaths", newPaths);
+																input.value = "";
+															}
+														}
 													}}
 												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
+												<Button
+													type="button"
+													variant="secondary"
+													onClick={() => {
+														const input = document.querySelector(
+															'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
+														) as HTMLInputElement;
 														const value = input.value.trim();
 														if (value) {
 															const newPaths = [...(field.value || []), value];
 															form.setValue("watchPaths", newPaths);
 															input.value = "";
 														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+													}}
+												>
+													Add
+												</Button>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<FormField
 							control={form.control}
 							name="enableSubmodules"