fix: add support for onToggle for app checkboxes

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -25,7 +25,12 @@
 	import AppTableFooter from './AppTableFooter.svelte'
 	import { tableOptions } from './tableOptions'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
-	import { components, type ButtonComponent } from '../../../editor/component'
+	import {
+		components,
+		type ButtonComponent,
+		type CheckboxComponent,
+		type SelectComponent
+	} from '../../../editor/component'
 	import { initCss } from '../../../utils'
 	import { twMerge } from 'tailwind-merge'
 	import { connectOutput, initConfig, initOutput } from '$lib/components/apps/editor/appUtils'
@@ -43,7 +48,8 @@
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: RichConfigurations
-	export let actionButtons: (BaseAppComponent & ButtonComponent)[]
+	export let actionButtons: (BaseAppComponent &
+		(ButtonComponent | CheckboxComponent | SelectComponent))[]
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'tablecomponent'> | undefined = undefined
 	export let render: boolean
@@ -579,6 +585,7 @@
 																	customCss={actionButton.customCss}
 																	configuration={actionButton.configuration}
 																	recomputeIds={actionButton.recomputeIds}
+																	onToggle={actionButton.onToggle}
 																	preclickAction={async () => {
 																		toggleRow(row)
 																	}}
@@ -627,6 +634,7 @@
 																customCss={actionButton.customCss}
 																configuration={actionButton.configuration}
 																recomputeIds={actionButton.recomputeIds}
+																onToggle={actionButton.onToggle}
 																preclickAction={async () => {
 																	toggleRow(row)
 																}}

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -27,6 +27,7 @@
 	export let extraKey: string | undefined = undefined
 	export let preclickAction: (() => Promise<void>) | undefined = undefined
 	export let noInitialize = false
+	export let onToggle: string[] | undefined = undefined
 
 	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
 		undefined
@@ -138,6 +139,9 @@
 			if (recomputeIds) {
 				recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
 			}
+			if (onToggle) {
+				onToggle.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
+			}
 		}}
 		disabled={resolvedConfig.disabled}
 	/>

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -441,6 +441,7 @@
 				configuration={component.configuration}
 				customCss={component.customCss}
 				recomputeIds={component.recomputeIds}
+				onToggle={component.onToggle}
 				{render}
 			/>
 		{:else if component.type === 'textinputcomponent'}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -151,7 +151,10 @@ export type SelectComponent = BaseComponent<'selectcomponent'> & RecomputeOthers
 export type ResourceSelectComponent = BaseComponent<'resourceselectcomponent'> &
 	RecomputeOthersSource
 export type MultiSelectComponent = BaseComponent<'multiselectcomponent'>
-export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & RecomputeOthersSource
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'> &
+	RecomputeOthersSource & {
+		onToggle?: string[]
+	}
 export type RadioComponent = BaseComponent<'radiocomponent'>
 export type IconComponent = BaseComponent<'iconcomponent'>
 export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>
@@ -1715,6 +1718,7 @@ This is a paragraph.
 		initialData: {
 			...defaultAlignement,
 			componentInput: undefined,
+			onToggle: [],
 			recomputeIds: true,
 			configuration: {
 				label: {

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -385,6 +385,15 @@
 				ownId={component.id}
 			/>
 		{/if}
+		{#if componentSettings.item.data.type === 'checkboxcomponent'}
+			<Recompute
+				title="Recompute on toggle"
+				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue'}
+				documentationLink={undefined}
+				bind:recomputeIds={componentSettings.item.data.onToggle}
+				ownId={component.id}
+			/>
+		{/if}
 
 		<div class="grow shrink" />
 

frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte

@@ -7,6 +7,11 @@
 
 	export let recomputeIds: string[] | undefined = undefined
 	export let ownId: string
+	export let title: string = 'Trigger runnables on success'
+	export let tooltip: string =
+		'Select components to recompute after this runnable has successfully run'
+	export let documentationLink: string =
+		'https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others'
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -19,11 +24,7 @@
 	}
 </script>
 
-<PanelSection
-	title="Trigger runnables on success"
-	tooltip="Select components to recompute after this runnable has successfully run"
-	documentationLink="https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others"
->
+<PanelSection {title} {tooltip} {documentationLink}>
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y border w-full">
 			<thead class="bg-surface-secondary">

frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte

@@ -26,11 +26,19 @@
 	function computeOnSuccessEvents(app: App, _id: string) {
 		const nr: string[] = []
 		getAllGridItems(app).forEach((x) => {
+			if (!(x.data && typeof x.data == 'object')) {
+				return
+			}
 			if (`recomputeIds` in x.data) {
 				if (x.data.recomputeIds?.includes(id)) {
 					nr.push(`success of ${x.id}`)
 				}
 			}
+			if (`onToggle` in x.data) {
+				if (x.data.onToggle?.includes(id)) {
+					nr.push(`toggle of ${x.id}`)
+				}
+			}
 		})
 		onSuccessEvents = nr
 	}