feat(frontend): Add actions to tables (#951)

* fix(frontend): WIP

* fix(frontend): WIP

* fix(frontend): Sub runnable

* fix(frontend): revert changes

* fix(frontend): fix build

frontend/src/lib/components/apps/components/DisplayComponent.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentInputsSpec } from '../types'
+	import type { AppEditorContext, InputsSpec } from '../types'
 	import InputValue from './helpers/InputValue.svelte'
 
-	export let componentInputs: ComponentInputsSpec
+	export let componentInputs: InputsSpec
 
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 

frontend/src/lib/components/apps/components/TableComponent.svelte

@@ -3,19 +3,22 @@
 	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { Output } from '../rx'
-	import type { AppEditorContext, ComponentInputsSpec, InputsSpec } from '../types'
+	import type { AppComponent, AppEditorContext, InputsSpec } from '../types'
 	import InputValue from './helpers/InputValue.svelte'
 	import DebouncedInput from './helpers/DebouncedInput.svelte'
 	import RunnableComponent from './helpers/RunnableComponent.svelte'
+	import ButtonComponent from './common/ButtonComponent.svelte'
 
 	export let id: string
 	export let inputs: InputsSpec
 	export let path: string | undefined = undefined
 	export let runType: 'script' | 'flow' | undefined = undefined
 	export let inlineScriptName: string | undefined = undefined
-	export let componentInputs: ComponentInputsSpec
+	export let componentInputs: InputsSpec
+	export let components: AppComponent[]
 
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore, staticOutputs: staticOutputsStore } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	export const staticOutputs: string[] = ['selectedRow', 'loading', 'result']
 
@@ -102,8 +105,17 @@
 								</td>
 							{/each}
 							<td class="relative whitespace-nowrap px-4 py-2 text-right ">
-								{#if false}
-									<Button color="blue" size="xs" variant="contained">Edit</Button>
+								{#if components?.length > 0}
+									<div class="flex gap-2">
+										{#each components as component}
+											<ButtonComponent
+												{...component}
+												extraQueryParams={{ row }}
+												bind:inputs={component.inputs}
+												bind:staticOutputs={$staticOutputsStore[component.id]}
+											/>
+										{/each}
+									</div>
 								{/if}
 							</td>
 						</tr>

frontend/src/lib/components/apps/components/common/ButtonComponent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, type ButtonType } from '$lib/components/common'
-	import type { ComponentInputsSpec, InputsSpec } from '../../types'
+	import type { InputsSpec } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableComponent from '../helpers/RunnableComponent.svelte'
 
@@ -9,17 +9,20 @@
 	export let path: string | undefined = undefined
 	export let runType: 'script' | 'flow' | undefined = undefined
 	export let inlineScriptName: string | undefined = undefined
-	export let componentInputs: ComponentInputsSpec
+	export let componentInputs: InputsSpec
+	export let extraQueryParams: Record<string, any> = {}
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
+	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent
 </script>
 
 <InputValue input={componentInputs.label} bind:value={labelValue} />
 <InputValue input={componentInputs.color} bind:value={color} />
+<InputValue input={componentInputs.size} bind:value={size} />
 
 <RunnableComponent
 	bind:this={runnableComponent}
@@ -29,12 +32,14 @@
 	{inlineScriptName}
 	{id}
 	autoRefresh={false}
+	{extraQueryParams}
 >
 	<Button
 		on:click={() => {
 			runnableComponent?.runComponent()
 		}}
 		btnClasses="w-full h-full"
+		{size}
 		{color}
 	>
 		{labelValue}

frontend/src/lib/components/apps/components/common/TextComponent.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import SvelteMarkdown from 'svelte-markdown'
-	import type { ComponentInputsSpec } from '../../types'
+	import type { InputsSpec } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
-	export let componentInputs: ComponentInputsSpec
+	export let componentInputs: InputsSpec
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 

frontend/src/lib/components/apps/components/helpers/InputValue.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { StaticInput, DynamicInput, AppEditorContext, UserInput } from '../../types'
+	import type { AppEditorContext, AppInputTransform } from '../../types'
 	import { accessPropertyByPath } from '../../utils'
 
 	type T = string | number | boolean | Record<string | number, any> | undefined
 
-	export let input: DynamicInput | StaticInput | UserInput
+	export let input: AppInputTransform
 	export let value: T
 
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
@@ -17,6 +17,8 @@
 			$worldStore?.connect<any>(input, onValueChange)
 		} else if (input.type === 'static') {
 			setValue()
+		} else {
+			value = undefined
 		}
 	}
 

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -87,10 +87,10 @@
 	}
 
 	// Only loads the schema
