windmill-components 1.405.0 → 1.406.0

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -9,6 +9,7 @@ import { dfs } from '../dfs';
 import FlowPreprocessorModule from './FlowPreprocessorModule.svelte';
 export let noEditor = false;
 export let enableAi = false;
+export let disabledFlowInputs = false;
 const { selectedId, flowStore, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
 function checkDup(modules) {
     let seenModules = [];
@@ -41,7 +42,7 @@ onMount(() => {
 {#if $selectedId?.startsWith('settings')}
 	<FlowSettings {noEditor} />
 {:else if $selectedId === 'Input'}
-	<FlowInput {noEditor} />
+	<FlowInput {noEditor} disabled={disabledFlowInputs} />
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}

package/package/components/flows/content/FlowEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         noEditor?: boolean | undefined;
         enableAi?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowInput.svelte

@@ -10,7 +10,9 @@ import { sendUserToast } from '../../../toast';
 import SavedInputs from '../../SavedInputs.svelte';
 import EditableSchemaForm from '../../EditableSchemaForm.svelte';
 import AddProperty from '../../schema/AddProperty.svelte';
+import FlowInputViewer from '../../FlowInputViewer.svelte';
 export let noEditor;
+export let disabled;
 const { flowStore, flowStateStore, previewArgs, initialPath } = getContext('FlowEditorContext');
 let capturePayload;
 let inputLibraryDrawer;
@@ -32,67 +34,73 @@ const yOffset = 191;
 <CapturePayload bind:this={capturePayload} />
 
 <FlowCard {noEditor} title="Flow Input">
-	<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
-		<div>Copy input's schema from</div>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				capturePayload.openDrawer()
-			}}
-		>
-			A request
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				jsonPayload.openDrawer()
-			}}
-		>
-			A JSON
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			on:click={() => {
-				inputLibraryDrawer.openDrawer()
-			}}
-		>
-			Past Runs/Input library
-		</Button>
-		<Button
-			color="dark"
-			size="xs"
-			disabled={$flowStore.value.modules.length === 0 ||
-				$flowStore.value.modules[0].value.type == 'identity'}
-			on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
-		>
-			First step's inputs
-		</Button>
-	</div>
-	<div class="p-4 border-b">
-		<AddProperty
+	{#if !disabled}
+		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
+			<div>Copy input's schema from</div>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					capturePayload.openDrawer()
+				}}
+			>
+				A request
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					jsonPayload.openDrawer()
+				}}
+			>
+				A JSON
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					inputLibraryDrawer.openDrawer()
+				}}
+			>
+				Past Runs/Input library
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				disabled={$flowStore.value.modules.length === 0 ||
+					$flowStore.value.modules[0].value.type == 'identity'}
+				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
+			>
+				First step's inputs
+			</Button>
+		</div>
+		<div class="p-4 border-b">
+			<AddProperty
+				bind:schema={$flowStore.schema}
+				bind:this={addProperty}
+				on:change={() => {
+					$flowStore = $flowStore
+				}}
+			/>
+		</div>
+
+		<EditableSchemaForm
 			bind:schema={$flowStore.schema}
