Merge pull request #4782 from imrja8/fix/watchpath-badge-removal

fix(ui): resolve unclickable watch path removal button

(cherry picked from commit 018e56a7b4)
This commit is contained in:
Mauricio Siu
2026-08-05 23:48:01 -06:00
committed by Mauricio Siu
parent d4e087e128
commit c7a96ed82c
10 changed files with 90 additions and 50 deletions
@@ -447,14 +447,18 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -502,14 +506,14 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -242,14 +242,18 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -298,14 +302,14 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -477,14 +477,18 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
className="flex items-center gap-1" className="flex items-center gap-1"
> >
{path} {path}
<X <button
className="size-3 cursor-pointer hover:text-destructive" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
field.onChange(newPaths); field.onChange(newPaths);
}} }}
/> >
<X className="size-3 cursor-pointer hover:text-destructive" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -531,14 +535,14 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -491,14 +491,18 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
className="flex items-center gap-1" className="flex items-center gap-1"
> >
{path} {path}
<X <button
className="size-3 cursor-pointer hover:text-destructive" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
field.onChange(newPaths); field.onChange(newPaths);
}} }}
/> >
<X className="size-3 cursor-pointer hover:text-destructive" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -547,14 +551,14 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -467,14 +467,18 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
className="flex items-center gap-1" className="flex items-center gap-1"
> >
{path} {path}
<X <button
className="size-3 cursor-pointer hover:text-destructive" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
field.onChange(newPaths); field.onChange(newPaths);
}} }}
/> >
<X className="size-3 cursor-pointer hover:text-destructive" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -521,14 +525,14 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -451,14 +451,18 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -506,14 +510,14 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -251,14 +251,18 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -306,14 +310,14 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -442,14 +442,18 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -497,14 +501,14 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -483,14 +483,18 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -542,14 +546,14 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />
@@ -468,14 +468,18 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge key={index} variant="secondary"> <Badge key={index} variant="secondary">
{path} {path}
<X <button
className="ml-1 size-3 cursor-pointer" type="button"
aria-label="Remove watch path"
className="inline-flex items-center focus-visible:ring-2"
onClick={() => { onClick={() => {
const newPaths = [...(field.value || [])]; const newPaths = [...(field.value || [])];
newPaths.splice(index, 1); newPaths.splice(index, 1);
form.setValue("watchPaths", newPaths); form.setValue("watchPaths", newPaths);
}} }}
/> >
<X className="ml-1 size-3 cursor-pointer" />
</button>
</Badge> </Badge>
))} ))}
</div> </div>
@@ -523,14 +527,14 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
control={form.control} control={form.control}
name="enableSubmodules" name="enableSubmodules"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex items-center space-x-2"> <FormItem className="flex flex-row items-center space-x-2 space-y-0">
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={field.onChange} onCheckedChange={field.onChange}
/> />
</FormControl> </FormControl>
<FormLabel className="mt-0!">Enable Submodules</FormLabel> <FormLabel>Enable Submodules</FormLabel>
</FormItem> </FormItem>
)} )}
/> />