windmill-components 1.60.3 → 1.83.1

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

@@ -1,14 +1,24 @@
-<script>import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+<script>import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../common';
+import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+import PickHubScript from '../../../flows/pickers/PickHubScript.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
-import { emptySchema } from '../../../../utils';
+import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
-import { defaultCode } from '../../editorUtils';
+import { defaultCode } from '../component';
+import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
+import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 export let name;
-export let id;
-const { appPath, app } = getContext('AppEditorContext');
+export let componentType = undefined;
+let tab = 'inlinescripts';
+let filter = '';
+let picker;
+const { appPath, app } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -20,10 +30,12 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
-    const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
-    const fullPath = `${appPath}/inline-script/${path}`;
-    const content = defaultCode(componentType, language) ??
+    const content = defaultCode(componentType ?? '', language) ??
         initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
+    return newInlineScript(content, language, path);
+}
+async function newInlineScript(content, language, path) {
+    const fullPath = `${appPath}/${path}`;
     let schema = emptySchema();
     schema = await inferInlineScriptSchema(language, content, schema);
     const newInlineScript = {
@@ -34,15 +46,99 @@ async function createInlineScriptByLanguage(language, path, subkind = undefined)
     };
     dispatch('new', newInlineScript);
 }
+async function pickScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+async function pickHubScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+function pickInlineScript(name) {
+    const unusedInlineScriptIndex = $app.unusedInlineScripts?.findIndex((script) => script.name === name);
+    const unusedInlineScript = $app.unusedInlineScripts?.[unusedInlineScriptIndex];
+    $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
+    $app = $app;
+    dispatch('new', unusedInlineScript.inlineScript);
+}
 const langs = ['deno', 'python3', 'go', 'bash'];
 </script>
 
-<div class="flex flex-col p-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	Please choose a language:
+<Drawer bind:this={picker} size="1000px">
+	<DrawerContent title="Script/Flow Picker" on:close={picker.closeDrawer}>
+		<div>
+			<div class="max-w-6xl">
+				<Tabs bind:selected={tab}>
+					<Tab size="sm" value="inlinescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Detached Inline Scripts
+						</div>
+					</Tab>
+					<Tab size="sm" value="workspacescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Workspace Scripts
+						</div>
+					</Tab>
+
+					<Tab size="sm" value="hubscripts">
+						<div class="flex gap-2 items-center my-1">
+							<Globe2 size={18} />
+							Hub Scripts
+						</div>
+					</Tab>
+				</Tabs>
+				<div class="my-2" />
+				<div class="flex flex-col gap-y-16">
+					<div class="flex flex-col">
+						{#if tab == 'inlinescripts'}
+							<InlineScriptList
+								on:pick={(e) => pickInlineScript(e.detail)}
+								inlineScripts={$app.unusedInlineScripts
+									? $app.unusedInlineScripts.map((uis) => uis.name)
+									: []}
+							/>
+						{:else if tab == 'workspacescripts'}
+							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+						{:else if tab == 'hubscripts'}
+							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-col px-4 py-2 gap-2 text-sm" in:fly={{ duration: 50 }}>
+	<div class="mt-4 flex justify-between gap-8 mb-2">
+		<div class="font-bold items-baseline">Choose a language:</div>
+		<div class="flex gap-2">
+			<Button
+				on:click={() => picker?.openDrawer()}
+				size="xs"
+				color="blue"
+				startIcon={{ icon: faCodeBranch }}
+				btnClasses="truncate"
+			>
+				fork a detached script
+			</Button>
+			<Button
+				on:click={() => dispatch('delete')}
+				size="xs"
+				color="red"
+				variant="border"
+				btnClasses="truncate"
+			>
+				Cancel
+			</Button>
+		</div>
+	</div>
 	<div class="flex gap-2 flex-row flex-wrap">
 		{#each langs as lang}
 			<FlowScriptPicker
-				label={lang}
+				label={capitalize(lang)}
 				{lang}
 				on:click={() => {
 					createInlineScriptByLanguage(lang, name)
@@ -57,12 +153,42 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
 			}}
 		/>
-		<FlowScriptPicker
+
+		<!-- <FlowScriptPicker
 			label={`MySQL`}
 			lang="mysql"
 			on:click={() => {
 				createInlineScriptByLanguage(Script.language.DENO, name, 'mysql')
 			}}
+		/> -->
+	</div>
+	<div>
+		<div class="text-xs mb-1 mt-2"
+			>Script executed in the client's browser directly:&nbsp;<Tooltip
+				>Frontend scripts are executed in the browser and can manipulate the app context directly</Tooltip
+			></div
+		>
+		<FlowScriptPicker
+			label={`JavaScript`}
+			lang="javascript"
+			on:click={() => {
+				const newInlineScript = {
+					content: `// read outputs and ctx
+console.log(ctx.email)
+
+// access a global state store
+if (!state.foo) { state.foo = 0 }
+state.foo += 1
+
+// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
+
+return state.foo`,
+					language: 'frontend',
+					path: 'frontend script',
+					schema: undefined
+				}
+				dispatch('new', newInlineScript)
+			}}
 		/>
 	</div>
 </div>

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

@@ -2,9 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
-        id: string;
+        componentType?: string | undefined;
     };
     events: {
+        delete: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -1,20 +1,28 @@
 <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, 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';
-import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
-import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
-import Tooltip from '../../../Tooltip.svelte';
+import { emptySchema, isMac, scriptLangToEditorLang } from '../../../../utils';
+import Popover from '../../../Popover.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
+import Kbd from '../../../common/kbd/Kbd.svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { buildExtraLib } from '../../utils';
 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;
+export let transformer = false;
+const { runnableComponents, stateId, worldStore, state, appPath, app } = getContext('AppViewerContext');
 let editor;
+let simpleEditor;
 let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -27,107 +35,204 @@ async function inferInlineScriptSchema(language, content, schema) {
     }
     return schema;
 }
+$: inlineScript && (inlineScript.path = `${appPath}/${name}`);
 onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
-        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
+        if (inlineScript.language != 'frontend') {
+            inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
+        }
+    }
+    if (inlineScript?.schema && inlineScript.language != 'frontend') {
+        loadSchemaAndInputsByName();
     }
 });
 const dispatch = createEventDispatcher();
 let runLoading = false;
