windmill-components 1.28.7 → 1.35.1

package/components/FlowBuilder.svelte

@@ -1,25 +1,27 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
-import { clearPreviewResults, previewResults, workspaceStore } from '../stores';
+import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 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 './common/drawer/Drawer.svelte';
 import FlowEditor from './FlowEditor.svelte';
 import FlowPreviewContent from './FlowPreviewContent.svelte';
-import { flowStore, mode } from './flows/flowStore';
-import { flowToMode, jobsToResults } from './flows/utils';
+import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import { cleanInputs } from './flows/utils';
 import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let scheduleArgs;
-let previewArgs;
-let scheduleEnabled;
-let scheduleCron;
 let previewOpen = false;
+let scheduleArgs = {};
+let previewArgs = {};
+let scheduleEnabled = false;
+let scheduleCron = '';
 $: step = Number($page.url.searchParams.get('step')) || 1;
 async function createSchedule(path) {
     await ScheduleService.createSchedule({
@@ -36,7 +38,7 @@ async function createSchedule(path) {
     });
 }
 async function saveFlow() {
-    const flow = flowToMode($flowStore, $mode);
+    const flow = cleanInputs(flowStateToFlow($flowStateStore, $flowStore));
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
@@ -48,7 +50,7 @@ async function saveFlow() {
                 schema: flow.schema
             }
         });
-        if ($mode == 'pull') {
+        if (scheduleEnabled) {
             await createSchedule(flow.path);
         }
     }
@@ -103,28 +105,36 @@ async function saveFlow() {
     goto(`/flows/get/${$flowStore.path}`);
 }
 async function changeStep(step) {
-    if (step === 2 && previewOpen) {
-        previewOpen = false;
-    }
     goto(`?step=${step}`);
 }
