windmill-components 1.34.0 → 1.35.0

package/components/AppConnect.svelte

@@ -225,7 +225,7 @@ $: isGoogleSignin =
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
-				{#each extra_params as [k, v], i}
+				{#each extra_params as [k, v]}
 					<div class="flex flex-row max-w-md">
 						<input type="text" bind:value={k} />
 						<input type="text" bind:value={v} />

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
-<div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20 mr-2 lg:mr-0">
-	<div class="grow w-full h-full mt-4">
+<div class="py-6">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
 		<slot />
 	</div>
 </div>

package/components/EditorBar.svelte

@@ -1,9 +1,8 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCube, faFile, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { hubScripts, workspaceStore } from '../stores';
-import { Button } from 'flowbite-svelte';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
 import ItemPicker from './ItemPicker.svelte';
@@ -157,55 +156,69 @@ async function loadScripts() {
 </ItemPicker>
 
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex flex-row w-full">
-	<div class="flex flex-row w-full space-x-2 whitespace-nowrap">
-		<Button
-			size="xs"
-			color="alternative"
+<div class="flex divide-x items-center">
+	<div>
+		<button
+			type="button"
+			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				variablePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Variable picker
-		</Button>
-
-		<Button
-			size="xs"
-			color="alternative"
+			<Icon data={faFile} class="h-4 w-4 mr-2" />
+			Insert variable
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				resourcePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Resource picker
-		</Button>
+			<Icon data={faCube} class="h-4 w-4 mr-2" />
+			Insert resource
+		</button>
+	</div>
 
-		<Button
-			size="xs"
-			color="alternative"
+	<div>
+		<button
+			type="button"
+			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
 			on:click={() => {
 				scriptPicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Script explorer
-		</Button>
+			<Icon data={faCode} class="h-4 w-4 mr-2" />
+			Search script
+		</button>
 	</div>
-	<div class="flex flex-row-reverse gap-x-2 w-full">
-		<Button
-			size="xs"
-			class={!websocketAlive.pyright && !websocketAlive.deno && !websocketAlive.black
-				? 'bg-red-50'
-				: ''}
-			color="alternative"
+
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
+			on:click={() => {
+				editor.clearContent()
+			}}
+		>
+			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
+			Reset content
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				editor.reloadWebsocket()
 			}}
 		>
+			<Icon data={faRotate} class="h-4 w-4 mr-2" />
+
 			Reload assistants
 			<span class="ml-1">
 				{#if lang == 'deno'}
@@ -216,13 +229,6 @@ async function loadScripts() {
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
-		</Button>
-		<Button
-			size="xs"
-			color="alternative"
-			on:click={() => {
-				editor.clearContent()
-			}}>Reset content</Button
-		>
+		</button>
 	</div>
 </div>

package/components/FlowBuilder.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { FlowService, Job, ScheduleService } from '../gen';
+import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
@@ -8,7 +8,7 @@ import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import { OFFSET } from './CronInput.svelte';
-import Drawer from './Drawer.svelte';
+import Drawer from './common/drawer/Drawer.svelte';
 import FlowEditor from './FlowEditor.svelte';
 import FlowPreviewContent from './FlowPreviewContent.svelte';
 import { flowStateStore, flowStateToFlow } from './flows/flowState';
@@ -133,8 +133,8 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-row w-full h-full justify-between">
-	<div class={`flex flex-col mb-96 m-auto w-full sm:w-3/4 lg:w-2/3`}>
+<div class="flex flex-row w-full h-full justify-between ">
+	<div class={`flex flex-col mb-96 m-auto w-full`}>
 		<!-- Nav between steps-->
 		<div class="justify-between flex flex-row w-full my-4">
 			<Breadcrumb>

package/components/FlowJobResult.svelte

@@ -1,24 +1,23 @@
 <script>import DisplayResult from './DisplayResult.svelte';
-import Tabs from './tabs/Tabs.svelte';
-import Tab from './tabs/Tab.svelte';
-import TabPanel from './tabs/TabPanel.svelte';
-let value = 0;
+import Tabs from './common/tabs/Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
 export let job;
 </script>
 
 {#if job}
-	<div>
-		<Tabs>
-			<Tab bind:value index={0}>Results</Tab>
-			<Tab bind:value index={1}>Logs</Tab>
-		</Tabs>
-		<TabPanel bind:value index={0} class="border p-2 h-36 overflow-y-scroll">
-			<DisplayResult result={job.result} />
-		</TabPanel>
-		<TabPanel bind:value index={1} class="border p-2 h-36 overflow-y-scroll">
-			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{job.logs}</pre>
-			</div>
-		</TabPanel>
-	</div>
+	<Tabs selected="results">
+		<Tab value="results">Results</Tab>
+		<Tab value="logs">Logs</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="results" class="border p-2 h-36 overflow-y-scroll">
+				<DisplayResult result={job.result} />
+			</TabContent>
+			<TabContent value="logs" class="border p-2 h-36 overflow-y-scroll">
+				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+					<pre class="w-full">{job.logs}</pre>
+				</div>
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
 {/if}

package/components/FlowModulesViewer.svelte

@@ -0,0 +1,97 @@
+<script>import { scriptPathToHref } from '../utils';
+import Highlight from 'svelte-highlight';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
+import { slide } from 'svelte/transition';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
+export let modules;
+let open = {};
+</script>
+
+<p class="font-black text-lg my-6 w-full">
+	<span>{modules?.length} Step{modules?.length > 1 ? 's' : ''} </span>
+	<span class="mt-4" />
+</p>
+<ul class="-mb-8 w-full">
+	{#each modules ?? [] as mod, i}
+		<li class="w-full">
+			<div class="relative pb-8 w-full">
+				{#if i < (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'}
+									<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_transforms} />
+													<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_transforms} />
+											<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 modules={mod.value.modules} />
+								{/if}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	{/each}
+</ul>

package/components/FlowModulesViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../gen';
+declare const __propDef: {
+    props: {
+        modules: FlowModule[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModulesViewerProps = typeof __propDef.props;
+export declare type FlowModulesViewerEvents = typeof __propDef.events;
+export declare type FlowModulesViewerSlots = typeof __propDef.slots;
+export default class FlowModulesViewer extends SvelteComponentTyped<FlowModulesViewerProps, FlowModulesViewerEvents, FlowModulesViewerSlots> {
+}
+export {};

package/components/FlowPreview.svelte

@@ -1,14 +1,14 @@
-<script>import { workspaceStore } from '../stores';
-import { sendUserToast, truncateRev } from '../utils';
+<script>import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
 import { flowStateStore, flowStateToFlow } from './flows/flowState';
 import { mapJobResultsToFlowState } from './flows/flowStateUtils';
 import { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
-import Tabs from './Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
 export let i;
 export let flow;
 export let schema;
@@ -37,14 +37,14 @@ function extractStep(flow) {
     return localFlow;
 }
 function setInputTransformFromArgs(flow, args) {
-    let input_transform = {};
+    let input_transforms = {};
     Object.entries(args).forEach(([key, value]) => {
-        input_transform[key] = {
+        input_transforms[key] = {
             type: 'static',
             value: value
         };
     });
-    flow.value.modules[0].input_transform = input_transform;
+    flow.value.modules[0].input_transforms = input_transforms;
     return flow;
 }
 </script>
@@ -65,33 +65,34 @@ function setInputTransformFromArgs(flow, args) {
 
 {#if viewPreview}
 	{#if i != flow.value.modules.length}
-		<Tabs
-			tabs={[
-				['upto', uptoText],
-				['justthis', 'preview just this step']
-			]}
-			bind:tab
-		/>
-	{/if}
-	<div class="my-2" />
-	{#if tab == 'upto'}
-		<RunForm
-			runnable={truncateFlow(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText={uptoText}
-			detailed={false}
-			bind:args
-		/>
-	{:else}
-		<RunForm
-			runnable={extractStep(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText="Preview just this step"
-			detailed={false}
-			args={stepArgs}
-		/>
+		<div class="mt-2">
+			<Tabs bind:selected={tab}>
+				<Tab value="upto">{uptoText}</Tab>
+				<Tab value="justthis">Preview just this step</Tab>
+				<svelte:fragment slot="content">
+					<TabContent value="upto">
+						<RunForm
+							runnable={truncateFlow(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText={uptoText}
+							detailed={false}
+							bind:args
+						/>
+					</TabContent>
+					<TabContent value="justthis">
+						<RunForm
+							runnable={extractStep(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText="Preview just this step"
+							detailed={false}
+							args={stepArgs}
+						/>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
+		</div>
 	{/if}
 
 	{#if jobId}

package/components/FlowPreviewContent.svelte

@@ -72,7 +72,10 @@ onDestroy(() => {
 		{#if jobId}
 			<FlowStatusViewer
 				{jobId}
-				on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, 'upto', steps - 1)}
+				on:jobsLoaded={(e) => {
+					intervalState = 'done'
+					mapJobResultsToFlowState(e.detail, 'upto', steps - 1)
+				}}
 				root={true}
 			/>
 		{/if}

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>