-	$: if ($workspaceStore && path && runType) {
+	$: if ($workspaceStore && path && runType && !schema) {
 		// Remote schema needs to be loaded
 		loadSchemaFromTriggerable($workspaceStore, path, runType)
-	} else if (inlineScriptName && $app.inlineScripts[inlineScriptName]) {
+	} else if (inlineScriptName && $app.inlineScripts[inlineScriptName] && !schema) {
 		// Inline scripts directly provide the schema
 		schema = $app.inlineScripts[inlineScriptName].schema
 	}
@@ -110,7 +110,7 @@
 
 	let schemaStripped: Schema | undefined = undefined
 
-	function stripSchema(schema: Schema) {
+	function stripSchema(schema: Schema, inputs: InputsSpec) {
 		schemaStripped = JSON.parse(JSON.stringify(schema))
 
 		// Remove hidden static inputs
@@ -134,7 +134,7 @@
 		})
 	}
 
-	$: schema && stripSchema(schema)
+	$: schema && inputs && stripSchema(schema, inputs)
 
 	$: disabledArgs = Object.keys(inputs).reduce(
 		(disabledArgsAccumulator: string[], inputName: string) => {

frontend/src/lib/components/apps/components/select/CheckboxComponent.svelte

@@ -2,12 +2,12 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentInputsSpec } from '../../types'
+	import type { AppEditorContext, InputsSpec } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
-	export let componentInputs: ComponentInputsSpec
+	export let componentInputs: InputsSpec
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -5,7 +5,7 @@
 	import { Pane } from 'svelte-splitpanes'
 	import { writable } from 'svelte/store'
 	import { buildWorld, type World } from '../rx'
-	import type { App, AppEditorContext, ConnectingInput, EditorMode } from '../types'
+	import type { App, AppEditorContext, ConnectingInput, EditorMode, InputType } from '../types'
 	import AppEditorHeader from './AppEditorHeader.svelte'
 	import GridEditor from './GridEditor.svelte'
 
@@ -26,7 +26,7 @@
 	const staticOutputs = writable<Record<string, string[]>>({})
 	const selectedComponent = writable<string | undefined>(undefined)
 	const mode = writable<EditorMode>('dnd')
-	const connectingInput = writable<ConnectingInput>({
+	const connectingInput = writable<ConnectingInput<InputType, any>>({
 		opened: false,
 		input: undefined
 	})
@@ -80,7 +80,7 @@
 			{/if}
 		</div>
 	</Pane>
-	<Pane size={20} minSize={20} maxSize={40}>
+	<Pane size={25} minSize={20} maxSize={40}>
 		{#if $mode === 'dnd'}
 			<Tabs bind:selected={selectedTab}>
 				<Tab value="insert" size="xs">

frontend/src/lib/components/apps/editor/componentsPanel/componentStaticValues.ts

@@ -1,7 +1,8 @@
-import { BUTTON_COLORS } from "../../../common";
+import { BUTTON_COLORS } from '../../../common'
 
 const buttonColorOptions = [...BUTTON_COLORS]
 
 export const staticValues = {
 	buttonColorOptions,
-} as const
+	buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl']
+} as const

frontend/src/lib/components/apps/editor/componentsPanel/data.ts

@@ -13,7 +13,8 @@ const windmillComponents = {
 					id: undefined,
 					name: undefined,
 					type: 'output',
-					defaultValue: undefined
+					defaultValue: {},
+					fieldType: 'object'
 				}
 			}
 		}
@@ -33,7 +34,8 @@ const plainComponents: ComponentSet = {
 					type: 'static',
 					visible: true,
 					value: 'Lorem ipsum',
-					fieldType: 'textarea'
+					fieldType: 'textarea',
+					defaultValue: 'Lorem ipsum'
 				}
 			}
 		},