+async function loadSchemaAndInputsByName() {
+    if (syncFields && inlineScript) {
+        const newSchema = inlineScript.schema ?? emptySchema();
+        const newFields = computeFields(newSchema, defaultUserInput, fields);
+        if (!deepEqual(newFields, fields)) {
+            fields = newFields;
+            $stateId++;
+        }
+    }
+}
+$: extraLib =
+    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>
 
-<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+{#if inlineScript}
+	{#if inlineScript.language != 'frontend'}
+		<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+	{/if}
 
-<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
-	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
-		{#if name !== undefined}
-			<input bind:value={name} placeholder="Inline script name" />
-		{/if}
-		<div class="flex w-full flex-row gap-2 items-center justify-end">
-			{#if validCode}
-				<Badge color="green">
-					<CheckCircle size={16} />
-				</Badge>
-			{:else}
-				<Badge color="red">
-					<X size={16} />
-				</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()
+							}}
+						>
+							Full Editor&nbsp;<Maximize2 size={14} />
+						</Button>
+						<svelte:fragment slot="text">Open full editor</svelte:fragment>
+					</Popover>
+				{/if}
 
-			<Button
-				variant="border"
-				size="xs"
-				color="blue"
-				on:click={async () => {
-					editor.format()
-				}}
-			>
-				Format&nbsp;<Tooltip>Ctrl+S</Tooltip>
-			</Button>
-			{#if id.startsWith('unused-')}
 				<Button
-					size="xs"
-					color="light"
 					variant="border"
-					iconOnly
-					startIcon={{ icon: faTrash }}
-					on:click={() => dispatch('delete')}
-				/>
-			{:else if $runnableComponents[id] != undefined}
-				<Button
-					loading={runLoading}
 					size="xs"
-					color="blue"
+					color="light"
+					btnClasses="!px-2 !py-1"
 					on:click={async () => {
-						runLoading = true
-						await $runnableComponents[id]?.()
-						runLoading = false
+						editor?.format()
+						simpleEditor?.format()
 					}}
 				>
-					Run&nbsp;
-					<Tooltip light>Ctrl+Enter</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}
+				{#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]?.cb?.(!transformer ? inlineScript : undefined)
+							runLoading = false
+						}}
+					>
+						<div class="flex flex-row gap-1 items-center">
+							Run
 
-			<Button
-				size="xs"
-				color="blue"
-				on:click={() => {
-					inlineScriptEditorDrawer?.openDrawer()
-				}}
-			>
-				<div class="flex gap-1 items-center">
-					<Code2 size={16} />
-					Open full editor
-				</div>
-			</Button>
+							<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">
-		<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) {
-					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
-					}
-				}
-			}}
-		/>
+		<!-- {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() ?? ''
+						}
+						runLoading = true
+						await $runnableComponents[id]?.cb?.(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()
+							}
+						}
+						$app = $app
+					}}
+				/>
+			{:else}
+				<SimpleEditor
+					bind:this={simpleEditor}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
+					cmdEnterAction={async () => {
+						runLoading = true
+						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+						runLoading = false
+					}}
+					on:change={() => {
+						$app = $app
+					}}
+				/>
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}

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

@@ -1,12 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 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;
         delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -19,7 +19,7 @@ export function openDrawer() {
 			editor?.setCode(inlineScript.content)
 		}}
 	>
-		{#if inlineScript}
+		{#if inlineScript && inlineScript.language != 'frontend'}
 			<ScriptEditor
 				noSyncFromGithub
 				lang={inlineScript.language}