windmill-components 1.405.0 → 1.406.0

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import { type GridShadow } from '../editor/appUtils';
 declare const __propDef: {
     props: {
         sensor: any;
@@ -23,6 +24,9 @@ declare const __propDef: {
             h: number;
         } | undefined;
         overlapped?: string | undefined;
+        moveMode?: "move" | "insert" | undefined;
+        type?: string | undefined;
+        fakeShadow?: GridShadow | undefined;
         inActivate?: (() => void) | undefined;
         initmove?: (() => void) | undefined;
         updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;
@@ -31,6 +35,9 @@ declare const __propDef: {
         initmove: CustomEvent<any>;
         move: CustomEvent<any>;
         repaint: CustomEvent<any>;
+        dropped: CustomEvent<any>;
+        resizeStart: CustomEvent<any>;
+        resizeEnd: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/svelte-grid/utils/item.d.ts

@@ -7,7 +7,10 @@ export declare function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item:
 };
 export declare function moveItem(active: any, items: any, cols: any): {
     items: any;
-    overlap: boolean;
+    overlap?: undefined;
+} | {
+    items: any;
+    overlap: undefined;
 };
 export declare function normalize(items: any, col: any): any;
 export declare function adjust<T>(items: FilledItem<T>[], col: any): FilledItem<T>[];

package/package/components/apps/svelte-grid/utils/item.js

@@ -107,8 +107,7 @@ export function moveItem(active, items, cols) {
     // If found fixed, reset the active to its original position
     if (fixed) {
         return {
-            items: items,
-            overlap: closeBlocks.length > 0
+            items: items
         };
     }
     // Update items
@@ -136,7 +135,7 @@ export function moveItem(active, items, cols) {
     // Return result
     return {
         items: tempItems,
-        overlap: false
+        overlap: undefined
     };
 }
 // Helper function

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

@@ -6,7 +6,7 @@ $: target = $mode === 'preview' ? '#app-editor-select' : 'body';
 </script>
 
 {#if condition}
-	<Portal {target}><slot /></Portal>
+	<Portal name="conditional-portal-select" {target}><slot /></Portal>
 {:else}
 	<slot />
 {/if}

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

@@ -3,7 +3,7 @@ export let condition = false;
 </script>
 
 {#if condition}
-	<Portal><slot /></Portal>
+	<Portal name="conditional-portal-global"><slot /></Portal>
 {:else}
 	<slot />
 {/if}

package/package/components/common/button/ButtonDropdown.svelte

@@ -37,7 +37,7 @@ const popperOptions = {
 		</MenuButton>
 	</span>
 
-	<Portal {target}>
+	<Portal name="button-dropdown" {target}>
 		<div use:popperContent={popperOptions} class="z-[6000]">
 			<Transition
 				show={open}

package/package/components/common/drawer/ConditionalPortal.svelte

@@ -4,7 +4,7 @@ export let target = undefined;
 </script>
 
 {#if condition}
-	<Portal {target}><slot /></Portal>
+	<Portal name="conditional-portal" {target}><slot /></Portal>
 {:else}
 	<slot />
 {/if}

package/package/components/common/menu/MenuV2.svelte

@@ -22,7 +22,7 @@ const [floatingRef, floatingContent] = createFloatingActions({
 			<slot name="trigger" />
 		</MenuButton>
 	</div>
-	<Portal>
+	<Portal name="menu-v2">
 		<div use:floatingContent class="z-[6000]">
 			<Transition
 				{open}

package/package/components/common/modal/AlwaysMountedModal.svelte

@@ -16,7 +16,7 @@ export function open() {
 }
 </script>
 
-<Portal target="#app-editor-top-level-drawer">
+<Portal name="always-mounted" target="#app-editor-top-level-drawer">
 	<div
 		class={twMerge(
 			`${

package/package/components/common/popup/PopupV2.svelte

@@ -35,7 +35,7 @@ function pointerdown() {
 	<slot {pointerup} {pointerdown} name="button" />
 </div>
 
-<Portal {target}>
+<Portal name="popup-v2" {target}>
 	{#if open}
 		<div
 			class="border rounded-lg shadow-lg bg-surface z5000"

package/package/components/copilot/StepGenQuick.svelte

@@ -8,6 +8,7 @@ export let funcDesc;
 export let trigger = false;
 export let loading = false;
 export let preFilter;
+export let disableAi = false;
 let scripts = undefined;
 export let filteredItems = [];
 $: prefilteredItems = scripts ?? [];
@@ -43,14 +44,14 @@ onMount(() => {
 			bind:this={input}
 			type="text"
 			bind:value={funcDesc}
-			placeholder="Search {trigger ? 'triggers' : 'scripts'} or AI gen"
+			placeholder="Search {trigger ? 'triggers' : 'scripts'} {disableAi ? '' : 'or AI gen'}"
 		/>
 	</div>
 	<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
 		{#if loading}
 			<Loader2 size={16} class="animate-spin text-gray-400" />
 		{/if}
-		{#if funcDesc?.length === 0 && !loading}
+		{#if funcDesc?.length === 0 && !loading && !disableAi}
 			<Wand2 size={14} class="fill-current opacity-70 text-violet-800 dark:text-violet-400" />
 		{/if}
 	</div>

package/package/components/copilot/StepGenQuick.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         trigger?: boolean | undefined;
         loading?: boolean | undefined;
         preFilter: string;
+        disableAi?: boolean | undefined;
         filteredItems?: any[] | (Script & {
             marked?: string | undefined;
         })[] | undefined;

package/package/components/custom_ui.d.ts

@@ -34,6 +34,7 @@ export type FlowBuilderWhitelabelCustomUi = {
     languages?: (SupportedLanguage | 'docker' | 'bunnative')[];
     scriptFork?: boolean;
     editorBar?: EditorBarUi;
+    downloadLogs?: boolean;
 };
 export type EditorBarUi = {
     contextVar?: boolean;

package/package/components/details/Menu.svelte

@@ -34,7 +34,7 @@ const popperOptions = {
 		</MenuButton>
 	</span>
 
-	<Portal>
+	<Portal name="menu">
 		<div use:popperContent={popperOptions} class="z-[2000]">
 			<Transition
 				show={open}

package/package/components/flows/CreateActionsApp.svelte

@@ -66,7 +66,7 @@ async function importRawApp() {
 			}
 		]}
 	>
-		<div class="flex flex-row">
+		<div class="flex flex-row items-center">
 			App <LayoutDashboard class="ml-1.5" size={18} />
 		</div>
 	</Button>

package/package/components/flows/FlowEditor.svelte

@@ -11,6 +11,7 @@ export let disableStaticInputs = false;
 export let disableTutorials = false;
 export let disableAi = false;
 export let disableSettings = false;
+export let disabledFlowInputs = false;
 export let smallErrorHandler = false;
 let size = 50;
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext');
@@ -53,7 +54,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel enableAi={!disableAi} />
+				<FlowEditorPanel {disabledFlowInputs} enableAi={!disableAi} />
 			{/if}
 		</Pane>
 	</Splitpanes>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         disableTutorials?: boolean | undefined;
         disableAi?: boolean | undefined;
         disableSettings?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
         smallErrorHandler?: boolean | undefined;
     };
     events: {

package/package/components/flows/FlowHistory.svelte

@@ -1,76 +1,13 @@
-<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
-import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
-import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
-import { FlowService } from '../../gen';
-import { workspaceStore } from '../../stores';
-import { Skeleton } from '../common';
+<script>import { createEventDispatcher } from 'svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import Button from '../common/button/Button.svelte';
-import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import FlowHistoryInner from './FlowHistoryInner.svelte';
 export let path;
 let drawer;
-let loading = false;
-let versions = [];
-let selectedVersion = undefined;
-let selected = undefined;
-let deploymentMsgUpdateMode = false;
-let deploymentMsgUpdate = undefined;
 export function open() {
-    loadVersions();
     drawer.openDrawer();
 }
-async function loadFlow(version) {
-    selected = await FlowService.getFlowVersion({
-        workspace: $workspaceStore,
-        version,
-        path
-    });
-}
-async function loadVersions() {
-    loading = true;
-    versions = await FlowService.getFlowHistory({
-        workspace: $workspaceStore,
-        path: path
-    });
-    loading = false;
-}
-async function updateDeploymentMsg(version) {
-    if (selectedVersion === undefined ||
-        version === undefined ||
-        emptyString(deploymentMsgUpdate)) {
-        return;
-    }
-    await FlowService.updateFlowHistory({
-        workspace: $workspaceStore,
-        version,
-        path,
-        requestBody: {
-            deployment_msg: deploymentMsgUpdate
-        }
-    });
-    selectedVersion.deployment_msg = deploymentMsgUpdate;
-    deploymentMsgUpdateMode = false;
-    loadVersions();
-}
 const dispatch = createEventDispatcher();
-async function restoreVersion(flow) {
-    if (!flow)
-        return;
-    await FlowService.updateFlow({
-        workspace: $workspaceStore,
-        requestBody: {
-            ...flow,
-            path
-        },
-        path
-    });
-    dispatch('historyRestore');
-    drawer?.closeDrawer();
-    sendUserToast('Flow restored from previous deployment');
-}
-$: selectedVersion !== undefined && loadFlow(selectedVersion.id);
 </script>
 
 <Drawer bind:this={drawer} size="1200px">
@@ -79,136 +16,14 @@ $: selectedVersion !== undefined && loadFlow(selectedVersion.id);
 			drawer?.closeDrawer()
 		}}
 		noPadding
+		title="Deployment History"
 	>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={20}>
-				<PanelSection title="Past Deployments">
-					<div class="flex flex-col gap-2 w-full">
-						{#if !loading}
-							{#if versions.length > 0}
-								<div class="flex gap-2 flex-col">
-									{#each versions ?? [] as version}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<div
-											class={classNames(
-												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-												selectedVersion?.id == version.id ? 'bg-blue-100 text-blue-600' : ''
-											)}
-											role="button"
-											tabindex="0"
-											on:click={() => {
-												selectedVersion = version
-											}}
-										>
-											<span class="text-xs truncate">
-												{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
-											</span>
-										</div>
-									{/each}
-								</div>
-							{:else}
-								<div class="text-sm text-tertiary">No items</div>
-							{/if}
-						{:else}
-							<Skeleton layout={[[40], [40], [40], [40], [40]]} />
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={80}>
-				<div class="h-full w-full overflow-auto">
-					{#if selectedVersion}
-						{#if selected}
-							<div class="px-2 flex flex-col gap-2">
-								<span class="flex flex-row text-sm p-1 text-tertiary">
-									{#if deploymentMsgUpdateMode}
-										<div class="flex w-full">
-											<input
-												type="text"
-												bind:value={deploymentMsgUpdate}
-												class="!w-auto grow"
-												on:click|stopPropagation={() => {}}
-												on:keydown|stopPropagation
-												on:keypress|stopPropagation={({ key }) => {
-													if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
-												}}
-											/>
-											<Button
-												size="xs"
-												color="blue"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Save Deployment Message"
-												on:click={() => {
-													updateDeploymentMsg(selectedVersion?.id)
-												}}
-											>
-												<ArrowRight size={14} />
-											</Button>
-											<Button
-												size="xs"
-												color="light"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Abort"
-												on:click={() => {
-													deploymentMsgUpdateMode = false
-													deploymentMsgUpdate = undefined
-												}}
-											>
-												<X size={14} />
-											</Button>
-										</div>
-									{:else}
-										{#if selectedVersion.deployment_msg}
-											{selectedVersion.deployment_msg}
-										{:else}
-											Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
-										{/if}
-										<button
-											on:click={() => {
-												deploymentMsgUpdate = selectedVersion?.deployment_msg
-												deploymentMsgUpdateMode = true
-											}}
-											title="Update commit message"
-											class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
-											aria-label="Update commit message"
-										>
-											<Pencil size={14} />
-										</button>
-									{/if}
-								</span>
-								<div class="flex p-1 gap-2">
-									<Button
-										size="xs"
-										on:click={() =>
-											window.open(
-												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
-												'_blank'
-											)}
-									>
-										Restore as fork
-									</Button>
-									<Button size="xs" on:click={() => restoreVersion(selected)}
-										>Redeploy with that version
-									</Button>
-								</div>
-								{#await import('../FlowViewer.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default flow={selected} />
-								{/await}
-							</div>
-						{:else}
-							<Skeleton layout={[[40]]} />
-						{/if}
-					{:else}
-						<div class="text-sm p-2 text-tertiary"
-							>Select a deployment version to see its details</div
-						>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
+		<FlowHistoryInner
+			on:historyRestore={() => {
+				drawer.closeDrawer()
+				dispatch('historyRestore')
+			}}
+			{path}
+		/>
 	</DrawerContent>
 </Drawer>

package/package/components/flows/FlowHistory.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         open?: (() => void) | undefined;
     };
     events: {
-        keydown: KeyboardEvent;
         historyRestore: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/FlowHistoryInner.svelte

@@ -0,0 +1,200 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
+import { FlowService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { Skeleton } from '../common';
+import Button from '../common/button/Button.svelte';
+import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+export let path;
+let loading = false;
+let versions = [];
+let selectedVersion = undefined;
+let selected = undefined;
+let deploymentMsgUpdateMode = false;
+let deploymentMsgUpdate = undefined;
+async function loadFlow(version) {
+    selected = await FlowService.getFlowVersion({
+        workspace: $workspaceStore,
+        version,
+        path
+    });
+}
+async function loadVersions() {
+    loading = true;
+    versions = await FlowService.getFlowHistory({
+        workspace: $workspaceStore,
+        path: path
+    });
+    loading = false;
+}
+async function updateDeploymentMsg(version) {
+    if (selectedVersion === undefined ||
+        version === undefined ||
+        emptyString(deploymentMsgUpdate)) {
+        return;
+    }
+    await FlowService.updateFlowHistory({
+        workspace: $workspaceStore,
+        version,
+        path,
+        requestBody: {
+            deployment_msg: deploymentMsgUpdate
+        }
+    });
+    selectedVersion.deployment_msg = deploymentMsgUpdate;
+    deploymentMsgUpdateMode = false;
+    loadVersions();
+}
+const dispatch = createEventDispatcher();
+async function restoreVersion(flow) {
+    if (!flow)
+        return;
+    await FlowService.updateFlow({
+        workspace: $workspaceStore,
+        requestBody: {
+            ...flow,
+            path
+        },
+        path
+    });
+    dispatch('historyRestore');
+    sendUserToast('Flow restored from previous deployment');
+}
+loadVersions();
+$: selectedVersion !== undefined && loadFlow(selectedVersion.id);
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<div class="flex flex-col gap-2 w-full px-2 py-2">
+			{#if !loading}
+				{#if versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each versions ?? [] as version}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-hover hover:text-primary',
+									selectedVersion?.id == version.id ? 'bg-surface-selected text-primary' : ''
+								)}
+								role="button"
+								tabindex="0"
+								on:click={() => {
+									selectedVersion = version
+								}}
+							>
+								<span class="text-xs truncate">
+									{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
+								</span>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-sm text-tertiary">No items</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+			{/if}
+		</div>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto pt-2">
+			{#if selectedVersion}
+				{#if selected}
+					<div class="px-2 flex flex-col gap-2">
+						<div class="flex justify-between">
+							<span class="flex flex-row text-sm p-1 text-tertiary">
+								{#if deploymentMsgUpdateMode}
+									<div class="flex w-full">
+										<input
+											type="text"
+											bind:value={deploymentMsgUpdate}
+											class="!w-auto grow"
+											on:click|stopPropagation={() => {}}
+											on:keydown|stopPropagation
+											on:keypress|stopPropagation={({ key }) => {
+												if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
+											}}
+										/>
+										<Button
+											size="xs"
+											color="blue"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Save Deployment Message"
+											on:click={() => {
+												updateDeploymentMsg(selectedVersion?.id)
+											}}
+										>
+											<ArrowRight size={14} />
+										</Button>
+										<Button
+											size="xs"
+											color="light"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Abort"
+											on:click={() => {
+												deploymentMsgUpdateMode = false
+												deploymentMsgUpdate = undefined
+											}}
+										>
+											<X size={14} />
+										</Button>
+									</div>
+								{:else}
+									{#if selectedVersion.deployment_msg}
+										{selectedVersion.deployment_msg}
+									{:else}
+										Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
+									{/if}
+									<button
+										on:click={() => {
+											deploymentMsgUpdate = selectedVersion?.deployment_msg
+											deploymentMsgUpdateMode = true
+										}}
+										title="Update commit message"
+										class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
+										aria-label="Update commit message"
+									>
+										<Pencil size={14} />
+									</button>
+								{/if}
+							</span>
+							<div class="flex p-1 gap-2">
+								<div class="flex">
+									<Button
+										size="sm"
+										color="dark"
+										on:click={() =>
+											window.open(
+												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
+												'_blank'
+											)}
+									>
+										Restore as fork
+									</Button>
+								</div>
+								<div class="flex">
+									<Button size="sm" color="dark" on:click={() => restoreVersion(selected)}
+										>Redeploy with that version
+									</Button>
+								</div>
+							</div>
+						</div>
+						{#await import('../FlowViewer.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default flow={selected} />
+						{/await}
+					</div>
+				{:else}
+					<Skeleton layout={[[40]]} />
+				{/if}
+			{:else}
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

package/package/components/flows/FlowHistoryInner.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        historyRestore: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowHistoryInnerProps = typeof __propDef.props;
+export type FlowHistoryInnerEvents = typeof __propDef.events;
+export type FlowHistoryInnerSlots = typeof __propDef.slots;
+export default class FlowHistoryInner extends SvelteComponent<FlowHistoryInnerProps, FlowHistoryInnerEvents, FlowHistoryInnerSlots> {
+}
+export {};