windmill-components 1.623.1 → 1.642.0

package/package/components/FilterSearchbar.svelte.d.ts

@@ -0,0 +1,86 @@
+import { z } from 'zod';
+import { type IconType } from '../utils';
+export type FilterSchemaRec = Record<string, FilterSchema>;
+export type FilterSchema = ({
+    type: 'string' | 'number' | 'boolean';
+    allowMultiple?: boolean;
+    format?: 'json';
+} | {
+    type: 'date';
+    mode?: 'single' | 'end' | 'start';
+    otherField?: string;
+    allowMultiple?: undefined;
+} | {
+    type: 'oneof';
+    options: {
+        value: string;
+        label?: string;
+        description?: string;
+    }[];
+    allowCustomValue?: boolean;
+    allowNegative?: boolean;
+    allowMultiple?: boolean;
+}) & {
+    label?: string;
+    description?: string;
+    icon?: IconType;
+};
+export type FilterInstanceRec<T extends FilterSchemaRec> = {
+    [K in keyof T]: FilterInstance<T[K]>;
+};
+export type FilterInstance<T extends FilterSchema> = T extends {
+    type: 'string';
+} ? string : T extends {
+    type: 'number';
+} ? number : T extends {
+    type: 'boolean';
+} ? boolean : T extends {
+    type: 'date';
+} ? Date : T extends {
+    type: 'oneof';
+    options: any;
+    allowCustomValue?: infer A;
+} ? A extends true ? string : T['options'] extends {
+    value: string;
+}[] ? _NegativeFilterInstance<T> : never : never;
+type _NegativeFilterInstance<T extends {
+    options: {
+        value: string;
+    }[];
+}> = T extends {
+    allowNegative: true;
+} ? T['options'][number]['value'] | `!${T['options'][number]['value']}` : T['options'][number]['value'];
+/**
+ * Converts a FilterSchemaRec to a Zod schema for validation
+ */
+export declare function filterSchemaRecToZodSchema<T extends FilterSchemaRec>(schemaRec: T): z.ZodObject<{
+    [K in keyof T]: z.ZodType<FilterInstance<T[K]>>;
+}>;
+/**
+ * Creates a URL-synced filter instance that automatically syncs with URL search parameters
+ */
+export declare function useUrlSyncedFilterInstance<T extends FilterSchemaRec>(schemaRec: T): {
+    val: Partial<FilterInstanceRec<T>>;
+};
+export type FilterValidationError = {
+    fields: string[];
+    error: string;
+};
+/**
+ * Validates a filter instance against its schema.
+ * Returns a list of validation errors, each with the affected fields and an error message.
+ */
+export declare function validateFilterInstance<T extends FilterSchemaRec>(schemaRec: T, instance: Partial<FilterInstanceRec<T>>): FilterValidationError[];
+type Props<SchemaT extends FilterSchemaRec> = {
+    schema: SchemaT;
+    value: Partial<FilterInstanceRec<SchemaT>>;
+    presets?: {
+        name: string;
+        value: string;
+    }[];
+    class?: string;
+    placeholder?: string;
+};
+declare const FilterSearchbar: import("svelte").Component<Props<FilterSchemaRec>, {}, "value">;
+type FilterSearchbar = ReturnType<typeof FilterSearchbar>;
+export default FilterSearchbar;

package/package/components/FlowBuilder.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">import { FlowService, DraftService, CaptureService } from '../gen';
 import { initHistory, redo, undo } from '../history.svelte';
 import { enterpriseLicense, userStore, workspaceStore, usedTriggerKinds } from '../stores';
-import { cleanValueProperties, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined } from '../utils';
+import { cleanValueProperties, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined, isMac } from '../utils';
 import { sendUserToast } from '../toast';
 import { Drawer } from './common';
 import DeployOverrideConfirmationModal from './common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import AIChangesWarningModal from './copilot/chat/flow/AIChangesWarningModal.svelte';
-import { onMount, setContext, untrack } from 'svelte';
+import { createRawSnippet, onMount, setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Badge, Button, UndoRedo } from './common';
+import { Button } from './common';
 import FlowEditor from './flows/FlowEditor.svelte';
 import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
+import FlowEditorDrawer from './flows/content/FlowEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
@@ -19,7 +20,7 @@ import { SelectionManager } from './graph/selectionUtils.svelte';
 import { NoteEditor } from './graph/noteEditor.svelte';
 import { setNoteEditorContext } from './graph/noteEditor.svelte';
 import { cleanFlow } from './flows/utils.svelte';
-import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, Settings } from 'lucide-svelte';
+import { Calendar, Save, DiffIcon, HistoryIcon, FileJson, Settings, Undo, Redo, BookOpen, Circle, CheckCircle, RefreshCw, CheckCheck } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
 import {} from './copilot/flow';
