windmill-components 1.532.0 → 1.542.4

package/package/components/Portal.svelte.d.ts

@@ -3,45 +3,25 @@ export function portal(el: any, options: any): {
     destroy: () => void;
 };
 export default Portal;
-type Portal = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    name?: any;
-    target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type Portal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
 };
-declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Portal: import("svelte").Component<{
+    /**
+     * - DOM Element or CSS Selector
+     */
+    target?: string | HTMLElement | undefined;
     name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - DOM Element or CSS Selector
+     */
     target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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;
-}
+    name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/PrefixedInput.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">"use strict";
+let { prefix = '', value = $bindable(''), placeholder = '', class: className = '', ...restProps } = $props();
+let inputElement = $state(null);
+let internalValue = $state(prefix + value);
+// Update internal value when prop changes
+$effect(() => {
+    internalValue = prefix + value;
+});
+function handleInput(e) {
+    const newValue = e.target.value;
+    // Ensure the value always starts with the prefix
+    if (newValue.startsWith(prefix)) {
+        internalValue = newValue;
+        value = newValue.slice(prefix.length);
+    }
+    else {
+        internalValue = prefix;
+        value = '';
+        // Reset cursor position
+        if (inputElement) {
+            inputElement.value = prefix;
+            inputElement.setSelectionRange(prefix.length, prefix.length);
+        }
+    }
+}
+function handleKeyDown(e) {
+    const cursorPos = e.target.selectionStart;
+    const selectionEnd = e.target.selectionEnd;
+    // Prevent backspace if cursor is at or before prefix end
+    if (e.key === 'Backspace') {
+        if (cursorPos <= prefix.length && selectionEnd <= prefix.length) {
+            e.preventDefault();
+        }
+        else if (cursorPos <= prefix.length && selectionEnd > prefix.length) {
+            // If selection spans across prefix, only delete after prefix
+            e.preventDefault();
+            const newValue = prefix + internalValue.slice(selectionEnd);
+            internalValue = newValue;
+            value = newValue.slice(prefix.length);
+            // Set cursor position after prefix
+            setTimeout(() => {
+                inputElement.setSelectionRange(prefix.length, prefix.length);
+            }, 0);
+        }
+    }
+    // Prevent delete key within prefix
+    if (e.key === 'Delete' && cursorPos < prefix.length) {
+        e.preventDefault();
+    }
+    // Prevent selecting all (Ctrl+A) from selecting the prefix
+    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        e.preventDefault();
+        inputElement.setSelectionRange(prefix.length, internalValue.length);
+    }
+}
+function handleClick() {
+    // Prevent cursor from being placed within prefix
+    if ((inputElement.selectionStart ?? 0) < prefix.length) {
+        inputElement.setSelectionRange(prefix.length, prefix.length);
+    }
+}
+function handleFocus() {
+    // Ensure cursor starts after prefix when focusing
+    if ((inputElement.selectionStart ?? 0) < prefix.length) {
+        inputElement.setSelectionRange(prefix.length, prefix.length);
+    }
+}
+function handlePaste(e) {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData('text');
+    const cursorPos = inputElement.selectionStart ?? 0;
+    const selectionEnd = inputElement.selectionEnd ?? 0;
+    if (cursorPos < prefix.length) {
+        // Paste at the end of prefix
+        internalValue = prefix + pasteData + internalValue.slice(prefix.length);
+    }
+    else {
+        // Normal paste
+        internalValue =
+            internalValue.slice(0, cursorPos) + pasteData + internalValue.slice(selectionEnd);
+    }
+    value = internalValue.slice(prefix.length);
+    // Set cursor position after pasted content
+    const newCursorPos = Math.max(prefix.length, cursorPos) + pasteData.length;
+    setTimeout(() => {
+        inputElement.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
+}
+</script>
+
+<input
+	bind:this={inputElement}
+	type="text"
+	{placeholder}
+	class="prefixed-input {className}"
+	value={internalValue}
+	oninput={handleInput}
+	onkeydown={handleKeyDown}
+	onclick={handleClick}
+	onfocus={handleFocus}
+	onpaste={handlePaste}
+	{...restProps}
+/>
+
+<style>
+	.prefixed-input {
+		/* Default styles - can be overridden by class prop */
+		padding: 8px 12px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		font-size: 14px;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.prefixed-input:focus {
+		outline: none;
+		border-color: #4caf50;
+		box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
+	}</style>

package/package/components/PrefixedInput.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const PrefixedInput: import("svelte").Component<{
+    prefix?: string;
+    value?: string;
+    placeholder?: string;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type PrefixedInput = ReturnType<typeof PrefixedInput>;
+export default PrefixedInput;

package/package/components/QueuePosition.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+let { jobId, workspaceId, minimal = false } = $props();
+let queuePositionInterval;
+let queueState = $state(undefined);
+let fetchingQueuePosition = false;
+let workspace = $derived(workspaceId ?? $workspaceStore);
+let scheduledFor = $state(undefined);
+let scheduledForTimeout;
+$effect(() => {
+    if (jobId && workspace) {
+        clearTimeout(scheduledForTimeout);
+        queueState = undefined;
+        scheduledForTimeout = setTimeout(() => {
+            try {
+                JobService.getScheduledFor({
+                    workspace: workspace,
+                    id: jobId
+                }).then((response) => {
+                    scheduledFor = response;
+                });
+            }
+            catch (error) {
+                console.error('Failed to fetch scheduled for:', error);
+            }
+        }, 2000);
+    }
+});
+$effect(() => {
+    // Fetch queue position when loading and we have jobId
+    if (scheduledFor) {
+        // Initial fetch
+        fetchQueuePosition();
+        // Set up interval to refresh every 2 seconds
+        queuePositionInterval = setInterval(() => {
+            fetchQueuePosition();
+        }, 5000);
+    }
+    else {
+        // Clear interval when not loading
+        if (queuePositionInterval) {
+            clearInterval(queuePositionInterval);
+            queuePositionInterval = undefined;
+        }
+        queueState = undefined;
+    }
+    return () => {
+        if (queuePositionInterval) {
+            scheduledForTimeout && clearTimeout(scheduledForTimeout);
+            clearInterval(queuePositionInterval);
+        }
+    };
+});
+async function fetchQueuePosition() {
+    if (!workspace || !scheduledFor || fetchingQueuePosition)
+        return;
+    try {
+        fetchingQueuePosition = true;
+        queueState = await JobService.getQueuePosition({
+            workspace: workspace,
+            scheduledFor: scheduledFor
+        });
+    }
+    catch (error) {
+        console.error('Failed to fetch queue position:', error);
+        queueState = undefined;
+    }
+    finally {
+        fetchingQueuePosition = false;
+    }
+}
+</script>
+
+{#if queueState}
+	<div class="text-small ml-4">
+		<span class="text-orange-600">Queue position: <b>{queueState.position}</b></span>
+		{#if !minimal}
+			<span class="ml-2 text-tertiary">(Waiting for an available worker)</span>
+		{/if}
+	</div>
+{/if}

package/package/components/QueuePosition.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    jobId: string;
+    workspaceId?: string | undefined;
+    minimal?: boolean;
+};
+declare const QueuePosition: import("svelte").Component<$$ComponentProps, {}, "">;
+type QueuePosition = ReturnType<typeof QueuePosition>;
+export default QueuePosition;

package/package/components/ResourceNarrowing.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import ResourceTypePicker from './ResourceTypePicker.svelte';
+let { format = $bindable() } = $props();
+let resource = $state(format?.startsWith('resource-') ? format.substring('resource-'.length) : undefined);
+</script>
+
+<ResourceTypePicker
+	on:click={(e) => {
+		resource = e.detail
+		format = `resource-${resource ?? ''}`
+	}}
+	value={resource}
+	nonePickable={true}
+/>

package/package/components/ResourceNarrowing.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    format: string | undefined;
+}
+declare const ResourceNarrowing: import("svelte").Component<Props, {}, "format">;
+type ResourceNarrowing = ReturnType<typeof ResourceNarrowing>;
+export default ResourceNarrowing;

package/package/components/ResourceTypePicker.svelte

@@ -3,8 +3,6 @@ import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import IconedResourceType from './IconedResourceType.svelte';
 import { Button, ClearableInput } from './common';
-import Popover from './meltComponents/Popover.svelte';
-import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Label from './Label.svelte';
 import Tooltip from './Tooltip.svelte';
 import Badge from './common/badge/Badge.svelte';
@@ -30,84 +28,61 @@ let search = $state('');
 let filteredResources = $derived(resources.filter((r) => r.toLowerCase().includes(search.toLowerCase())));
 </script>
 
-<Label label="Resource type" class="w-full col-span-2">
+<Label label="Resource type" class="w-full mb-4">
 	{#snippet header()}
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
+
+		<div class="flex flex-row items-center w-full justify-between">
+			<Badge color={!value ? 'gray' : 'blue'}>
+				{value ?? 'None'}
+			</Badge>
+		</div>
 	{/snippet}
 
-	{#snippet action()}
-		<div class="flex flex-row gap-1">
-			<Button
-				size="xs"
-				color="light"
-				on:click={() => onClick(undefined)}
-				disabled={notPickable || value === undefined}
-			>
-				Clear
-			</Button>
-			<Popover
-				floatingConfig={{
-					strategy: 'fixed',
-					placement: 'left-end',
-					middleware: [offset(8), flip(), shift()]
-				}}
-				contentClasses="flex flex-col gap-2 h-full p-4 max-h-[40vh] w-[500px]"
-			>
-				{#snippet trigger()}
-					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
-				{/snippet}
-				{#snippet content({ close })}
-					<ClearableInput bind:value={search} placeholder="Search resource..." />
+	<div class="mt-2">
+		<ClearableInput bind:value={search} placeholder="Search resource..." />
 
-					<div class="overflow-y-scroll h-full">
-						<div
-							class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center overflow-x-hidden"
-						>
-							{#if nonePickable && search === ''}
-								{@const isPicked = value === undefined}
-								<Button
-									size="sm"
-									variant="border"
-									color={isPicked ? 'blue' : 'dark'}
-									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-									disabled={notPickable}
-									on:click={() => {
-										onClick(undefined)
-										close()
-									}}
-								>
-									None
-								</Button>
-							{/if}
-							{#each filteredResources as r}
-								{@const isPicked = value === r}
-								<Button
-									size="sm"
-									variant="border"
-									color={isPicked ? 'blue' : 'light'}
-									btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
-									disabled={notPickable}
-									on:click={() => {
-										onClick(r)
-										close()
-									}}
-								>
-									<IconedResourceType name={r} after={true} width="20px" height="20px" />
-								</Button>
-							{/each}
+		<div class="overflow-y-scroll max-h-[330px] h-full mt-1">
+			<div
+				class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center overflow-x-hidden"
+			>
+				{#if nonePickable && search === ''}
+					{@const isPicked = value === undefined}
+					<Button
+						size="sm"
+						variant="border"
+						color={isPicked ? 'blue' : 'light'}
+						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						disabled={notPickable}
+						on:click={() => {
+							onClick(undefined)
+							close()
+						}}
+					>
+						None
+					</Button>
+				{/if}
+				{#each filteredResources as r}
+					{@const isPicked = value === r}
+					<Button
+						size="sm"
+						variant="border"
+						color={isPicked ? 'blue' : 'light'}
+						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						disabled={notPickable}
+						on:click={() => {
+							onClick(r)
+							close()
+						}}
+					>
+						<IconedResourceType name={r} after={true} width="20px" height="20px" />
+					</Button>
+				{/each}
 
-							{#if filteredResources.length === 0 && search !== ''}
-								<div class="text-tertiary text-sm">No resources found</div>
-							{/if}
-						</div>
-					</div>
-				{/snippet}
-			</Popover>
+				{#if filteredResources.length === 0 && search !== ''}
+					<div class="text-tertiary text-sm">No resources found</div>
+				{/if}
+			</div>
 		</div>
-	{/snippet}
-	<div class="flex flex-row items-center w-full justify-between">
-		<Badge color={!value ? 'gray' : 'blue'}>
-			{value ?? 'None'}
-		</Badge>
 	</div>
 </Label>