windmill-components 1.34.0 → 1.35.42

package/components/FlowStatusViewer.svelte

@@ -1,14 +1,12 @@
-<script>import { scriptPathToHref } from '../utils';
-import { Job, JobService } from '../gen';
-import { arePreviewsReady, workspaceStore } from '../stores';
+<script>import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
-import IconedPath from './IconedPath.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import { Button } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import ProgressBar from './ProgressBar.svelte';
 import { createEventDispatcher } from 'svelte';
+import { onDestroy } from 'svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let root = false;
@@ -19,20 +17,7 @@ export let jobResult = {
     loopJobs: []
 };
 let forloop_selected = '';
-let isReadyIndex = $arePreviewsReady.push(false);
-function shouldReset() {
-    if (jobId != lastJobid) {
-        lastJobid = jobId;
-        jobResult = {
-            job: undefined,
-            innerJobs: [],
-            loopJobs: []
-        };
-        loadJobInProgress();
-    }
-}
-let lastJobid = jobId;
-$: jobId && shouldReset();
+let timeout;
 async function loadJobInProgress() {
     const job = await JobService.getJob({
         workspace: $workspaceStore ?? '',
@@ -40,44 +25,41 @@ async function loadJobInProgress() {
     });
     jobResult.job = job;
     jobResult = jobResult;
-    if (job.type === 'CompletedJob') {
-        arePreviewsReady.update((isReady) => {
-            isReady[isReadyIndex - 1] = true;
-            return isReady;
-        });
+    if (job?.type !== 'CompletedJob') {
+        timeout = setTimeout(() => loadJobInProgress(), 500);
     }
-    else {
-        setTimeout(() => loadJobInProgress(), 500);
+    else if (root) {
+        dispatch('jobsLoaded', jobResult);
     }
 }
-$: {
-    if (root) {
-        if ($arePreviewsReady.every(Boolean) && !(hasModules && $arePreviewsReady.length === 1)) {
-            arePreviewsReady.update(() => []);
-            dispatch('jobsLoaded', jobResult);
-        }
+$: hasModules =
+    jobResult.job &&
+        Array.isArray(jobResult.job?.raw_flow?.modules) &&
+        jobResult.job?.raw_flow?.modules.length > 1;
+function updateJobId() {
+    if (jobId !== jobResult.job?.id) {
+        loadJobInProgress();
     }
 }
-$: job = jobResult.job;
-$: innerJobs = jobResult.innerJobs;
-$: loopJobs = jobResult.loopJobs;
-$: hasModules = job && Array.isArray(job?.raw_flow?.modules) && job?.raw_flow?.modules.length > 1;
-$: loadJobInProgress();
+$: jobId && updateJobId();
+onDestroy(() => {
+    timeout && clearTimeout(timeout);
+});
 </script>
 
-{#if job}
+{#if jobResult.job}
 	<div class="flow-root w-full space-y-4">
 		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
-		<FlowPreviewStatus {job} />
-		{#if `result` in job}
-			<FlowJobResult {job} />
-		{:else if job.logs}
+		<FlowPreviewStatus job={jobResult.job} />
+		{#if `result` in jobResult.job}
+			<FlowJobResult job={jobResult.job} />
+		{:else if jobResult.job.logs}
 			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{job.logs}</pre>
+				<pre class="w-full">{jobResult.job.logs}</pre>
 			</div>
 		{/if}
 
-		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(loopJobs)}
+		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(jobResult.loopJobs)}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4">
 				Loop results ({forloopJobIds.length} items)
 			</h3>
@@ -102,27 +84,27 @@ $: loadJobInProgress();
 					/>
 				</Button>
 				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-					<svelte:self jobId={loopJobId} bind:jobResult={loopJobs[j]} />
+					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if hasModules && Array.isArray(innerJobs)}
+		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
 			<ul class="w-full">
 				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
 					Detailed results
 				</h3>
 
-				{#each job?.flow_status?.modules ?? [] as module, i}
+				{#each jobResult.job?.flow_status?.modules ?? [] as module, i}
 					<p class="text-gray-500 mb-6 w-full ">
 						Step
 						<span class="font-medium text-gray-900"> {i + 1} </span> out of
-						<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
 					</p>
 
 					{#if ['InProgress', 'Success', 'Error'].includes(module.type)}
 						<li class="w-full border p-6 space-y-2">
 							<svelte:self
 								jobId={module.job}
-								bind:jobResult={innerJobs[i]}
+								bind:jobResult={jobResult.innerJobs[i]}
 								forloopJobIds={module.forloop_jobs}
 							/>
 						</li>

package/components/FlowViewer.svelte

@@ -1,15 +1,12 @@
-<script>import { scriptPathToHref } from '../utils';
-import Highlight from 'svelte-highlight';
+<script>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 { slide } from 'svelte/transition';
-import Tabs from './Tabs.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import InputTransformsViewer from './InputTransformsViewer.svelte';
 import SvelteMarkdown from 'svelte-markdown';
-import IconedPath from './IconedPath.svelte';
+import FlowModulesViewer from './FlowModulesViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
 let flowFiltered = {
@@ -18,7 +15,6 @@ let flowFiltered = {
     value: flow.value,
     schema: flow.schema
 };
-export let embedded = false;
 export let tab = 'ui';
 let open = {};
 if (initialOpen) {
@@ -29,155 +25,60 @@ function toAny(x) {
 }
 </script>
 
-{#if !embedded}
-	<Tabs
-		tabs={[
-			['ui', 'Flow rendered'],
-			['json', 'JSON'],
-			['schema', 'Input schema of the flow']
-		]}
-		bind:tab
-	/>
-{/if}
-{#if tab == 'ui'}
-	<div class="flow-root w-full pb-4">
-		{#if !embedded}
-			<h2 class="my-4">{flow.summary}</h2>
-			<SvelteMarkdown source={flow.description ?? ''} />
+<Tabs bind:selected={tab}>
+	<Tab value="ui">Flow rendered</Tab>
+	<Tab value="json">Json</Tab>
+	<Tab value="schema">Input schema of the flow</Tab>
 
-			<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}
+	<svelte:fragment slot="content">
+		<TabContent value="ui">
+			<div class="flow-root w-full pb-4">
+				<h2 class="my-4">{flow.summary}</h2>
+				<SvelteMarkdown source={flow.description ?? ''} />
 
-		<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}
-				<li class="w-full">
-					<div class="relative pb-8 w-full">
-						{#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"
-							/>
-						{/if}
-						<div class="relative flex space-x-3">
-							<div>
-								<span
-									class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center ring-8 ring-white text-white"
-									>{i + 1}
-								</span>
-							</div>
-							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
-								<div class="w-full">
-									<span class="text-black">{mod?.summary ?? ''}</span>
-									<p class="text-sm text-gray-500">
-										{#if mod?.value?.type == 'script'}
-											Script at path <a
-												target="_blank"
-												href={scriptPathToHref(mod?.value?.path ?? '')}
-												class="font-medium text-gray-900"
-											>
-												<IconedPath path={mod?.value?.path ?? ''} />
-											</a>
-											{#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]}
-														<div class="border border-black p-2 bg-gray-50  divide-y">
-															<InputTransformsViewer inputTransforms={mod?.input_transform} />
-															<div class="w-full h-full mt-6">
-																<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>
-														</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
-											>
-
-											{#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}
-													/>
-												</div>
-											{/if}
-										{: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>
-							</div>
-						</div>
-					</div>
-				</li>
-			{/each}
-		</ul>
-	</div>
-{: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'}
-	<div class="my-4" />
-	<SchemaViewer schema={flow.schema} />
-{/if}
+				<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}
+				<FlowModulesViewer modules={flow?.value?.modules} />
+			</div>
+		</TabContent>
+		<TabContent value="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>
+		</TabContent>
+		<TabContent value="schema">
+			<div class="my-4" />
+			<SchemaViewer schema={flow.schema} />
+		</TabContent>
+	</svelte:fragment>
+</Tabs>

package/components/FlowViewer.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
             schema?: any;
         };
         initialOpen?: number | undefined;
-        embedded?: boolean | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
     };
     events: {

package/components/IconedResourceType.svelte

@@ -1,11 +1,11 @@
-<script>import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import Icon from 'svelte-awesome';
+<script>import Icon from 'svelte-awesome';
 import AirtableIcon from './icons/AirtableIcon.svelte';
 import DbIcon from './icons/DbIcon.svelte';
 import DiscordIcon from './icons/DiscordIcon.svelte';
 import GcalIcon from './icons/GcalIcon.svelte';
 import GCloudIcon from './icons/GCloudIcon.svelte';
 import GdriveIcon from './icons/GdriveIcon.svelte';
+import GithubIcon from './icons/GithubIcon.svelte';
 import GitlabIcon from './icons/GItlabIcon.svelte';
 import GmailIcon from './icons/GmailIcon.svelte';
 import GSheetsIcon from './icons/GSheetsIcon.svelte';
@@ -42,7 +42,7 @@ export let width = '24px';
 	{:else if name === 'slack'}
 		<Slack {height} {width} />
 	{:else if name === 'github'}
-		<Icon data={faGithub} scale={1.4} />
+		<GithubIcon />
 	{:else if name === 'gmail'}
 		<GmailIcon {height} {width} />
 	{:else if name === 'gsheets'}

package/components/InputTransformForm.svelte

@@ -2,11 +2,11 @@
 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, getDefaultExpr, isCodeInjection } from './flows/utils';
 import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 export let schema;
 export let arg;
@@ -188,7 +188,7 @@ $: checked = propertyType == 'javascript';
 				}}
 			>
 				<div class="border rounded p-2 mt-2 border-gray-300">
-					<Editor
+					<SimpleEditor
 						bind:this={monacos[argName]}
 						on:focus={() => focusProp(argName, true)}
 						bind:code={arg.expr}

package/components/ModuleStep.svelte

@@ -114,7 +114,7 @@ $: opened = $stepOpened === String(indexes.join('-'));
 						inputTransform={true}
 						importPath={String(indexes.join('-'))}
 						bind:pickableProperties={stepPropPicker.pickableProperties}
-						bind:args={mod.input_transform}
+						bind:args={mod.input_transforms}
 						bind:extraLib={stepPropPicker.extraLib}
 					/>
 				{/if}

package/components/Multiselect.svelte

@@ -82,7 +82,7 @@
 		}
 	}
 
-	function handleBlur(e) {
+	function handleBlur() {
 		optionsVisibility(false)
 	}
 

package/components/SchemaEditor.svelte

@@ -3,9 +3,9 @@ import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -208,7 +208,7 @@ function switchTab() {
 			</div>
 		{:else}
 			<div class="border rounded mt-4 p-2">
-				<Editor
+				<SimpleEditor
 					on:change={() => {
 						try {
 							schema = JSON.parse(schemaString)

package/components/SchemaViewer.svelte

@@ -2,77 +2,67 @@
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import TableCustom from './TableCustom.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
 export let schema = emptySchema();
-let viewJsonSchema = false;
 </script>
 
 <div class="w-full">
-	<div class="flex flex-col sm:flex-row text-base">
-		<button
-			class="text-xs sm:text-base py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  {viewJsonSchema
-				? 'text-gray-500 '
-				: 'text-gray-700 font-semibold  '}"
-			on:click={() => (viewJsonSchema = false)}
-		>
-			arguments
-		</button><button
-			class="py-1 px-6 block hover:text-blue-500 focus:outline-none border-gray-200  {viewJsonSchema
-				? 'text-gray-700 font-semibold '
-				: 'text-gray-500'}"
-			on:click={() => (viewJsonSchema = true)}
-		>
-			advanced
-		</button>
-	</div>
-</div>
-<!--json schema or table view-->
-<div class="border-t py-1">
-	<div class={viewJsonSchema ? 'hidden' : ''}>
-		{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-			<div class="flex flex-row">
-				<TableCustom>
-					<tr slot="header-row" class="underline">
-						<th>name</th>
-						<th>type</th>
-						<th>description</th>
-						<th>default</th>
-						<th>format</th>
-						<th>required</th>
-					</tr>
-					<tbody slot="body">
-						{#each Object.entries(schema.properties) as [name, property] (name)}
-							<tr>
-								<td>{name}</td>
-								<td
-									>{#if !property.type} any {:else} {property.type} {/if}</td
-								>
-								<td>{property.description}</td>
-								<td
-									>{property.default == '<function call>'
-										? '<function call>'
-										: property.default
-										? JSON.stringify(property.default)
-										: ''}</td
-								>
-								<td
-									>{property.format ?? ''}
-									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
-								>
-								<td
-									>{#if schema.required.includes(name)}
-										<span class="text-red-600 font-bold text-lg">*</span>
-									{/if}</td
-								>
+	<Tabs selected="arguments">
+		<Tab value="arguments">Arguments</Tab>
+		<Tab value="advanced">Advanced</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="arguments">
+				{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
+					<div class="flex flex-row">
+						<TableCustom>
+							<tr slot="header-row" class="underline">
+								<th>name</th>
+								<th>type</th>
+								<th>description</th>
+								<th>default</th>
+								<th>format</th>
+								<th>required</th>
 							</tr>
-						{/each}
-					</tbody>
-				</TableCustom>
-			</div>
-		{:else}
-			<div class="text-gray-700 text-xs italic">This script has no arguments</div>
-		{/if}
-	</div>
-	<div class={viewJsonSchema ? '' : 'hidden'}>
-		<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
-	</div>
+							<tbody slot="body">
+								{#each Object.entries(schema.properties) as [name, property] (name)}
+									<tr>
+										<td>{name}</td>
+										<td
+											>{#if !property.type} any {:else} {property.type} {/if}</td
+										>
+										<td>{property.description}</td>
+										<td
+											>{property.default == '<function call>'
+												? '<function call>'
+												: property.default
+												? JSON.stringify(property.default)
+												: ''}</td
+										>
+										<td
+											>{property.format ?? ''}
+											{property.contentEncoding
+												? `(encoding: ${property.contentEncoding})`
+												: ''}</td
+										>
+										<td
+											>{#if schema.required.includes(name)}
+												<span class="text-red-600 font-bold text-lg">*</span>
+											{/if}</td
+										>
+									</tr>
+								{/each}
+							</tbody>
+						</TableCustom>
+					</div>
+				{:else}
+					<div class="text-gray-700 text-xs italic">This script has no arguments</div>
+				{/if}
+			</TabContent>
+			<TabContent value="advanced">
+				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
 </div>