windmill-components 1.22.42 → 1.28.3

package/components/FlowBuilder.svelte

@@ -1,93 +1,149 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { FlowService, ScriptService } from '../gen';
-import { clearPreviewResults, hubScripts, workspaceStore } from '../stores';
-import { loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
-import { onMount } from 'svelte';
+import { FlowService, ScheduleService } from '../gen';
+import { clearPreviewResults, previewResults, 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 FlowEditor from './FlowEditor.svelte';
-import { flowStore } from './flows/flowStore';
-import { flowToMode } from './flows/utils';
+import FlowPreviewContent from './FlowPreviewContent.svelte';
+import { flowStore, mode } from './flows/flowStore';
+import { flowToMode, jobsToResults } from './flows/utils';
 import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let mode;
+let scheduleArgs;
+let scheduleEnabled;
+let scheduleCron;
+let previewOpen = false;
 $: step = Number($page.url.searchParams.get('step')) || 1;
+async function createSchedule(path) {
+    await ScheduleService.createSchedule({
+        workspace: $workspaceStore,
+        requestBody: {
+            path: path,
+            schedule: formatCron(scheduleCron),
+            offset: OFFSET,
+            script_path: path,
+            is_flow: true,
+            args: scheduleArgs,
+            enabled: scheduleEnabled
+        }
+    });
+}
 async function saveFlow() {
-    const newFlow = flowToMode($flowStore, mode);
+    const flow = flowToMode($flowStore, $mode);
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
             requestBody: {
-                path: newFlow.path,
-                summary: newFlow.summary,
-                description: newFlow.description ?? '',
-                value: newFlow.value,
-                schema: newFlow.schema
+                path: flow.path,
+                summary: flow.summary,
+                description: flow.description ?? '',
+                value: flow.value,
+                schema: flow.schema
             }
         });
+        if ($mode == 'pull') {
+            await createSchedule(flow.path);
+        }
     }
     else {
         await FlowService.updateFlow({
             workspace: $workspaceStore,
-            path: newFlow.path,
+            path: initialPath,
             requestBody: {
-                path: newFlow.path,
-                summary: newFlow.summary,
-                description: newFlow.description ?? '',
-                value: newFlow.value,
-                schema: newFlow.schema
+                path: flow.path,
+                summary: flow.summary,
+                description: flow.description ?? '',
+                value: flow.value,
+                schema: flow.schema
             }
         });
+        const scheduleExists = await ScheduleService.existsSchedule({
+            workspace: $workspaceStore ?? '',
+            path: initialPath
+        });
+        if (scheduleExists) {
+            const schedule = await ScheduleService.getSchedule({
+                workspace: $workspaceStore ?? '',
+                path: initialPath
+            });
+            if (schedule.path != flow.path ||
+                JSON.stringify(schedule.args) != JSON.stringify(scheduleArgs) ||
+                schedule.schedule != scheduleCron) {
+                await ScheduleService.updateSchedule({
+                    workspace: $workspaceStore ?? '',
+                    path: initialPath,
+                    requestBody: {
+                        schedule: formatCron(scheduleCron),
+                        script_path: flow.path,
+                        is_flow: true,
+                        args: scheduleArgs
+                    }
+                });
+            }
+            if (scheduleEnabled != schedule.enabled) {
+                await ScheduleService.setScheduleEnabled({
+                    workspace: $workspaceStore ?? '',
+                    path: flow.path,
+                    requestBody: { enabled: scheduleEnabled }
+                });
+            }
+        }
+        else {
+            await createSchedule(flow.path);
+        }
     }
     sendUserToast(`Success! flow saved at ${$flowStore.path}`);
     goto(`/flows/get/${$flowStore.path}`);
 }
 async function changeStep(step) {
+    if (step === 2 && previewOpen) {
+        previewOpen = false;
+    }
     goto(`?step=${step}`);
 }
 flowStore.subscribe((flow) => {
-    setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(flowToMode(flow, mode))));
+    if (flow) {
+        setQueryWithoutLoad($page.url, 'state', encodeState(flowToMode(flow, $mode)));
+    }
 });
 onMount(() => {
     loadHubScripts();
     clearPreviewResults();
 });
