windmill-components 1.623.2 → 1.655.0

package/package/components/select/SelectDropdown.svelte

@@ -1,95 +1,29 @@
-<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
-import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
-import { untrack } from 'svelte';
+<script lang="ts" generics="T">import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { PlusIcon } from 'lucide-svelte';
-import { useReducedMotion } from '../../svelte5Utils.svelte';
-import { watch } from 'runed';
-let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet } = $props();
+import GenericDropdown from './GenericDropdown.svelte';
+import { Debounced } from 'runed';
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', maxHeight = 256, header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet, highlightFirstOnOpen = false } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
-let listEl = $state();
-let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
-let reducedMotion = useReducedMotion();
-function computeDropdownPos() {
-    if (!getInputRect || !listEl)
-        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
-    let inputR = getInputRect();
-    const listR = listEl.getBoundingClientRect();
-    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
-    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
-    if (isBelow)
-        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
-    else {
-        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
-    }
-}
-$effect(() => {
-    function updateDropdownPos() {
-        let nPos = computeDropdownPos();
-        if (!deepEqual(nPos, dropdownPos))
-            dropdownPos = nPos;
-        if (open)
-            requestAnimationFrame(updateDropdownPos);
-    }
-    if (open)
-        untrack(() => updateDropdownPos());
-});
 $effect(() => {
     ;
     [open, processedItems];
-    untrack(() => (keyArrowPos = open && filterText ? 0 : undefined));
-});
-// We do not want to render the dropdown when it is closed for performance reasons
-// but we want to keep it in the DOM for a short time to allow for transitions to finish
-//
-// We do not use Svelte transitions because they can not animate in the opposite direction
-// when the dropdown is opens above the input
-// Also CSS transitions are smoother because they do not rely on JS / animation frames
-let uiState = $state({ domExists: open, visible: open, timeout: null });
-let initial = true;
-watch(() => open && !disabled, (isOpen) => {
-    untrack(() => {
-        if (initial) {
-            initial = false;
-            return;
-        }
-        if (reducedMotion.val) {
-            uiState = {
-                domExists: open && !disabled,
-                visible: open && !disabled,
-                timeout: null
-            };
-            return;
-        }
-        if (uiState.timeout)
-            clearTimeout(uiState.timeout);
-        uiState = {
-            domExists: true,
-            visible: !isOpen,
-            timeout: setTimeout(() => {
-                if (isOpen) {
-                    uiState.visible = true;
-                    uiState.timeout = null;
-                }
-                else if (!isOpen) {
-                    uiState.visible = false;
-                    uiState.timeout = setTimeout(() => {
-                        uiState.domExists = false;
-                        uiState.timeout = null;
-                    }, 500); // leave time for transition to finish
-                }
-            }, 0) // We need the height to be 0 then change immediately for the transition to play
-        };
-    });
+    untrack(() => (keyArrowPos = open && (filterText || highlightFirstOnOpen) ? 0 : undefined));
 });
