windmill-components 1.448.50 → 1.472.2

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,25 +1,25 @@
 <script>import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore } from '../../stores';
 import { Building, Plus, Settings } from 'lucide-svelte';
-import Menu from '../common/menu/MenuV2.svelte';
+import MenuButton from './MenuButton.svelte';
+import { Menu, MenuItem } from '../meltComponents';
 import { goto } from '../../navigation';
 import { base } from '../../base';
 import { page } from '$app/stores';
 import { switchWorkspace } from '../../storeUtils';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { enterpriseLicense } from '../../stores';
-import MenuButton from './MenuButton.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { isCloudHosted } from '../../cloud';
-import { initAllAiWorkspace } from '../copilot/lib';
+import { workspaceAIClients } from '../copilot/lib';
 import { twMerge } from 'tailwind-merge';
 export let isCollapsed = false;
+export let createMenu;
 // When used outside of the side bar, where links to workspace settings and such don't make as much sense.
 export let strictWorkspaceSelect = false;
 async function toggleSwitchWorkspace(id) {
     if ($workspaceStore === id) {
         return;
     }
-    initAllAiWorkspace(id, true);
+    workspaceAIClients.init(id);
     const editPages = [
         '/scripts/edit/',
         '/flows/edit/',
@@ -42,47 +42,49 @@ async function toggleSwitchWorkspace(id) {
 }
 </script>
 
-<Menu>
-	<div slot="trigger">
+<Menu {createMenu} let:item usePointerDownOutside>
+	<svelte:fragment slot="trigger" let:trigger>
 		<MenuButton
 			class="!text-xs"
 			icon={Building}
 			label={$workspaceStore ?? ''}
 			{isCollapsed}
 			color={$userWorkspaces.find((w) => w.id === $workspaceStore)?.color}
+			{trigger}
 		/>
-	</div>
+	</svelte:fragment>
 
 	<div class="divide-y" role="none">
 		<div class="py-1">
 			{#each $userWorkspaces as workspace}
-				<MenuItem>
-					<button
-						class={twMerge(
-							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
-							$workspaceStore === workspace.id
-								? 'cursor-default bg-surface-selected'
-								: 'cursor-pointer hover:bg-surface-hover'
-						)}
-						on:click={async () => {
-							await toggleSwitchWorkspace(workspace.id)
-						}}
-					>
-						<div class="flex items-center justify-between min-w-0 w-full">
-							<div>
-								<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
-								<div class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left">
-									{workspace.id}
-								</div>
+				<MenuItem
+					class={twMerge(
+						'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+						$workspaceStore === workspace.id
+							? 'cursor-default bg-surface-selected'
+							: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
+					)}
+					on:click={async () => {
+						await toggleSwitchWorkspace(workspace.id)
+					}}
+					{item}
+				>
+					<div class="flex items-center justify-between min-w-0 w-full">
+						<div>
+							<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
+							<div
+								class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
+							>
+								{workspace.id}
 							</div>
-							{#if workspace.color}
-								<div
-									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
-									style="background-color: {workspace.color}"
-								></div>
-							{/if}
 						</div>
-					</button>
+						{#if workspace.color}
+							<div
+								class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
+								style="background-color: {workspace.color}"
+							/>
+						{/if}
+					</div>
 				</MenuItem>
 			{/each}
 		</div>
@@ -101,31 +103,33 @@ async function toggleSwitchWorkspace(id) {
 		{/if}
 		{#if !strictWorkspaceSelect}
 			<div class="py-1" role="none">
-				<a
+				<MenuItem
 					href="{base}/user/workspaces"
 					on:click={() => {
 						localStorage.removeItem('workspace')
 					}}
-					class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
-					role="menuitem"
-					tabindex="-1"
+					class={twMerge(
+						'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+					)}
+					{item}
 				>
 					All workspaces
-				</a>
+				</MenuItem>
 			</div>
 		{/if}
 		{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 			<div class="py-1" role="none">
-				<MenuItem>
-					<a
-						href="{base}/workspace_settings"
-						class="text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-						role="menuitem"
-						tabindex="-1"
-					>
-						<Settings size={16} />
-						Workspace settings
-					</a>
+				<MenuItem
+					href="{base}/workspace_settings"
+					class={twMerge(
+						'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+					)}
+					{item}
+				>
+					<Settings size={16} />
+					Workspace settings
 				</MenuItem>
 			</div>
 		{/if}
@@ -144,17 +148,18 @@ async function toggleSwitchWorkspace(id) {
 				</div>
 			{/if}
 			{#if $userStore?.is_admin}
-				<button
-					type="button"
-					class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
-					role="menuitem"
-					tabindex="-1"
+				<MenuItem
+					class={twMerge(
+						'text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900',
+						'data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900'
+					)}
 					on:click={() => {
 						goto('/workspace_settings?tab=premium')
 					}}
+					{item}
 				>
 					Upgrade
-				</button>
+				</MenuItem>
 			{/if}
 		</div>
 	{/if}

package/package/components/sidebar/WorkspaceMenu.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { MenubarBuilders } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         isCollapsed?: boolean | undefined;
+        createMenu: MenubarBuilders['createMenu'];
         strictWorkspaceSelect?: boolean | undefined;
     };
     events: {

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,59 @@
 const changelogs = [
+    {
+        label: 'SQS triggers',
+        href: 'https://www.windmill.dev/changelog/sqs-triggers',
+        date: '2025-02-18'
+    },
+    {
+        label: 'Teams workspace integration',
+        href: 'https://www.windmill.dev/changelog/teams-workspace-integration',
+        date: '2025-02-13'
+    },
+    {
+        label: 'Mocked API files',
+        href: 'https://www.windmill.dev/changelog/mocked-api-files',
+        date: '2025-01-27'
+    },
+    {
+        label: 'Select Python version',
+        href: 'https://www.windmill.dev/changelog/select-python-version',
+        date: '2025-01-24'
+    },
+    {
+        label: 'Postgres triggers',
+        href: 'https://www.windmill.dev/changelog/postgres-triggers',
+        date: '2025-01-24'
+    },
+    {
+        label: 'Oracle support',
+        href: 'https://www.windmill.dev/changelog/oracle-support',
+        date: '2025-01-15'
+    },
+    {
+        label: 'NATS triggers',
+        href: 'https://www.windmill.dev/changelog/nats-triggers',
+        date: '2025-01-15'
+    },
+    {
+        label: 'Workspace color',
+        href: 'https://www.windmill.dev/changelog/workspace-color',
+        date: '2025-01-10'
+    },
+    {
+        label: 'Interactive Slack approval steps',
+        href: 'https://www.windmill.dev/changelog/slack-approval-steps',
+        date: '2024-12-20'
+    },
+    {
+        label: 'C#',
+        href: 'https://www.windmill.dev/changelog/csharp',
+        date: '2024-12-13'
+    },
+    {
+        label: 'App custom URL',
+        href: 'https://www.windmill.dev/changelog/app-custom-url',
+        date: '2024-12-05'
+    },
     {
         label: 'Full text search on jobs and logs',
         href: 'https://www.windmill.dev/changelog/instant-full-text-search-on-jobs-and-logs',

package/package/components/table/DataTable.svelte

@@ -25,28 +25,24 @@ let footerHeight = 0;
 let tableHeight = 0;
 const dispatch = createEventDispatcher();
 let tableContainer;
-let isLoading = false;
+export let loading = false;
 setContext('datatable', {
     size
 });
 $: contentHeight = tableHeight - footerHeight;
 function checkScrollStatus() {
-    if (!infiniteScroll || isLoading)
+    if (!infiniteScroll || loading)
         return;
     const hasScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
     if (!hasScrollbar && hasMore) {
-        isLoading = true;
         dispatch('loadMore');
-        setTimeout(() => {
-            isLoading = false;
-        }, 200);
     }
 }
 function handleScroll() {
-    if (!infiniteScroll || isLoading) {
-        if (isLoading) {
+    if (!infiniteScroll || loading) {
+        if (loading) {
             const checkAgain = () => {
-                if (!isLoading) {
+                if (!loading) {
                     handleScroll();
                 }
             };
@@ -56,14 +52,10 @@ function handleScroll() {
     }
     const { scrollTop, scrollHeight, clientHeight } = tableContainer;
     if (scrollHeight - (scrollTop + clientHeight) < 50) {
-        isLoading = true;
         dispatch('loadMore');
-        setTimeout(() => {
-            isLoading = false;
-        }, 1000);
     }
 }
-$: if (tableContainer && hasMore && !isLoading) {
+$: if (tableContainer && hasMore && !loading) {
     checkScrollStatus();
 }
 </script>

package/package/components/table/DataTable.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         contentHeight?: number | undefined;
         tableFixed?: boolean | undefined;
         infiniteScroll?: boolean | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         previous: CustomEvent<any>;

package/package/components/triggers/CaptureButton.svelte

@@ -1,6 +1,5 @@
-<script>import Popover from '../meltComponents/Popover.svelte';
-import { Button } from '../common';
-import { Webhook, Route, Unplug, Mail, Plus } from 'lucide-svelte';
+<script>import { Button } from '../common';
+import { Webhook, Route, Unplug, Mail, Plus, Database } from 'lucide-svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import { enterpriseLicense } from '../../stores';
 import {} from '../../gen';
@@ -8,20 +7,64 @@ import { createEventDispatcher } from 'svelte';
 import { captureTriggerKindToTriggerKind } from '../triggers';
 import CaptureIcon from './CaptureIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
+import AwsIcon from '../icons/AwsIcon.svelte';
+import DropdownV2 from '../DropdownV2.svelte';
 export let small = false;
-let isOpen = false;
 const dispatch = createEventDispatcher();
 function handleClick(kind) {
     dispatch('openTriggers', {
         kind: captureTriggerKindToTriggerKind(kind),
         config: {}
     });
-    isOpen = false;
 }
+$: items = [
+    {
+        icon: Webhook,
+        displayName: 'Webhook',
+        action: () => handleClick('webhook')
+    },
+    {
+        icon: Route,
+        displayName: 'HTTP',
+        action: () => handleClick('http')
+    },
+    {
+        icon: Unplug,
+        displayName: 'Websocket',
+        action: () => handleClick('websocket')
+    },
+    {
+        icon: AwsIcon,
+        displayName: 'SQS',
+        action: () => handleClick('sqs')
+    },
+    {
+        icon: Database,
+        displayName: 'Postgres',
+        action: () => handleClick('postgres')
+    },
+    {
+        icon: Mail,
+        displayName: 'Email',
+        action: () => handleClick('email')
+    },
+    {
+        icon: KafkaIcon,
+        displayName: 'Kafka',
+        action: () => handleClick('kafka'),
+        disabled: !$enterpriseLicense
+    },
+    {
+        icon: NatsIcon,
+        displayName: 'Nats',
+        action: () => handleClick('nats'),
+        disabled: !$enterpriseLicense
+    }
+];
 </script>
 
-<Popover closeButton={false} bind:open={isOpen}>
-	<svelte:fragment slot="trigger">
+<DropdownV2 {items} placement="bottom-start">
+	<svelte:fragment slot="buttonReplacement">
 		{#if small}
 			<Button
 				color="light"
@@ -48,64 +91,4 @@ function handleClick(kind) {
 			</Button>
 		{/if}
 	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col bg-surface">
-			<button
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('webhook')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Webhook size={16} />
-					<p class="text-xs text-secondary">Webhook</p>
-				</div>
-			</button>
-			<button
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('http')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Route size={16} />
-					<p class="text-xs text-secondary">HTTP</p>
-				</div>
-			</button>
-			<button
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('websocket')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Unplug size={16} />
-					<p class="text-xs text-secondary">Websocket</p>
-				</div>
-			</button>
-			<button
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('email')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Mail size={16} />
-					<p class="text-xs text-secondary">Email</p>
-				</div>
-			</button>
-			<button
-				disabled={!$enterpriseLicense}
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('kafka')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<KafkaIcon size={16} />
-					<p class="text-xs text-secondary">Kafka</p>
-				</div>
-			</button>
-			<button
-				disabled={!$enterpriseLicense}
-				class="hover:bg-surface-hover p-2 transition-colors duration-150"
-				on:click={() => handleClick('nats')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<NatsIcon size={16} />
-					<p class="text-xs text-secondary">Nats</p>
-				</div>
-			</button>
-		</div>
-	</svelte:fragment>
-</Popover>
+</DropdownV2>

package/package/components/triggers/CaptureSection.svelte

@@ -19,7 +19,10 @@ const dispatch = createEventDispatcher();
 const { showCaptureHint } = getContext('TriggerContext');
 onDestroy(() => {
     if (captureInfo.active) {
-        dispatch('captureToggle');
+        dispatch('captureToggle', {
+            // this on destroy can be called after capturing has already been stopped (aka after on destroy of the wrapper), make sure we do not start it again
+            disableOnly: true
+        });
     }
 });
 function handleUpdateSchema(e) {
@@ -49,7 +52,7 @@ $: updateShowCaptureHint($showCaptureHint);
 					<AnimatedButton animate={captureInfo.active} baseRadius="6px" wrapperClasses="ml-[-2px]">
 						<Button
 							size="xs2"
-							on:click={() => dispatch('captureToggle')}
+							on:click={() => dispatch('captureToggle', {})}
 							variant="border"
 							{disabled}
 							color="light"

package/package/components/triggers/CaptureSection.svelte.d.ts

@@ -24,7 +24,9 @@ declare const __propDef: {
         }>;
         addPreprocessor: CustomEvent<null>;
         testWithArgs: CustomEvent<any>;
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         updateSchema: CustomEvent<{
             payloadData: Record<string, any>;
             redirect: boolean;

package/package/components/triggers/CaptureTable.svelte

@@ -6,7 +6,6 @@ import Button from '../common/button/Button.svelte';
 import CustomPopover from '../CustomPopover.svelte';
 import { Webhook, Route, Unplug, Mail, Play } from 'lucide-svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
-import { isObject } from '../../utils';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import {} from '../triggers';
 import { CaptureService } from '../../gen';
@@ -14,7 +13,7 @@ import { workspaceStore } from '../../stores';
 import {} from '../../gen';
 import CaptureButton from './CaptureButton.svelte';
 import InfiniteList from '../InfiniteList.svelte';
-import { sendUserToast } from '../../utils';
+import { isObject, sendUserToast } from '../../utils';
 import SchemaPickerRow from '../schema/SchemaPickerRow.svelte';
 import { clickOutside } from '../../utils';
 export let path;
@@ -48,17 +47,32 @@ function initLoadCaptures(testKind = 'main') {
             perPage
         });
         let capturesWithPayload = captures.map((capture) => {
-            const payload = isObject(capture.payload) ? capture.payload : {};
-            const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {};
-            return {
-                ...capture,
-                payloadData: testKind === 'preprocessor'
-                    ? {
-                        ...payload,
-                        ...triggerExtra
-                    }
-                    : { ...payload }
-            };
+            let newCapture = { ...capture };
+            if (capture.payload === 'WINDMILL_TOO_BIG') {
+                newCapture = {
+                    ...capture,
+                    getFullCapture: () => CaptureService.getCapture({
+                        workspace: $workspaceStore,
+                        id: capture.id
+                    })
+                };
+            }
+            const trigger_extra = isObject(capture.trigger_extra) ? capture.trigger_extra : {};
+            newCapture.payloadData =
+                testKind === 'preprocessor'
+                    ? capture.payload === 'WINDMILL_TOO_BIG'
+                        ? {
+                            payload: capture.payload,
+                            ...trigger_extra
+                        }
+                        : typeof capture.payload === 'object'
+                            ? {
+                                ...capture.payload,
+                                ...trigger_extra
+                            }
+                            : trigger_extra
+                    : capture.payload;
+            return newCapture;
         });
         return capturesWithPayload;
     };
@@ -71,15 +85,33 @@ function initLoadCaptures(testKind = 'main') {
     };
     infiniteList?.setDeleteItemFn(deleteInputFn);
 }
-function handleSelect(capture) {
+async function handleSelect(capture) {
     if (selected === capture.id) {
         deselect();
     }
     else {
+        const payloadData = await getPayload(capture);
         selected = capture.id;
-        dispatch('select', capture.payloadData);
+        dispatch('select', structuredClone(payloadData));
     }
 }
+async function getPayload(capture) {
+    let payloadData = {};
+    if (capture.getFullCapture) {
+        const fullCapture = await capture.getFullCapture();
+        payloadData =
+            testKind === 'preprocessor'
+                ? {
+                    ...(typeof fullCapture.payload === 'object' ? fullCapture.payload : {}),
+                    ...(typeof fullCapture.trigger_extra === 'object' ? fullCapture.trigger_extra : {})
+                }
+                : fullCapture.payload;
+    }
+    else {
+        payloadData = structuredClone(capture.payloadData);
+    }
+    return payloadData;
+}
 function deselect() {
     selected = undefined;
     dispatch('select', undefined);
@@ -134,13 +166,15 @@ $: path && infiniteList && initLoadCaptures();
 					on:selected={(e) => {
 						initLoadCaptures(e.detail)
 					}}
+					let:item
 				>
-					<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
+					<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small {item} />
 					<ToggleButton
 						value="preprocessor"
 						label="Preprocessor"
 						small
 						tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+						{item}
 					/>
 				</ToggleButtonGroup>
 			</div>
@@ -175,7 +209,7 @@ $: path && infiniteList && initLoadCaptures();
 			<svelte:fragment slot="columns">
 				<colgroup>
 					<col class="w-8" />
-					<col class="w-20" />
+					<col class="w-16" />
 					<col />
 				</colgroup>
 			</svelte:fragment>
@@ -231,9 +265,10 @@ $: path && infiniteList && initLoadCaptures();
 										dropdownItems={[
 											{
 												label: 'Use as input schema',
-												onClick: () => {
+												onClick: async () => {
+													const payloadData = await getPayload(item)
 													dispatch('updateSchema', {
-														payloadData: item.payloadData,
+														payloadData,
 														redirect: true,
 														args: true
 													})
@@ -241,20 +276,23 @@ $: path && infiniteList && initLoadCaptures();
 												disabled: !isFlow || testKind !== 'main'
 											}
 										].filter((item) => !item.disabled)}
-										on:click={() => {
+										on:click={async () => {
+											const payloadData = await getPayload(item)
 											if (isFlow && testKind === 'main') {
-												dispatch('testWithArgs', item.payloadData)
+												dispatch('testWithArgs', payloadData)
 											} else {
 												dispatch('applyArgs', {
 													kind: testKind,
-													args: item.payloadData
+													args: payloadData
 												})
 											}
 										}}
 										disabled={testKind === 'preprocessor' && !hasPreprocessor}
 										title={isFlow && testKind === 'main'
 											? 'Test flow with args'
-											: 'Apply args to preprocessor'}
+											: testKind === 'preprocessor'
+											? 'Apply args to preprocessor'
+											: 'Apply args to inputs'}
 										startIcon={isFlow && testKind === 'main' ? { icon: Play } : {}}
 									>
 										{isFlow && testKind === 'main' ? 'Test' : 'Apply args'}