feat(frontend): Merge run configuration + triggers (#1530)

* feat(frontend): Merge run configuration + triggers

* feat(frontend): merge main + fix add dependendy

* feat(frontend): merge main + fix add dependendy

* feat(frontend): merge main + fix add dependendy

* Update ScriptRunConfiguration.svelte

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

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

@@ -33,11 +33,12 @@
 			canConfigureRecomputeOnInputChanged={runnable.type == 'runnableByPath' ||
 				runnable.inlineScript?.language !== 'frontend'}
 			on:updateAutoRefresh={updateAutoRefresh}
-		/>
-		<BackgroundScriptTriggerBy
-			bind:script={runnable}
-			recomputeOnInputChanged={runnable.recomputeOnInputChanged}
-		/>
+		>
+			<BackgroundScriptTriggerBy
+				bind:script={runnable}
+				recomputeOnInputChanged={runnable.recomputeOnInputChanged}
+			/>
+		</ScriptRunConfiguration>
 	{:else}
 		<ScriptSettingsSection title="Language selection">
 			<div class="text-xs"> Please configure the language in the inline script panel </div>

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

@@ -67,8 +67,9 @@
 			bind:autoRefresh={appInput.autoRefresh}
 			bind:recomputeOnInputChanged={appInput.recomputeOnInputChanged}
 			on:updateAutoRefresh={updateAutoRefresh}
-		/>
-		<ComponentScriptTriggerBy {appComponent} {appInput} />
+		>
+			<ComponentScriptTriggerBy {appComponent} {appInput} />
+		</ScriptRunConfiguration>
 	{:else}
 		<ScriptSettingsSection title="Language selection">
 			<div class="text-xs"> Please configure the language in the inline script panel </div>

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

@@ -23,6 +23,7 @@
 		{isFrontend}
 		{triggerEvents}
 		{shoudlDisplayChangeEvents}
+		isTriggerable={isTriggerable(appComponent.type)}
 	/>
 {:else}
 	<ScriptTriggers
@@ -30,5 +31,6 @@
 		{triggerEvents}
 		{isFrontend}
 		{shoudlDisplayChangeEvents}
+		isTriggerable={isTriggerable(appComponent.type)}
 	/>
 {/if}

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

@@ -13,8 +13,8 @@
 </script>
 
 {#if canConfigureRecomputeOnInputChanged || canConfigureRunOnStart}
-	<ScriptSettingsSection title="Run configuration">
-		<div class="flex flex-col gap-1">
+	<ScriptSettingsSection title="Triggers">
+		<div class="flex flex-col">
 			{#if autoRefresh !== undefined && canConfigureRunOnStart}
 				<div class="flex items-center justify-between w-full">
 					<div class="flex flex-row items-center gap-2 text-xs">
@@ -50,9 +50,10 @@
 				</div>
 			{/if}
 		</div>
+		<slot />
 	</ScriptSettingsSection>
 {:else}
-	<ScriptSettingsSection title="Run configuration">
-		<div class="text-xs"> Triggerable component runs only when an interaction happens. </div>
+	<ScriptSettingsSection title="Triggers">
+		<slot />
 	</ScriptSettingsSection>
 {/if}

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

@@ -3,7 +3,6 @@
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { classNames } from '$lib/utils'
 	import { Plus, X } from 'lucide-svelte'
-	import ScriptSettingsSection from './ScriptSettingsSection.svelte'
 	import { Button } from '$lib/components/common'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext, InlineScript } from '$lib/components/apps/types'
@@ -14,6 +13,7 @@
 	export let isFrontend: boolean = false
 	export let dependencies: string[] = []
 	export let shoudlDisplayChangeEvents: boolean = false
+	export let isTriggerable: boolean = false
 
 	$: changeEvents = isFrontend
 		? inlineScript?.refreshOn
@@ -57,73 +57,71 @@
 	}
 </script>
 
-<ScriptSettingsSection title="Triggers">
-	{#if isFrontend}
-		<div class="flex mb-4">
-			<Button
-				size="xs2"
-				color="dark"
-				on:click={() => {
-					$connectingInput = {
-						opened: true,
-						input: undefined,
-						hoveredComponent: undefined,
-						onConnect: applyConnection
-					}
-				}}
-			>
-				<div class="flex flex-row gap-1 items-center">
-					<Plus size={14} />
+{#if isFrontend && !isTriggerable}
+	<div class="flex mb-4">
+		<Button
+			size="xs2"
+			color="dark"
+			on:click={() => {
+				$connectingInput = {
+					opened: true,
+					input: undefined,
+					hoveredComponent: undefined,
+					onConnect: applyConnection
+				}
+			}}
+		>
+			<div class="flex flex-row gap-1 items-center">
+				<Plus size={14} />
 
-					Add dependency
-				</div>
-			</Button>
+				Add dependency
+			</div>
+		</Button>
+	</div>
+{/if}
+{#if hasNoTriggers}
+	<Alert type="warning" title="No triggers" size="xs">
+		This script has no triggers. It will never run.
+	</Alert>
+{:else}
+	{#if triggerEvents.length > 0}
+		<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
+		<div class="flex flex-row gap-2 flex-wrap">
+			{#each triggerEvents as triggerEvent}
+				<span class={classNames(badgeClass, colors['green'])}>{triggerEvent}</span>
+			{/each}
 		</div>
 	{/if}
-	{#if hasNoTriggers}
-		<Alert type="warning" title="No triggers" size="xs">
-			This script has no triggers. It will never run.
-		</Alert>
-	{:else}
-		{#if triggerEvents.length > 0}
-			<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
-			<div class="flex flex-row gap-2 flex-wrap">
-				{#each triggerEvents as triggerEvent}
-					<span class={classNames(badgeClass, colors['green'])}>{triggerEvent}</span>
-				{/each}
-			</div>
-		{/if}
-		{#if changeEvents.length > 0 && shoudlDisplayChangeEvents}
-			<div class="text-xs font-semibold text-slate-800 mb-1 mt-2">Change on value</div>
-			<div class="flex flex-row gap-2 flex-wrap">
-				{#each changeEvents as changeEvent}
-					<span class={classNames(badgeClass, colors['blue'])}>
-						{changeEvent}
-						{#if changeEvent === 'Eval'}
-							<Tooltip class="!text-blue-600 ml-1">
-								At least one input is configured as an evaluated input and the component will be
-								triggered if the result of the eval change. Eval expressions are re-evaluated on any
-								output or state changes.
-							</Tooltip>
-						{/if}
-						{#if isFrontend}
-							<button
-								class="bg-blue-300 ml-2 p-0.5 rounded-md hover:bg-blue-400 cursor-pointer"
-								on:click={() => {
-									if (inlineScript?.refreshOn) {
-										inlineScript.refreshOn = inlineScript.refreshOn.filter(
-											(x) => `${x.id} - ${x.key}` !== changeEvent
-										)
-										inlineScript = JSON.parse(JSON.stringify(inlineScript))
-									}
-								}}
-							>
-								<X size="14" />
-							</button>
-						{/if}
-					</span>
-				{/each}
-			</div>
-		{/if}
+	{#if changeEvents.length > 0 && shoudlDisplayChangeEvents}
+		<div class="text-xs font-semibold text-slate-800 mb-1 mt-2">Change on value</div>
+		<div class="flex flex-row gap-2 flex-wrap">
+			{#each changeEvents as changeEvent}
+				<span class={classNames(badgeClass, colors['blue'])}>
+					{changeEvent}
+					{#if changeEvent === 'Eval'}
+						<Tooltip class="!text-blue-600 ml-1">
+							At least one input is configured as an evaluated input and the component will be
+							triggered if the result of the eval change. Eval expressions are re-evaluated on any
+							output or state changes.
+						</Tooltip>
+					{/if}
+					{#if isFrontend}
+						<button
+							class="bg-blue-300 ml-2 p-0.5 rounded-md hover:bg-blue-400 cursor-pointer"
+							on:click={() => {
+								if (inlineScript?.refreshOn) {
+									inlineScript.refreshOn = inlineScript.refreshOn.filter(
+										(x) => `${x.id} - ${x.key}` !== changeEvent
+									)
+									inlineScript = JSON.parse(JSON.stringify(inlineScript))
+								}
+							}}
+						>
+							<X size="14" />
+						</button>
+					{/if}
+				</span>
+			{/each}
+		</div>
 	{/if}
-</ScriptSettingsSection>
+{/if}