windmill-components 1.352.9 → 1.362.0

package/package/components/apps/inputType.d.ts

@@ -1,7 +1,7 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { DecisionTreeNode, TypedComponent } from './editor/component';
 import type { InlineScript } from './types';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'bigquery';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'bigquery' | 'app-path';
 export type InputConnection = {
     componentType?: TypedComponent['type'];
     componentId: string;
@@ -109,7 +109,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/apps/svelte-select/lib/Select.svelte

@@ -668,7 +668,6 @@
 			bind:value={filterText}
 			placeholder={placeholderText}
 			style={inputStyles}
-			{disabled}
 		/>
 	</div>
 
@@ -872,12 +871,12 @@
 
 	.disabled input::-moz-placeholder {
 		color: var(--disabled-placeholder-color, #c1c6cc);
-		opacity: var(--disabled-placeholder-opacity, 1);
+		opacity: var(--disabled-placeholder-opacity, 0.8);
 	}
 
 	.disabled input::placeholder {
 		color: var(--disabled-placeholder-color, #c1c6cc);
-		opacity: var(--disabled-placeholder-opacity, 1);
+		opacity: var(--disabled-placeholder-opacity, 0.8);
 	}
 
 	.selected-item {

package/package/components/apps/types.d.ts

@@ -195,6 +195,7 @@ export type AppViewerContext = {
         validateAll?: () => void;
         clearFiles?: () => void;
         showToast?: (message: string, error?: boolean) => void;
+        recompute?: () => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;
@@ -202,6 +203,8 @@ export type AppViewerContext = {
     cssEditorOpen: Writable<boolean>;
     previewTheme: Writable<string | undefined>;
     debuggingComponents: Writable<Record<string, number>>;
+    replaceStateFn?: ((url: string) => void) | undefined;
+    gotoFn?: ((url: string, opt?: Record<string, any> | undefined) => void) | undefined;
 };
 export type AppEditorContext = {
     yTop: Writable<number>;

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -102,10 +102,10 @@ function kindToBadgeColor(kind) {
 						</Cell>
 						<Cell>
 							<div class="flex flex-row gap-2 items-center">
-								<div class="whitespace-nowrap overflow-x-auto no-scrollbar w-48">
+								<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-52">
 									{username}
 									{#if parameters && 'end_user' in parameters}
-										<span> (end user: {parameters.end_user})</span>
+										<span> ({parameters.end_user})</span>
 									{/if}
 								</div>
 								<Button

package/package/components/common/CloseButton.svelte

@@ -1,11 +1,10 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import Button from './button/Button.svelte'
-	import { X } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
-
-	export let noBg = false
-	const dispatch = createEventDispatcher()
+<script>import { createEventDispatcher } from 'svelte';
+import Button from './button/Button.svelte';
+import { X } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let noBg = false;
+export let small = false;
+const dispatch = createEventDispatcher();
 </script>
 
 <Button
@@ -15,7 +14,8 @@
 	size="sm"
 	color="light"
 	btnClasses={twMerge(
-		'hover:bg-surface-hover w-8 h-8 rounded-full p-0',
-		noBg ? '' : 'bg-surface-secondary'
+		'hover:bg-surface-hover rounded-full p-0',
+		noBg ? '' : 'bg-surface-secondary',
+		small ? 'w-6 h-6' : 'w-8 h-8'
 	)}
 />

package/package/components/common/CloseButton.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  CloseButtonProps */
-/** @typedef {typeof __propDef.events}  CloseButtonEvents */
-/** @typedef {typeof __propDef.slots}  CloseButtonSlots */
-export default class CloseButton extends SvelteComponent<{
-    noBg?: boolean | undefined;
-}, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CloseButtonProps = typeof __propDef.props;
-export type CloseButtonEvents = typeof __propDef.events;
-export type CloseButtonSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         noBg?: boolean | undefined;
+        small?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export type CloseButtonProps = typeof __propDef.props;
+export type CloseButtonEvents = typeof __propDef.events;
+export type CloseButtonSlots = typeof __propDef.slots;
+export default class CloseButton extends SvelteComponent<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
+}
 export {};

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -5,6 +5,7 @@ import DateTimeInput from '../../DateTimeInput.svelte';
 export let date;
 export let label;
 export let useDropdown = false;
+export let clearable = false;
 const dispatch = createEventDispatcher();
 let input;
 export let placement = 'top-end';
@@ -29,12 +30,16 @@ export let placement = 'top-end';
 		<div class="pb-1 text-sm text-secondary">{label}</div>
 		<div class="flex w-full">
 			<DateTimeInput
+				{clearable}
 				{useDropdown}
 				value={date}
 				on:change={(e) => {
 					date = e.detail
 					dispatch('change', date)
 				}}
+				on:clear={() => {
+					dispatch('clear')
+				}}
 			/>
 		</div>
 	</label>

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -5,10 +5,12 @@ declare const __propDef: {
         date: string | undefined;
         label: string;
         useDropdown?: boolean | undefined;
+        clearable?: boolean | undefined;
         placement?: Placement | undefined;
     };
     events: {
         change: CustomEvent<any>;
+        clear: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -3,6 +3,7 @@ import { beforeNavigate, goto } from '$app/navigation';
 import Button from '../button/Button.svelte';
 import { cleanValueProperties, orderedJsonStringify } from '../../../utils';
 import { tick } from 'svelte';
+import { page } from '$app/stores';
 export let savedValue = undefined;
 export let modifiedValue = undefined;
 export let diffDrawer = undefined;
@@ -10,12 +11,17 @@ let bypassBeforeNavigate = false;
 let open = false;
 let goingTo = undefined;
 beforeNavigate(async (newNavigationState) => {
+    // console.log('beforeNavigate', newNavigationState, bypassBeforeNavigate)
     if (!bypassBeforeNavigate &&
         newNavigationState.to &&
+        newNavigationState.to.url != $page.url &&
         newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) {
+        // console.log('going to', newNavigationState.to.url)
         goingTo = newNavigationState.to.url;
         newNavigationState.cancel();
-        await tick(); // make sure saved value is updated when clicking on save draft or deploy
+        if (newNavigationState.type != 'popstate') {
+            await tick(); // make sure saved value is updated when clicking on save draft or deploy
+        }
         if (savedValue && modifiedValue) {
             const draftOrDeployed = cleanValueProperties({
                 ...((savedValue.draft || savedValue) ?? {}),

package/package/components/common/fileInput/FileInput.svelte

@@ -13,6 +13,7 @@ export let iconSize = 36;
 export let returnFileNames = false;
 export let submittedText = undefined;
 export let defaultFile = undefined;
+export let disabled = undefined;
 const dispatch = createEventDispatcher();
 let input;
 export let files = undefined;
@@ -116,6 +117,7 @@ export function clearFiles() {
 	on:dragover={handleDragOver}
 	on:drop={handleDrop}
 	{style}
+	{disabled}
 >
 	{#if !hideIcon && !files}
 		<FileUp size={iconSize} class="mb-2" />

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         returnFileNames?: boolean | undefined;
         submittedText?: string | undefined;
         defaultFile?: string | undefined;
+        disabled?: boolean | undefined;
         files?: File[] | undefined;
         clearFiles?: (() => void) | undefined;
     };

package/package/components/common/popup/Popup.svelte

@@ -1,5 +1,5 @@
 <script>import { Popover, PopoverButton, PopoverPanel, Transition } from '@rgossiaux/svelte-headlessui';
-import Portal from 'svelte-portal';
+import ConditionalPortal from '../drawer/ConditionalPortal.svelte';
 import { createFloatingActions } from 'svelte-floating-ui';
 export let floatingConfig = {
     strategy: 'absolute',
@@ -8,6 +8,7 @@ export let floatingConfig = {
 export let containerClasses = 'rounded-lg shadow-md border p-4 bg-surface';
 const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 export let blockOpen = false;
+export let shouldUsePortal = true;
 </script>
 
 <Popover on:close class="leading-none">
@@ -16,7 +17,7 @@ export let blockOpen = false;
 			<slot name="button" />
 		</div>
 	</PopoverButton>
-	<Portal>
+	<ConditionalPortal condition={shouldUsePortal}>
 		<div use:floatingContent class="z5000">
 			<Transition
 				show={blockOpen || undefined}
@@ -34,5 +35,5 @@ export let blockOpen = false;
 				</PopoverPanel>
 			</Transition>
 		</div>
-	</Portal>
+	</ConditionalPortal>
 </Popover>

package/package/components/common/popup/Popup.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         floatingConfig?: ComputeConfig | undefined;
         containerClasses?: string | undefined;
         blockOpen?: boolean | undefined;
+        shouldUsePortal?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/common/table/AppRow.svelte

@@ -24,22 +24,15 @@ export let depth = 0;
 export let menuOpen = false;
 const dispatch = createEventDispatcher();
 let appExport;
-let appDeploymentHistory;
+let appDeploymentHistory = undefined;
 async function loadAppJson() {
     appExport.open(app.path);
 }
-async function loadDeployements() {
-    const napp = (await AppService.getAppByPath({
-        workspace: $workspaceStore,
-        path: app.path
-    }));
-    appDeploymentHistory.open(napp.path);
-}
 </script>
 
 {#if menuOpen}
 	<AppJsonEditor on:change bind:this={appExport} />
-	<AppDeploymentHistory bind:this={appDeploymentHistory} />
+	<AppDeploymentHistory bind:this={appDeploymentHistory} appPath={app.path} />
 {/if}
 
 <Row
@@ -166,7 +159,7 @@ async function loadDeployements() {
 					{
 						displayName: 'Deployments',
 						icon: History,
-						action: () => loadDeployements(),
+						action: () => appDeploymentHistory?.open(),
 						hide: $userStore?.operator
 					},
 					{

package/package/components/common/table/FlowRow.svelte

@@ -11,7 +11,8 @@ import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
 import { DELETE, copyToClipboard, isOwner } from '../../../utils';
-import { Pen, GitFork, Trash, List, FileUp, Globe, Calendar, Share, Archive, Clipboard, Eye } from 'lucide-svelte';
+import { Pen, GitFork, Trash, List, FileUp, Globe, Calendar, Share, Archive, Clipboard, Eye, HistoryIcon } from 'lucide-svelte';
+import FlowHistory from '../../flows/FlowHistory.svelte';
 export let flow;
 export let marked;
 export let starred;
@@ -48,10 +49,12 @@ async function deleteFlow(path) {
     }
 }
 let scheduleEditor;
+let flowHistory;
 </script>
 
 {#if menuOpen}
 	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
+	<FlowHistory bind:this={flowHistory} path={flow.path} />
 {/if}
 
 <Row
@@ -176,6 +179,14 @@ let scheduleEditor;
 						disabled: archived,
 						hide: $userStore?.operator
 					},
+					{
+						displayName: 'Deployments',
+						icon: HistoryIcon,
+						action: () => {
+							flowHistory.open()
+						},
+						hide: $userStore?.operator
+					},
 					{
 						displayName: 'Schedule',
 						icon: Calendar,

package/package/components/copilot/IteratorGen.svelte

@@ -44,7 +44,7 @@ async function generateIteratorExpr() {
             flow_input: pickableProperties?.flow_input
         };
         const user = `I'm building a workflow which is a DAG of script steps.
-The current step is ${selectedId} and represents a for-loop. You can find the details of all the steps below:
+The current step is ${$selectedId} and represents a for-loop. You can find the details of all the steps below:
 ${flowDetails}
 Determine the iterator expression to pass either from the previous results or the flow inputs. Here's a summary of the available data:
 <available>

package/package/components/copilot/PredicateGen.svelte

@@ -35,7 +35,7 @@ async function generatePredicate() {
             flow_input: pickableProperties?.flow_input
         };
         const user = `I'm building a workflow which is a DAG of script steps.
-The current step is ${selectedId} and is a branching step (if-else). 
+The current step is ${$selectedId} and is a branching step (if-else). 
 The user wants to generate a predicate for the branching condition.
 Here's the user's request: ${instructions}
 You can find the details of all the steps below:

package/package/components/copilot/StepInputGen.svelte

@@ -68,16 +68,21 @@ async function generateStepInput() {
             results: pickableProperties?.priorIds,
             flow_input: pickableProperties?.flow_input
         };
+        const isInsideLoop = availableData.flow_input && 'iter' in availableData.flow_input;
         const user = `I'm building a workflow which is a DAG of script steps.
-The current step is ${selectedId}, you can find the details for the step and previous ones below:
+The current step is ${$selectedId}, you can find the details for the step and previous ones below:
 ${flowDetails}
 Determine for the input "${argName}", what to pass either from the previous results or the flow inputs. 
 All possibles inputs either start with results. or flow_input. and are followed by the key of the input.
-When the step is in a loop, the iterator value is accessible as flow_input.iter.value
+${isInsideLoop
+            ? 'As the step is in a loop, the iterator value is accessible as flow_input.iter.value.'
+            : 'As the step is not in a loop, flow_input.iter.value is not available.'}
 Here's a summary of the available data:
 <available>
 ${YAML.stringify(availableData)}</available>
-Favor results and flow_input.iter.value over flow inputs.
+${isInsideLoop
+            ? 'Favor results and flow_input.iter.value over flow inputs.'
+            : 'Favor results over flow inputs'}
 If none of the available results are appropriate, are already used or are more appropriate for other inputs, you can also imagine new flow_input properties which we will create programmatically based on what you provide.
 Reply with the most probable answer, do not explain or discuss.
 Use javascript object dot notation to access the properties.

package/package/components/copilot/StepInputsGen.svelte

@@ -42,13 +42,16 @@ async function generateStepInputs() {
             results: pickableProperties?.priorIds,
             flow_input: pickableProperties?.flow_input
         };
+        const isInsideLoop = availableData.flow_input && 'iter' in availableData.flow_input;
         const user = `I'm building a workflow which is a DAG of script steps. 
-The current step is ${selectedId}, you can find the details for the step and previous ones below:
+The current step is ${$selectedId}, you can find the details for the step and previous ones below:
 ${flowDetails}
 
 Determine for all the inputs "${argNames.join('", "')}", what to pass either from the previous results of the flow inputs. 
 All possibles inputs either start with results. or flow_input. and are followed by the key of the input.			
-When the step is in a loop, the iterator value is accessible as flow_input.iter.value
+${isInsideLoop
+            ? 'As the step is in a loop, the iterator value is accessible as flow_input.iter.value.'
+            : 'As the step is not in a loop, flow_input.iter.value is not available.'}
 Here's a summary of the available data:
 <available>
 ${YAML.stringify(availableData)}</available>

package/package/components/details/WebhooksPanel.svelte

@@ -14,11 +14,42 @@ import ClipboardPanel from './ClipboardPanel.svelte';
 import { copyToClipboard, generateRandomString } from '../../utils';
 import HighlightTheme from '../HighlightTheme.svelte';
 let userSettings;
-export let webhooks;
 export let token;
 export let args;
 export let scopes = [];
 export let isFlow = false;
+export let hash = undefined;
+export let path;
+let webhooks;
+$: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path);
+function computeScriptWebhooks(hash, path) {
+    let base = `${$page.url.origin}/api/w/${$workspaceStore}/jobs/`;
+    return {
+        async: {
+            hash: `${base}run/h/${hash}`,
+            path: `${base}run/p/${path}`
+        },
+        sync: {
+            hash: `${base}run_wait_result/h/${hash}`,
+            path: `${base}run_wait_result/p/${path}`,
+            get_path: `${base}run_wait_result/p/${path}`
+        }
+    };
+}
+function computeFlowWebhooks(path) {
+    let base = `${$page.url.origin}/api/w/${$workspaceStore}/jobs/`;
+    let urlAsync = `${base}run/f/${path}`;
+    let urlSync = `${base}run_wait_result/f/${path}`;
+    return {
+        async: {
+            path: urlAsync
+        },
+        sync: {
+            path: urlSync,
+            get_path: urlSync
+        }
+    };
+}
 let webhookType = DEFAULT_WEBHOOK_TYPE;
 let requestType = isFlow ? 'path' : 'path';
 let tokenType = 'headers';

package/package/components/details/WebhooksPanel.svelte.d.ts

@@ -1,21 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        webhooks: {
-            async: {
-                hash?: string;
-                path: string;
-            };
-            sync: {
-                hash?: string;
-                path: string;
-                get_path?: string;
-            };
-        };
         token: string;
         args: any;
         scopes?: string[] | undefined;
         isFlow?: boolean | undefined;
+        hash?: string | undefined;
+        path: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;