windmill-components 1.13.25 → 1.22.0

package/components/FlowBuilder.svelte

@@ -1,57 +1,68 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialPath = exports.flow = void 0;
-const gen_1 = require("$lib/gen");
-const utils_1 = require("$lib/utils");
-const stores_1 = require("$app/stores");
-const navigation_1 = require("$app/navigation");
-const Path_svelte_1 = __importDefault(require("./Path.svelte"));
-const svelte_markdown_1 = __importDefault(require("svelte-markdown"));
-const stores_2 = require("$lib/stores");
-const ScriptSchema_svelte_1 = __importDefault(require("./ScriptSchema.svelte"));
-const Required_svelte_1 = __importDefault(require("./Required.svelte"));
-const FlowEditor_svelte_1 = __importDefault(require("./FlowEditor.svelte"));
-exports.initialPath = '';
+<script>import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { FlowService, ScriptService } from '../gen';
+import { clearPreviewResults, hubScripts, workspaceStore } from '../stores';
+import { sendUserToast, setQueryWithoutLoad } from '../utils';
+import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
+import { onMount } from 'svelte';
+import Icon from 'svelte-awesome';
+import FlowEditor from './FlowEditor.svelte';
+import { flowStore } from './flows/flowStore';
+import { flowToMode } from './flows/utils';
+import ScriptSchema from './ScriptSchema.svelte';
+export let initialPath = '';
+let pathError = '';
+let mode;
 $: step = Number($page.url.searchParams.get('step')) || 1;
+async function loadSearchData() {
+    const scripts = await ScriptService.listHubScripts();
+    $hubScripts = scripts.map((x) => ({
+        path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+        summary: `${x.summary} (${x.app})`,
+        approved: x.approved,
+        is_trigger: x.is_trigger
+    }));
+}
 async function saveFlow() {
-    if (exports.initialPath == '') {
-        await gen_1.FlowService.createFlow({
+    const newFlow = flowToMode($flowStore, mode);
+    if (initialPath === '') {
+        await FlowService.createFlow({
             workspace: $workspaceStore,
             requestBody: {
-                path: exports.flow.path,
-                summary: exports.flow.summary,
-                description: exports.flow.description ?? '',
-                value: exports.flow.value,
-                schema: exports.flow.schema
+                path: newFlow.path,
+                summary: newFlow.summary,
+                description: newFlow.description ?? '',
+                value: newFlow.value,
+                schema: newFlow.schema
             }
         });
     }
     else {
-        await gen_1.FlowService.updateFlow({
+        await FlowService.updateFlow({
             workspace: $workspaceStore,
-            path: exports.initialPath,
+            path: newFlow.path,
             requestBody: {
-                path: exports.flow.path,
-                summary: exports.flow.summary,
-                description: exports.flow.description ?? '',
-                value: exports.flow.value,
-                schema: exports.flow.schema
+                path: newFlow.path,
+                summary: newFlow.summary,
+                description: newFlow.description ?? '',
+                value: newFlow.value,
+                schema: newFlow.schema
             }
         });
     }
-    (0, utils_1.sendUserToast)(`Success! flow saved at ${exports.flow.path}`);
-    (0, navigation_1.goto)(`/flows/get/${exports.flow.path}`);
+    sendUserToast(`Success! flow saved at ${$flowStore.path}`);
+    goto(`/flows/get/${$flowStore.path}`);
 }
 async function changeStep(step) {
-    (0, navigation_1.goto)(`?step=${step}`);
-}
-$: {
-    $page.url.searchParams.set('state', btoa(JSON.stringify(exports.flow)));
-    history.replaceState({}, '', $page.url);
+    goto(`?step=${step}`);
 }
+flowStore.subscribe((flow) => {
+    setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(flowToMode(flow, mode))));
+});
+onMount(() => {
+    loadSearchData();
+    clearPreviewResults();
+});
 </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 ">
@@ -60,45 +71,42 @@ $: {
 		<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: Metadata</button
+					}}>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: Flow</button
-				>
-				<button
-					class="{step === 3
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(3)
-					}}>Step 3: UI customisation</button
+					}}>Step 2: UI customisation</button
 				>
 			</div>
 			<div class="flex flex-row-reverse ml-2">
