windmill-components 1.22.0 → 1.28.2

package/components/FlowStatusViewer.svelte

@@ -1,32 +1,59 @@
-<script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { scriptPathToHref, truncateRev } from '../utils';
+<script>import { scriptPathToHref, truncateRev } from '../utils';
+import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
-import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../gen';
+import { CompletedJob, FlowStatusModule, Job, JobService, QueuedJob } from '../gen';
 import { workspaceStore } from '../stores';
-import JobStatus from './JobStatus.svelte';
 import FlowJobResult from './FlowJobResult.svelte';
+import JobStatus from './JobStatus.svelte';
 export let job;
 export let jobs = [];
+export let fullyRetrieved = -1;
+let lastJobid;
 let forloop_selected = '';
-function loadResults() {
+let pres = {};
+async function loadResults() {
+    if (!('success' in job)) {
+        const mods = job?.flow_status?.modules;
+        if (mods) {
+            let i = mods?.findIndex((x) => x.type == FlowStatusModule.type.IN_PROGRESS);
+            if (i != -1) {
+                let last = mods[i];
+                jobs[i] = await JobService.getJob({
+                    workspace: $workspaceStore ?? '',
+                    id: last.job ?? ''
+                });
+                jobs = jobs;
+                pres[i]?.scroll({ top: pres[i]?.scrollHeight, behavior: 'smooth' });
+            }
+        }
+    }
+    if (job.id != lastJobid) {
+        lastJobid = job.id;
+        jobs = [];
+        fullyRetrieved = -1;
+    }
     job?.flow_status?.modules?.forEach(async (x, i) => {
-        if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
+        if ((i > fullyRetrieved && x.type == FlowStatusModule.type.SUCCESS) ||
             x.type == FlowStatusModule.type.FAILURE) {
             if (x.forloop_jobs) {
                 const forloop_jobs = [];
                 for (let j of x.forloop_jobs) {
                     forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
                 }
-                jobs.push(forloop_jobs);
+                jobs[i] = forloop_jobs;
             }
             else {
-                jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job }));
+                jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
             }
             jobs = jobs;
+            fullyRetrieved = i;
         }
     });
 }
+function toJob(x) {
+    return x;
+}
 function toCompletedJob(x) {
     return x;
 }