-			bind:this={addProperty}
-			on:change={() => {
-				$flowStore = $flowStore
+			isFlowInput
+			on:edit={(e) => {
+				addProperty?.openDrawer(e.detail)
 			}}
+			on:delete={(e) => {
+				addProperty?.handleDeleteArgument([e.detail])
+			}}
+			offset={yOffset}
+			displayWebhookWarning
 		/>
-	</div>
-
-	<EditableSchemaForm
-		bind:schema={$flowStore.schema}
-		isFlowInput
-		on:edit={(e) => {
-			addProperty?.openDrawer(e.detail)
-		}}
-		on:delete={(e) => {
-			addProperty?.handleDeleteArgument([e.detail])
-		}}
-		offset={yOffset}
-		displayWebhookWarning
-	/>
+	{:else}
+		<div class="p-4 border-b">
+			<FlowInputViewer schema={$flowStore.schema} />
+		</div>
+	{/if}
 </FlowCard>
 
 <Drawer bind:this={jsonPayload} size="800px">

package/package/components/flows/content/FlowInput.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         noEditor: boolean;
+        disabled: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowModuleScript.svelte

@@ -53,7 +53,7 @@ export let showDiff = false;
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent withDate {date} /></span>
+		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>

package/package/components/flows/header/FlowYamlEditor.svelte

@@ -3,9 +3,9 @@ import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import { getContext } from 'svelte';
 import { filteredContentForExport } from '../utils';
 import YAML from 'yaml';
-import SimpleEditor from '../../SimpleEditor.svelte';
 import { Button } from '../../common';
 import { sendUserToast } from '../../../toast';
+import { Loader2 } from 'lucide-svelte';
 const { flowStore } = getContext('FlowEditorContext');
 export let drawer;
 let code = '';
@@ -49,7 +49,11 @@ function apply() {
 		</svelte:fragment>
 
 		{#if $flowStore}
-			<SimpleEditor autoHeight bind:code lang="yaml" />
+			{#await import('../../SimpleEditor.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default autoHeight bind:code lang="yaml" />
+			{/await}
 		{/if}
 	</DrawerContent>
 </Drawer>

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -67,6 +67,7 @@ async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, in
     if (inlineScript) {
         const { language, kind, subkind } = inlineScript;
         [module, state] = await createInlineScriptModule(language, kind, subkind, module.id, module.summary);
+        $flowStateStore[module.id] = state;
     }
     if (!modules)
         return [module];
@@ -181,7 +182,7 @@ async function updateFlowInputsStore() {
 }
 </script>
 
-<Portal>
+<Portal name="flow-module">
 	<ConfirmationModal
 		title="Confirm deleting step with dependents"
 		confirmationText="Delete step"
@@ -303,7 +304,7 @@ async function updateFlowInputsStore() {
 						if (['branchone', 'branchall'].includes(detail.detail)) {
 							await addBranch(detail.modules[detail.index ?? 0])
 						}
-
+						$flowStateStore = $flowStateStore
 						$flowStore = $flowStore
 						dispatch('change')
 					}

package/package/components/flows/map/InsertModuleButton.svelte

@@ -82,7 +82,7 @@ shouldUsePortal={true} -->
 		role="none"
 	>
 		<div class="flex flex-row items-center gap-2">
-			<StepGenQuick on:insert bind:funcDesc {preFilter} {loading} />
+			<StepGenQuick {disableAi} on:insert bind:funcDesc {preFilter} {loading} />
 			{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 				<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 			{/if}

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -95,7 +95,7 @@ function onKeyDown(e) {
 					}}
 				>
 					{#if kind == 'flow'}
-						<BarsStaggered size={14} />
+						<BarsStaggered size={14} class="shrink-0" />
 					{:else}
 						<Code2 size={14} />
 					{/if}

package/package/components/graph/model.d.ts

@@ -38,6 +38,7 @@ export type FlowStatusViewerContext = {
     hideTimeline?: boolean;
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
+    hideDownloadLogs: any;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];

package/package/components/icons/WindmillIcon.svelte

@@ -1,112 +1,126 @@
-<script>export let height = '24px';
+<script>import { customIcon } from './store';
+export let height = '24px';
 export let width = '24px';
 export let white = false;
 export let spin = undefined;
 </script>
 
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg
-	class={$$props.class}
-	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
-	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
-	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
-	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
-	version="1.1"
-	id="Calque_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	{width}
-	{height}
-	viewBox="0 0 256 256"
-	style="enable-background:new 0 0 256 256;"
-	xml:space="preserve"
->
-	<style>
-		.st0 {
-			fill: #ffffff;
-		}
-		.st1 {
-			opacity: 0.4;
-			fill: #ffffff;
-		}
-		.st2 {
-			fill: #bcd4fc;
-		}
-		.st2-gray {
-			fill: #cccccc;
-		}
-		.st3 {
-			fill: #3b82f6;
-		}
-		.st4 {
-			fill: #b3b3b3;
-		}
-		.st5 {
-			fill: url(#SVGID_1_);
-		}
-		.st6 {
-			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
-		}
-		.st7 {
-			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
-		}
-		.st8 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
-		}
-		.st9 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
-		}
-		.st10 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
-		}
-		.st11 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
-		}
-		.st12 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
-		}
-		.st13 {
-			opacity: 0.4;
-			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
-		}</style>
-	<g>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+{#if customIcon}
+	{#if white}
+		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={$$props.class} />
+	{:else}
+		<img
+			src={customIcon.normal}
+			alt="Windmill Custom icon"
+			{width}
+			{height}
+			class={$$props.class}
 		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+	{/if}
+{:else}
+	<svg
+		class={$$props.class}
+		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+		class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+		version="1.1"
+		id="Calque_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		{width}
+		{height}
+		viewBox="0 0 256 256"
+		style="enable-background:new 0 0 256 256;"
+		xml:space="preserve"
+	>
+		<style>
+			.st0 {
+				fill: #ffffff;
+			}
+			.st1 {
+				opacity: 0.4;
+				fill: #ffffff;
+			}
+			.st2 {
+				fill: #bcd4fc;
+			}
+			.st2-gray {
+				fill: #cccccc;
+			}
+			.st3 {
+				fill: #3b82f6;
+			}
+			.st4 {
+				fill: #b3b3b3;
+			}
+			.st5 {
+				fill: url(#SVGID_1_);
+			}
+			.st6 {
+				fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+			}
+			.st7 {
+				fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+			}
+			.st8 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+			}
+			.st9 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+			}
+			.st10 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+			}
+			.st11 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+			}
+			.st12 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+			}
+			.st13 {
+				opacity: 0.4;
+				fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+			}</style>
+		<g>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
 		"
