Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add conditional rendering for watchPaths field based on triggerType in SaveGithubProvider and SaveGithubProviderCompose components.

Browse Source
This commit is contained in:
Mauricio Siu 2025-04-26 22:20:37 -06:00
parent 144d48057c
commit bb5c6bebff
2 changed files with 156 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
View File

@ -92,6 +92,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
const repository = form.watch("repository"); const repository = form.watch("repository");
const githubId = form.watch("githubId"); const githubId = form.watch("githubId");
const triggerType = form.watch("triggerType");
const { data: repositories, isLoading: isLoadingRepositories } = const { data: repositories, isLoading: isLoadingRepositories } =
api.github.getGithubRepositories.useQuery( api.github.getGithubRepositories.useQuery(
@ -428,85 +429,88 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
<FormField {triggerType === "push" && (
control={form.control} <FormField
name="watchPaths" control={form.control}
render={({ field }) => ( name="watchPaths"
<FormItem className="md:col-span-2"> render={({ field }) => (
<div className="flex items-center gap-2"> <FormItem className="md:col-span-2">
<FormLabel>Watch Paths</FormLabel> <div className="flex items-center gap-2">
<TooltipProvider> <FormLabel>Watch Paths</FormLabel>
<Tooltip> <TooltipProvider>
<TooltipTrigger asChild> <Tooltip>
<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" /> <TooltipTrigger asChild>
</TooltipTrigger> <HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
<TooltipContent> </TooltipTrigger>
<p> <TooltipContent>
Add paths to watch for changes. When files in these <p>
paths change, a new deployment will be triggered. Add paths to watch for changes. When files in
</p> these paths change, a new deployment will be
</TooltipContent> triggered.
</Tooltip> </p>
</TooltipProvider> </TooltipContent>
</div> </Tooltip>
<div className="flex flex-wrap gap-2 mb-2"> </TooltipProvider>
{field.value?.map((path, index) => ( </div>
<Badge <div className="flex flex-wrap gap-2 mb-2">
key={index} {field.value?.map((path, index) => (
variant="secondary" <Badge
className="flex items-center gap-1" key={index}
> variant="secondary"
{path} className="flex items-center gap-1"
<X >
className="size-3 cursor-pointer hover:text-destructive" {path}
onClick={() => { <X
const newPaths = [...(field.value || [])]; className="size-3 cursor-pointer hover:text-destructive"
newPaths.splice(index, 1); onClick={() => {
field.onChange(newPaths); 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> </FormControl>
))} <Button
</div> type="button"
<div className="flex gap-2"> variant="outline"
<FormControl> size="icon"
<Input onClick={() => {
placeholder="Enter a path to watch (e.g., src/*, dist/*)" const input = document.querySelector(
onKeyDown={(e) => { 'input[placeholder*="Enter a path"]',
if (e.key === "Enter") { ) as HTMLInputElement;
e.preventDefault(); const path = input.value.trim();
const input = e.currentTarget; if (path) {
const path = input.value.trim(); field.onChange([...(field.value || []), path]);
if (path) { input.value = "";
field.onChange([...(field.value || []), path]);
input.value = "";
}
} }
}} }}
/> >
</FormControl> <Plus className="size-4" />
<Button </Button>
type="button" </div>
variant="outline" <FormMessage />
size="icon" </FormItem>
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>
)}
/>
<FormField <FormField
control={form.control} control={form.control}

148
apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
View File

@ -93,7 +93,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
const repository = form.watch("repository"); const repository = form.watch("repository");
const githubId = form.watch("githubId"); const githubId = form.watch("githubId");
const triggerType = form.watch("triggerType");
const { data: repositories, isLoading: isLoadingRepositories } = const { data: repositories, isLoading: isLoadingRepositories } =
api.github.getGithubRepositories.useQuery( api.github.getGithubRepositories.useQuery(
{ {
@ -431,84 +431,90 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
</FormItem> </FormItem>
)} )}
/> />
<FormField {triggerType === "push" && (
control={form.control} <FormField
name="watchPaths" control={form.control}
render={({ field }) => ( name="watchPaths"
<FormItem className="md:col-span-2"> render={({ field }) => (
<div className="flex items-center gap-2"> <FormItem className="md:col-span-2">
<FormLabel>Watch Paths</FormLabel> <div className="flex items-center gap-2">
<TooltipProvider> <FormLabel>Watch Paths</FormLabel>
<Tooltip> <TooltipProvider>
<TooltipTrigger> <Tooltip>
<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold"> <TooltipTrigger>
? <div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
</div> ?
</TooltipTrigger> </div>
<TooltipContent> </TooltipTrigger>
<p> <TooltipContent>
Add paths to watch for changes. When files in these <p>
paths change, a new deployment will be triggered. Add paths to watch for changes. When files in
</p> these paths change, a new deployment will be
</TooltipContent> triggered.
</Tooltip> </p>
</TooltipProvider> </TooltipContent>
</div> </Tooltip>
<div className="flex flex-wrap gap-2 mb-2"> </TooltipProvider>
{field.value?.map((path, index) => ( </div>
<Badge key={index} variant="secondary"> <div className="flex flex-wrap gap-2 mb-2">
{path} {field.value?.map((path, index) => (
<X <Badge key={index} variant="secondary">
className="ml-1 size-3 cursor-pointer" {path}
onClick={() => { <X
const newPaths = [...(field.value || [])]; className="ml-1 size-3 cursor-pointer"
newPaths.splice(index, 1); onClick={() => {
form.setValue("watchPaths", newPaths); 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> <Button
))} type="button"
</div> variant="secondary"
<FormControl> onClick={() => {
<div className="flex gap-2"> const input = document.querySelector(
<Input 'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
placeholder="Enter a path to watch (e.g., src/*, dist/*)" ) as HTMLInputElement;
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
const input = e.currentTarget;
const value = input.value.trim(); const value = input.value.trim();
if (value) { if (value) {
const newPaths = [...(field.value || []), value]; const newPaths = [...(field.value || []), value];
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
input.value = ""; input.value = "";
} }
} }}
}} >
/> Add
<Button </Button>
type="button" </div>
variant="secondary" </FormControl>
onClick={() => { <FormMessage />
const input = document.querySelector( </FormItem>
'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>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"