@@ -36,32 +63,31 @@ function toCompletedJobs(x) {
 $: $workspaceStore && job && loadResults();
 </script>
 
-<div class="flow-root max-w-lg w-full p-4">
-	<div class="flex flex-row-reverse">
+<div class="flow-root w-full p-6">
+	<div class="flex ">
 		{#if job}
 			<div class="flex-col">
-				<a href="/run/{job?.id}" class="font-medium text-blue-600"
-					>{truncateRev(job?.id ?? '', 10)}</a
-				>
-				<div>
-					<JobStatus {job} />
-				</div>
+				<a href="/run/{job?.id}" class="font-medium text-blue-600">
+					{truncateRev(job?.id ?? '', 10)}
+				</a>
 			</div>
 		{/if}
 	</div>
+	<JobStatus {job} />
 
 	<p class="text-gray-500 mb-6 w-full text-center">
 		Step
-		<span class="font-medium text-gray-900"
-			>{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}</span
-		>
+		<span class="font-medium text-gray-900">
+			{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}
+		</span>
 		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
 		<span class="mt-4" />
 	</p>
-	<ul class="-mb-8 w-full">
+
+	<ul class="w-full">
 		{#each job?.raw_flow?.modules ?? [] as mod, i}
 			<li class="w-full">
-				<div class="relative pb-8 w-full">
+				<div class="relative w-full">
 					{#if i < (job?.raw_flow?.modules ?? []).length - 1}
 						<span
 							class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
@@ -109,7 +135,7 @@ $: $workspaceStore && job && loadResults();
 						<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 							<div class="w-full">
 								<p class="text-sm text-gray-500">
-									{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+									{#if mod.value.type == 'script'}
 										Script at path <a
 											target="_blank"
 											href={scriptPathToHref(mod.value.path ?? '')}
@@ -120,28 +146,34 @@ $: $workspaceStore && job && loadResults();
 							</div>
 							<div class="text-right text-sm whitespace-nowrap text-gray-500">
 								{job.flow_status?.modules[i].type}
-								{#if job.flow_status?.modules[i].forloop_jobs}
-									{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
-										<div class="flex flex-col">
-											<a href="/run/{job}" class="font-medium text-blue-600"
-												>{truncateRev(job ?? '', 10)}</a
-											>
-										</div>
-									{/each}
-								{:else if job.flow_status?.modules[i].job}
-									<a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
-										>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
-									>
-								{/if}
+								<div class=" max-h-40 overflow-y-auto">
+									{#if job.flow_status?.modules[i].forloop_jobs}
+										{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
+											<div class="flex flex-col">
+												<a href="/run/{job}" class="font-medium text-blue-600">
+													{truncateRev(job ?? '', 10)}
+												</a>
+											</div>
+										{/each}
+									{:else if job.flow_status?.modules[i].job}
+										<a
+											href="/run/{job.flow_status?.modules[i].job}"
+											class="font-medium text-blue-600"
+										>
+											{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}
+										</a>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
 					{#if jobs[i]}
 						{#if Array.isArray(jobs[i])}
-							<div class="flex flex-col space-y-2">
+							<div class="flex flex-col mt-2 space-y-2 max-h-60 overflow-y-auto shadow-inner">
 								{#each toCompletedJobs(jobs[i]) as job, i}
 									<button
 										class="underline text-blue-600 hover:text-blue-700"
+										class:text-red-600={!job.success}
 										on:click={() => {
 											if (forloop_selected == job.id) {
 												forloop_selected = ''
@@ -156,8 +188,24 @@ $: $workspaceStore && job && loadResults();
 									{/if}
 								{/each}
 							</div>
-						{:else}
+						{:else if toJob(jobs[i]).type == 'CompletedJob'}
 							<FlowJobResult job={toCompletedJob(jobs[i])} />
+						{:else if jobs[i]}
+							{#if toJob(jobs[i])?.raw_flow}
+								<div class="border-2">
+									<h2>Forloop current iteration</h2>
+									<svelte:self job={jobs[i]} />
+								</div>
+							{:else}
+								<div class="max-w-2xl mt-2 h-full">
+									<pre
+										bind:this={pres[i]}
+										class="break-all p-4 relative h-full mx-2 bg-gray-50 text-xs max-h-40 overflow-y-auto border">{toJob(
+											jobs[i]
+										).logs ?? ''}
+							</pre>
+								</div>
+							{/if}
 						{/if}
 					{/if}
 				</div>

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { CompletedJob, QueuedJob } from '../gen';
+import { CompletedJob, Job, QueuedJob } from '../gen';
 declare const __propDef: {
     props: {
         job: QueuedJob | CompletedJob;
-        jobs?: (CompletedJob | CompletedJob[] | undefined)[] | undefined;
+        jobs?: (Job | Job[] | undefined)[] | undefined;
+        fullyRetrieved?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowViewer.svelte

@@ -3,10 +3,11 @@ import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import python from 'svelte-highlight/languages/python';
 import typescript from 'svelte-highlight/languages/typescript';
-import { FlowModuleValue } from '../gen';
-import github from 'svelte-highlight/styles/github';
 import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
 export let flow;
 let flowFiltered = {
     summary: flow.summary,
@@ -17,32 +18,64 @@ let flowFiltered = {
 export let embedded = false;
 export let tab = 'ui';
 let open = {};
+let hubCode = {};
+function toAny(x) {
+    return x;
+}
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 {#if !embedded}
 	<Tabs
 		tabs={[
 			['ui', 'Flow rendered'],
-			['json', 'JSON']
+			['json', 'JSON'],
+			['schema', 'Input schema of the flow']
 		]}
 		bind:tab
 	/>
 {/if}
 {#if tab == 'ui'}
-	<div class="flow-root w-full p-4">
-		<p class="font-black text-lg mb-6 w-full ml-2">
-			<span>{flow.value.modules.length} Steps </span>
+	<div class="flow-root w-full pb-4">
+		{#if !embedded}
+			<h2 class="mt-4">{flow.summary}</h2>
+			<h3 class="mt-4">{flow.description}</h3>
+
+			<p class="font-black text-lg w-full my-4">
+				<span>Inputs</span>
+			</p>
+			{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+				<ul class="my-2">
+					{#each Object.entries(flow.schema.properties) as [inp, v]}
+						<li class="list-disc flex flex-row">
+							<FieldHeader
+								label={inp}
+								required={flow.schema.required?.includes(inp)}
+								type={toAny(v)?.type}
+								contentEncoding={toAny(v)?.contentEncoding}
+								format={toAny(v)?.format}
+								itemsType={toAny(v)?.itemsType}
+							/><span class="ml-4 mt-2 text-xs"
+								>{toAny(v)?.default != undefined
+									? 'default: ' + JSON.stringify(toAny(v)?.default)
+									: ''}</span
+							>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+			{/if}
+		{/if}
+
+		<p class="font-black text-lg my-6 w-full">
+			<span>{flow?.value?.modules?.length} Step{flow?.value?.modules?.length > 1 ? 's' : ''} </span>
 			<span class="mt-4" />
 		</p>
 		<ul class="-mb-8 w-full">
-			{#each flow.value.modules ?? [] as mod, i}
+			{#each flow?.value?.modules ?? [] as mod, i}
 				<li class="w-full">
 					<div class="relative pb-8 w-full">
-						{#if i < (flow.value.modules ?? []).length - 1}
+						{#if i < (flow?.value?.modules ?? []).length - 1}
 							<span
 								class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
 								aria-hidden="true"
@@ -58,33 +91,61 @@ let open = {};
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
 									<p class="text-sm text-gray-500">
-										{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+										{#if mod?.value?.type == 'script'}
 											Script at path <a
 												target="_blank"
-												href={scriptPathToHref(mod.value.path ?? '')}
-												class="font-medium text-gray-900">{mod.value.path}</a
+												href={scriptPathToHref(mod?.value?.path ?? '')}
+												class="font-medium text-gray-900">{mod?.value?.path}</a
 											>
-										{:else if mod.value.type == FlowModuleValue.type.RAWSCRIPT}
+											{#if mod?.value?.path?.startsWith('hub/')}
+												<div>
+													<button
+														on:click={async () => {
+															open[i] = !open[i]
+														}}
+														class="mb-2 underline text-black"
+													>
+														View code and inputs {open[i] ? '(-)' : '(+)'}</button
+													>
+													{#if open[i]}
+														<InputTransformsViewer inputTransforms={mod?.input_transform} />
+														<div class="w-full h-full">
+															<iframe
+																style="height: 400px;"
+																class="w-full h-full  text-sm"
+																title="embedded script from hub"
+																frameborder="0"
+																src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
+																	4
+																)}"
+															/>
+														</div>
+													{/if}
+												</div>
+											{/if}
+										{:else if mod?.value?.type == 'rawscript'}
 											<button
 												on:click={() => (open[i] = !open[i])}
 												class="mb-2 underline text-black"
 											>
-												Raw {mod.value.language} script {open[i] ? '(-)' : '(+)'}</button
+												Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
 											>
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+													<InputTransformsViewer inputTransforms={mod?.input_transform} />
+
 													<Highlight
-														language={mod.value.language == 'deno' ? typescript : python}
-														code={mod.value.content}
+														language={mod?.value?.language == 'deno' ? typescript : python}
+														code={mod?.value?.content}
 													/>
 												</div>
 											{/if}
-										{:else if mod.value.type == FlowModuleValue.type.FLOW}
-											Flow at path {mod.value.path}
-										{:else if mod.value.type == FlowModuleValue.type.FORLOOPFLOW}
-											For loop over step {i}'s result':
-											<svelte:self flow={mod.value} embedded={true} />
+										{:else if mod?.value?.type == 'flow'}
+											Flow at path {mod?.value?.path}
+										{:else if mod?.value?.type == 'forloopflow'}
+											For loop over all the elements of the list returned as a result of step {i}:
+											<svelte:self flow={mod?.value} embedded={true} />
 										{/if}
 									</p>
 								</div>
@@ -95,6 +156,17 @@ let open = {};
 			{/each}
 		</ul>
 	</div>
-{:else}
-	<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+{:else if tab == 'json'}
+	<div class="relative">
+		<button
+			on:click={async () => {
+				await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
+			}}
+			class="absolute default-secondary-button-v2 bg-white/30 right-0 my-2 ml-4"
+			>copy content</button
+		>
+		<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+	</div>
+{:else if tab == 'schema'}
+	<SchemaViewer schema={flow.schema} />
 {/if}

package/components/FlowViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowValue } from '../gen';
+import type { FlowValue } from '../gen';
 declare const __propDef: {
     props: {
         flow: {
@@ -9,7 +9,7 @@ declare const __propDef: {
             schema?: any;
         };
         embedded?: boolean | undefined;
-        tab?: "json" | "ui" | undefined;
+        tab?: "json" | "schema" | "ui" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/IconedResourceType.svelte

@@ -1,20 +1,29 @@
-<script>import Mysql from './icons/Mysql.svelte';
-import Mail from './icons/Mail.svelte';
+<script>import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import Icon from 'svelte-awesome';
+import AirtableIcon from './icons/AirtableIcon.svelte';
 import DbIcon from './icons/DbIcon.svelte';
+import GcalIcon from './icons/GcalIcon.svelte';
+import GCloudIcon from './icons/GCloudIcon.svelte';
+import GdriveIcon from './icons/GdriveIcon.svelte';
+import GitlabIcon from './icons/GItlabIcon.svelte';
+import GmailIcon from './icons/GmailIcon.svelte';
+import GSheetsIcon from './icons/GSheetsIcon.svelte';
+import Mail from './icons/Mail.svelte';
+import Mysql from './icons/Mysql.svelte';
 import PostgresIcon from './icons/PostgresIcon.svelte';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import Slack from './icons/Slack.svelte';
-import Icon from 'svelte-awesome';
+import TogglIcon from './icons/TogglIcon.svelte';
 export let name;
 export let after = false;
 export let height = '24px';
 export let width = '24px';
 </script>
 
-<div class="flex flex-row gap-2">
+<div class="flex flex-row gap-2 justify-center -pl-2 whitespace-nowrap">
 	{#if !after}
 		{name}
 	{/if}
+
 	{#if name === 'postgresql'}
 		<PostgresIcon {height} {width} />
 	{:else if name === 'mysql'}
@@ -27,6 +36,22 @@ export let width = '24px';
 		<Slack {height} {width} />
 	{:else if name === 'github'}
 		<Icon data={faGithub} scale={1.4} />
+	{:else if name === 'gmail'}
+		<GmailIcon {height} {width} />
+	{:else if name === 'gsheets'}
+		<GSheetsIcon {height} {width} />
+	{:else if name === 'gitlab'}
+		<GitlabIcon {height} {width} />
+	{:else if name === 'gcloud'}
+		<GCloudIcon {height} {width} />
+	{:else if name === 'gcal'}
+		<GcalIcon {height} {width} />
+	{:else if name === 'gdrive'}
+		<GdriveIcon {height} {width} />
+	{:else if name === 'airtable'}
+		<AirtableIcon {height} {width} />
+	{:else if name === 'toggl'}
+		<TogglIcon {height} {width} />
 	{/if}
 	{#if after}
 		{name}

package/components/InputTransformForm.svelte

@@ -0,0 +1,209 @@
+<script>import { faChain } from '@fortawesome/free-solid-svg-icons';
+import { Button, Tooltip } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import ArgInput from './ArgInput.svelte';
+import Editor from './Editor.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
+import { codeToStaticTemplate } from './flows/flowStore';
+import { getDefaultExpr, isCodeInjection } from './flows/utils';
+import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import Toggle from './Toggle.svelte';
+export let schema;
+export let arg;
+export let argName;
+export let extraLib = 'missing extraLib';
+export let inputCheck;
+export let i = undefined;
+export let pickableProperties = undefined;
+let overlays = {};
+let monacos = {};
+let inputCats = {};
+let propertyType = getPropertyType(arg);
+function getPropertyType(arg) {
+    let type = arg.type;
+    if (type == 'javascript') {
+        if (codeToStaticTemplate(arg.expr)) {
+            type = 'static';
+        }
+    }
+    return type;
+}
+function setPropertyType(rawValue) {
+    if (!arg) {
+        return;
+    }
+    if (isCodeInjection(rawValue)) {
+        arg.expr = getDefaultExpr(i, argName, `\`${rawValue}\``);
+        arg.type = 'javascript';
+        propertyType = 'static';
+    }
+    else {
+        if (arg.type === 'javascript' && propertyType === 'static') {
+            arg.type = 'static';
+        }
+        if (arg.type) {
+            propertyType = arg.type;
+        }
+    }
+}
+function isStaticTemplate(inputCat) {
+    return inputCat === 'string' || inputCat === 'sql';
+}
+function focusProp(argName, monacoEditor = false) {
+    Object.keys(overlays).forEach((k) => {
+        if (k == argName && (isStaticTemplate(inputCats[argName]) || monacoEditor)) {
+            overlays[k].focus();
+        }
+        else {
+            overlays[k].unfocus();
+        }
+    });
+}
+function connectProperty(argName, rawValue) {
+    if (isStaticTemplate(inputCats[argName])) {
+        arg.value = `\$\{${rawValue}}`;
+        setPropertyType(arg.value);
+    }
+    else {
+        arg.expr = getDefaultExpr(i ?? -1, undefined, rawValue);
+        arg.type = 'javascript';
+        propertyType = 'javascript';
+    }
+    if (monacos[argName]) {
+        monacos[argName].setCode(arg.value);
+    }
+}
+$: checked = propertyType == 'javascript';
+</script>
+
+{#if arg != undefined}
+	<div class="flex justify-between items-center">
+		<div class="flex items-center">
+			<FieldHeader
+				label={argName}
+				format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				required={schema.required.includes(argName)}
+				type={schema.properties[argName].type}
+				itemsType={schema.properties[argName].items}
+			/>
+
+			{#if !checked && arg.type === 'javascript'}
+				<span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2">
+					{'${...}'}
+				</span>
+			{/if}
+		</div>
+		<Toggle
+			bind:checked
+			options={{
+				right: 'Raw Javascript Editor'
+			}}
+			on:change={(e) => {
+				const type = e.detail ? 'javascript' : 'static'
+				const staticTemplate = isStaticTemplate(inputCats[argName])
+				if (type === 'javascript') {
+					arg.expr = getDefaultExpr(
+						i ?? -1,
+						argName,
+						staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
+					)
+
+					arg.value = undefined
+					propertyType = 'javascript'
+				} else {
+					arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
+
+					arg.expr = undefined
+					propertyType = 'static'
+				}
+
+				arg.type = type
+			}}
+		/>
+	</div>
+	<div class="max-w-xs" />
+
+	{#if propertyType === undefined || !checked}
+		<OverlayPropertyPicker
+			{pickableProperties}
+			bind:this={overlays[argName]}
+			on:select={({ detail }) => {
+				if (detail.pickerVariation === 'connect') {
+					connectProperty(argName, detail.propPath)
+				} else {
+					const toAppend = `\$\{${detail.propPath}}`
+					arg.value = `${arg.value ?? ''}${toAppend}`
+					if (monacos[argName]) {
+						monacos[argName].setCode(arg.value)
+					}
+					if (isStaticTemplate(inputCats[argName])) {
+						setPropertyType(arg.value)
+					}
+				}
+			}}
+		>
+			<ArgInput
+				on:focus={() => focusProp(argName)}
+				label={argName}
+				bind:editor={monacos[argName]}
+				bind:description={schema.properties[argName].description}
+				bind:value={arg.value}
+				type={schema.properties[argName].type}
+				required={schema.required.includes(argName)}
+				bind:pattern={schema.properties[argName].pattern}
+				bind:valid={inputCheck[argName]}
+				defaultValue={schema.properties[argName].default}
+				bind:enum_={schema.properties[argName].enum}
+				bind:format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				bind:itemsType={schema.properties[argName].items}
+				displayHeader={false}
+				bind:inputCat={inputCats[argName]}
+				on:input={(e) => {
+					if (isStaticTemplate(inputCats[argName])) {
+						setPropertyType(e.detail.rawValue)
+					}
+				}}
+			>
+				<div slot="actions">
+					<div on:click={() => overlays[argName]?.focus('connect')}>
+						<Tooltip placement="bottom" content="Input connect">
+							<Button size="sm" class="blue-button h-8">
+								<Icon data={faChain} />
+							</Button>
+						</Tooltip>
+					</div>
+				</div>
+			</ArgInput>
+		</OverlayPropertyPicker>
+	{:else if checked}
+		{#if arg.expr != undefined}
+			<OverlayPropertyPicker
+				bind:this={overlays[argName]}
+				{pickableProperties}
+				on:select={(event) => {
+					monacos[argName].insertAtCursor(event.detail.propPath)
+				}}
+			>
+				<div class="border rounded p-2 mt-2 border-gray-300">
+					<Editor
+						bind:this={monacos[argName]}
+						on:focus={() => focusProp(argName, true)}
+						bind:code={arg.expr}
+						lang="javascript"
+						class="few-lines-editor"
+						{extraLib}
+						extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
+					/>
+				</div>
+			</OverlayPropertyPicker>
+			<DynamicInputHelpBox />
+		{/if}
+	{:else}
+		<p>Not recognized arg type {arg.type}</p>
+	{/if}
+{:else}
+	<p>Arg at {argName} is undefined</p>
+{/if}