-		/>
-		<polygon
-			class:st3={!white}
-			class:st0={white}
-			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
-		/>
-		<polygon
-			class:st2={!white}
-			class:st2-gray={white}
-			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
-		/>
-	</g>
-</svg>
+			/>
+			<polygon
+				class:st3={!white}
+				class:st0={white}
+				points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+			/>
+			<polygon
+				class:st2={!white}
+				class:st2-gray={white}
+				points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
+			/>
+		</g>
+	</svg>
+{/if}

package/package/components/icons/store.d.ts

@@ -0,0 +1,4 @@
+export declare let customIcon: {
+    normal: string;
+    white: string;
+} | undefined;

package/package/components/icons/store.js

@@ -0,0 +1 @@
+export let customIcon = undefined;

package/package/components/multiselect/MultiSelectWrapper.svelte

@@ -71,7 +71,7 @@ let open = false;
 				</div>
 			</MultiSelect>
 		</div>
-		<Portal>
+		<Portal name="multi-select">
 			<div use:floatingContent class="z5000" hidden={!open}>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -51,7 +51,7 @@ $: keyLimit = isArray ? 1 : 100;
 $: fullyCollapsed = keys.length > 1 && collapsed;
 </script>
 
-<Portal>
+<Portal name="object-viewer">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 </Portal>
 

package/package/components/runs/RunRow.svelte

@@ -25,7 +25,7 @@ function isJobCancelable(j) {
 }
 </script>
 
-<Portal>
+<Portal name="run-row">
 	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 </Portal>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -86,7 +86,7 @@ function isJobCancelable(j) {
 		<div class="flex flex-row items-center gap-1 text-gray-500 dark:text-gray-300 text-2xs">
 			{#if job}
 				{#if 'started_at' in job && job.started_at}
-					Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+					Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 						(Ran in {msToReadableTime(
 							job.duration_ms
@@ -102,11 +102,7 @@ function isJobCancelable(j) {
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}
-					Waiting for executor (created <TimeAgo
-						withDate
-						agoOnlyIfRecent
-						date={job.created_at || ''}
-					/>)
+					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
 			{/if}
 		</div>

package/package/components/schema/FlowPropertyEditor.svelte

@@ -307,6 +307,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 				/>
 			{:else}
 				<ArgInput
+					noDefaultOnSelectFirst
 					{itemPicker}
 					resourceTypes={getResourceTypesFromFormat(format)}
 					bind:value={defaultValue}

package/package/components/search/GlobalSearchModal.svelte

@@ -399,7 +399,7 @@ function maxModalHeight(tab) {
 </script>
 
 {#if open}
-	<Portal>
+	<Portal name="global-search">
 		<div
 			class={twMerge(
 				`fixed top-0 bottom-0 left-0 right-0 transition-all duration-50 flex items-start justify-center`,