+// Expose whether the dropdown is visually open for keyboard nav guard.
+// We mirror the same logic GenericDropdown uses: open && !disabled.
+let isVisible = $derived(open && !disabled);
+// Dirty fix to prevent a rendering bug where the ul is present in the layout but
+// displays as empty. It only happens with overflow-y-auto set.
+let enableOverflowYAuto = new Debounced(() => isVisible, 15);
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
-		if (!uiState.visible || !processedItems?.length) return
+	onkeydown={(e) => {
+		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -108,81 +42,68 @@ watch(() => open && !disabled, (isOpen) => {
 	}}
 />
 
-<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if uiState.domExists}
-		<div
-			class={twMerge(
-				open ? 'select-dropdown-open' : 'select-dropdown-closed',
-				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
-				'text-primary text-sm select-none',
-				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
-				uiState.visible ? '' : 'pointer-events-none',
-				className
-			)}
-			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
-				? `min-width: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
-				: ''}"
-		>
-			<div
-				class={twMerge(
-					'overflow-clip rounded-md drop-shadow-base',
-					!reducedMotion.val ? 'transition-height' : '',
-					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
-				)}
-				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
-			>
-				<div bind:this={listEl} class="flex flex-col max-h-64 rounded-md bg-surface-input">
-					{@render header?.()}
-					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
-					{/if}
-					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-						{#each processedItems ?? [] as item, itemIndex}
-							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-								<li
-									class={twMerge(
-										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
-										itemIndex === 0 ? 'mt-3' : 'mt-6'
-									)}
-								>
-									{item.__select_group}
-								</li>
-							{/if}
-							<li>
-								<button
-									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
-										itemIndex === keyArrowPos || item.value === value
-											? 'bg-surface-secondary dark:bg-surface-tertiary'
-											: 'hover:bg-surface-hover',
-										endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
-										itemButtonWrapperClasses,
-										item.disabled ? 'cursor-not-allowed text-disabled' : ''
-									)}
-									onclick={(e) => {
-										e.stopImmediatePropagation()
-										if (!item.disabled) onSelectValue(item)
-									}}
-								>
-									{@render startSnippet?.({ item, close: () => (open = false) })}
-									<span class={itemLabelWrapperClasses}>
-										{item.label || '\xa0'}
-									</span>
-									{#if item.__is_create}
-										<PlusIcon class="inline ml-auto" size={16} />
-									{:else}
-										{@render endSnippet?.({ item, close: () => (open = false) })}
-									{/if}
-									{#if item.subtitle}
-										<div class="text-2xs text-secondary">{item.subtitle}</div>
-									{/if}
-								</button>
-							</li>
-						{/each}
-					</ul>
-					{@render bottomSnippet?.({ close: () => (open = false) })}
-				</div>
-			</div>
-		</div>
+<GenericDropdown
+	{listAutoWidth}
+	{disablePortal}
+	{open}
+	{disabled}
+	{maxHeight}
+	{getInputRect}
+	class={className}
+>
+	{@render header?.()}
+	{#if processedItems?.length === 0}
+		<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 	{/if}
-</ConditionalPortal>
+	<ul
+		class={twMerge(
+			'flex-1 flex flex-col',
+			enableOverflowYAuto.current ? 'overflow-y-auto' : '',
+			ulClass
+		)}
+	>
+		{#each processedItems ?? [] as item, itemIndex (item.value)}
+			{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+				<li
+					class={twMerge(
+						'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
+						itemIndex === 0 ? 'mt-3' : 'mt-6'
+					)}
+				>
+					{item.__select_group}
+				</li>
+			{/if}
+			<li>
+				<button
+					class={twMerge(
+						'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+						itemIndex === keyArrowPos || item.value === value
+							? 'bg-surface-secondary dark:bg-surface-tertiary'
+							: 'hover:bg-surface-hover',
+						endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
+						itemButtonWrapperClasses,
+						item.disabled ? 'cursor-not-allowed text-disabled' : ''
+					)}
+					onclick={(e) => {
+						e.stopImmediatePropagation()
+						if (!item.disabled) onSelectValue(item)
+					}}
+				>
+					{@render startSnippet?.({ item, close: () => (open = false) })}
+					<span class={itemLabelWrapperClasses}>
+						{item.label || '\xa0'}
+					</span>
+					{#if item.__is_create}
+						<PlusIcon class="inline ml-auto" size={16} />
+					{:else}
+						{@render endSnippet?.({ item, close: () => (open = false) })}
+					{/if}
+					{#if item.subtitle}
+						<div class="text-2xs text-secondary">{item.subtitle}</div>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{@render bottomSnippet?.({ close: () => (open = false) })}
+</GenericDropdown>

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -5,7 +5,7 @@ declare function $$render<T>(): {
         processedItems?: ProcessedItem<T>[];
         value: T | undefined;
         filterText?: string;
-        listAutoWidth?: Boolean;
+        listAutoWidth?: boolean;
         disabled?: boolean;
         disablePortal?: boolean;
         open: boolean;
@@ -14,6 +14,7 @@ declare function $$render<T>(): {
         ulClass?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
+        maxHeight?: number;
         header?: Snippet;
         getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
@@ -28,6 +29,8 @@ declare function $$render<T>(): {
         bottomSnippet?: Snippet<[{
             close: () => void;
         }]>;
+        /** When true, the first item is highlighted when the dropdown opens (even without filterText) */
+        highlightFirstOnOpen?: boolean;
     };
     exports: {};
     bindings: "";

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -43,11 +43,14 @@ async function changeWorkspaceColor() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace color</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace color</p>
+	<p class="text-xs text-secondary font-normal">
+		Color to identify the current workspace in the list of workspaces
+	</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		{#if $workspaceColor}
 			<div
-				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
+				class="w-10 h-6 rounded-md border border-gray-300 dark:border-gray-600"
 				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
@@ -57,18 +60,14 @@ async function changeWorkspaceColor() {
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
+			variant="subtle"
 			iconOnly
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-	<p class="text-2xs text-secondary font-normal">
-		Color to identify the current workspace in the list of workspaces
-	</p>
 </div>
 
 <Modal bind:open title="Change workspace color">

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { workspaceStore, superadmin } from '../../stores';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { workspaceStore, superadmin } from '../../stores';
 import Alert from '../common/alert/Alert.svelte';
 import Button from '../common/button/Button.svelte';
 import { sendUserToast } from '../../toast';
@@ -6,12 +7,10 @@ import { WorkspaceService } from '../../gen';
 import Modal from '../common/modal/Modal.svelte';
 import { Pen } from 'lucide-svelte';
 import { isCloudHosted } from '../../cloud';
-let newName = '';
-let newId = '';
-let checking = false;
-let errorId = '';
-$: newId = newName.toLowerCase().replace(/\s/gi, '-');
-$: validateName(newId);
+let newName = $state('');
+let newId = $state('');
+let checking = $state(false);
+let errorId = $state('');
 async function validateName(id) {
     checking = true;
     let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } });
@@ -26,7 +25,7 @@ async function validateName(id) {
     }
     checking = false;
 }
-let loading = false;
+let loading = $state(false);
 async function renameWorkspace() {
     try {
         loading = true;
@@ -49,11 +48,18 @@ async function renameWorkspace() {
         loading = false;
     }
 }
-export let open = false;
+let { open = $bindable(false) } = $props();
+run(() => {
+    newId = newName.toLowerCase().replace(/\s/gi, '-');
+});
+run(() => {
+    validateName(newId);
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace ID</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace ID</p>
+	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
@@ -61,9 +67,8 @@ export let open = false;
 				on:click={() => {
 					open = true
 				}}
-				size="xs"
-				spacingSize="xs2"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				iconOnly
 				startIcon={{
 					icon: Pen
@@ -71,7 +76,6 @@ export let open = false;
 			/>
 		{/if}
 	</div>
-	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">
@@ -102,7 +106,6 @@ export let open = false;
 
 	{#snippet actions()}
 		<Button
-			size="sm"
 			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}

package/package/components/settings/ChangeWorkspaceId.svelte.d.ts

@@ -1,20 +1,6 @@
-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 ChangeWorkspaceId: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     open?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ChangeWorkspaceId = InstanceType<typeof ChangeWorkspaceId>;
+}
+declare const ChangeWorkspaceId: import("svelte").Component<Props, {}, "open">;
+type ChangeWorkspaceId = ReturnType<typeof ChangeWorkspaceId>;
 export default ChangeWorkspaceId;

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -31,24 +31,22 @@ async function renameWorkspace() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace name</p>
-	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-xs font-normal text-primary">{currentName}</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace name</p>
+	<p class="text-xs text-secondary font-normal">Displayable name</p>
+	<div class="flex flex-row gap-2 items-center">
+		<p class="text-primary text-xs">{currentName}</p>
 		<Button
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
 			iconOnly
+			variant="subtle"
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-
-	<p class="text-2xs text-secondary font-normal"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">

package/package/components/settings/CreateToken.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { userWorkspaces, workspaceStore } from '../../stores';
+<script lang="ts">import { untrack } from 'svelte';
+import { userWorkspaces, workspaceStore } from '../../stores';
 import { Badge, Button } from '../common';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -10,19 +11,16 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
 import TokenDisplay from './TokenDisplay.svelte';
 import ScopeSelector from './ScopeSelector.svelte';
-import Alert from '../common/alert/Alert.svelte';
 import FolderPicker from '../FolderPicker.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
 import { mcpEndpointTools } from '../../mcpEndpointTools';
 import InfoIcon from 'lucide-svelte/icons/info';
 let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
-// MCP clients do not allow names longer than 60 characters, here we use 55 because final tool name server side will add ~5 characters
-const MAX_PATH_LENGTH = 55;
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
-let newTokenWorkspace = $state(defaultNewTokenWorkspace);
+let newTokenWorkspace = $state(untrack(() => defaultNewTokenWorkspace));
 let newMcpApps = $state([]);
 let mcpCreationMode = $state(false);
 let newMcpScope = $state('favorites');
@@ -141,11 +139,6 @@ const warning = $derived(newMcpScope === 'all'
     : newMcpScope === 'favorites'
         ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.`
         : `You do not have any scripts or flows in the selected folder.`);