+flowStateStore.subscribe((flowState) => {
+    if (flowState) {
+        flowStore.update((flow) => {
+            if (flow) {
+                return flowStateToFlow(flowState, flow);
+            }
+            return flow;
+        });
+    }
+});
 flowStore.subscribe((flow) => {
     if (flow) {
-        setQueryWithoutLoad($page.url, 'state', encodeState(flowToMode(flow, $mode)));
+        setQueryWithoutLoad($page.url, 'state', encodeState(flow));
     }
 });
 onMount(() => {
     loadHubScripts();
-    clearPreviewResults();
 });
 onDestroy(() => {
     //@ts-ignore
     $flowStore = undefined;
+    //@ts-ignore
+    $flowStateStore = undefined;
 });
 </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 xl:w-1/2`}>
+<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>
@@ -157,6 +167,12 @@ onDestroy(() => {
 					</button>
 				{:else}
 					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							changeStep(1)
+						}}>Back</button
+					>
 				{/if}
 			</div>
 		</div>
@@ -169,7 +185,7 @@ onDestroy(() => {
 
 		<!-- metadata -->
 
-		{#if $flowStore}
+		{#if $flowStateStore}
 			{#if step === 1}
 				<FlowEditor
 					bind:pathError
@@ -203,20 +219,10 @@ onDestroy(() => {
 			<p>Loading</p>
 		{/if}
 	</div>
-
-	<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
-		<div class="absolute top-0 h-full">
-			{#if $flowStore && step === 1}
-				<div class="fixed border-l-2 right-0 h-screen w-1/2 sm:w-1/3">
-					<FlowPreviewContent
-						bind:args={previewArgs}
-						on:close={() => (previewOpen = !previewOpen)}
-						on:change={(e) => {
-							previewResults.set(jobsToResults(e.detail))
-						}}
-					/>
-				</div>
-			{/if}
-		</div>
-	</div>
 </div>
+
+{#if $flowStateStore && $flowStore}
+	<Drawer bind:open={previewOpen} size="800px">
+		<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
+	</Drawer>
+{/if}

package/components/FlowEditor.svelte

@@ -1,14 +1,9 @@
 <script>import { ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
-import { pathIsEmpty } from '../utils';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import FlowInput from './flows/FlowInput.svelte';
 import FlowSettings from './flows/FlowSettings.svelte';
-import { addModule, flowStore, mode } from './flows/flowStore';
-import ModuleStep from './ModuleStep.svelte';
-import Tooltip from './Tooltip.svelte';
+import { flowStateStore } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import FlowTimeline from './flows/FlowTimeline.svelte';
 export let pathError = '';
 export let initialPath = '';
 export let scheduleArgs = {};
@@ -38,59 +33,23 @@ async function loadSchedule() {
 $: if ($flowStore && $workspaceStore && initialPath != '') {
     loadSchedule();
 }
-let open = 0;
 </script>
 
-{#if $flowStore}
-	<div class="flex space-y-8 flex-col items-center line">
-		<FlowSettings
-			bind:pathError
-			bind:initialPath
-			bind:scheduleArgs
-			{previewArgs}
-			bind:scheduleCron
-			bind:scheduleEnabled
-			bind:open
-		/>
-		<FlowInput />
-		{#each $flowStore?.value.modules as mod, i}
-			<ModuleStep bind:open bind:mod bind:args={previewArgs} {i} />
-			{#if i == 0 && $mode == 'pull'}
-				<div class="flex justify-center bg-white shadow p-2">
-					<p>
-						Starting from here, the flow for loop over items from the 1st step's result right above.
-						&nbsp; <br />For-loops insertable at other points is not supported yet but coming soon
-						(See
-						<a href="https://github.com/windmill-labs/windmill/issues/350">#350</a>.)
-					</p>
-					<Tooltip>
-						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of
-						items returned by the trigger script right above. Retrieve the item value using
-						`flow_input._value`
-					</Tooltip>
-				</div>
-			{/if}
-		{/each}
-		<Button
-			disabled={pathIsEmpty($flowStore.path)}
-			class="blue-button"
-			on:click={() => {
-				addModule()
-				open = $flowStore?.value.modules.length - 1
-			}}
-		>
-			<Icon class="text-white mr-2" data={faPlus} />
-			Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
-		</Button>
+{#if $flowStateStore}
+	<div class="flex space-y-8 flex-col items-center">
+		<FlowTimeline bind:args={previewArgs} bind:flowModuleSchemas={$flowStateStore}>
+			<div slot="settings">
+				<FlowSettings
+					bind:pathError
+					bind:initialPath
+					bind:scheduleArgs
+					{previewArgs}
+					bind:scheduleCron
+					bind:scheduleEnabled
+				/>
+			</div>
+		</FlowTimeline>
 	</div>
 {:else}
 	<h3>Loading flow</h3>
 {/if}
-
-<style>
-	.line {
-		background-image: linear-gradient(#e5e7eb, #e5e7eb);
-		background-size: 2px 100%;
-		background-repeat: no-repeat;
-		background-position: center center;
-	}</style>

package/components/FlowJobResult.svelte

@@ -1,23 +1,23 @@
-<script>import ChevronButton from './ChevronButton.svelte';
-import DisplayResult from './DisplayResult.svelte';
+<script>import DisplayResult from './DisplayResult.svelte';
+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 class="flex flex-col ml-10">
-		<div>
-			<ChevronButton text="result" viewOptions={true}>
-				<div class="text-xs">
-					<DisplayResult result={job.result} />
-				</div>
-			</ChevronButton>
-		</div>
-		<div>
-			<ChevronButton text="logs" viewOptions={true}>
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border mt-1">
+	<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>
-			</ChevronButton>
-		</div>
-	</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,35 +1,28 @@
-<script>import { Job, JobService } from '../gen';
-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 { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
-import FlowJobResult from './FlowJobResult.svelte';
+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';
-const dispatch = createEventDispatcher();
+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 schemas = [];
+export let schema;
 export let args = {};
 let stepArgs = {};
 let tab = 'upto';
 let viewPreview = false;
-let intervalId;
 let uptoText = i >= flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
-let job;
-let jobs = [];
 let jobId;
-$: dispatch('change', jobs);
 export async function runPreview(args) {
     viewPreview = true;
-    intervalId && clearInterval(intervalId);
+    flow = flowStateToFlow($flowStateStore, flow);
     let newFlow = tab == 'upto' ? truncateFlow(flow) : setInputTransformFromArgs(extractStep(flow), args);
     jobId = await runFlowPreview(args, newFlow);
-    jobs = [];
-    intervalId = setInterval(loadJob, 1000);
     sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
 }
 function truncateFlow(flow) {
@@ -40,35 +33,20 @@ function truncateFlow(flow) {
 function extractStep(flow) {
     const localFlow = JSON.parse(JSON.stringify(flow));
     localFlow.value.modules = flow.value.modules.slice(i, i + 1);
-    localFlow.schema = schemas[i];
+    localFlow.schema = schema;
     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;
 }
-async function loadJob() {
-    try {
-        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
-        if (job?.type == 'CompletedJob') {
-            //only CompletedJob has success property
-            clearInterval(intervalId);
-        }
-    }
-    catch (err) {
-        sendUserToast(err, true);
-    }
-}
-onDestroy(() => {
-    intervalId && clearInterval(intervalId);
-});
 </script>
 
 <button
@@ -87,41 +65,43 @@ onDestroy(() => {
 
 {#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 job}
+	{#if jobId}
 		<div class="w-full flex justify-center">
-			<FlowStatusViewer {job} bind:jobs />
+			<FlowStatusViewer
+				{jobId}
+				on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, tab, i)}
+				root={true}
+			/>
 		</div>
-		{#if `result` in job}
-			<FlowJobResult {job} />
-		{/if}
 	{/if}
 {/if}

package/components/FlowPreview.svelte.d.ts

@@ -1,17 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import { type Flow } from '../gen';
+import type { Flow } from '../gen';
 declare const __propDef: {
     props: {
         i: number;
         flow: Flow;
-        schemas?: Schema[] | undefined;
+        schema: Schema;
         args?: Record<string, any> | undefined;
         runPreview?: ((args: any) => Promise<void>) | undefined;
     };
     events: {
-        change: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};