windmill-components 1.352.8 → 1.362.0

package/package/components/DateTimeInput.svelte

@@ -1,13 +1,17 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
-import { Clock } from 'lucide-svelte';
+import { Clock, X } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 // import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 // import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 export let value = undefined;
+export let clearable = false;
 export let autofocus = false;
 export let useDropdown = false;
 export let minDate = undefined;
 export let maxDate = undefined;
+export let disabled = undefined;
+export let inputClass = undefined;
 let date = undefined;
 let time = undefined;
 // let format: 'local' | 'utc' = 'local'
@@ -57,17 +61,25 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		type="date"
 		bind:value={date}
 		{autofocus}
-		class="!w-3/4 app-editor-input"
+		{disabled}
+		class={twMerge('h-8 text-sm !w-3/4 ', inputClass)}
 		min={minDate}
 		max={maxDate}
 	/>
-	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px] app-editor-input" />
+	<input
+		type="time"
+		bind:value={time}
+		class={twMerge('h-8 text-sm !w-1/4 min-w-[100px] ', inputClass)}
+		{disabled}
+	/>
 	<Button
 		variant="border"
 		color="light"
+		wrapperClasses="h-8"
 		startIcon={{
 			icon: Clock
 		}}
+		{disabled}
 		size="xs"
 		portalTarget={`#${randomId}`}
 		dropdownItems={useDropdown
@@ -104,6 +116,20 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 	>
 		Now
 	</Button>
+	{#if clearable}
+		<Button
+			variant="border"
+			color="light"
+			wrapperClasses="h-8"
+			{disabled}
+			on:click={() => {
+				value = undefined
+				dispatch('clear')
+			}}
+		>
+			<X size={14} />
+		</Button>
+	{/if}
 	<!-- <div>
 		<ToggleButtonGroup bind:selected={format}>
 			<ToggleButton light small value={'local'} label="local" />

package/package/components/DateTimeInput.svelte.d.ts

@@ -2,14 +2,18 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value?: string | undefined;
+        clearable?: boolean | undefined;
         autofocus?: boolean | null | undefined;
         useDropdown?: boolean | undefined;
         minDate?: string | undefined;
         maxDate?: string | undefined;
+        disabled?: boolean | undefined;
+        inputClass?: string | undefined;
     };
     events: {
         pointerdown: PointerEvent;
         focus: FocusEvent;
+        clear: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/Dev.svelte

@@ -83,8 +83,13 @@ $: if (workspace && token) {
     loadUser();
 }
 async function loadUser() {
-    const user = await getUserExt(workspace);
-    $userStore = user;
+    try {
+        const user = await getUserExt(workspace);
+        $userStore = user;
+    }
+    catch (e) {
+        sendUserToast(`Failed to load user ${e}`, true);
+    }
 }
 let darkModeToggle;
 let darkMode = undefined;
@@ -353,7 +358,7 @@ setContext('FlowEditorContext', {
     testStepStore,
     saveDraft: () => { },
     initialPath: '',
-    flowInputsStore: writable(undefined)
+    flowInputsStore: writable({})
 });
 $: updateFlow($flowStore);
 let lastSent = undefined;

package/package/components/DurationMs.svelte

@@ -1,4 +1,4 @@
-<script>import { msToSec } from '../utils';
+<script>import { msToReadableTime } from '../utils';
 import { Badge } from './common';
 import { Hourglass } from 'lucide-svelte';
 import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
@@ -9,7 +9,7 @@ export let aggregate_wait_time_ms = undefined;
 
 <div>
 	<Badge large icon={{ icon: Hourglass, position: 'left' }}>
-		Ran in {msToSec(duration_ms)}s
+		Ran in {msToReadableTime(duration_ms)}
 		{#if self_wait_time_ms || aggregate_wait_time_ms}
 			<WaitTimeWarning {self_wait_time_ms} {aggregate_wait_time_ms} variant="alert" />
 		{/if}

package/package/components/FlowBuilder.svelte

@@ -3,6 +3,7 @@ import { initHistory, push, redo, undo } from '../history';
 import { copilotInfo, enterpriseLicense, tutorialsToDo, userStore, workspaceStore } from '../stores';
 import { cleanValueProperties, encodeState, formatCron, orderedJsonStringify, sleep } from '../utils';
 import { sendUserToast } from '../toast';
+import { Drawer } from './common';
 import { setContext, tick } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
@@ -15,7 +16,7 @@ import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
 import { cleanInputs, emptyFlowModuleState } from './flows/utils';
-import { Calendar, Pen, Save, DiffIcon } from 'lucide-svelte';
+import { Calendar, Pen, Save, DiffIcon, MoreVertical, HistoryIcon, FileJson, CornerDownLeft } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
@@ -28,6 +29,12 @@ import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte';
 import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
 import { ignoredTutorials } from './tutorials/ignoredTutorials';
+import FlowHistory from './flows/FlowHistory.svelte';
+import ButtonDropdown from './common/button/ButtonDropdown.svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { twMerge } from 'tailwind-merge';
+import CustomPopover from './CustomPopover.svelte';
+import Summary from './Summary.svelte';
 export let initialPath = '';
 export let pathStoreInit = undefined;
 export let newFlow;
@@ -157,7 +164,7 @@ export function computeUnlockedSteps(flow) {
         .filter((m) => m.value.type == 'script' && m.value.hash == null)
         .map((m) => [m.id, m.value.path]));
 }
-async function saveFlow() {
+async function saveFlow(deploymentMsg) {
     loadingSave = true;
     try {
         const flow = cleanInputs($flowStore);
@@ -184,7 +191,8 @@ async function saveFlow() {
                     ws_error_handler_muted: flow.ws_error_handler_muted,
                     tag: flow.tag,
                     dedicated_worker: flow.dedicated_worker,
-                    visible_to_runner_only: flow.visible_to_runner_only
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    deployment_message: deploymentMsg || undefined
                 }
             });
             if (enabled) {
@@ -245,7 +253,8 @@ async function saveFlow() {
                     tag: flow.tag,
                     dedicated_worker: flow.dedicated_worker,
                     ws_error_handler_muted: flow.ws_error_handler_muted,
-                    visible_to_runner_only: flow.visible_to_runner_only
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    deployment_message: deploymentMsg || undefined
                 }
             });
         }
@@ -809,6 +818,8 @@ function blurCopilot() {
 $: $copilotCurrentStepStore === undefined && blurCopilot();
 let renderCount = 0;
 let flowTutorials = undefined;
+let jsonViewerDrawer = undefined;
+let flowHistory = undefined;
 export function triggerTutorial() {
     const urlParams = new URLSearchParams(window.location.search);
     const tutorial = urlParams.get('tutorial');
@@ -819,6 +830,23 @@ export function triggerTutorial() {
         flowTutorials?.runTutorialById('action');
     }
 }
+const moreItems = [
+    {
+        displayName: 'Deployment History',
+        icon: HistoryIcon,
+        action: () => {
+            flowHistory?.open();
+        },
+        disabled: newFlow
+    },
+    {
+        displayName: 'Export',
+        icon: FileJson,
+        action: () => jsonViewerDrawer?.openDrawer()
+    }
+];
+let deploymentMsg = '';
+let msgInput = undefined;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -828,6 +856,10 @@ export function triggerTutorial() {
 {#key renderCount}
 	{#if !$userStore?.operator}
 		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
+		{#if $pathStore}
+			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
+		{/if}
+		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<FlowCopilotInputsModal
 			on:confirmed={async () => {
 				applyCopilotFlowInputs()
@@ -851,19 +883,31 @@ export function triggerTutorial() {
 					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0" />
 				{/if}
 				<div class="flex w-full max-w-md gap-4 items-center">
-					<div class="min-w-64 w-full">
-						<input
-							type="text"
-							placeholder="Flow summary"
-							class="text-sm w-full font-semibold"
-							bind:value={$flowStore.summary}
-						/>
-					</div>
+					<Summary bind:value={$flowStore.summary} />
+
 					<UndoRedo
 						undoProps={{ disabled: $history.index === 0 }}
 						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
 						on:undo={() => {
+							const currentModules = $flowStore?.value?.modules
+
 							$flowStore = undo(history, $flowStore)
+
+							const newModules = $flowStore?.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[mod.id] = state))
+									} catch (e) {
+										console.error('Error loading state for restored node', e)
+									}
+								}
+							}
+
 							$selectedIdStore = 'Input'
 						}}
 						on:redo={() => {
@@ -914,10 +958,40 @@ export function triggerTutorial() {
 						/>
 					</div>
 				</div>
-				<div class="flex flex-row space-x-2">
+				<div class="flex flex-row gap-2 items-center">
 					{#if $enterpriseLicense && !newFlow}
 						<Awareness />
 					{/if}
+					<div>
+						<ButtonDropdown hasPadding={false}>
+							<svelte:fragment slot="buttonReplacement">
+								<Button nonCaptureEvent size="xs" color="light">
+									<div class="flex flex-row items-center">
+										<MoreVertical size={14} />
+									</div>
+								</Button>
+							</svelte:fragment>
+							<svelte:fragment slot="items">
+								{#each moreItems as item}
+									<MenuItem
+										on:click={item.action}
+										disabled={item.disabled}
+										class={item.disabled ? 'opacity-50' : ''}
+									>
+										<div
+											class={twMerge(
+												'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+											)}
+										>
+											<svelte:component this={item.icon} size={14} />
+											{item.displayName}
+										</div>
+									</MenuItem>
+								{/each}
+							</svelte:fragment>
+						</ButtonDropdown>
+					</div>
+
 					<FlowBuilderTutorials
 						on:reload={() => {
 							renderCount += 1
@@ -955,8 +1029,6 @@ export function triggerTutorial() {
 						{abortController}
 					/>
 
-					<FlowImportExportMenu />
-
 					<FlowPreviewButtons />
 					<Button
 						loading={loadingDraft}
@@ -970,15 +1042,41 @@ export function triggerTutorial() {
 					>
 						Draft
 					</Button>
-					<Button
-						loading={loadingSave}
-						size="xs"
-						startIcon={{ icon: Save }}
-						on:click={() => saveFlow()}
-						dropdownItems={!newFlow ? dropdownItems : undefined}
-					>
-						Deploy
-					</Button>
+
+					<CustomPopover appearTimeout={0} focusEl={msgInput}>
+						<Button
+							loading={loadingSave}
+							size="xs"
+							startIcon={{ icon: Save }}
+							on:click={() => saveFlow()}
+							dropdownItems={!newFlow ? dropdownItems : undefined}
+						>
+							Deploy
+						</Button>
+						<svelte:fragment slot="overlay">
+							<div class="flex flex-row gap-2 w-80">
+								<input
+									type="text"
+									placeholder="Deployment message"
+									bind:value={deploymentMsg}
+									on:keydown={(e) => {
+										if (e.key === 'Enter') {
+											saveFlow(deploymentMsg)
+										}
+									}}
+									bind:this={msgInput}
+								/>
+								<Button
+									size="xs"
+									on:click={() => saveFlow(deploymentMsg)}
+									endIcon={{ icon: CornerDownLeft }}
+									loading={loadingSave}
+								>
+									Deploy
+								</Button>
+							</div>
+						</svelte:fragment>
+					</CustomPopover>
 				</div>
 			</div>
 

package/package/components/FlowBuilder.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         triggerTutorial?: (() => void) | undefined;
     };
     events: {
+        historyRestore: CustomEvent<any>;
         saveInitial: CustomEvent<any>;
         saveDraftOnlyAtNewPath: CustomEvent<any>;
         deploy: CustomEvent<any>;

package/package/components/FlowGraphViewerStep.svelte

@@ -61,7 +61,7 @@ let codeViewer;
 				<span class="!text-xs">
 					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
 				</span>
-				<h3 class="mb-2">Lockfile</h3>
+				<h3 class="mt-4 mb-2">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
 						<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
@@ -166,7 +166,7 @@ let codeViewer;
 							>{stepDetail.value.lock}</pre
 						>
 					{:else}
-						<p class="bg-surface-secondary text-sm p-2">
+						<p class="bg-surface-secondary text-sm p-2 rounded">
 							There is no lockfile for this inline script
 						</p>
 					{/if}

package/package/components/FlowJobResult.svelte

@@ -56,9 +56,11 @@ async function getLogs() {
 </Drawer>
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border border-tertiary-inverse h-full"
+	class="grid {!col
+		? 'grid-cols-2'
+		: 'grid-rows-2'} shadow border border-tertiary-inverse grow overflow-hidden"
 >
-	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
+	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} />
@@ -68,7 +70,7 @@ async function getLogs() {
 			<div class="text-gray-400">No result (result is undefined)</div>
 		{/if}
 	</div>
-	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
+	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
 		<div class="absolute z-40 text-sm top-1.5 left-2"
 			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
 		>

package/package/components/FlowStatusViewer.svelte

@@ -34,11 +34,12 @@ $: jobId && updateJobId();
 
 <FlowStatusViewerInner
 	on:jobsLoaded={({ detail }) => {
-		if (detail.script_path != lastScriptPath && detail.script_path) {
-			lastScriptPath = detail.script_path
+		let { job } = detail
+		if (job.script_path != lastScriptPath && job.script_path) {
+			lastScriptPath = job.script_path
 			loadOwner(lastScriptPath ?? '')
 		}
-		dispatch('jobsLoaded', detail)
+		dispatch('jobsLoaded', job)
 	}}
 	globalDurationStatuses={[]}
 	globalModuleStates={[]}