windmill-components 1.70.0 → 1.75.0

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,10 +1,13 @@
 <script>import { classNames } from '../../../../utils';
+import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import { flip } from 'svelte/animate';
+import { fade } from 'svelte/transition';
 import { findGridItem } from '../appUtils';
 import { components } from '../component';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppEditorContext');
+const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppViewerContext');
 function connectInput(componentId, path) {
     if ($connectingInput) {
         $connectingInput = {
@@ -22,7 +25,7 @@ function connectInput(componentId, path) {
 }
 function getComponentNameById(componentId) {
     const component = findGridItem($app, componentId);
-    if (component?.data.type) {
+    if (component?.data?.type) {
         return components[component?.data.type].name;
     }
     else if (componentId == 'ctx') {
@@ -35,69 +38,112 @@ function getComponentNameById(componentId) {
         return 'Table action';
     }
 }
-$: panels = [['ctx', ['email', 'username', 'query']]].concat(Object.entries($staticOutputs));
+$: panels = [['ctx', ['email', 'username', 'query', 'hash']]].concat(Object.entries($staticOutputs));
+let search = '';
+// filter out outputs that don't match the search by name (computed by getComponentNameById) and id
+// The output should be [string, string[]][]
+$: filteredPanels = panels.filter(([componentId, outputs]) => {
+    const name = getComponentNameById(componentId);
+    return (name.toLowerCase().includes(search.toLowerCase()) ||
+        componentId.toLowerCase().includes(search.toLowerCase()));
+});
 </script>
 
-<PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
-	<div
-		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
-	>
-		{#each panels as [componentId, outputs] (componentId)}
-			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-				<div>
-					<div
-						class="flex {$connectingInput?.opened
-							? 'bg-white z-50'
-							: ''} flex-row justify-between w-full"
+<PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
+	<div class="overflow-auto h-full min-w-[150px] w-full relative flex flex-col">
+		<div class="sticky z-50 top-0 left-0 w-full bg-white px-2 pb-2">
+			<div class="relative">
+				<input
+					bind:value={search}
+					class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+					placeholder="Search outputs..."
+				/>
+				{#if search}
+					<button
+						class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+						on:click|stopPropagation|preventDefault={() => (search = '')}
 					>
-						<button
-							on:click|stopPropagation|preventDefault={$connectingInput.opened
-								? undefined
-								: () => ($selectedComponent = componentId)}
-							class={classNames(
-								'px-2 text-2xs py-0.5 border border-gray-300 font-bold rounded-t-sm w-fit',
-								$selectedComponent === componentId
-									? ' bg-indigo-500 text-white'
-									: 'bg-gray-200 text-gray-500'
-							)}
-						>
-							{componentId}
-						</button>
-						<span
-							class={classNames(
-								'px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit',
-								'bg-gray-500 text-white'
-							)}
-						>
-							{getComponentNameById(componentId)}
-						</span>
-					</div>
-
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={classNames(
-							$connectingInput?.opened ? 'bg-white z-50' : '',
-							`w-full py-2 grow border relative break-all `,
-							$selectedComponent === componentId ? 'border border-blue-500 ' : '',
-							$connectingInput.hoveredComponent === componentId ? 'outline outline-blue-500' : ''
-						)}
-					>
-						{#key $selectedComponent}
-							{#key $connectingInput?.opened}
-								<ComponentOutputViewer
-									outputs={$connectingInput?.opened && $selectedComponent === componentId
-										? ['search']
-										: outputs}
+						<X size="14" />
+					</button>
+				{/if}
+			</div>
+		</div>
+		<div class="relative p-2">
+			{#each filteredPanels as [componentId, outputs] (componentId)}
+				<div
+					animate:flip={{ duration: 300 }}
+					in:fade|local={{ duration: 100, delay: 50 }}
+					out:fade|local={{ duration: 100 }}
+					class="pb-2"
+				>
+					{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
+						{@const name = getComponentNameById(componentId)}
+						<div>
+							<div
+								class="flex {$connectingInput?.opened
+									? 'bg-white z-50'
+									: ''} flex-row justify-between w-full"
+							>
+								<button
+									on:click|stopPropagation|preventDefault={$connectingInput.opened
+										? undefined
+										: () => ($selectedComponent = componentId)}
+									class={classNames(
+										'px-2 text-2xs py-0.5 border-t border-x font-bold rounded-t-sm w-fit',
+										$selectedComponent === componentId
+											? ' bg-indigo-500/90 text-white border-indigo-500/90'
+											: 'bg-gray-100 text-gray-500 border-gray-200'
+									)}
+								>
 									{componentId}
-									on:select={({ detail }) => {
-										connectInput(componentId, detail)
-									}}
-								/>
-							{/key}
-						{/key}
-					</div>
+								</button>
+								<span
+									class={classNames(
+										'px-1 text-2xs py-0.5 font-semibold rounded-t-sm w-fit',
+										'bg-gray-700 text-white'
+									)}
+								>
+									{name}
+								</span>
+							</div>
+							<div
+								class={classNames(
+									$connectingInput?.opened ? 'bg-white z-50' : '',
+									`w-full py-2 grow border relative break-all `,
+									$selectedComponent === componentId ? 'border border-indigo-500/90 ' : '',
+									$connectingInput.hoveredComponent === componentId
+										? 'outline outline-indigo-500/90'
+										: ''
+								)}
+							>
+								{#key $selectedComponent}
+									{#key $connectingInput?.opened}
+										<ComponentOutputViewer
+											outputs={$connectingInput?.opened && $selectedComponent === componentId
+												? name == 'Table'
+													? ['search']
+													: []
+												: outputs}
+											{componentId}
+											on:select={({ detail }) => {
+												connectInput(componentId, detail)
+											}}
+										/>
+									{/key}
+								{/key}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<div
+					in:fade|local={{ duration: 50, delay: 100 }}
+					out:fade|local={{ duration: 50 }}
+					class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-4 px-2"
+				>
+					No outputs found
 				</div>
-			{/if}
-		{/each}
+			{/each}
+		</div>
 	</div>
 </PanelSection>

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -5,7 +5,7 @@ import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
 import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
-import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
@@ -17,7 +17,7 @@ export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { appPath, app } = getContext('AppEditorContext');
+const { appPath, app } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -146,12 +146,22 @@ function loadSchemaFromTriggerable(path, arg1) {
 	<div class="mt-4">
 		<Button
 			on:click={() => picker?.openDrawer()}
-			size="sm"
+			size="xs"
 			color="blue"
 			startIcon={{ icon: faCodeBranch }}
 			btnClasses="truncate"
 		>
 			or fork a detached/Workspace/Hub script
 		</Button>
+		<Button
+			on:click={() => dispatch('delete')}
+			size="xs"
+			color="red"
+			variant="border"
+			startIcon={{ icon: faTrash }}
+			btnClasses="truncate"
+		>
+			Delete
+		</Button>
 	</div>
 </div>

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
     };
     events: {
+        delete: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -1,20 +1,24 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { CheckCircle, Code2, Maximize2, Trash2, X } from 'lucide-svelte';
+import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
 import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
-import Tooltip from '../../../Tooltip.svelte';
 import Popover from '../../../Popover.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
+import Kbd from '../../../common/kbd/Kbd.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
 export let id;
-const { runnableComponents } = getContext('AppEditorContext');
+export let defaultUserInput = false;
+export let fields = {};
+export let syncFields = false;
+const { runnableComponents, stateId } = getContext('AppViewerContext');
 let editor;
 let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
@@ -32,40 +36,54 @@ onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
         inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
+    if (inlineScript.schema) {
+        loadSchemaAndInputsByName();
+    }
 });
 const dispatch = createEventDispatcher();
 let runLoading = false;
+async function loadSchemaAndInputsByName() {
+    if (syncFields) {
+        const newSchema = inlineScript.schema;
+        const newFields = computeFields(newSchema, defaultUserInput, fields);
+        if (!deepEqual(newFields, fields)) {
+            fields = newFields;
+            $stateId++;
+        }
+    }
+}
+let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 </script>
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
+<div class="h-full flex flex-col gap-1">
 	<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
-			<input bind:value={name} placeholder="Inline script name" />
+			<input
+				on:keydown|stopPropagation
+				bind:value={name}
+				placeholder="Inline script name"
+				class="!text-xs !rounded-xs"
+			/>
 		{/if}
 		<div class="flex w-full flex-row gap-2 items-center justify-end">
 			{#if validCode}
-				<Badge color="green" baseClass="!p-0 !h-[30px] aspect-square center-center">
-					<CheckCircle size={16} />
-				</Badge>
+				<Badge color="green" baseClass="!text-2xs">Valid</Badge>
 			{:else}
-				<Badge color="red" baseClass="!p-0 !h-[30px] aspect-square center-center">
-					<X size={16} />
-				</Badge>
+				<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
 			{/if}
 
 			{#if id.startsWith('unused-') || id.startsWith('bg_')}
 				<Popover notClickable placement="bottom">
 					<Button
 						size="xs"
-						color="red"
-						variant="border"
-						btnClasses="!px-1.5"
+						color="light"
+						btnClasses="!px-2 !bg-red-100 hover:!bg-red-200"
 						aria-label="Delete"
 						on:click={() => dispatch('delete')}
 					>
-						<Trash2 size={16} />
+						<Trash2 size={14} class="text-red-800" />
 					</Button>
 					<svelte:fragment slot="text">Delete</svelte:fragment>
 				</Popover>
@@ -73,41 +91,60 @@ let runLoading = false;
 			<Popover notClickable placement="bottom">
 				<Button
 					size="xs"
-					color="blue"
-					variant="border"
-					btnClasses="!px-1.5"
+					color="light"
+					btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
 					aria-label="Open full editor"
 					on:click={() => {
 						inlineScriptEditorDrawer?.openDrawer()
 					}}
 				>
-					<Maximize2 size={16} />
+					<Maximize2 size={14} />
 				</Button>
 				<svelte:fragment slot="text">Open full editor</svelte:fragment>
 			</Popover>
 			<Button
 				variant="border"
 				size="xs"
-				color="blue"
+				color="light"
+				btnClasses="!px-2 !py-1"
 				on:click={async () => {
 					editor.format()
 				}}
 			>
-				Format&nbsp;<Tooltip placement="bottom">Ctrl+S</Tooltip>
+				<div class="flex flex-row gap-1 items-center">
+					Format
+
+					<div class="flex flex-row items-center gap-1">
+						<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+						<Kbd>S</Kbd>
+					</div>
+				</div>
 			</Button>
 			{#if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
-					color="blue"
+					color="dark"
+					variant="border"
+					btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 					on:click={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.()
 						runLoading = false
 					}}
 				>
-					Run&nbsp;
-					<Tooltip light placement="bottom">Ctrl+Enter</Tooltip>
+					<div class="flex flex-row gap-1 items-center">
+						Run
+
+						<div class="flex flex-row items-center gap-1">
+							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>
+								<div class="h-4 flex items-center justify-center">
+									<CornerDownLeft size={10} />
+								</div>
+							</Kbd>
+						</div>
+					</div>
 				</Button>
 			{/if}
 		</div>
@@ -134,6 +171,7 @@ let runLoading = false;
 					await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
 					if (JSON.stringify(inlineScript.schema) != oldSchema) {
 						inlineScript = inlineScript
+						loadSchemaAndInputsByName()
 					}
 				}
 			}}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { InlineScript } from '../../types';
+import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         inlineScript: InlineScript;
         name?: string | undefined;
         id: string;
+        defaultUserInput?: boolean | undefined;
+        fields?: Record<string, AppInput> | undefined;
+        syncFields?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -12,6 +12,7 @@ import InlineScriptEditor from './InlineScriptEditor.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
 export let componentInput;
+export let defaultUserInput = false;
 export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
@@ -53,6 +54,11 @@ $: if (componentInput &&
     componentInput.runnable.runType == 'script') {
     refreshScript(componentInput.runnable);
 }
+function deleteInlineScript() {
+    if (componentInput && componentInput.type == 'runnable') {
+        componentInput = clearResultAppInput(componentInput);
+    }
+}
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
@@ -65,19 +71,19 @@ $: if (componentInput &&
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{defaultUserInput}
 				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
-				on:delete={() => {
-					if (componentInput && componentInput.type == 'runnable') {
-						componentInput = clearResultAppInput(componentInput)
-					}
-				}}
+				bind:fields={componentInput.fields}
+				syncFields
+				on:delete={deleteInlineScript}
 			/>
 		{:else}
 			<EmptyInlineScript
 				{id}
 				name={componentInput.runnable.name}
+				on:delete={deleteInlineScript}
 				on:new={(e) => {
 					if (
 						componentInput &&

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
+        defaultUserInput?: boolean | undefined;
         id: string;
     };
     events: {

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -5,8 +5,16 @@ import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
-const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+const { app, staticOutputs, runnableComponents } = getContext('AppViewerContext');
 let selectedScriptComponentId = undefined;
+function deleteBackgroundScript(index) {
+    // remove the script from the array at the index
+    $app.hiddenInlineScripts.splice(index, 1);
+    $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
+    delete $staticOutputs[`bg_${index}`];
+    delete $runnableComponents[`bg_${index}`];
+    $staticOutputs = $staticOutputs;
+}
 </script>
 
 <SplitPanesWrapper>
@@ -16,18 +24,22 @@ let selectedScriptComponentId = undefined;
 		</Pane>
 		<Pane size={75}>
 			{#if !selectedScriptComponentId}
-				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					Select a script on the left panel
+				</div>
 			{/if}
 
-			{#each $app.grid as gridItem (gridItem.data.id)}
-				{#if gridItem.data.id === selectedScriptComponentId}
+			{#each $app.grid as gridItem, index (gridItem?.data?.id ?? index)}
+				{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
+						defaultUserInput={gridItem?.data?.type == 'formcomponent' ||
+							gridItem?.data?.type == 'buttonformcomponent'}
 						id={gridItem.data.id}
 						bind:componentInput={gridItem.data.componentInput}
 					/>
 				{/if}
 
-				{#if gridItem.data.type === 'tablecomponent'}
+				{#if gridItem?.data?.type === 'tablecomponent'}
 					{#each gridItem.data.actionButtons as actionButton, index (index)}
 						{#if actionButton.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
@@ -41,15 +53,17 @@ let selectedScriptComponentId = undefined;
 
 			{#if $app.subgrids}
 				{#each Object.keys($app.subgrids ?? {}) as key (key)}
-					{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
-						{#if gridItem.data.id === selectedScriptComponentId}
+					{#each $app.subgrids[key] as gridItem (gridItem?.data?.id)}
+						{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
+								defaultUserInput={gridItem.data?.type == 'formcomponent' ||
+									gridItem.data?.type == 'buttonformcomponent'}
 								id={gridItem.data.id}
 								bind:componentInput={gridItem.data.componentInput}
 							/>
 						{/if}
 
-						{#if gridItem.data.type === 'tablecomponent'}
+						{#if gridItem?.data?.type === 'tablecomponent'}
 							{#each gridItem.data.actionButtons as actionButton, index (index)}
 								{#if actionButton.id === selectedScriptComponentId}
 									<InlineScriptEditorPanel
@@ -84,20 +98,15 @@ let selectedScriptComponentId = undefined;
 							id={`bg_${index}`}
 							bind:inlineScript={hiddenInlineScript.inlineScript}
 							bind:name={hiddenInlineScript.name}
-							on:delete={() => {
-								// remove the script from the array at the index
-								$app.hiddenInlineScripts.splice(index, 1)
-								$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
-
-								delete $staticOutputs[`bg_${index}`]
-								delete $runnableComponents[`bg_${index}`]
-								$staticOutputs = $staticOutputs
-							}}
+							bind:fields={hiddenInlineScript.fields}
+							syncFields
+							on:delete={() => deleteBackgroundScript(index)}
 						/>
 					{:else}
 						<EmptyInlineScript
 							id={`b_${index}`}
 							name={hiddenInlineScript.name}
+							on:delete={() => deleteBackgroundScript(index)}
 							on:new={(e) => {
 								hiddenInlineScript.inlineScript = e.detail
 							}}