-const longPathRunnables = $derived(includedRunnables.filter((path) => path.length > MAX_PATH_LENGTH));
-const validRunnables = $derived(includedRunnables.filter((path) => path.length <= MAX_PATH_LENGTH));
-const longPathWarning = $derived(longPathRunnables.length > 0
-    ? `${longPathRunnables.length} script(s)/flow(s) have paths longer than 60 characters and will be excluded from MCP tools. Consider shortening the paths: ${longPathRunnables.slice(0, 3).join(', ')}${longPathRunnables.length > 3 ? ` and ${longPathRunnables.length - 3} more` : ''}`
-    : '');
 $effect(() => {
     if (mcpCreationMode) {
         getAllApps();
@@ -553,23 +546,18 @@ function clearAllEndpoints() {
 					</div>
 				{:else}
 					<div class="flex flex-col gap-2 col-span-2 pr-4">
-						{#if longPathWarning}
-							<Alert type="warning" title="Some paths are too long" size="xs">
-								{longPathWarning}
-							</Alert>
-						{/if}
 						<span class="block text-xs">Scripts & Flows that will be available via MCP</span>
 						<div class="flex flex-wrap gap-1">
-							{#if validRunnables.length > 0 && validRunnables.length <= 5}
-								{#each validRunnables as scriptOrFlow}
+							{#if includedRunnables.length > 0 && includedRunnables.length <= 5}
+								{#each includedRunnables as scriptOrFlow}
 									<Badge rounded small color="blue">{scriptOrFlow}</Badge>
 								{/each}
-							{:else if validRunnables.length > 0}
-								{#each validRunnables.slice(0, 3) as scriptOrFlow}
+							{:else if includedRunnables.length > 0}
+								{#each includedRunnables.slice(0, 3) as scriptOrFlow}
 									<Badge rounded small color="blue">{scriptOrFlow}</Badge>
 								{/each}
 								<Badge rounded small color="dark-gray">
-									+{validRunnables.length - 3} more
+									+{includedRunnables.length - 3} more
 								</Badge>
 							{:else}
 								<p class="text-xs text-primary">