-				{#if step != 3}
+				{#if step == 1}
 					<button
-						disabled={step == 1 &&
-							(flow.path == undefined || flow.path == '' || flow.path.split('/')[2] == '')}
+						disabled={pathError != ''}
 						class="default-button px-6 max-h-8"
 						on:click={() => {
 							changeStep(step + 1)
-						}}>Next</button
+						}}
 					>
-					{#if step == 2}
-						<button class="default-button-secondary px-6 max-h-8 mr-2" on:click={saveFlow}
-							>Save</button
-						>
-					{/if}
+						Next
+					</button>
+					<button
+						disabled={pathError != ''}
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={saveFlow}
+					>
+						Save
+					</button>
 				{:else}
 					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
 				{/if}
@@ -106,79 +114,22 @@ $: {
 		</div>
 		<div class="flex flex-row-reverse">
 			<span class="my-1 text-sm text-gray-500 italic">
-				{#if initialPath && initialPath != flow.path} {initialPath} &rightarrow; {/if}
-				{flow.path}
+				{#if initialPath && initialPath != $flowStore.path} {initialPath} &rightarrow; {/if}
+				{$flowStore.path}
 			</span>
 		</div>
 	</div>
 
 	<!-- metadata -->
-	{#if step === 1}
-		<div class="grid grid-cols-1 gap-6 max-w-7xl">
-			<Path bind:path={flow.path} {initialPath} namePlaceholder="example/my/flow">
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
-					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>
-			<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
 
-			<label class="block ">
-				<span class="text-gray-700">Summary <Required required={false} /></span>
-				<textarea
-					bind:value={flow.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>
-			<label class="block ">
-				<span class="text-gray-700"
-					>Description<Required required={false} detail="accept markdown formatting" />
-					<textarea
-						bind:value={flow.description}
-						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 description to help users understand what this flow does and how to use it."
-						rows="3"
-					/>
-				</span></label
-			>
-
-			<div>
-				<h3 class="text-gray-700 ">Description rendered</h3>
-				<div
-					class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
-					style="max-height: 200px;"
-				>
-					<SvelteMarkdown source={flow.description ?? ''} />
-				</div>
-			</div>
-		</div>
+	{#if step === 1}
+		<FlowEditor bind:mode bind:pathError bind:initialPath />
 	{:else if step === 2}
-		<FlowEditor bind:flow />
-	{:else if step === 3}
 		<ScriptSchema
 			synchronizedHeader={false}
-			bind:summary={flow.summary}
-			bind:description={flow.description}
-			bind:schema={flow.schema}
+			bind:summary={$flowStore.summary}
+			bind:description={$flowStore.description}
+			bind:schema={$flowStore.schema}
 		/>
 	{/if}
 </div>

package/components/FlowBuilder.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
 declare const __propDef: {
     props: {
-        flow: Flow;
         initialPath?: string | undefined;
     };
     events: {

package/components/FlowEditor.svelte

@@ -1,102 +1,214 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadSchemas = exports.flow = void 0;
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const utils_1 = require("$lib/utils");
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const gen_1 = require("$lib/gen");
-const SchemaEditor_svelte_1 = __importDefault(require("./SchemaEditor.svelte"));
-const stores_1 = require("$lib/stores");
-const ModuleStep_svelte_1 = __importDefault(require("./ModuleStep.svelte"));
-const FlowPreview_svelte_1 = __importDefault(require("./FlowPreview.svelte"));
-const scripts_1 = require("$lib/scripts");
+<script>import { FlowModuleValue } from '../gen';
+import { faFileExport, faFileImport, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import FlowPreview from './FlowPreview.svelte';
+import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte';
+import { addModule, flowStore } 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';
+export let pathError = '';
+export let initialPath = '';
+let jsonSetter;
+let jsonViewer;
+let jsonValue = '';
+let open = 0;
 let args = {};
-let schemas = [];
-let schemaForms = [];
-async function loadSchemas() {
-    await Promise.all(exports.flow.value.modules.map(async (x, i) => {
-        if (x.value.path) {
-            const schema = await (0, scripts_1.loadSchema)(x.value.path ?? '');
-            if (JSON.stringify(Object.keys(schema?.properties ?? {}).sort()) !=
-                JSON.stringify(Object.keys(x.input_transform).sort())) {
-                let it = {};
-                Object.keys(schema?.properties ?? {}).map((x) => (it[x] = {
-                    type: 'static',
-                    value: ''
-                }));
-                schemaForms[i]?.setArgs(it);
-            }
-            schemas[i] = schema ?? (0, utils_1.emptySchema)();
-        }
-        else {
-            schemaForms[i]?.setArgs({});
-            schemas[i] = (0, utils_1.emptySchema)();
-        }
-    }));
-    schemas = schemas;
-    if (exports.flow.value.modules.length == 0) {
-        addModule();
-    }
-}
-exports.loadSchemas = loadSchemas;
-function addModule() {
-    schemaForms.push(undefined);
-    let newModule = {
-        value: { type: gen_1.FlowModuleValue.type.SCRIPT, path: '' },
-        input_transform: {}
-    };
-    exports.flow.value.modules = exports.flow.value.modules.concat(newModule);
-    schemas.push((0, utils_1.emptySchema)());
-}
-$: $workspaceStore && loadSchemas();
+export let mode = $flowStore?.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW ? 'pull' : 'push';
+$: numberOfSteps = $flowStore?.value.modules.length - 1;
 </script>
 
-<!-- <PageHeader title="Flow" /> -->
+<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"
+			on:click={() => {
+				Object.assign($flowStore, JSON.parse(jsonValue))
+				$flowStore = $flowStore
+				open = -1
+				sendUserToast('Flow imported from JSON')
+				jsonSetter.closeModal()
+			}}
+		>
+			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" />
+	</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">
+			<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>
-						<button
-							class="text-xs default-button-secondary max-h-6 place-self-end"
-							disabled={flow.value.modules.length == 0 ||
-								flow.value.modules[0].value.path == undefined}
-							on:click={async () => {
-								flow.schema = await loadSchema(flow.value.modules[0].value.path ?? '')
-							}}
-							>Copy from step 1's schema
-						</button>
+						<CopyFirstStepSchema />
 					</div>
 					<div class="p-4">
-						<SchemaEditor bind:schema={flow.schema} />
+						<SchemaEditor schema={$flowStore.schema} />
 						<div class="my-4" />
-						<FlowPreview {flow} i={flow.value.modules.length - 1} bind:args />
+						<FlowPreview {mode} flow={$flowStore} i={numberOfSteps} bind:args />
 					</div>
 				</div>
 			</li>
-			{#each flow.value.modules as mod, i}
-				<ModuleStep bind:flow bind:mod bind:schemas bind:schemaForms bind:args {i} />
+			{#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="absolute inset-0 flex items-center" aria-hidden="true">
-					<div class="w-full border-t border-gray-300" />
-				</div>
 				<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}><Icon class="text-white mb-1" data={faPlus} scale={0.9} /></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" />
+
+<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>

package/components/FlowEditor.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
+import { type FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
-        flow: Flow;
-        loadSchemas?: (() => Promise<void>) | undefined;
+        pathError?: string | undefined;
+        initialPath?: string | undefined;
+        mode?: FlowMode | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +15,5 @@ export declare type FlowEditorProps = typeof __propDef.props;
 export declare type FlowEditorEvents = typeof __propDef.events;
 export declare type FlowEditorSlots = typeof __propDef.slots;
 export default class FlowEditor extends SvelteComponentTyped<FlowEditorProps, FlowEditorEvents, FlowEditorSlots> {
-    get loadSchemas(): () => Promise<void>;
 }
 export {};

package/components/FlowJobResult.svelte

@@ -0,0 +1,23 @@
+<script>import ChevronButton from './ChevronButton.svelte';
+import DisplayResult from './DisplayResult.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-lg">
+					<pre class="w-full">{job.logs}</pre>
+				</div>
+			</ChevronButton>
+		</div>
+	</div>
+{/if}

package/components/FlowJobResult.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CompletedJob } from '../gen';
+declare const __propDef: {
+    props: {
+        job: CompletedJob | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowJobResultProps = typeof __propDef.props;
+export declare type FlowJobResultEvents = typeof __propDef.events;
+export declare type FlowJobResultSlots = typeof __propDef.slots;
+export default class FlowJobResult extends SvelteComponentTyped<FlowJobResultProps, FlowJobResultEvents, FlowJobResultSlots> {
+}
+export {};