windmill-components 1.558.4 → 1.596.0

package/package/components/TagsToListenTo.svelte.d.ts

@@ -2,24 +2,8 @@ type Props = {
     worker_tags: string[];
     customTags: string[] | undefined;
     disabled?: boolean;
+    class?: string;
 };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TagsToListenTo: $$__sveltets_2_IsomorphicComponent<Props, {
-    dirty: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "worker_tags" | "customTags">;
-type TagsToListenTo = InstanceType<typeof TagsToListenTo>;
+declare const TagsToListenTo: import("svelte").Component<Props, {}, "disabled" | "worker_tags" | "customTags">;
+type TagsToListenTo = ReturnType<typeof TagsToListenTo>;
 export default TagsToListenTo;

package/package/components/TeamSelector.svelte

@@ -3,116 +3,261 @@ import { RefreshCcw } from 'lucide-svelte';
 import { WorkspaceService } from '../gen';
 import Select from './select/Select.svelte';
 import { debounce } from '../utils';
-let { disabled = false, selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError } = $props();
+import { Button } from './common';
+let { disabled = false, selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError, onSelectedTeamChange } = $props();
 let isFetching = $state(false);
-let searchResults = $state([]);
-// Only enable search mode if no teams are provided
-const searchMode = !teams;
-// Determine which teams to show: provided teams or search results
-// In search mode, include the selected team if it exists
-let displayTeams = $derived(() => {
-    const baseTeams = teams || searchResults;
-    if (searchMode && selectedTeam && !baseTeams.find(t => t.team_id === selectedTeam?.team_id)) {
+let loadedTeams = $state([]);
+let hasLoadedInitial = $state(false);
+let isLoadingMore = $state(false);
+let nextLink = $state(null);
+let totalCount = $state(0);
+// Store pre-search state to restore when search is cleared
+let preSearchTeams = $state(null);
+let preSearchNextLink = $state(null);
+let preSearchTotalCount = $state(0);
+let selectedTeamId = $state(selectedTeam?.team_id);
+const searchMode = $derived(!teams);
+// Check if there are more teams to load (based on next_link presence)
+const hasMoreTeams = $derived(!!nextLink);
+// Show indicator when we have more teams to load
+const showLoadMoreIndicator = $derived(searchMode && hasMoreTeams);
+let displayTeams = $derived.by(() => {
+    const baseTeams = teams || loadedTeams;
+    if (selectedTeam && !baseTeams.find((t) => t.team_id === selectedTeam?.team_id)) {
         return [selectedTeam, ...baseTeams];
     }
     return baseTeams;
 });
-// Create separate filter text for search mode
+$effect(() => {
+    const newTeam = selectedTeamId
+        ? displayTeams.find((t) => t.team_id === selectedTeamId)
+        : undefined;
+    if (newTeam?.team_id !== selectedTeam?.team_id) {
+        selectedTeam = newTeam;
+    }
+});
+$effect(() => {
+    if (selectedTeam?.team_id !== selectedTeamId) {
+        selectedTeamId = selectedTeam?.team_id;
+    }
+});
+let previousTeamId = $state(undefined);
+$effect(() => {
+    if (selectedTeam?.team_id !== previousTeamId) {
+        previousTeamId = selectedTeam?.team_id;
+        onSelectedTeamChange?.(selectedTeam);
+    }
+});
 let searchFilterText = $state('');
-// Debounced search function
+let searchRequestId = $state(0);
 const debouncedSearch = debounce(async (query) => {
     await searchTeams(query);
 }, 500);
-// Watch for search filter text changes (only in search mode)
+// Preload initial teams on mount when in search mode
+$effect(() => {
+    if (searchMode && !hasLoadedInitial) {
+        hasLoadedInitial = true;
+        fetchInitialTeams();
+    }
+});
+// Track previous search text to detect when cleared
+let previousSearchText = $state('');
+// Handle search input
 $effect(() => {
     if (searchMode) {
         if (searchFilterText.length >= 1) {
             debouncedSearch.debounced(searchFilterText);
+            previousSearchText = searchFilterText;
         }
-        else if (searchFilterText.length === 0) {
-            searchResults = [];
+        else if (previousSearchText.length > 0) {
+            // Search was cleared - restore pre-search state
+            previousSearchText = '';
+            restorePreSearchState();
         }
     }
 });
+function restorePreSearchState() {
+    searchRequestId++; // Invalidate any in-flight search
+    if (preSearchTeams !== null) {
+        // Restore the accumulated teams from before the search
+        loadedTeams = preSearchTeams;
+        nextLink = preSearchNextLink;
+        totalCount = preSearchTotalCount;
+        // Clear the saved state
+        preSearchTeams = null;
+        preSearchNextLink = null;
+        preSearchTotalCount = 0;
+    }
+    else {
+        // No saved state, fetch fresh
+        fetchInitialTeams();
+    }
+}
+async function fetchInitialTeams() {
+    isFetching = true;
+    nextLink = null;
+    totalCount = 0;
+    try {
+        const response = await WorkspaceService.listAvailableTeamsIds({
+            workspace: $workspaceStore
+        });
+        loadedTeams =
+            response.teams?.map((t) => ({
+                team_id: t.team_id || '',
+                team_name: t.team_name || ''
+            })) || [];
+        nextLink = response.next_link ?? null;
+        totalCount = response.total_count ?? loadedTeams.length;
+    }
+    catch (error) {
+        onError?.(error);
+        console.error('Error fetching initial teams:', error);
+        loadedTeams = [];
+    }
+    finally {
+        isFetching = false;
+    }
+}
 async function searchTeams(query) {
     if (!query)
         return;
+    // Save current state before searching (only if not already in search mode)
+    if (preSearchTeams === null) {
+        preSearchTeams = loadedTeams;
+        preSearchNextLink = nextLink;
+        preSearchTotalCount = totalCount;
+    }
+    const thisRequestId = ++searchRequestId;
     isFetching = true;
+    nextLink = null;
     try {
-        const response = (await WorkspaceService.listAvailableTeamsIds({
+        const response = await WorkspaceService.listAvailableTeamsIds({
             workspace: $workspaceStore,
             search: query
-        }));
-        searchResults = response || [];
-        isFetching = false;
-        return searchResults;
+        });
+        // Ignore stale results if a newer search was initiated
+        if (thisRequestId !== searchRequestId) {
+            return;
+        }
+        loadedTeams =
+            response.teams?.map((t) => ({
+                team_id: t.team_id || '',
+                team_name: t.team_name || ''
+            })) || [];
+        // Search results don't have pagination
+        nextLink = null;
+    }
+    catch (error) {
+        // Only handle error if this is still the current request
+        if (thisRequestId === searchRequestId) {
+            onError?.(error);
+            console.error('Error searching teams:', error);
+            loadedTeams = [];
+        }
+    }
+    finally {
+        // Only clear loading state if this is the current request
+        if (thisRequestId === searchRequestId) {
+            isFetching = false;
+        }
+    }
+}
+async function loadMoreTeams() {
+    // Don't load more if: already loading, no next page, or user started searching
+    if (isLoadingMore || !nextLink || preSearchTeams !== null)
+        return;
+    isLoadingMore = true;
+    try {
+        const response = await WorkspaceService.listAvailableTeamsIds({
+            workspace: $workspaceStore,
+            nextLink: nextLink
+        });
+        const newTeams = response.teams?.map((t) => ({
+            team_id: t.team_id || '',
+            team_name: t.team_name || ''
+        })) || [];
+        // Append new teams to existing list
+        loadedTeams = [...loadedTeams, ...newTeams];
+        nextLink = response.next_link ?? null;
     }
     catch (error) {
-        isFetching = false;
         onError?.(error);
-        console.error('Error searching teams:', error);
-        searchResults = [];
-        return [];
+        console.error('Error loading more teams:', error);
+    }
+    finally {
+        isLoadingMore = false;
     }
 }
-async function refreshSearch() {
-    if (searchMode && searchFilterText.length >= 2) {
-        await searchTeams(searchFilterText);
+async function refreshTeams() {
+    if (searchMode) {
+        if (searchFilterText.length >= 1) {
+            await searchTeams(searchFilterText);
+        }
+        else {
+            await fetchInitialTeams();
+        }
     }
 }
 </script>
 
 <div class={containerClass}>
-	<div class="flex items-center gap-2">
-		<div class="flex-grow" style="min-width: {minWidth};">
-			{#if searchMode}
-				<Select
-					containerStyle={'min-width: ' + minWidth}
-					items={searchFilterText.length >= 1 || (searchFilterText.length === 0 && selectedTeam) ? displayTeams().map((team) => ({
-						label: team.team_name,
-						value: team.team_id
-					})) : []}
-					placeholder={isFetching ? "Searching..." : "Search teams..."}
-					clearable
-					disabled={disabled || isFetching}
-					bind:filterText={searchFilterText}
-					bind:value={
-						() => selectedTeam?.team_id,
-						(value) => {
-							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
-						}
-					}
-				/>
-			{:else}
-				<Select
-					containerStyle={'min-width: ' + minWidth}
-					items={displayTeams().map((team) => ({
-						label: team.team_name,
-						value: team.team_id
-					}))}
-					placeholder="Select a team"
-					clearable
-					disabled={disabled || isFetching}
-					bind:value={
-						() => selectedTeam?.team_id,
-						(value) => {
-							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
-						}
-					}
+	<div class="flex flex-col gap-1">
+		<div class="flex items-center gap-2">
+			<div class="flex-grow" style="min-width: {minWidth};">
+				{#if searchMode}
+					<Select
+						containerStyle={'min-width: ' + minWidth}
+						items={displayTeams.map((team) => ({
+							label: team.team_name,
+							value: team.team_id
+						}))}
+						placeholder={isFetching ? 'Loading...' : 'Search teams...'}
+						clearable
+						disabled={disabled || isFetching}
+						loading={isFetching}
+						bind:filterText={searchFilterText}
+						bind:value={selectedTeamId}
+					/>
+				{:else}
+					<Select
+						containerStyle={'min-width: ' + minWidth}
+						items={displayTeams.map((team) => ({
+							label: team.team_name,
+							value: team.team_id
+						}))}
+						placeholder="Select a team"
+						clearable
+						disabled={disabled || isFetching}
+						bind:value={selectedTeamId}
+					/>
+				{/if}
+			</div>
+
+			{#if showRefreshButton}
+				<Button
+					onclick={refreshTeams}
+					disabled={isFetching || disabled}
+					class="flex items-center justify-center p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover disabled:opacity-50"
+					title={searchMode ? 'Refresh teams' : 'Refresh teams from Microsoft'}
+					startIcon={{ icon: RefreshCcw, props: { class: isFetching ? 'animate-spin' : '' } }}
 				/>
 			{/if}
 		</div>
 
-		{#if showRefreshButton}
-			<button
-				onclick={refreshSearch}
-				disabled={isFetching || disabled || (searchMode && searchFilterText.length < 2)}
-				class="flex items-center justify-center p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover disabled:opacity-50"
-				title={searchMode ? "Refresh search results" : "Refresh teams from Microsoft"}
-			>
-				<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
-			</button>
+		{#if showLoadMoreIndicator}
+			<div class="flex items-center gap-2 pl-1">
+				<span class="text-2xs text-tertiary">
+					Loaded {loadedTeams.length} of {totalCount}
+				</span>
+				<button
+					type="button"
+					class="text-xs text-accent cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+					onclick={loadMoreTeams}
+					disabled={isLoadingMore}
+				>
+					{isLoadingMore ? 'loading...' : 'load more...'}
+				</button>
+			</div>
 		{/if}
 	</div>
-
 </div>

package/package/components/TeamSelector.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     teams?: TeamItem[] | undefined;
     minWidth?: string;
     onError?: (error: Error) => void;
+    onSelectedTeamChange?: (team: TeamItem | undefined) => void;
 }
 declare const TeamSelector: import("svelte").Component<Props, {}, "selectedTeam">;
 type TeamSelector = ReturnType<typeof TeamSelector>;

package/package/components/TemplateEditor.svelte

@@ -11,11 +11,12 @@ import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 // import '@codingame/monaco-vscode-standalone-languages'
 // import '@codingame/monaco-vscode-standalone-typescript-language-features'
-import { initializeVscode } from './vscode';
+import { initializeVscode, MONACO_Y_PADDING } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { setMonacoJsonOptions } from './monacoLanguagesOptions';
 import { inputBorderClass } from './text_input/TextInput.svelte';
+import { twMerge } from 'tailwind-merge';
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -335,8 +336,9 @@ export let automaticLayout = true;
 export let extraLib = '';
 export let autoHeight = true;
 export let fixedOverflowWidgets = true;
-export let fontSize = 16;
+export let fontSize = 12;
 export let loadAsync = false;
+let yPadding = MONACO_Y_PADDING;
 if (typeof code != 'string') {
     code = '';
 }
@@ -386,16 +388,13 @@ async function loadMonaco() {
             model,
             // overflowWidgetsDomNode: widgets,
             // lineNumbers: 'on',
-            lineDecorationsWidth: 6,
+            lineDecorationsWidth: 0,
             lineNumbersMinChars: 2,
             fontSize,
             suggestOnTriggerCharacters: true,
             renderLineHighlight: 'none',
             lineNumbers: 'off',
-            padding: {
-                bottom: 8,
-                top: 8
-            }
+            ...(yPadding !== undefined ? { padding: { bottom: yPadding, top: yPadding } } : {})
         });
     }
     catch (e) {
@@ -426,7 +425,7 @@ async function loadMonaco() {
         const updateHeight = () => {
             const contentHeight = Math.min(1000, editor.getContentHeight());
             if (divEl) {
-                divEl.style.height = `${contentHeight + 2}px`;
+                divEl.style.height = `${contentHeight}px`;
             }
             try {
                 editor.layout({ width, height: contentHeight });
@@ -569,23 +568,23 @@ onDestroy(() => {
 
 <EditorTheme />
 
-{#if !editor}
-	<FakeMonacoPlaceHolder
-		autoheight
-		showNumbers={false}
-		{code}
-		lineNumbersWidth={14}
-		lineNumbersOffset={-20}
-		class="template nonmain-editor rounded-md min-h-4 bg-surface-secondary !py-[9px] overflow-clip"
-	/>
-{/if}
 <div
-	bind:this={divEl}
-	style="height: 18px; padding-left: 6px;"
-	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
-		''} template nonmain-editor rounded-md min-h-4 overflow-clip {!editor ? 'hidden' : ''}"
-	bind:clientWidth={width}
-></div>
+	class={twMerge(
+		inputBorderClass({ forceFocus: isFocus }),
+		'rounded-md overflow-auto pl-2',
+		$$props.class
+	)}
+>
+	{#if !editor}
+		<FakeMonacoPlaceHolder autoheight showNumbers={false} {code} {fontSize} />
+	{/if}
+	<div
+		bind:this={divEl}
+		style="height: 18px;"
+		class="template nonmain-editor rounded-md overflow-clip {!editor ? 'hidden' : ''}"
+		bind:clientWidth={width}
+	></div>
+</div>
 
 <style>
 	:global(.template .mtk20) {

package/package/components/TestConnection.svelte

@@ -34,7 +34,7 @@ const scripts = {
         lang: 'snowflake',
         argName: 'database'
     },
-    ms_sql_server: {
+    mssql: {
         code: `SELECT 1`,
         lang: 'mssql',
         argName: 'database'
@@ -207,14 +207,7 @@ async function testConnection() {
 </script>
 
 {#if Object.keys(scripts).includes(resourceType || '')}
-	<Button
-		spacingSize="sm"
-		size="xs"
-		btnClasses="h-8"
-		color="light"
-		variant="border"
-		on:click={testConnection}
-	>
+	<Button spacingSize="sm" size="xs" unifiedSize="md" variant="default" on:click={testConnection}>
 		{#if loading}
 			<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
 		{:else}

package/package/components/TimeAgo.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">import { getDbClockNow } from '../forLater';
 import { displayDate } from '../utils';
-import { onDestroy, onMount } from 'svelte';
-export let date;
-export let agoOnlyIfRecent = false;
-export let noDate = false;
-export let isRecent = true;
-let computedTimeAgo = undefined;
+import { onDestroy, onMount, untrack } from 'svelte';
+let { date, agoOnlyIfRecent = false, noDate = false, isRecent = $bindable(true) } = $props();
+let computedTimeAgo = $state(undefined);
 let interval;
-$: date && computeDate();
 onMount(() => {
     interval = setInterval(() => {
         computeDate();
@@ -63,6 +59,9 @@ async function displayDaysAgo(dateString) {
         }
     }
 }
+$effect(() => {
+    date && untrack(() => computeDate());
+});
 </script>
 
 {#if computedTimeAgo && (!agoOnlyIfRecent || isRecent)}

package/package/components/TimeAgo.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TimeAgo: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     date: string;
     agoOnlyIfRecent?: boolean;
     noDate?: boolean;
     isRecent?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TimeAgo = InstanceType<typeof TimeAgo>;
+}
+declare const TimeAgo: import("svelte").Component<Props, {}, "isRecent">;
+type TimeAgo = ReturnType<typeof TimeAgo>;
 export default TimeAgo;