@@ -27,8 +28,10 @@ import { loadFlowModuleState } from './flows/flowStateUtils.svelte';
 import Dropdown from './DropdownV2.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
 import FlowHistory from './flows/FlowHistory.svelte';
-import FlowEditorTutorial from './flows/FlowEditorTutorial.svelte';
-import Summary from './Summary.svelte';
+import { resetAllTodos, skipAllTodos } from '../tutorialUtils';
+import { tutorialsToDo } from '../stores';
+import { getTutorialIndex } from '../tutorials/config';
+import SummaryPathDisplay from './SummaryPathDisplay.svelte';
 import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
 import {} from './triggers';
 import DeployButton from './DeployButton.svelte';
@@ -41,7 +44,6 @@ import { validateRetryConfig } from '../utils';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from './flows/FlowAssetsHandler.svelte';
-import { inputSizeClasses } from './text_input/TextInput.svelte';
 let { initialPath = $bindable(''), pathStoreInit = undefined, newFlow, selectedId, initialArgs = {}, loading = false, flowStore, flowStateStore, savedFlow = $bindable(undefined), diffDrawer = undefined, customUi = {}, disableAi = false, disabledFlowInputs = false, savedPrimarySchedule = undefined, version = undefined, setSavedraftCb = undefined, draftTriggersFromUrl = undefined, selectedTriggerIndexFromUrl = undefined, children, loadedFromHistoryFromUrl, noInitial = false, onSaveInitial, onSaveDraft, onDeploy, onDeployError, onDetails, onSaveDraftError, onSaveDraftOnlyAtNewPath, onHistoryRestore } = $props();
 let initialPathStore = writable(initialPath);
 // used for new flows for captures
@@ -460,6 +462,7 @@ export function getSelectedId() {
 }
 const previewArgsStore = $state({ val: initialArgs });
 const scriptEditorDrawer = writable(undefined);
+const flowEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory(flowStore.val);
 const pathStore = writable(pathStoreInit ?? initialPath);
@@ -483,6 +486,7 @@ setContext('FlowEditorContext', {
     currentEditor: writable(undefined),
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
+    flowEditorDrawer,
     moving,
     history,
     flowStateStore,
@@ -532,6 +536,26 @@ export async function loadTriggers() {
         savedFlow = filterDraftTriggers(savedFlow, triggersState);
     }
 }
+function handleUndo() {
+    const currentModules = flowStore.val?.value?.modules;
+    flowStore.val = undo(history, flowStore.val);
+    const newModules = flowStore.val?.value?.modules;
+    const restoredModules = newModules?.filter((node) => !currentModules?.some((currentNode) => currentNode?.id === node?.id));
+    for (const mod of restoredModules) {
+        if (mod) {
+            try {
+                loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state));
+            }
+            catch (e) {
+                console.error('Error loading state for restored node', e);
+            }
+        }
+    }
+    selectionManager.selectId('Input');
+}
+function handleRedo() {
+    flowStore.val = redo(history);
+}
 function onKeyDown(event) {
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
@@ -541,14 +565,13 @@ function onKeyDown(event) {
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey || event.metaKey) {
-                flowStore.val = redo(history);
+                handleRedo();
                 event.preventDefault();
             }
             break;
         case 'z':
             if (event.ctrlKey || event.metaKey) {
-                flowStore.val = undo(history, flowStore.val);
-                selectionManager.selectId('Input');
+                handleUndo();
                 event.preventDefault();
             }
             break;
@@ -624,9 +647,85 @@ export function triggerTutorial() {
         flowTutorials?.runTutorialById(tutorial);
     }
 }
