add run button directly in inline editor

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -12,13 +12,15 @@
 	import { fly } from 'svelte/transition'
 	import Editor from '$lib/components/Editor.svelte'
 	import { scriptLangToEditorLang } from '$lib/utils'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	let inlineScriptEditorDrawer: InlineScriptEditorDrawer
 
 	export let inlineScript: InlineScript
 	export let name: string | undefined = undefined
+	export let id: string
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents } = getContext<AppEditorContext>('AppEditorContext')
 
 	let editor: Editor
 
@@ -50,6 +52,7 @@
 		}
 	})
 	const dispatch = createEventDispatcher()
+	let runLoading = false
 </script>
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
@@ -70,7 +73,7 @@
 				</Badge>
 			{/if}
 
-			{#if $app.unusedInlineScripts.map((x) => x.name).includes(name ?? '')}
+			{#if id.startsWith('unused-')}
 				<Button
 					size="xs"
 					color="light"
@@ -79,6 +82,22 @@
 					startIcon={{ icon: faTrash }}
 					on:click={() => dispatch('delete')}
 				/>
+			{:else}
+				<Button
+					loading={runLoading}
+					size="xs"
+					color="blue"
+					title="Cmd+Enter"
+					on:click={async () => {
+						runLoading = true
+						await $runnableComponents[id]?.()
+						runLoading = false
+					}}
+				>
+					Run&nbsp;<Tooltip
+						>Cmd+Enter to run the script and see the result in the component directly</Tooltip
+					>
+				</Button>
 			{/if}
 
 			<Button
@@ -103,6 +122,11 @@
 			lang={scriptLangToEditorLang(inlineScript?.language)}
 			bind:code={inlineScript.content}
 			fixedOverflowWidgets={true}
+			cmdEnterAction={async () => {
+				runLoading = true
+				await $runnableComponents[id]?.()
+				runLoading = false
+			}}
 			on:change={async (e) => {
 				if (inlineScript) {
 					const oldSchema = JSON.stringify(inlineScript.schema)

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -4,7 +4,6 @@
 	import FlowModuleScript from '$lib/components/flows/content/FlowModuleScript.svelte'
 	import FlowPathViewer from '$lib/components/flows/content/FlowPathViewer.svelte'
 	import { inferArgs } from '$lib/infer'
-	import { loadSchema } from '$lib/scripts'
 	import { emptySchema, getScriptByPath } from '$lib/utils'
 	import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons'
 	import type { AppInput, ResultAppInput } from '../../inputType'
@@ -13,6 +12,7 @@
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 
 	export let componentInput: AppInput | undefined
+	export let id: string
 
 	async function fork(path: string) {
 		let { content, language, schema } = await getScriptByPath(path)
@@ -21,7 +21,6 @@
 				schema = emptySchema()
 				await inferArgs(language, content, schema)
 			}
-			console.log(schema)
 			componentInput.runnable = {
 				type: 'runnableByName',
 				name: path,
@@ -32,7 +31,6 @@
 					path
 				}
 			}
-			console.log(content, language, schema)
 		} else {
 			console.error('componentInput is undefined')
 		}
@@ -52,6 +50,7 @@
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
 				on:delete={() => {

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -19,13 +19,19 @@
 	<Pane size={75}>
 		{#each $lazyGrid as gridComponent, index (index)}
 			{#if gridComponent.data.id === selectedScriptComponentId}
-				<InlineScriptEditorPanel bind:componentInput={gridComponent.data.componentInput} />
+				<InlineScriptEditorPanel
+					id={gridComponent.data.id}
+					bind:componentInput={gridComponent.data.componentInput}
+				/>
 			{/if}
 
 			{#if gridComponent.data.type === 'tablecomponent'}
 				{#each gridComponent.data.actionButtons as actionButton, index (index)}
 					{#if actionButton.id === selectedScriptComponentId}
-						<InlineScriptEditorPanel bind:componentInput={actionButton.componentInput} />
+						<InlineScriptEditorPanel
+							id={actionButton.id}
+							bind:componentInput={actionButton.componentInput}
+						/>
 					{/if}
 				{/each}
 			{/if}
@@ -33,6 +39,7 @@
 		{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 			{#if `unused-${index}` === selectedScriptComponentId}
 				<InlineScriptEditor
+					id={`unused-${index}`}
 					bind:name={unusedInlineScript.name}
 					bind:inlineScript={unusedInlineScript.inlineScript}
 					on:delete={() => {

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

@@ -74,10 +74,13 @@
 		/>
 	</svelte:fragment>
 
+	{#if components.length == 0}
+		<span class="text-xs text-gray-500">No action buttons</span>
+	{/if}
 	{#each components as component}
 		<div
 			class={classNames(
-				'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'w-full text-xs font-bold gap-1 py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
 				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
@@ -94,8 +97,8 @@
 			<div>
 				<TableActionLabel componentInput={component.configuration.label} />
 			</div>
-			<Badge color="dark-blue">
-				Component: {component.id}
+			<Badge color="dark-indigo">
+				{component.id}
 			</Badge>
 		</div>
 	{/each}