windmill-components 1.87.0 → 1.89.0

package/package/components/apps/editor/contextPanel/components/TableActionOutput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        first?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionOutputProps = typeof __propDef.props;
+export type TableActionOutputEvents = typeof __propDef.events;
+export type TableActionOutputSlots = typeof __propDef.slots;
+export default class TableActionOutput extends SvelteComponentTyped<TableActionOutputProps, TableActionOutputEvents, TableActionOutputSlots> {
+}
+export {};

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

@@ -0,0 +1,13 @@
+<script>import TableActionOutput from './TableActionOutput.svelte';
+export let gridItem;
+</script>
+
+<div class="my-1">
+	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
+		<div class="ml-2 border-l">
+			{#each gridItem.data.actionButtons as action, index}
+				<TableActionOutput id={action.id} first={index === 0} />
+			{/each}
+		</div>
+	{/if}
+</div>

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../../types';
+declare const __propDef: {
+    props: {
+        gridItem: GridItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionsOutputProps = typeof __propDef.props;
+export type TableActionsOutputEvents = typeof __propDef.events;
+export type TableActionsOutputSlots = typeof __propDef.slots;
+export default class TableActionsOutput extends SvelteComponentTyped<TableActionsOutputProps, TableActionsOutputEvents, TableActionsOutputSlots> {
+}
+export {};

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

@@ -0,0 +1,211 @@
+<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 { 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 '../component';
+import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
+import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
+export let name;
+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 {
+        await inferArgs(language, content, schema);
+    }
+    catch (e) {
+        console.error("Couldn't infer args", e);
+    }
+    return schema;
+}
+async function createInlineScriptByLanguage(language, path, subkind = undefined) {
+    const content = defaultCode(componentType ?? '', subkind || 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 = {
+        content,
+        language,
+        path: fullPath,
+        schema
+    };
+    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>
+
+<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 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 workspace or hub script
+			</Button>
+			<Button
+				on:click={() => dispatch('delete')}
+				size="xs"
+				color="red"
+				variant="border"
+				btnClasses="truncate"
+			>
+				Cancel
+			</Button>
+		</div>
+	</div>
+
+	<div class="flex flex-row w-full justify-between">
+		<div class="">
+			<div class="mb-1 text-sm font-semibold">Backend</div>
+
+			<div class="flex gap-2 flex-row flex-wrap">
+				{#each langs as lang}
+					<FlowScriptPicker
+						label={lang === 'deno' ? 'Typescript' : capitalize(lang)}
+						{lang}
+						on:click={() => {
+							createInlineScriptByLanguage(lang, name)
+						}}
+					/>
+				{/each}
+			</div>
+
+			<div class="mt-4 mb-2 text-sm">Typescript templates</div>
+
+			<div class="flex gap-2 flex-row flex-wrap mb-4">
+				<FlowScriptPicker
+					label={`PostgreSQL`}
+					lang="pgsql"
+					on:click={() => {
+						createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
+					}}
+				/>
+
+				<FlowScriptPicker
+					label={`HTTP`}
+					lang="fetch"
+					on:click={() => {
+						createInlineScriptByLanguage(Script.language.DENO, name, 'fetch')
+					}}
+				/>
+			</div>
+		</div>
+		<div class="">
+			<div class="mb-1 text-sm font-semibold">
+				Frontend
+				<Tooltip
+					documentationLink="https://docs.windmill.dev/docs/apps/app-runnable#frontend-script"
+				>
+					Frontend scripts are executed in the browser and can manipulate the app context directly
+				</Tooltip>
+			</div>
+
+			<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>
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        componentType?: string | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmptyInlineScriptProps = typeof __propDef.props;
+export type EmptyInlineScriptEvents = typeof __propDef.events;
+export type EmptyInlineScriptSlots = typeof __propDef.slots;
+export default class EmptyInlineScript extends SvelteComponentTyped<EmptyInlineScriptProps, EmptyInlineScriptEvents, EmptyInlineScriptSlots> {
+}
+export {};

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

@@ -0,0 +1,248 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { createEventDispatcher, getContext, onMount } from 'svelte';
+import { CornerDownLeft, Loader2, Maximize2, Trash2 } from 'lucide-svelte';
+import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
+import { inferArgs } from '../../../../infer';
+import Badge from '../../../common/badge/Badge.svelte';
+import Editor from '../../../Editor.svelte';
+import { emptySchema, getModifierKey, 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;
+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 {
+        await inferArgs(language, content, schema);
+        validCode = true;
+    }
+    catch (e) {
+        console.error("Couldn't infer args", e);
+        validCode = false;
+    }
+    return schema;
+}
+$: 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 && 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 cancelable = undefined;
+</script>
+
+{#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}
+				{#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="light"
+					btnClasses="!px-2 !py-1"
+					on:click={async () => {
+						editor?.format()
+						simpleEditor?.format()
+					}}
+				>
+					<div class="flex flex-row gap-1 items-center">
+						Format
+
+						<div class="flex flex-row items-center gap-1">
+							<Kbd>{getModifierKey()}</Kbd>
+							<Kbd>S</Kbd>
+						</div>
+					</div>
+				</Button>
+				{#if $runnableComponents[id] != undefined}
+					{#if !runLoading}
+						<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
+								try {
+									cancelable = $runnableComponents[id]?.cb?.(
+										!transformer ? inlineScript : undefined
+									)
+									await cancelable
+								} catch {}
+								runLoading = false
+							}}
+						>
+							<div class="flex flex-row gap-1 items-center">
+								Run
+
+								<div class="flex flex-row items-center gap-1">
+									<Kbd>{getModifierKey()}</Kbd>
+									<Kbd>
+										<div class="h-4 flex items-center justify-center">
+											<CornerDownLeft size={10} />
+										</div>
+									</Kbd>
+								</div>
+							</div>
+						</Button>
+					{:else}
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							btnClasses="!px-2 !py-1.5"
+							on:click={async () => {
+								cancelable?.cancel()
+								runLoading = false
+							}}
+						>
+							<Loader2 size={14} class="animate-spin mr-2" />
+							Cancel
+						</Button>
+					{/if}
+				{/if}
+			</div>
+		</div>
+
+		<!-- {inlineScript.content} -->
+
+		<div class="border h-full">
+			{#if inlineScript.language != 'frontend'}
+				<Editor
+					path={inlineScript.path}
+					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>
+{/if}

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../types';
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        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>;
+    };
+    slots: {};
+};
+export type InlineScriptEditorProps = typeof __propDef.props;
+export type InlineScriptEditorEvents = typeof __propDef.events;
+export type InlineScriptEditorSlots = typeof __propDef.slots;
+export default class InlineScriptEditor extends SvelteComponentTyped<InlineScriptEditorProps, InlineScriptEditorEvents, InlineScriptEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,37 @@
+<script>import { Button, Drawer, DrawerContent } from '../../../common';
+import ScriptEditor from '../../../ScriptEditor.svelte';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+let scriptEditorDrawer;
+export let inlineScript;
+export let editor = undefined;
+export function openDrawer() {
+    scriptEditorDrawer.openDrawer?.();
+}
+</script>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={() => {
+			scriptEditorDrawer.closeDrawer()
+			editor?.setCode(inlineScript.content)
+		}}
+	>
+		{#if inlineScript && inlineScript.language != 'frontend'}
+			<ScriptEditor
+				noSyncFromGithub
+				lang={inlineScript.language}
+				path={inlineScript.path ? inlineScript.path + '_fullscreen' : undefined}
+				fixedOverflowWidgets={false}
+				bind:code={inlineScript.content}
+				bind:schema={inlineScript.schema}
+				tag={undefined}
+			/>
+		{/if}
+		<svelte:fragment slot="actions">
+			<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type Editor from '../../../Editor.svelte';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        inlineScript: InlineScript;
+        editor?: Editor | undefined;
+        openDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptEditorDrawerProps = typeof __propDef.props;
+export type InlineScriptEditorDrawerEvents = typeof __propDef.events;
+export type InlineScriptEditorDrawerSlots = typeof __propDef.slots;
+export default class InlineScriptEditorDrawer extends SvelteComponentTyped<InlineScriptEditorDrawerProps, InlineScriptEditorDrawerEvents, InlineScriptEditorDrawerSlots> {
+    get openDrawer(): () => void;
+}
+export {};