windmill-components 1.78.0 → 1.82.0

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

@@ -1,6 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte';
+import { CornerDownLeft, Maximize2, Trash2 } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
@@ -19,7 +19,8 @@ export let id;
 export let defaultUserInput = false;
 export let fields = {};
 export let syncFields = false;
-const { runnableComponents, stateId, worldStore, state, appPath } = getContext('AppViewerContext');
+export let transformer = false;
+const { runnableComponents, stateId, worldStore, state, appPath, app } = getContext('AppViewerContext');
 let editor;
 let simpleEditor;
 let validCode = true;
@@ -34,21 +35,21 @@ async function inferInlineScriptSchema(language, content, schema) {
     }
     return schema;
 }
-$: inlineScript.path = `${appPath}/${name}`;
+$: inlineScript && (inlineScript.path = `${appPath}/${name}`);
 onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
         if (inlineScript.language != 'frontend') {
             inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
         }
     }
-    if (inlineScript.schema) {
+    if (inlineScript?.schema && inlineScript.language != 'frontend') {
         loadSchemaAndInputsByName();
     }
 });
 const dispatch = createEventDispatcher();
 let runLoading = false;
 async function loadSchemaAndInputsByName() {
-    if (syncFields) {
+    if (syncFields && inlineScript) {
         const newSchema = inlineScript.schema ?? emptySchema();
         const newFields = computeFields(newSchema, defaultUserInput, fields);
         if (!deepEqual(newFields, fields)) {
@@ -59,152 +60,180 @@ async function loadSchemaAndInputsByName() {
 }
 let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 $: extraLib =
-    inlineScript.language == 'frontend' && worldStore
+    inlineScript?.language == 'frontend' && worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
         : undefined;
+let refreshOn = inlineScript?.refreshOn?.map((x) => `${x.id}.${x.key}`).join(' ') ?? '';
+$: handleRefreshOn(refreshOn);
+function handleRefreshOn(refreshOn) {
+    if (refreshOn && refreshOn != '' && inlineScript) {
+        inlineScript.refreshOn = refreshOn
+            .split(' ')
+            .filter((x) => x.split('.').length == 2)
+            .map((x) => {
+            const [id, key] = x.split('.');
+            return { id, key };
+        });
+    }
+}
 </script>
 
-{#if inlineScript.language != 'frontend'}
-	<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
-{/if}
+{#if inlineScript}
+	{#if inlineScript.language != 'frontend'}
+		<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+	{/if}
 
-<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
-				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="!text-2xs">Valid</Badge>
-			{:else}
-				<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
+	<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}
+				{#if !transformer}
+					<input
+						on:keydown|stopPropagation
+						bind:value={name}
+						placeholder="Inline script name"
+						class="!text-xs !rounded-xs"
+					/>
+				{:else}
+					<span class="text-xs font-semibold truncate w-full">{name} of {id}</span>
+				{/if}
 			{/if}
+			<div class="flex w-full flex-row gap-2 items-center justify-end">
+				{#if validCode}
+					<Badge color="green" baseClass="!text-2xs">Valid</Badge>
+				{:else}
+					<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
+				{/if}
 
-			{#if id.startsWith('unused-') || id.startsWith('bg_')}
-				<Popover notClickable placement="bottom">
-					<Button
-						size="xs"
-						color="light"
-						btnClasses="!px-2 !bg-red-100 hover:!bg-red-200"
-						aria-label="Delete"
-						on:click={() => dispatch('delete')}
-					>
-						<Trash2 size={14} class="text-red-800" />
-					</Button>
-					<svelte:fragment slot="text">Delete</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if inlineScript.language != 'frontend'}
-				<Popover notClickable placement="bottom">
-					<Button
-						size="xs"
-						color="light"
-						btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
-						aria-label="Open full editor"
-						on:click={() => {
-							inlineScriptEditorDrawer?.openDrawer()
-						}}
-					>
-						<Maximize2 size={14} />
-					</Button>
-					<svelte:fragment slot="text">Open full editor</svelte:fragment>
-				</Popover>
-			{/if}
-
-			<Button
-				variant="border"
-				size="xs"
-				color="light"
-				btnClasses="!px-2 !py-1"
-				on:click={async () => {
-					editor?.format()
-					simpleEditor?.format()
-				}}
-			>
-				<div class="flex flex-row gap-1 items-center">
-					Format
+				{#if id.startsWith('unused-') || id.startsWith('bg_')}
+					<Popover notClickable placement="bottom">
+						<Button
+							size="xs"
+							color="light"
+							btnClasses="!px-2 !bg-red-100 hover:!bg-red-200"
+							aria-label="Delete"
+							on:click={() => dispatch('delete')}
+						>
+							<Trash2 size={14} class="text-red-800" />
+						</Button>
+						<svelte:fragment slot="text">Delete</svelte:fragment>
+					</Popover>
+				{/if}
+				{#if inlineScript.language != 'frontend'}
+					<Popover notClickable placement="bottom">
+						<Button
+							size="xs"
+							color="light"
+							btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+							aria-label="Open full editor"
+							on:click={() => {
+								inlineScriptEditorDrawer?.openDrawer()
+							}}
+						>
+							Full Editor&nbsp;<Maximize2 size={14} />
+						</Button>
+						<svelte:fragment slot="text">Open full editor</svelte:fragment>
+					</Popover>
+				{/if}
 
-					<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="dark"
 					variant="border"
-					btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
+					size="xs"
+					color="light"
+					btnClasses="!px-2 !py-1"
 					on:click={async () => {
-						runLoading = true
-						await $runnableComponents[id]?.()
-						runLoading = false
+						editor?.format()
+						simpleEditor?.format()
 					}}
 				>
 					<div class="flex flex-row gap-1 items-center">
-						Run
+						Format
 
 						<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>
+							<Kbd>S</Kbd>
 						</div>
 					</div>
 				</Button>
-			{/if}
+				{#if $runnableComponents[id] != undefined}
+					<Button
+						loading={runLoading}
+						size="xs"
+						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]?.(!transformer ? inlineScript : undefined)
+							runLoading = false
+						}}
+					>
+						<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>
 		</div>
-	</div>
 
-	<div class="border h-full">
-		{#if inlineScript.language != 'frontend'}
-			<Editor
-				bind:this={editor}
-				class="flex flex-1 grow h-full"
-				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 && inlineScript.language != 'frontend') {
-						const oldSchema = JSON.stringify(inlineScript.schema)
-						if (inlineScript.schema == undefined) {
-							inlineScript.schema = emptySchema()
+		<!-- {inlineScript.content} -->
+
+		<div class="border h-full">
+			{#if inlineScript.language != 'frontend'}
+				<Editor
+					bind:this={editor}
+					class="flex flex-1 grow h-full"
+					lang={scriptLangToEditorLang(inlineScript?.language)}
+					bind:code={inlineScript.content}
+					fixedOverflowWidgets={true}
+					cmdEnterAction={async () => {
+						if (inlineScript) {
+							inlineScript.content = editor?.getCode() ?? ''
 						}
-						await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-						if (JSON.stringify(inlineScript.schema) != oldSchema) {
-							inlineScript = inlineScript
-							loadSchemaAndInputsByName()
+						runLoading = true
+						await $runnableComponents[id]?.(inlineScript)
+						runLoading = false
+					}}
+					on:change={async (e) => {
+						if (inlineScript && inlineScript.language != 'frontend') {
+							const oldSchema = JSON.stringify(inlineScript.schema)
+							if (inlineScript.schema == undefined) {
+								inlineScript.schema = emptySchema()
+							}
+							await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+							if (JSON.stringify(inlineScript.schema) != oldSchema) {
+								inlineScript = inlineScript
+								loadSchemaAndInputsByName()
+							}
 						}
-					}
-				}}
-			/>
-		{:else}
-			<SimpleEditor
-				bind:this={simpleEditor}
-				cmdEnterAction={async () => {
-					runLoading = true
-					await $runnableComponents[id]?.()
-					runLoading = false
-				}}
-				class="h-full"
-				{extraLib}
-				bind:code={inlineScript.content}
-				lang="javascript"
-			/>
-		{/if}
+						$app = $app
+					}}
+				/>
+			{:else}
+				<SimpleEditor
+					bind:this={simpleEditor}
+					cmdEnterAction={async () => {
+						runLoading = true
+						await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
+						runLoading = false
+					}}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
+					on:change={() => {
+						$app = $app
+					}}
+				/>
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}

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

@@ -3,12 +3,13 @@ import type { InlineScript } from '../../types';
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        inlineScript: InlineScript;
+        inlineScript: InlineScript | undefined;
         name?: string | undefined;
         id: string;
         defaultUserInput?: boolean | undefined;
         fields?: Record<string, AppInput> | undefined;
         syncFields?: boolean | undefined;
+        transformer?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -11,9 +11,12 @@ import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
+import { getContext } from 'svelte';
 export let componentInput;
 export let defaultUserInput = false;
 export let id;
+export let transformer;
+const { app } = getContext('AppViewerContext');
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
@@ -67,7 +70,27 @@ function deleteInlineScript() {
 	</DrawerContent>
 </Drawer>
 
-{#if componentInput && componentInput.type == 'runnable'}
+{#if transformer}
+	{#if componentInput?.type == 'runnable' && componentInput.transformer}
+		<InlineScriptEditor
+			transformer
+			defaultUserInput={false}
+			{id}
+			bind:inlineScript={componentInput.transformer}
+			name="Transformer"
+			on:delete={() => {
+				if (componentInput?.type == 'runnable') {
+					componentInput.transformer = undefined
+					componentInput = componentInput
+				}
+			}}
+		/>
+	{:else}
+		<span class="px-2 text-gray-600"
+			>Selected editor component is a transformer but component has no transformer
+		</span>
+	{/if}
+{:else if componentInput && componentInput.type == 'runnable'}
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
@@ -91,6 +114,7 @@ function deleteInlineScript() {
 						componentInput?.runnable?.type === 'runnableByName'
 					) {
 						componentInput.runnable.inlineScript = e.detail
+						$app = $app
 					}
 				}}
 			/>
@@ -109,6 +133,7 @@ function deleteInlineScript() {
 								componentInput.runnable?.type === 'runnableByPath'
 							) {
 								fork(componentInput.runnable.path)
+								$app = $app
 							}
 						}}
 					>
@@ -127,8 +152,10 @@ function deleteInlineScript() {
 							on:click={() => {
 								flowPath = componentInput?.['runnable']?.path
 								drawerFlowViewer.openDrawer()
-							}}>Expand</Button
+							}}
 						>
+							Expand
+						</Button>
 						<Button
 							size="xs"
 							startIcon={{ icon: faPen }}
@@ -142,8 +169,9 @@ function deleteInlineScript() {
 							endIcon={{ icon: faExternalLinkAlt }}
 							target="_blank"
 							href="/flows/get/{componentInput?.['runnable']?.path}?workspace_id={$workspaceStore}"
-							>Details page</Button
 						>
+							Details page
+						</Button>
 					</div>
 					<FlowPathViewer path={componentInput.runnable.path} />
 				{:else}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         defaultUserInput?: boolean | undefined;
         id: string;
+        transformer: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,112 +4,80 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
-import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
+import InlineScriptsPanelWithTable from './InlineScriptsPanelWithTable.svelte';
+import { findGridItem } from '../appUtils';
 const { app, runnableComponents } = getContext('AppViewerContext');
-let selectedScriptComponentId = undefined;
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 function deleteBackgroundScript(index) {
     // remove the script from the array at the index
     $app.hiddenInlineScripts.splice(index, 1);
     $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
     delete $runnableComponents[`bg_${index}`];
 }
+$: gridItem =
+    $selectedComponentInEditor && !$selectedComponentInEditor.startsWith('bg_')
+        ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
+        : undefined;
+$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => `bg_${index}` === $selectedComponentInEditor);
+$: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unused-${index}` === $selectedComponentInEditor);
 </script>
 
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={25}>
-			<InlineScriptsPanelList bind:selectedScriptComponentId />
+			<InlineScriptsPanelList />
 		</Pane>
 		<Pane size={75}>
-			{#if !selectedScriptComponentId}
+			{#if !$selectedComponentInEditor}
 				<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 && gridItem.data.id === selectedScriptComponentId}
-					<InlineScriptEditorPanel
-						defaultUserInput={gridItem?.data?.type == 'formcomponent'}
-						id={gridItem.data.id}
-						bind:componentInput={gridItem.data.componentInput}
-					/>
-				{/if}
-
-				{#if gridItem?.data?.type === 'tablecomponent'}
-					{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
-						{#if actionButton.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								id={actionButton.id}
-								bind:componentInput={actionButton.componentInput}
-							/>
-						{/if}
-					{/each}
-				{/if}
-			{/each}
-
-			{#if $app.subgrids}
-				{#each Object.keys($app.subgrids ?? {}) as key (key)}
-					{#each $app.subgrids[key] as gridItem (gridItem?.data?.id)}
-						{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								defaultUserInput={gridItem.data?.type == 'formcomponent'}
-								id={gridItem.data.id}
-								bind:componentInput={gridItem.data.componentInput}
-							/>
-						{/if}
-
-						{#if gridItem?.data?.type === 'tablecomponent'}
-							{#each gridItem.data.actionButtons as actionButton, index (index)}
-								{#if actionButton.id === selectedScriptComponentId}
-									<InlineScriptEditorPanel
-										id={actionButton.id}
-										bind:componentInput={actionButton.componentInput}
-									/>
-								{/if}
-							{/each}
-						{/if}
-					{/each}
-				{/each}
-			{/if}
-
-			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-				{#if `unused-${index}` === selectedScriptComponentId}
+			{:else if gridItem}
+				{#key gridItem?.id}
+					<InlineScriptsPanelWithTable bind:gridItem />
+				{/key}
+			{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
+				{#key unusedInlineScript}
 					<InlineScriptEditor
-						id={`unused-${index}`}
-						bind:name={unusedInlineScript.name}
-						bind:inlineScript={unusedInlineScript.inlineScript}
+						id={`unused-${unusedInlineScript}`}
+						bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
+						bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
 						on:delete={() => {
 							// remove the script from the array at the index
-							$app.unusedInlineScripts.splice(index, 1)
+							$app.unusedInlineScripts.splice(unusedInlineScript, 1)
 							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
 						}}
 					/>
-				{/if}
-			{/each}
-			{#each $app?.hiddenInlineScripts ?? [] as hiddenInlineScript, index (index)}
-				{#if `bg_${index}` === selectedScriptComponentId}
-					{#if hiddenInlineScript.inlineScript}
+				{/key}
+			{:else if hiddenInlineScript > -1}
+				{#key hiddenInlineScript}
+					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]?.inlineScript}
 						<InlineScriptEditor
-							id={`bg_${index}`}
-							bind:inlineScript={hiddenInlineScript.inlineScript}
-							bind:name={hiddenInlineScript.name}
-							bind:fields={hiddenInlineScript.fields}
+							id={`bg_${hiddenInlineScript}`}
+							bind:inlineScript={$app.hiddenInlineScripts[hiddenInlineScript].inlineScript}
+							bind:name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							bind:fields={$app.hiddenInlineScripts[hiddenInlineScript].fields}
 							syncFields
-							on:delete={() => deleteBackgroundScript(index)}
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 						/>
 					{:else}
 						<EmptyInlineScript
-							id={`b_${index}`}
-							name={hiddenInlineScript.name}
-							on:delete={() => deleteBackgroundScript(index)}
+							id={`b_${hiddenInlineScript}`}
+							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							on:new={(e) => {
-								hiddenInlineScript.inlineScript = e.detail
+								if ($app.hiddenInlineScripts[hiddenInlineScript]) {
+									$app.hiddenInlineScripts[hiddenInlineScript].inlineScript = e.detail
+								}
 							}}
 						/>
 					{/if}
-				{/if}
-			{/each}
+				{/key}
+			{:else}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					No script found at id {$selectedComponentInEditor}
+				</div>
+			{/if}
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>