windmill-components 1.85.0 → 1.87.0

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

@@ -1,194 +0,0 @@
-<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 ?? '', 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 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={capitalize(lang)}
-				{lang}
-				on:click={() => {
-					createInlineScriptByLanguage(lang, name)
-				}}
-			/>
-		{/each}
-
-		<FlowScriptPicker
-			label={`PostgreSQL`}
-			lang="pgsql"
-			on:click={() => {
-				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
-			}}
-		/>
-
-		<!-- <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/InlineScriptEditor.svelte

@@ -1,238 +0,0 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import { createEventDispatcher, getContext, onMount } from '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 Editor from '../../../Editor.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;
-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 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}
-	{#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>{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"
-						on:click={async () => {
-							runLoading = true
-							await $runnableComponents[id]?.cb?.(!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>
-
-		<!-- {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>
-{/if}

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

@@ -1,36 +0,0 @@
-<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}
-				fixedOverflowWidgets={false}
-				bind:code={inlineScript.content}
-				bind:schema={inlineScript.schema}
-			/>
-		{/if}
-		<svelte:fragment slot="actions">
-			<Button startIcon={{ icon: faSave }} disabled>Automatically Saved</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>

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

@@ -1,219 +0,0 @@
-<script>import { Drawer, DrawerContent } from '../../../common';
-import Button from '../../../common/button/Button.svelte';
-import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
-import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
-import { inferArgs } from '../../../../infer';
-import { workspaceStore } from '../../../../stores';
-import { emptySchema, getScriptByPath, sendUserToast } from '../../../../utils';
-import { faCodeBranch, faExternalLinkAlt, faEye, faPen, faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { clearResultAppInput, loadSchema } from '../../utils';
-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 componentType;
-export let id;
-export let transformer;
-const { app, stateId } = getContext('AppViewerContext');
-async function fork(path) {
-    let { content, language, schema } = await getScriptByPath(path);
-    if (componentInput && componentInput.type == 'runnable') {
-        if (!schema || typeof schema == 'string' || Object.keys(schema).length == 0) {
-            schema = emptySchema();
-            await inferArgs(language, content, schema);
-        }
-        componentInput.runnable = {
-            type: 'runnableByName',
-            name: path,
-            inlineScript: {
-                content,
-                language,
-                schema,
-                path
-            }
-        };
-    }
-    else {
-        console.error('componentInput is undefined');
-    }
-}
-let drawerFlowViewer;
-let flowPath = '';
-async function refreshScript(x) {
-    let { schema } = await getScriptByPath(x.path);
-    if (!deepEqual(x.schema, schema)) {
-        x.schema = schema;
-        if (componentInput?.type == 'runnable') {
-            componentInput.fields = computeFields(schema, false, componentInput.fields);
-        }
-        componentInput = componentInput;
-    }
-}
-async function refreshFlow(x) {
-    const schema = (await loadSchema($workspaceStore ?? '', x.path, 'flow')) ?? emptySchema();
-    x.schema = schema;
-    if (componentInput?.type == 'runnable') {
-        componentInput.fields = computeFields(schema, false, componentInput.fields);
-    }
-    componentInput = componentInput;
-}
-$: if (componentInput &&
-    componentInput.type == 'runnable' &&
-    componentInput?.runnable?.type === 'runnableByPath') {
-    if (componentInput.runnable.runType == 'script') {
-        refreshScript(componentInput.runnable);
-    }
-    else if (componentInput.runnable.runType == 'flow') {
-        refreshFlow(componentInput.runnable);
-    }
-}
-function deleteInlineScript() {
-    if (componentInput && componentInput.type == 'runnable') {
-        componentInput = clearResultAppInput(componentInput);
-    }
-}
-</script>
-
-<Drawer bind:this={drawerFlowViewer} size="1200px">
-	<DrawerContent title="Flow {flowPath}" on:close={drawerFlowViewer.closeDrawer}>
-		<FlowPathViewer path={flowPath ?? ''} />
-	</DrawerContent>
-</Drawer>
-
-{#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
-				{defaultUserInput}
-				{id}
-				bind:inlineScript={componentInput.runnable.inlineScript}
-				bind:name={componentInput.runnable.name}
-				bind:fields={componentInput.fields}
-				syncFields
-				on:delete={deleteInlineScript}
-			/>
-		{:else}
-			<EmptyInlineScript
-				{componentType}
-				name={componentInput.runnable.name}
-				on:delete={deleteInlineScript}
-				on:new={(e) => {
-					if (
-						componentInput &&
-						componentInput.type == 'runnable' &&
-						componentInput?.runnable?.type === 'runnableByName'
-					) {
-						componentInput.runnable.inlineScript = e.detail
-						$app = $app
-					}
-				}}
-			/>
-		{/if}
-	{:else if componentInput?.runnable?.type === 'runnableByPath' && componentInput?.runnable?.path}
-		<div class="p-2 h-full flex flex-col gap-2 ">
-			{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
-				<div>
-					<Button
-						size="xs"
-						startIcon={{ icon: faCodeBranch }}
-						on:click={() => {
-							if (
-								componentInput &&
-								componentInput.type == 'runnable' &&
-								componentInput.runnable?.type === 'runnableByPath'
-							) {
-								fork(componentInput.runnable.path)
-								$app = $app
-							}
-						}}
-					>
-						Fork
-					</Button>
-				</div>
-			{/if}
-			<div class="w-full">
-				{#key $stateId}
-					{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
-						<FlowModuleScript path={componentInput.runnable.path} />
-					{:else if componentInput.runnable.runType == 'flow'}
-						<div class="pb-2 flex gap-2 w-full flex-row-reverse">
-							<Button
-								size="xs"
-								startIcon={{ icon: faRefresh }}
-								on:click={() => {
-									if (
-										componentInput?.type == 'runnable' &&
-										componentInput.runnable?.type === 'runnableByPath'
-									) {
-										sendUserToast('Refreshing inputs')
-										if (componentInput.runnable.runType == 'script') {
-											refreshScript(componentInput.runnable)
-										} else if (componentInput.runnable.runType == 'flow') {
-											refreshFlow(componentInput.runnable)
-										}
-										$stateId = $stateId + 1
-									}
-								}}
-							>
-								Refresh
-							</Button>
-							<Button
-								size="xs"
-								startIcon={{ icon: faEye }}
-								on:click={() => {
-									flowPath = componentInput?.['runnable']?.path
-									drawerFlowViewer.openDrawer()
-								}}
-							>
-								Expand
-							</Button>
-							<Button
-								size="xs"
-								startIcon={{ icon: faPen }}
-								endIcon={{ icon: faExternalLinkAlt }}
-								target="_blank"
-								href="/flows/edit/{componentInput?.['runnable']?.path}?nodraft=true">Edit</Button
-							>
-							<Button
-								size="xs"
-								startIcon={{ icon: faEye }}
-								endIcon={{ icon: faExternalLinkAlt }}
-								target="_blank"
-								href="/flows/get/{componentInput?.['runnable']
-									?.path}?workspace_id={$workspaceStore}"
-							>
-								Details page
-							</Button>
-						</div>
-						<FlowPathViewer path={componentInput.runnable.path} />
-					{:else}
-						Unrecognized runType {componentInput.runnable.runType}
-					{/if}
-				{/key}
-			</div>
-		</div>
-	{/if}
-{/if}