windmill-components 1.623.1 → 1.623.2

package/package/utils.js

@@ -678,7 +678,7 @@ export function pluralize(quantity, word, customPlural) {
         return `${quantity} ${word}`;
     }
     else if (customPlural) {
-        return `${quantity} ${customPlural}}`;
+        return `${quantity} ${customPlural}`;
     }
     else {
         return `${quantity} ${word}s`;
@@ -730,6 +730,134 @@ export function getModifierKey() {
 export function isValidHexColor(color) {
     return /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(color);
 }
+/**
+ * Calculates the relative luminance of a color according to WCAG 2.1
+ * @param r Red component (0-255)
+ * @param g Green component (0-255)
+ * @param b Blue component (0-255)
+ * @returns Relative luminance value (0-1)
+ */
+function getRelativeLuminance(r, g, b) {
+    const [rs, gs, bs] = [r, g, b].map((val) => {
+        val = val / 255;
+        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/**
+ * Converts hex color to HSL
+ * @param hex Hex color string (e.g., "#FF0000")
+ * @returns Array of [hue (0-360), saturation (0-100), lightness (0-100)]
+ */
+function hexToHsl(hex) {
+    // Normalize hex color
+    let normalizedHex = hex.replace('#', '');
+    if (normalizedHex.length === 3) {
+        normalizedHex = normalizedHex
+            .split('')
+            .map((char) => char + char)
+            .join('');
+    }
+    const r = parseInt(normalizedHex.substring(0, 2), 16) / 255;
+    const g = parseInt(normalizedHex.substring(2, 4), 16) / 255;
+    const b = parseInt(normalizedHex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return [h * 360, s * 100, l * 100];
+}
+/**
+ * Converts HSL to hex color
+ * @param h Hue (0-360)
+ * @param s Saturation (0-100)
+ * @param l Lightness (0-100)
+ * @returns Hex color string
+ */
+function hslToHex(h, s, l) {
+    h = h / 360;
+    s = s / 100;
+    l = l / 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // Achromatic
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const toHex = (c) => {
+        const hex = Math.round(c * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generates a text color with the same hue as the background but adjusted lightness for good contrast
+ * @param backgroundColor Hex color string (e.g., "#FF0000" or "#F00")
+ * @returns Hex color string with same hue but good contrast, or undefined if invalid
+ */
+export function getContrastTextColor(backgroundColor) {
+    if (!backgroundColor || !isValidHexColor(backgroundColor)) {
+        return undefined;
+    }
+    // Normalize hex color
+    let hex = backgroundColor.replace('#', '');
+    if (hex.length === 3) {
+        hex = hex
+            .split('')
+            .map((char) => char + char)
+            .join('');
+    }
+    // Parse RGB components and calculate background luminance
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const bgLuminance = getRelativeLuminance(r, g, b);
+    // Convert to HSL to extract hue
+    const [hue] = hexToHsl(backgroundColor);
+    // Determine if background is light or dark
+    const isLightBackground = bgLuminance > 0.5;
+    // Use fixed saturation and lightness based on background lightness
+    // For light backgrounds: use dark text (low lightness, high saturation)
+    // For dark backgrounds: use light text (high lightness, high saturation)
+    const saturation = 70; // Fixed saturation for good readability
+    const lightness = isLightBackground ? 25 : 85; // Dark for light bg, light for dark bg
+    // Generate the color with the same hue but adjusted saturation and lightness
+    return hslToHex(hue, saturation, lightness);
+}
 export function sortObject(o) {
     return Object.keys(o)
         .sort()
@@ -1514,3 +1642,36 @@ export function getQueryStmtCountHeuristic(query) {
     }
     return count;
 }
+export function countChars(str, char) {
+    let count = 0;
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === char) {
+            count++;
+        }
+    }
+    return count;
+}
+export function onlyAlphaNumAndUnderscore(str) {
+    return str.replace(/[^a-zA-Z0-9_]/g, '');
+}
+export function buildReactiveObj(fields) {
+    const obj = {};
+    for (const key in fields) {
+        Object.defineProperty(obj, key, {
+            get: fields[key][0],
+            set: fields[key][1],
+            enumerable: true,
+            configurable: true
+        });
+    }
+    return obj;
+}
+export function pick(obj, keys) {
+    const result = {};
+    for (const key of keys) {
+        if (key in obj) {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.623.1",
+	"version": "1.623.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

package/package/components/SavedInputs.svelte

@@ -1,416 +0,0 @@
-<script lang="ts">import { Button } from './common';
-import { InputService, JobService } from '../gen/index.js';
-import { userStore, workspaceStore } from '../stores.js';
-import { base } from '../base';
-import { classNames, displayDateOnly, sendUserToast } from '../utils.js';
-import { createEventDispatcher, untrack } from 'svelte';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
-import { ArrowLeftIcon, Edit, ExternalLink, X } from 'lucide-svelte';
-import Toggle from './Toggle.svelte';
-import Tooltip from './Tooltip.svelte';
-import TimeAgo from './TimeAgo.svelte';
-import JobsLoader from './runs/JobsLoader.svelte';
-import Skeleton from './common/skeleton/Skeleton.svelte';
-import SaveInputsButton from './SaveInputsButton.svelte';
-let { scriptHash = null, scriptPath = null, flowPath = null, canSaveInputs = true, isValid, args } = $props();
-let previousInputs = $state(undefined);
-let savedInputs = $state(undefined);
-let selectedInput = $state();
-let jobs = $state([]);
-let loading = $state(false);
-const dispatch = createEventDispatcher();
-let runnableId = $derived(scriptHash || scriptPath || flowPath || undefined);
-let runnableType = $derived(scriptHash ? 'ScriptHash' : scriptPath ? 'ScriptPath' : flowPath ? 'FlowPath' : undefined);
-let hasAlreadyFailed = false;
-async function loadInputHistory() {
-    try {
-        previousInputs = await InputService.getInputHistory({
-            workspace: $workspaceStore,
-            runnableId,
-            runnableType,
-            perPage: 10
-        });
-    }
-    catch (e) {
-        console.error(e);
-        if (hasAlreadyFailed)
-            return;
-        hasAlreadyFailed = true;
-        sendUserToast(`Failed to load input history: ${e}`, true);
-    }
-}
-async function loadSavedInputs() {
-    savedInputs = await InputService.listInputs({
-        workspace: $workspaceStore,
-        runnableId,
-        runnableType,
-        perPage: 10
-    });
-}
-async function updateInput(input) {
-    input.isSaving = true;
-    try {
-        await InputService.updateInput({
-            workspace: $workspaceStore,
-            requestBody: {
-                id: input.id,
-                name: input.name,
-                is_public: input.is_public
-            }
-        });
-    }
-    catch (err) {
-        console.error(err);
-        sendUserToast(`Failed to update Input: ${err}`, true);
-    }
-    input.isSaving = false;
-}
-async function deleteInput(input) {
-    try {
-        await InputService.deleteInput({
-            workspace: $workspaceStore,
-            input: input.id
-        });
-        savedInputs = (savedInputs ?? []).filter((i) => i.id !== input.id);
-        if (selectedInput === input) {
-            selectedInput = null;
-        }
-    }
-    catch (err) {
-        console.error(err);
-        sendUserToast(`Failed to delete Input: ${err}`, true);
-    }
-}
-$effect(() => {
-    if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
-        untrack(() => {
-            loadInputHistory();
-            loadSavedInputs();
-        });
-    }
-});
-let previewArgs = $state(undefined);
-function selectArgs(selected_args) {
-    previewArgs = selected_args;
-}
-async function loadLargeArgs(id, input, allowLarge) {
-    if (!id)
-        return;
-    return await InputService.getArgsFromHistoryOrSavedInput({
-        jobOrInputId: id,
-        workspace: $workspaceStore,
-        input,
-        allowLarge
-    });
-}
-</script>
-
-{#if runnableId}
-	<JobsLoader
-		bind:jobs
-		path={runnableId}
-		showSkipped={false}
-		jobKindsCat="all"
-		user={null}
-		label={null}
-		folder={null}
-		concurrencyKey={null}
-		tag={null}
-		success="running"
-		argFilter={undefined}
-		bind:loading
-		syncQueuedRunsCount={false}
-		refreshRate={10000}
-		computeMinAndMax={undefined}
-		perPage={5}
-	/>
-{/if}
-
-<div class="min-w-[300px] h-full">
-	<Splitpanes horizontal={true}>
-		<Pane>
-			<div class="w-full flex flex-col gap-4 p-2">
-				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
-					<span class="text-sm font-semibold flex-shrink-0"
-						>Saved Inputs<Tooltip
-							>Shared inputs are available to anyone with access to the script</Tooltip
-						></span
-					>
-					{#if canSaveInputs}
-						<SaveInputsButton
-							{args}
-							disabled={!isValid}
-							{runnableId}
-							{runnableType}
-							on:update={() => {
-								loadSavedInputs()
-							}}
-						/>
-					{/if}
-				</div>
-
-				<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
-					{#if savedInputs === undefined}
-						<Skeleton layout={[[8]]} />
-					{:else if savedInputs?.length > 0}
-						{#each savedInputs as i}
-							<button
-								class={classNames(
-									`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm hover:bg-surface-hover transition-all`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
-								)}
-								onclick={async () => {
-									if (!i.isEditing) {
-										if (selectedInput === i) {
-											selectedInput = null
-										} else {
-											selectedInput = i
-										}
-									}
-									selectArgs(await loadLargeArgs(i.id, true, false))
-								}}
-							>
-								<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
-									{#if i.isEditing}
-										<form
-											onsubmit={() => {
-												updateInput(i)
-												i.isEditing = false
-												i.isSaving = false
-											}}
-											class="w-full"
-										>
-											<input type="text" bind:value={i.name} class="text-secondary" />
-										</form>
-									{:else}
-										<small
-											class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
-										>
-											{i.name}
-										</small>
-									{/if}
-									{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
-										<div class="items-center flex gap-2">
-											{#if !i.isEditing}
-												<div class="group-hover:block hidden -my-2">
-													<Toggle
-														size="xs"
-														options={{ right: 'shared' }}
-														bind:checked={i.is_public}
-														on:change={() => {
-															updateInput(i)
-														}}
-													/>
-												</div>
-											{/if}
-
-											<Button
-												loading={i.isSaving}
-												size="xs"
-												variant="default"
-												spacingSize="xs2"
-												btnClasses={'group-hover:block hidden -my-2'}
-												on:click={(e) => {
-													e.stopPropagation()
-													i.isEditing = !i.isEditing
-													if (!i.isEditing) {
-														updateInput(i)
-														i.isSaving = false
-													}
-												}}
-											>
-												<Edit class="w-4 h-4" />
-											</Button>
-											<Button
-												size="xs"
-												spacingSize="xs2"
-												variant="default"
-												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
-												on:click={() => deleteInput(i)}
-											>
-												<X class="w-4 h-4" />
-											</Button>
-										</div>
-									{:else}
-										<span class="text-xs text-primary">By {i.created_by}</span>
-									{/if}
-								</div>
-							</button>
-						{/each}
-					{:else}
-						<div class="text-center text-primary">No saved Inputs</div>
-					{/if}
-				</div>
-			</div>
-		</Pane>
-
-		<Pane>
-			<div class="w-full flex flex-col gap-4 p-2">
-				<span class="text-sm font-semibold">Previous runs</span>
-
-				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if loading && (jobs == undefined || jobs?.length == 0)}
-						<div class="text-left text-primary text-xs">Loading current runs...</div>
-					{:else if jobs?.length > 0}
-						{#each jobs as i (i.id)}
-							<button
-								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
-									'border-orange-400'
-								)}
-								onclick={async () => {
-									if (!$workspaceStore) {
-										return
-									}
-
-									const args = await JobService.getJobArgs({
-										workspace: $workspaceStore,
-										id: i.id
-									})
-
-									selectedInput = {
-										id: i.id,
-										name: 'Running job: ' + i.id,
-										created_at: i.created_at ?? '',
-										created_by: i.created_by ?? '',
-										is_public: true
-									}
-
-									selectArgs(args)
-								}}
-							>
-								<div
-									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
-								>
-									<div class="">
-										<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse"></div>
-									</div>
-									<div class="col-span-2 truncate">
-										{i.created_by}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-3 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										<TimeAgo noDate date={i.started_at ?? ''} />
-									</div>
-									<div class="col-span-2">
-										<a
-											target="_blank"
-											href="{base}/run/{i.id}?workspace={$workspaceStore}"
-											class="text-right float-right text-secondary"
-											title="See run detail in a new tab"
-										>
-											<ExternalLink size={16} />
-										</a>
-									</div>
-								</div>
-							</button>
-						{/each}
-						{#if jobs?.length == 5}
-							<div class="text-left text-primary text-xs"
-								>... there may be more runs not displayed here as the limit is 5</div
-							>
-						{/if}
-					{:else}
-						<div class="text-left text-primary text-xs">No job currently running</div>
-					{/if}
-				</div>
-
-				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if previousInputs === undefined}
-						<Skeleton layout={[[8]]} />
-					{:else if previousInputs?.length > 0}
-						{#each previousInputs as i (i.id)}
-							<button
-								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
-								)}
-								onclick={async () => {
-									if (selectedInput === i) {
-										selectedInput = null
-									} else {
-										selectedInput = i
-									}
-									selectArgs(await loadLargeArgs(i.id, false, false))
-								}}
-							>
-								<div
-									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
-								>
-									<div class="">
-										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}"
-										></div>
-									</div>
-									<div class="col-span-2 truncate" title={i.created_by}>
-										{i.created_by}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										{displayDateOnly(new Date(i.created_at))}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										<TimeAgo noDate date={i.created_at ?? ''} />
-									</div>
-									<div class="col-span-1">
-										<a
-											target="_blank"
-											href="{base}/run/{i.id}?workspace={$workspaceStore}"
-											class="text-right float-right text-secondary"
-											title="See run detail in a new tab"
-										>
-											<ExternalLink size={16} />
-										</a>
-									</div>
-								</div>
-							</button>
-						{/each}
-					{:else}
-						<div class="text-center text-primary">No previous Runs</div>
-					{/if}
-				</div>
-			</div>
-		</Pane>
-
-		<Pane>
-			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
-				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="w-full flex flex-col">
-						<Button
-							color="blue"
-							btnClasses="w-full"
-							size="sm"
-							spacingSize="xl"
-							on:click={async () => {
-								dispatch('selected_args', await loadLargeArgs(selectedInput?.id, undefined, false))
-							}}
-							disabled={!selectedInput}
-						>
-							<ArrowLeftIcon class="w-4 h-4 mr-2" />
-							Use input
-						</Button>
-					</div>
-					<div class="w-full min-h-0 grow overflow-auto">
-						{#if typeof previewArgs == 'string' && previewArgs == 'WINDMILL_TOO_BIG'}
-							<div class="text-secondary mt-2">
-								Payload too big to preview but can still be loaded</div
-							>
-						{:else if Object.keys(previewArgs || {}).length > 0}
-							<div class=" overflow-auto h-full p-2">
-								<ObjectViewer json={previewArgs} />
-							</div>
-						{:else}
-							<div class="text-center text-primary">
-								Select an Input to preview scripts arguments
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div></Pane
-		>
-	</Splitpanes>
-</div>