+onDestroy(() => {
+    //@ts-ignore
+    $flowStore = undefined;
+});
 </script>
 
-<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
-	<!-- Nav between steps-->
-	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
-			<div class="wizard-nav flex flex-row w-full">
-				<button
-					disabled={pathError != ''}
-					class="{step === 1
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(1)
-					}}>Step 1: Flow</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 2
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(2)
-					}}>Step 2: UI customisation</button
-				>
-			</div>
+<div class="flex flex-row w-full h-full justify-between">
+	<div class={`flex flex-col mb-96 m-auto w-1/2`}>
+		<!-- Nav between steps-->
+		<div class="justify-between flex flex-row w-full my-4">
+			<Breadcrumb>
+				<BreadcrumbItem>
+					<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+						Flow Editor
+					</button>
+				</BreadcrumbItem>
+				<BreadcrumbItem>
+					<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
+						UI customisation
+					</button>
+				</BreadcrumbItem>
+			</Breadcrumb>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step == 1}
 					<button
 						disabled={pathError != ''}
 						class="default-button px-6 max-h-8"
-						on:click={() => {
-							changeStep(step + 1)
-						}}
+						on:click={() => changeStep(2)}
 					>
 						Next
 					</button>
@@ -105,31 +161,60 @@ onMount(() => {
 		</div>
 		<div class="flex flex-row-reverse">
 			<span class="my-1 text-sm text-gray-500 italic">
-				{#if initialPath && initialPath != $flowStore.path} {initialPath} &rightarrow; {/if}
-				{$flowStore.path}
+				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
+				{$flowStore?.path}
 			</span>
 		</div>
-	</div>
 
-	<!-- metadata -->
+		<!-- metadata -->
 
-	{#if step === 1}
-		<FlowEditor bind:mode bind:pathError bind:initialPath />
-	{:else if step === 2}
-		<ScriptSchema
-			synchronizedHeader={false}
-			bind:summary={$flowStore.summary}
-			bind:description={$flowStore.description}
-			bind:schema={$flowStore.schema}
-		/>
-	{/if}
-</div>
+		{#if $flowStore}
+			{#if step === 1}
+				<FlowEditor
+					bind:pathError
+					bind:initialPath
+					bind:scheduleEnabled
+					bind:scheduleCron
+					bind:scheduleArgs
+				/>
+				<Button
+					disabled={pathIsEmpty($flowStore.path)}
+					size="lg"
+					pill
+					on:click={() => (previewOpen = !previewOpen)}
+					class={`blue-button fixed bottom-10 right-10 ${previewOpen ? 'hidden' : ''}`}
+				>
+					Preview flow
+					{pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
 
-<style>
-	/* .wizard-nav {
-		@apply w-1/2 sm:w-1/4;
-	} */
+					<Icon data={faPlay} class="ml-2" />
+				</Button>
+			{:else if step === 2}
+				<ScriptSchema
+					synchronizedHeader={false}
+					bind:summary={$flowStore.summary}
+					bind:description={$flowStore.description}
+					bind:schema={$flowStore.schema}
+				/>
+			{/if}
+		{:else}
+			<p>Loading</p>
+		{/if}
+	</div>
 
-	.wizard-nav button {
-		max-height: 30px;
-	}</style>
+	<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/3">
+					<FlowPreviewContent
+						bind:args={scheduleArgs}
+						on:close={() => (previewOpen = !previewOpen)}
+						on:change={(e) => {
+							previewResults.set(jobsToResults(e.detail))
+						}}
+					/>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/components/FlowEditor.svelte

@@ -1,214 +1,93 @@
-<script>import { FlowModuleValue } from '../gen';
-import { faFileExport, faFileImport, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons';
+<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 FlowPreview from './FlowPreview.svelte';
-import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte';
-import { addModule, flowStore } from './flows/flowStore';
+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 Path from './Path.svelte';
-import RadioButtonV2 from './RadioButtonV2.svelte';
-import SchemaEditor from './SchemaEditor.svelte';
-import Required from './Required.svelte';
-import { pathIsEmpty, sendUserToast } from '../utils';
-import Dropdown from './Dropdown.svelte';
-import Editor from './Editor.svelte';
-import Modal from './Modal.svelte';
-import FlowViewer from './FlowViewer.svelte';
-import { flowToMode } from './flows/utils';
+import Tooltip from './Tooltip.svelte';
 export let pathError = '';
 export let initialPath = '';
-let jsonSetter;
-let jsonViewer;
-let jsonValue = '';
+export let scheduleArgs = {};
+export let scheduleEnabled = false;
+export let scheduleCron = '0 */5 * * *';
+let scheduleLoaded = false;
+async function loadSchedule() {
+    if (!scheduleLoaded) {
+        scheduleLoaded = true;
+        const existsSchedule = await ScheduleService.existsSchedule({
+            workspace: $workspaceStore ?? '',
+            path: initialPath
+        });
+        if (existsSchedule) {
+            const schedule = await ScheduleService.getSchedule({
+                workspace: $workspaceStore ?? '',
+                path: initialPath
+            });
+            scheduleEnabled = schedule.enabled;
+            scheduleCron = schedule.schedule;
+            scheduleArgs = schedule.args ?? {};
+        }
+    }
+}
+$: if ($flowStore && $workspaceStore && initialPath != '') {
+    loadSchedule();
+}
 let open = 0;
 let args = {};
-export let mode = $flowStore?.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW ? 'pull' : 'push';
-$: numberOfSteps = $flowStore?.value.modules.length - 1;
 </script>
 
-<Modal bind:this={jsonSetter}>
-	<div slot="title">Import JSON</div>
-	<div slot="content" class="h-full">
-		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
-	</div>
-	<div slot="submission">
-		<button
-			class="default-button px-4 py-2 font-semibold"
+{#if $flowStore}
+	<div class="flex space-y-8 flex-col items-center line">
+		<FlowSettings
+			bind:pathError
+			bind:initialPath
+			bind:scheduleArgs
+			bind:scheduleCron
+			bind:scheduleEnabled
+			bind:open
+		/>
+		<FlowInput />
+		{#each $flowStore?.value.modules as mod, i}
+			<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
+			{#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 1rst step's result right above
+						&nbsp; <br />We do not support any other kind of for-loop at the moment but we will very
+						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={() => {
-				Object.assign($flowStore, JSON.parse(jsonValue))
-				$flowStore = $flowStore
-				open = -1
-				sendUserToast('Flow imported from JSON')
-				jsonSetter.closeModal()
+				addModule()
+				open = $flowStore?.value.modules.length - 1
 			}}
 		>
-			Import
-		</button>
-	</div></Modal
->
-
-<Modal bind:this={jsonViewer}>
-	<div slot="title">See JSON</div>
-	<div slot="content" class="h-full">
-		<FlowViewer flow={flowToMode($flowStore, mode)} tab="json" />
+			<Icon class="text-white mr-2" data={faPlus} />
+			Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
+		</Button>
 	</div>
-</Modal>
-
-<div class="flow-root bg-gray-50 rounded-xl border  border-gray-200">
-	<ul class="relative -mt-10">
-		<span class="absolute top-0 left-1/2  h-full w-1 bg-gray-400" aria-hidden="true" />
-		<div class="relative">
-			<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-				<div
-					class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto p-4"
-				>
-					<div class="flex flex-row-reverse mr-4">
-						<Dropdown
-							dropdownItems={[
-								{
-									displayName: 'Import from JSON',
-									icon: faFileImport,
-									action: () => {
-										jsonSetter.openModal()
-									}
-								},
-								{
-									displayName: 'Export to JSON',
-									icon: faFileExport,
-									action: () => {
-										jsonViewer.openModal()
-									}
-								},
-								{
-									displayName: 'Publish to Hub',
-									icon: faGlobe,
-									action: () => {
-										const url = new URL('https://hub.windmill.dev/flows/add')
-										url.searchParams.append(
-											'flow',
-											btoa(JSON.stringify(flowToMode($flowStore, mode).value))
-										)
-										url.searchParams.append('schema', btoa(JSON.stringify($flowStore.schema)))
-										url.searchParams.append('description', $flowStore.description ?? '')
-										url.searchParams.append('summary', $flowStore.summary)
-										window.open(url, '_blank')?.focus()
-									}
-								}
-							]}
-							relative={false}
-						/>
-					</div>
-					<div class="mb-8 p-4">
-						<Path
-							bind:error={pathError}
-							bind:path={$flowStore.path}
-							{initialPath}
-							namePlaceholder="my_flow"
-							kind="flow"
-						>
-							<div slot="ownerToolkit">
-								Flow permissions depend on their path. Select the group <span class="font-mono"
-									>all</span
-								>
-								to share your flow, and <span class="font-mono">user</span> to keep it private.
-								<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-							</div>
-						</Path>
-
-						<label class="block mt-4">
-							<span class="text-gray-700">Summary <Required required={false} /></span>
-							<textarea
-								bind:value={$flowStore.summary}
-								class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-								placeholder="A very short summary of the flow displayed when the flow is listed"
-								rows="1"
-							/>
-						</label>
-					</div>
-					<RadioButtonV2
-						options={[
-							[
-								{
-									title: 'Push',
-									desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-								},
-								'push'
-							],
-							[
-								{
-									title: 'Pull',
-									desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-								},
-								'pull'
-							]
-						]}
-						bind:value={mode}
-					/>
-				</div>
-			</li>
-			<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-				<div class="bg-white border border-gray xl-rounded shadow-lg w-full mx-4 xl:mx-20">
-					<div
-						class="flex items-center justify-between flex-wra px-4 py-5 border-b border-gray-200 sm:px-6"
-					>
-						<h3 class="text-lg leading-6 font-medium text-gray-900">Flow Input</h3>
-						<CopyFirstStepSchema />
-					</div>
-					<div class="p-4">
-						<SchemaEditor schema={$flowStore.schema} />
-						<div class="my-4" />
-						<FlowPreview {mode} flow={$flowStore} i={numberOfSteps} bind:args />
-					</div>
-				</div>
-			</li>
-			{#each $flowStore?.value.modules as mod, i}
-				<li class="relative mt-16">
-					<div class="relative flex justify-center">
-						<button
-							class="default-button h-10 w-10 shadow-blue-600/40  border-blue-600 shadow"
-							on:click={() => {
-								addModule(i)
-								open = i
-							}}
-						>
-							<Icon class="text-white mb-1" data={faPlus} />
-						</button>
-					</div>
-				</li>
-				<ModuleStep bind:open bind:mod bind:args {i} {mode} />
-			{/each}
-			<li class="relative m-20 ">
-				<div class="relative flex justify-center">
-					<button
-						disabled={pathIsEmpty($flowStore.path)}
-						class="default-button h-10 w-10 shadow"
-						on:click={() => {
-							addModule()
-							open = $flowStore?.value.modules.length - 1
-						}}
-					>
-						<Icon class="text-white mb-1" data={faPlus} />
-						Add step {pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
-					</button>
-				</div>
-			</li>
-		</div>
-	</ul>
-</div>
-<div class="py-10 bg-white" />
+{:else}
+	<h3>Loading flow</h3>
+{/if}
 
 <style>
-	.shadow:not([disabled]) {
-    --tw-border-opacity: 1;
-    border-color: rgb(37 99 235 / var(--tw-border-opacity));
-    --tw-shadow-color: rgb(37 99 235 / 0.4);
-    --tw-shadow: var(--tw-shadow-colored)
-}</style>
+	.line {
+		background-image: linear-gradient(#e5e7eb, #e5e7eb);
+		background-size: 2px 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+	}</style>

package/components/FlowEditor.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
         pathError?: string | undefined;
         initialPath?: string | undefined;
-        mode?: FlowMode | undefined;
+        scheduleArgs?: Record<string, any> | undefined;
+        scheduleEnabled?: boolean | undefined;
+        scheduleCron?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowJobResult.svelte

@@ -14,7 +14,7 @@ export let job;
 		</div>
 		<div>
 			<ChevronButton text="logs" viewOptions={true}>
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
+				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border mt-1">
 					<pre class="w-full">{job.logs}</pre>
 				</div>
 			</ChevronButton>