fix: add on success events to triggers list

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

@@ -424,6 +424,12 @@ export function getAllSubgridsAndComponentIds(
 	return [subgrids, components]
 }
 
+export function getAllGridItems(
+	app: App
+	): GridItem[] {
+	return app.grid.concat(Object.values(app.subgrids ?? {}).flat())
+}
+
 export function deleteGridItem(
 	app: App,
 	component: AppComponent,

frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte

@@ -38,6 +38,7 @@
 				on:updateAutoRefresh={updateAutoRefresh}
 			>
 				<BackgroundScriptTriggerBy
+					{id}
 					bind:script={runnable}
 					recomputeOnInputChanged={runnable.recomputeOnInputChanged}
 				/>

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

@@ -6,6 +6,7 @@
 
 	export let script: HiddenRunnable
 	export let recomputeOnInputChanged: boolean | undefined = undefined
+	export let id: string
 
 	$: isFrontend = script.type == 'runnableByName' && script.inlineScript?.language === 'frontend'
 	$: triggerEvents = script.autoRefresh ? ['start', 'refresh'] : []
@@ -13,6 +14,7 @@
 
 {#if script.type == 'runnableByName' && script.inlineScript}
 	<ScriptTriggers
+		{id}
 		bind:inlineScript={script.inlineScript}
 		{triggerEvents}
 		dependencies={getDependencies(script.fields)}
@@ -21,6 +23,7 @@
 	/>
 {:else if script.type === 'runnableByName'}
 	<ScriptTriggers
+		{id}
 		dependencies={getDependencies(script.fields)}
 		{triggerEvents}
 		{isFrontend}

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

@@ -18,6 +18,7 @@
 
 {#if appInput?.runnable?.type === 'runnableByName'}
 	<ScriptTriggers
+		id={appComponent.id}
 		bind:inlineScript={appInput.runnable.inlineScript}
 		dependencies={getDependencies(appInput.fields)}
 		{isFrontend}
@@ -26,6 +27,7 @@
 	/>
 {:else}
 	<ScriptTriggers
+		id={appComponent.id}
 		dependencies={getDependencies(appInput.fields)}
 		{triggerEvents}
 		{isFrontend}

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

@@ -5,16 +5,35 @@
 	import { Plus, X } from 'lucide-svelte'
 	import { Button } from '$lib/components/common'
 	import { getContext } from 'svelte'
-	import type { AppViewerContext, InlineScript } from '$lib/components/apps/types'
+	import type { App, AppViewerContext, InlineScript } from '$lib/components/apps/types'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { deepEqual } from 'fast-equals'
+	import { getAllGridItems } from '../../../appUtils'
 
 	export let triggerEvents: string[] = []
 	export let inlineScript: InlineScript | undefined = undefined
 	export let isFrontend: boolean = false
 	export let dependencies: string[] = []
 	export let shoudlDisplayChangeEvents: boolean = false
+	export let id: string
 
+	const { connectingInput, app, stateId } = getContext<AppViewerContext>('AppViewerContext')
+
+	let onSuccessEvents: string[] = []
+
+	$: computeOnSuccessEvents($app, id)
+
+	function computeOnSuccessEvents(app: App, _id: string) {
+		const nr: string[] = []
+		getAllGridItems(app).forEach((x) => {
+			if (`recomputeIds` in x.data) {
+				if (x.data.recomputeIds?.includes(id)) {
+					nr.push(`success of ${x.id}`)
+				}
+			}
+		})
+		onSuccessEvents = nr
+	}
 	$: changeEvents = isFrontend
 		? inlineScript?.refreshOn
 			? inlineScript.refreshOn.map((x) => `${x.id}.${x.key}`)
@@ -22,7 +41,9 @@
 		: dependencies
 
 	$: hasNoTriggers =
-		triggerEvents.length === 0 && (changeEvents.length === 0 || !shoudlDisplayChangeEvents)
+		triggerEvents.length === 0 &&
+		(changeEvents.length === 0 || !shoudlDisplayChangeEvents) &&
+		onSuccessEvents.length == 0
 
 	const badgeClass = 'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border'
 	const colors = {
@@ -30,7 +51,6 @@
 		indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100',
 		blue: 'text-blue-800 border-blue-600 bg-blue-100'
 	}
-	const { connectingInput, app, stateId } = getContext<AppViewerContext>('AppViewerContext')
 
 	function applyConnection(connection: InputConnection) {
 		const refresh = {
@@ -61,10 +81,10 @@
 		This script has no triggers. It will never run.
 	</Alert>
 {:else}
-	{#if triggerEvents.length > 0}
+	{#if triggerEvents.length > 0 || onSuccessEvents.length > 0}
 		<div class="text-xs font-semibold text-secondary mb-1">Events</div>
 		<div class="flex flex-row gap-2 flex-wrap">
-			{#each triggerEvents as triggerEvent}
+			{#each triggerEvents.concat(onSuccessEvents) as triggerEvent}
 				<span class={classNames(badgeClass)}>{triggerEvent}</span>
 			{/each}
 		</div>