-let moreItems = $state([]);
+let baseMenuItems = $state([]);
+const mod = isMac() ? '⌘' : 'Ctrl+';
+const undoShortcutSnippet = createRawSnippet(() => ({
+    render: () => `<span class="ml-auto text-2xs text-tertiary">${mod}Z</span>`
+}));
+const redoShortcutSnippet = createRawSnippet(() => ({
+    render: () => `<span class="ml-auto text-2xs text-tertiary">${mod}⇧Z</span>`
+}));
+function getMoreItems() {
+    return [
+        ...baseMenuItems,
+        {
+            displayName: 'Undo',
+            icon: Undo,
+            action: () => handleUndo(),
+            disabled: $history.index === 0,
+            extra: undoShortcutSnippet,
+            separatorTop: baseMenuItems.length > 0
+        },
+        {
+            displayName: 'Redo',
+            icon: Redo,
+            action: () => handleRedo(),
+            disabled: $history.index === $history.history.length - 1,
+            extra: redoShortcutSnippet
+        },
+        {
+            displayName: 'Tutorials',
+            icon: BookOpen,
+            separatorTop: true,
+            extra: (() => {
+                const remaining = [
+                    getTutorialIndex('flow-live-tutorial'),
+                    getTutorialIndex('troubleshoot-flow')
+                ].filter((i) => $tutorialsToDo.includes(i)).length;
+                return remaining > 0
+                    ? createRawSnippet(() => ({
+                        render: () => `<span class="ml-auto inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium text-white rounded-full bg-surface-accent-primary">${remaining}</span>`
+                    }))
+                    : undefined;
+            })(),
+            submenuItems: [
+                {
+                    displayName: 'Build a flow',
+                    action: () => flowTutorials?.runTutorialById('flow-live-tutorial'),
+                    icon: $tutorialsToDo.includes(getTutorialIndex('flow-live-tutorial'))
+                        ? Circle
+                        : CheckCircle,
+                    iconColor: $tutorialsToDo.includes(getTutorialIndex('flow-live-tutorial'))
+                        ? undefined
+                        : 'green'
+                },
+                {
+                    displayName: 'Fix a broken flow',
+                    action: () => flowTutorials?.runTutorialById('troubleshoot-flow'),
+                    icon: $tutorialsToDo.includes(getTutorialIndex('troubleshoot-flow'))
+                        ? Circle
+                        : CheckCircle,
+                    iconColor: $tutorialsToDo.includes(getTutorialIndex('troubleshoot-flow'))
+                        ? undefined
+                        : 'green'
+                },
+                {
+                    displayName: 'Reset tutorials',
+                    action: () => resetAllTodos(),
+                    icon: RefreshCw,
+                    separatorTop: true
+                },
+                {
+                    displayName: 'Skip tutorials',
+                    action: () => skipAllTodos(),
+                    icon: CheckCheck
+                }
+            ]
+        }
+    ];
+}
 function onCustomUiChange(customUi, hasAiDiff) {
-    moreItems = [
+    baseMenuItems = [
         ...(customUi?.topBar?.history != false
             ? [
                 {
@@ -780,50 +879,23 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
+		<FlowEditorDrawer bind:this={$flowEditorDrawer} />
 
 		<div class="flex flex-col flex-1 h-screen">
 			<!-- Nav between steps-->
 			<div
-				class="justify-between flex flex-row items-center pl-2.5 pr-6 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
+				class="justify-between flex flex-row items-center pl-2 pr-4 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
 			>
-				<div class="flex w-full max-w-md gap-4 items-center">
-					<Summary
-						disabled={customUi?.topBar?.editableSummary == false}
-						bind:value={flowStore.val.summary}
-					/>
-					<UndoRedo
-						undoProps={{ disabled: $history.index === 0 }}
-						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
-						on:undo={() => {
-							const currentModules = flowStore.val?.value?.modules
-							// console.log('undo before', flowStore.val, JSON.stringify(flowStore.val, null, 2))
-							flowStore.val = undo(history, flowStore.val)
-							// console.log('undo after', flowStore.val, JSON.stringify(flowStore.val, null, 2))
-
-							const newModules = flowStore.val?.value?.modules
-							const restoredModules = newModules?.filter(
-								(node) => !currentModules?.some((currentNode) => currentNode?.id === node?.id)
-							)
-
-							for (const mod of restoredModules) {
-								if (mod) {
-									try {
-										loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state))
-									} catch (e) {
-										console.error('Error loading state for restored node', e)
-									}
-								}
-							}
-
-							selectionManager.selectId('Input')
-						}}
-						on:redo={() => {
-							flowStore.val = redo(history)
-						}}
+				<div class="flex w-full gap-8 items-center min-w-0">
+					<SummaryPathDisplay
+						bind:summary={flowStore.val.summary}
+						bind:path={$pathStore}
+						kind="flow"
+						editable
 					/>
 				</div>
 
-				<div class="gap-4 flex-row hidden md:flex w-full whitespace-nowrap max-w-md">
+				<div class="gap-4 flex-row hidden md:flex whitespace-nowrap">
 					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
 						{@const primaryScheduleIndex = triggersState.triggers.findIndex((t) => t.isPrimary)}
 						{@const scheduleIndex = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
@@ -845,44 +917,19 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								''}
 						</Button>
 					{/if}
-
-					{#if customUi?.topBar?.path != false}
-						<div class="flex justify-start items-center w-full">
-							<button
-								onclick={async () => {
-									select('settings-metadata')
-									document.getElementById('path')?.focus()
-								}}
-							>
-								<Badge
-									color="gray"
-									class="text-primary rounded-r-none border border-r-0 {inputSizeClasses.md}"
-								>
-									<Pen size={12} class="mr-2" /> Path
-								</Badge>
-							</button>
-							<input
-								type="text"
-								readonly
-								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
-								class="font-mono !text-2xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 cursor-default !rounded-l-none {inputSizeClasses.md}"
-								onfocus={({ currentTarget }) => {
-									currentTarget.select()
-								}}
-							/>
-						</div>
-					{/if}
 				</div>
 				<div class="flex flex-row gap-2 items-center">
 					{#if $enterpriseLicense && !newFlow}
 						<Awareness />
 					{/if}
-					<div>
-						{#if moreItems?.length > 0}
-							<Dropdown items={moreItems} />
+					<div class="relative">
+						<Dropdown items={getMoreItems} />
+						{#if $tutorialsToDo.includes(getTutorialIndex('flow-live-tutorial')) || $tutorialsToDo.includes(getTutorialIndex('troubleshoot-flow'))}
+							<span
+								class="absolute top-0.5 right-0.5 block w-2 h-2 rounded-full bg-surface-accent-primary pointer-events-none"
+							></span>
 						{/if}
 					</div>
-					<FlowEditorTutorial />
 					{#if customUi?.topBar?.diff != false}
 						<Button
 							variant="default"
@@ -918,6 +965,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						</Button>
 					{/if}
 					<FlowPreviewButtons
+						{suspendStatus}
 						on:openTriggers={(e) => {
 							select('Trigger')
 							handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, e.detail.kind)
@@ -936,17 +984,19 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							showJobStatus = true
 						}}
 					/>
-					<Button
-						loading={loadingDraft}
-						unifiedSize="md"
-						variant="accent"
-						startIcon={{ icon: Save }}
-						on:click={() => saveDraft()}
-						disabled={(!newFlow && !savedFlow) || loading}
-						shortCut={{ key: 'S' }}
-					>
-						Draft
-					</Button>
+					{#if customUi?.topBar?.draft !== false}
+						<Button
+							loading={loadingDraft}
+							unifiedSize="md"
+							variant="accent"
+							startIcon={{ icon: Save }}
+							on:click={() => saveDraft()}
+							disabled={(!newFlow && !savedFlow) || loading}
+							shortCut={{ key: 'S' }}
+						>
+							Draft
+						</Button>
+					{/if}
 
 					<DeployButton
 						on:save={async ({ detail }) => await handleSaveFlow(detail)}

package/package/components/FlowDiffViewer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+let { beforeYaml, afterYaml } = $props();
+let diffMode = $state('graph');
+</script>
+
+<div class="flex flex-col h-full min-h-[500px] gap-2">
+	<Tabs bind:selected={diffMode}>
+		<Tab value="graph" label="Graph" />
+		<Tab value="yaml" label="YAML" />
+	</Tabs>
+
+	<div class="flex-1 min-h-0">
+		{#if diffMode === 'yaml'}
+			{#await import('./DiffEditor.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					open={true}
+					automaticLayout
+					className="h-full min-h-[400px]"
+					defaultLang="yaml"
+					defaultOriginal={beforeYaml}
+					defaultModified={afterYaml}
+					readOnly
+				/>
+			{/await}
+		{:else}
+			{#await import('./FlowGraphDiffViewer.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default {beforeYaml} {afterYaml} />
+			{/await}
+		{/if}
+	</div>
+</div>

package/package/components/FlowDiffViewer.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    beforeYaml: string;
+    afterYaml: string;
+}
+declare const FlowDiffViewer: import("svelte").Component<Props, {}, "">;
+type FlowDiffViewer = ReturnType<typeof FlowDiffViewer>;
+export default FlowDiffViewer;

package/package/components/FlowGraphViewer.svelte

@@ -12,14 +12,17 @@ export let noGraph = false;
 export let triggerNode = false;
 export let stepDetail = undefined;
 export let workspace = $workspaceStore;
+export let minHeight = 400;
+export let noBorder = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="grid grid-cols-3 w-full h-full">
 	{#if !noGraph}
 		<div
-			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
+			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full max-h-full"
 			class:overflow-auto={overflowAuto}
+			class:border={!noBorder}
 		>
 			<FlowGraphV2
 				{triggerNode}
@@ -27,7 +30,7 @@ const dispatch = createEventDispatcher();
 				cache={flow.value.cache_ttl !== undefined}
 				path={flow?.path}
 				{download}
-				minHeight={400}
+				{minHeight}
 				{workspace}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}

package/package/components/FlowGraphViewer.svelte.d.ts

@@ -27,6 +27,8 @@ declare const FlowGraphViewer: $$__sveltets_2_IsomorphicComponent<{
     triggerNode?: boolean;
     stepDetail?: FlowModule | string | undefined;
     workspace?: string | undefined;
+    minHeight?: number;
+    noBorder?: boolean;
 }, {
     triggerDetail: CustomEvent<any>;
     select: CustomEvent<any>;