@@ -46,14 +48,24 @@ const plainComponents: ComponentSet = {
 					type: 'static',
 					visible: true,
 					value: 'Lorem ipsum',
-					fieldType: 'textarea'
+					fieldType: 'textarea',
+					defaultValue: 'Lorem ipsum'
 				},
 				color: {
 					fieldType: 'select',
 					type: 'static',
 					visible: true,
 					value: 'blue',
-					optionValuesKey: 'buttonColorOptions'
+					optionValuesKey: 'buttonColorOptions',
+					defaultValue: 'blue'
+				},
+				size: {
+					fieldType: 'select',
+					type: 'static',
+					visible: true,
+					value: 'md',
+					optionValuesKey: 'buttonSizeOptions',
+					defaultValue: 'md'
 				}
 			},
 			runnable: true
@@ -67,8 +79,9 @@ const plainComponents: ComponentSet = {
 				label: {
 					type: 'static',
 					visible: true,
-					value: 'Lorem ipsum',
-					fieldType: 'textarea'
+					value: undefined,
+					fieldType: 'textarea',
+					defaultValue: 'Lorem ipsum'
 				}
 			}
 		}
@@ -106,16 +119,22 @@ const tableComponents = {
 				searchEnabled: {
 					type: 'static',
 					value: false,
-					fieldType: 'boolean'
+					fieldType: 'boolean',
+					visible: true,
+					defaultValue: false
 				},
 				paginationEnabled: {
 					type: 'static',
 					value: false,
-					fieldType: 'boolean'
+					fieldType: 'boolean',
+					visible: true,
+					defaultValue: false
 				}
 			},
+
 			runnable: true,
-			card: true
+			card: true,
+			components: []
 		}
 	] as AppComponent[]
 }

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -32,7 +32,8 @@
 					id,
 					name,
 					type: 'output',
-					defaultValue: undefined
+					defaultValue: undefined,
+					fieldType: 'any'
 				}
 			}
 		}
@@ -79,25 +80,18 @@
 			scriptCreationDrawer.closeDrawer()
 		}}
 	>
-		<label for="pathInput" class="text-sm font-semibold">
-			Script name
-		</label>
+		<label for="pathInput" class="text-sm font-semibold"> Script name </label>
 		<div class="flex justify-between items-center gap-4">
 			<input id="pathInput" class="grow min-w-[150px]" bind:value={newScriptPath} />
-			<Button 
-				on:click={createScript}
-				size="sm"
-				disabled={isTakenPath}
-				startIcon={{icon: faPlus}}
-			>
+			<Button on:click={createScript} size="sm" disabled={isTakenPath} startIcon={{ icon: faPlus }}>
 				Create
 			</Button>
 		</div>
-	{#if isTakenPath && !ignorePathError}
-		<div transition:fade={{ duration: 100 }} class="text-sm text-red-600 h-5 mt-1">
-			This name is already used.
-		</div>
-	{/if}
+		{#if isTakenPath && !ignorePathError}
+			<div transition:fade={{ duration: 100 }} class="text-sm text-red-600 h-5 mt-1">
+				This name is already used.
+			</div>
+		{/if}
 	</DrawerContent>
 </Drawer>