windmill-components 1.623.1 → 1.642.0

package/package/components/Section.svelte

@@ -42,7 +42,9 @@ let { label = undefined, tooltip = undefined, documentationLink = undefined, eeO
 					{/if}
 				{/if}
 			</h2>
-			{@render action?.()}
+			{#if !(collapsable && collapsed)}
+				{@render action?.()}
+			{/if}
 			{#if collapsable && collapsed}
 				{@render badge?.()}
 			{/if}
@@ -54,9 +56,9 @@ let { label = undefined, tooltip = undefined, documentationLink = undefined, eeO
 			transition:slide={animate || collapsable ? { duration: 200 } : { duration: 0 }}
 		>
 			{#if description}
-				<div class="text-xs text-primary mt-1">{@html description}</div>
+				<div class="text-xs text-primary mt-1 mb-2">{@html description}</div>
 			{/if}
-			<div class="flex flex-col gap-6 h-full mt-6">
+			<div class="flex flex-col gap-6 grow min-h-0 mt-4">
 				<div class={twMerge('grow min-h-0', clazz)}>
 					{@render children?.()}
 				</div>

package/package/components/ServiceLogsInner.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { createBubbler, preventDefault } from 'svelte/legacy';
 const bubble = createBubbler();
 import { IndexSearchService, ServiceLogsService } from '../gen';
-import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
+import TimeframeSelect, { serviceLogsTimeframes, useUrlSyncedTimeframe } from './runs/TimeframeSelect.svelte';
 import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import LogViewer from './LogViewer.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
-import { onDestroy, tick, untrack } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import { Loader2 } from 'lucide-svelte';
 import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } from '../utils';
 import LogSnippetViewer from './LogSnippetViewer.svelte';
@@ -17,11 +17,10 @@ import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.
 import Select from './select/Select.svelte';
 import { goto } from '../navigation';
 import { page } from '$app/stores';
+import { watch } from 'runed';
 let { searchTerm, queryParseErrors = $bindable(), tagLabel } = $props();
 let minTs = $state(undefined);
 let maxTs = $state(undefined);
-let minTsManual = $state($page.url.searchParams.get('minTs') ?? undefined);
-let maxTsManual = $state($page.url.searchParams.get('maxTs') ?? undefined);
 let max_lines = $state(undefined);
 // let lastSeen: undefined | string = undefined
 let withError = $state(false);
@@ -29,12 +28,11 @@ let autoRefresh = $state(true);
 let loading = $state(false);
 let timeout = $state(undefined);
 let allLogs = $state(undefined);
-let manualPicker = $state(undefined);
+let _timeframe = useUrlSyncedTimeframe(serviceLogsTimeframes);
+let timeframe = $derived(_timeframe.timeframe);
+let [minTsManual, maxTsManual] = $derived(timeframe.type === 'manual' ? [timeframe.minTs ?? undefined, timeframe.maxTs ?? undefined] : []);
 let upTo = $state(undefined);
 let upToIsLatest = $state(true);
-function onManualChanges() {
-    getAllLogs(minTsManual ?? maxTs, maxTsManual);
-}
 function getAllLogs(queryMinTs, queryMaxTs) {
     timeout && clearTimeout(timeout);
     loading = true;
@@ -110,11 +108,6 @@ function getAllLogs(queryMinTs, queryMaxTs) {
             timeout = setTimeout(() => {
                 if (searchTerm !== '')
                     return;
-                let minMax = manualPicker?.computeMinMax();
-                if (minMax) {
-                    maxTsManual = minMax?.maxTs;
-                    minTsManual = minMax?.minTs;
-                }
                 let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined;
                 getAllLogs(maxTsPlus1?.toISOString(), undefined);
             }, 5000);
@@ -253,10 +246,6 @@ async function searchLogs(searchTerm, selected, minTs, maxTs, allLogs) {
     const params = new URLSearchParams();
     if (searchTerm)
         params.set('searchTerm', searchTerm);
-    if (minTs)
-        params.set('minTs', minTs);
-    if (maxTs)
-        params.set('maxTs', maxTs);
     if (selected?.mode)
         params.set('mode', selected.mode);
     if (selected?.workerGroup)
@@ -350,13 +339,15 @@ function getSelectItems(allLogs, countsPerHost) {
         value: { mode, workerGroup: wg, hostname: hn }
     }))));
 }
-$effect(() => {
-    minTsManual || maxTsManual || untrack(() => onManualChanges());
+watch(() => timeframe, () => {
+    const ts = timeframe.computeMinMax();
+    minTs = undefined;
+    maxTs = undefined;
+    allLogs = undefined;
+    getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined);
 });
-$effect(() => {
-    ;
-    [searchTerm, selected, minTsManual, maxTsManual, allLogs];
-    untrack(() => searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs));
+watch(() => [searchTerm, selected, timeframe, allLogs], () => {
+    searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs);
 });
 </script>
 
@@ -393,71 +384,19 @@ $effect(() => {
 				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
 				id="service-logs-date-pickers"
 			>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={minTsManual
-							? new Date(minTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'min datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="min datetime"
-						date={minTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							minTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-						placement="top-start"
-					/>
-				</div>
-				<ManuelDatePicker
-					bind:minTs={minTsManual}
-					bind:maxTs={maxTsManual}
-					bind:this={manualPicker}
+				<TimeframeSelect
+					items={serviceLogsTimeframes}
+					bind:value={timeframe}
 					{loading}
-					on:loadJobs={() => {
+					wrapperClasses="w-full"
+					onClick={() => {
 						minTs = undefined
 						maxTs = undefined
 						allLogs = undefined
-						getAllLogs(minTsManual, maxTsManual)
+						const ts = timeframe.computeMinMax()
+						getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
 					}}
-					serviceLogsChoices
-					loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
 				/>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={maxTsManual
-							? new Date(maxTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'max datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="max datetime"
-						date={maxTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							maxTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-					/>
-				</div>
 			</div>
 			<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
 				><Toggle

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/SimpleEditor.svelte

@@ -7,6 +7,7 @@
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import '@codingame/monaco-vscode-standalone-html-language-features'
+	import { javascriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -196,7 +197,7 @@ $effect(() => {
         untrack(() => updateModelAndOptions());
     }
 });
-let fontSize = $derived(small ? 12 : 14);
+let fontSize = $derived(small ? 12 : 13.5);
 async function loadMonaco() {
     setMonacoJsonOptions();
     setMonacoJavascriptOptions();
@@ -252,6 +253,20 @@ async function loadMonaco() {
         return;
     }
     keepModelAroundToAvoidDisposalOfWorkers();
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            inputEl?.focus();
+            document.execCommand('paste');
+        });
+    }
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -413,7 +428,7 @@ function loadExtraLib() {
             }
             previousExtraLib = extraLib;
         }
-        languages.typescript.javascriptDefaults.setExtraLibs(libs);
+        javascriptDefaults.setExtraLibs(libs);
     }
 }
 onMount(async () => {
@@ -457,8 +472,37 @@ export function setCursorToEnd() {
     }
 }
 updatePlaceholderVisibility(code ?? '');
+let inputEl = $state(null);
+let pasteValue = $state('');
+$effect(() => {
+    if (inputEl && pasteValue) {
+        untrack(() => {
+            editor?.executeEdits('paste', [
+                {
+                    range: editor?.getSelection() ?? {
+                        startLineNumber: 1,
+                        startColumn: 1,
+                        endLineNumber: 1,
+                        endColumn: 1
+                    },
+                    text: pasteValue,
+                    forceMoveMarkers: true
+                }
+            ]);
+            pasteValue = '';
+        });
+    }
+});
 </script>
 
+{#if parent.window !== window}
+	<input
+		style="height: 0; width: 0; opacity: 0; position: absolute; top: 0; left: 0; z-index: -1;"
+		type="text"
+		bind:this={inputEl}
+		bind:value={pasteValue}
+	/>
+{/if}
 <EditorTheme />
 {#if !editor || suggestion}
 	<FakeMonacoPlaceHolder

package/package/components/Star.svelte

@@ -1,41 +1,23 @@
-<script lang="ts">import { FavoriteService } from '../gen';
-import { starStore } from '../stores';
-import { sendUserToast } from '../toast';
-import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { preventDefault } from 'svelte/legacy';
 import { Star, StarOff } from 'lucide-svelte';
-export let path;
-export let kind;
-export let starred = false;
-export let workspace_id;
-let buttonHover = false;
+import { favoriteManager } from './sidebar/FavoriteMenu.svelte';
+let { path, kind, workspaceId, summary } = $props();
+let buttonHover = $state(false);
+let starred = $derived(favoriteManager.isStarred(path, kind));
 async function onClick() {
     buttonHover = false;
-    if (starred) {
-        await FavoriteService.unstar({
-            workspace: workspace_id,
-            requestBody: { path, favorite_kind: kind }
-        });
-        sendUserToast('Unstarred');
-        $starStore = $starStore + 1;
-    }
-    else {
-        await FavoriteService.star({
-            workspace: workspace_id,
-            requestBody: { path, favorite_kind: kind }
-        });
-        sendUserToast('Marked as favorite, it will appear first');
-        $starStore = $starStore + 1;
-    }
-    dispatch('starred', !starred);
+    if (starred)
+        favoriteManager.unstar(path, kind, workspaceId);
+    else
+        favoriteManager.star(path, kind, workspaceId, summary);
 }
-const dispatch = createEventDispatcher();
 </script>
 
 <button
-	on:click|preventDefault={onClick}
-	on:mouseenter={() => (buttonHover = true)}
-	on:mouseleave={() => (buttonHover = false)}
-	class="p-2"
+	onclick={preventDefault(onClick)}
+	onmouseenter={() => (buttonHover = true)}
+	onmouseleave={() => (buttonHover = false)}
+	class="p-1"
 >
 	{#if starred}
 		{#if buttonHover}

package/package/components/Star.svelte.d.ts

@@ -1,24 +1,11 @@
 import { Star } from 'lucide-svelte';
-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 Star: $$__sveltets_2_IsomorphicComponent<{
+import { type FavoriteKind } from './sidebar/FavoriteMenu.svelte';
+interface Props {
     path: string;
-    kind: "flow" | "app" | "script" | "raw_app";
-    starred?: boolean;
-    workspace_id: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Star = InstanceType<typeof Star>;
+    kind: FavoriteKind;
+    summary?: string;
+    workspaceId?: string;
+}
+declare const Star: import("svelte").Component<Props, {}, "">;
+type Star = ReturnType<typeof Star>;
 export default Star;

package/package/components/StringTypeNarrowing.svelte

@@ -292,6 +292,7 @@ function onEnumKeyChange(oldKey, newKey) {
 		{/if}
 	{:else if kind == 'none'}
 		{#if !noExtra}
+			<div class="mt-2"></div>
 			<Label label="Min textarea rows">
 				<TextInput
 					inputProps={{ type: 'number' }}

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "format" | "disableCreate" | "contentEncoding" | "enum_" | "enumLabels" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "format" | "disableCreate" | "contentEncoding" | "enum_" | "enumLabels" | "dateFormat" | "customErrorMessage" | "minRows" | "disableVariablePicker">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/SummaryPathDisplay.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">import { emptyString, isOwner } from '../utils';
+import { Alert, Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import Path from './Path.svelte';
+import { userStore, workspaceStore } from '../stores';
+import { sendUserToast } from '../toast';
+import { updateItemPathAndSummary, checkFlowOnBehalfOf } from './moveRenameManager';
+import Label from './Label.svelte';
+let { summary = $bindable(''), path = $bindable(''), editable = false, onSaved, kind = 'flow' } = $props();
+let editSummary = $state('');
+let editPath = $state('');
+let dirtyPath = $state(false);
+let popoverOpen = $state(false);
+let own = $state(false);
+let onBehalfOfEmail = $state(undefined);
+let summaryInput = $state();
+let hasChanges = $derived(editSummary !== (summary ?? '') || (own && dirtyPath));
+$effect(() => {
+    if (popoverOpen && onSaved) {
+        editSummary = summary ?? '';
+        editPath = path ?? '';
+        own = isOwner(path ?? '', $userStore, $workspaceStore);
+        onBehalfOfEmail = undefined;
+        if (kind === 'flow' && $workspaceStore && path) {
+            checkFlowOnBehalfOf($workspaceStore, path).then((email) => {
+                onBehalfOfEmail = email;
+            });
+        }
+    }
+});
+async function save(close) {
+    const initialPath = path ?? '';
+    const newPath = own ? editPath : initialPath;
+    try {
+        await updateItemPathAndSummary({
+            workspace: $workspaceStore,
+            kind,
+            initialPath,
+            newPath,
+            newSummary: editSummary
+        });
+        sendUserToast(`${kind === 'flow' ? 'Flow' : 'Script'} updated`);
+        close();
+        onSaved?.(newPath);
+    }
+    catch (e) {
+        sendUserToast(`Could not update ${kind}: ${e.body ?? e.message}`, true);
+    }
+}
+</script>
+
+{#if editable || onSaved}
+	<Popover
+		class="min-w-0 max-w-full"
+		placement="bottom-start"
+		contentClasses="p-4"
+		usePointerDownOutside
+		excludeSelectors=".drawer"
+		disableFocusTrap
+		openFocus={() => {
+			summaryInput?.focus()
+			return null
+		}}
+		bind:isOpen={popoverOpen}
+	>
+		{#snippet trigger()}
+			<div
+				class={'min-w-0 truncate flex flex-col items-start px-2 py-1 rounded-md transition-colors cursor-pointer hover:bg-surface-hover'}
+			>
+				<span class="text-2xs leading-tight text-tertiary font-mono font-normal truncate max-w-full"
+					>{path}</span
+				>
+				<span
+					class="text-sm font-semibold truncate max-w-full {emptyString(summary)
+						? 'text-tertiary italic font-normal'
+						: 'text-emphasis'}"
+				>
+					{emptyString(summary) ? 'Add a summary...' : summary}
+				</span>
+			</div>
+		{/snippet}
+		{#snippet content({ close })}
+			<div class="flex flex-col gap-6 w-[480px]">
+				{#if onSaved}
+					<Label label="Summary">
+						<TextInput
+							bind:this={summaryInput}
+							inputProps={{
+								type: 'text',
+								placeholder: 'Short summary',
+								onkeydown: (e) => {
+									if (e.key === 'Enter') {
+										save(close)
+									}
+								}
+							}}
+							bind:value={editSummary}
+						/>
+					</Label>
+					<Label label="Path">
+						{#if own}
+							<Path
+								autofocus={false}
+								bind:path={editPath}
+								bind:dirty={dirtyPath}
+								initialPath={path ?? ''}
+								namePlaceholder={kind}
+								{kind}
+								hideFullPath
+								size="sm"
+								drawerOffset={4000}
+							/>
+						{:else}
+							<span class="text-xs font-mono text-secondary">{path}</span>
+							<p class="text-2xs text-tertiary mt-1">Only the owner can change the path</p>
+						{/if}
+					</Label>
+					{#if onBehalfOfEmail}
+						<Alert type="info" title="Run on behalf of" size="xs">
+							This flow will be redeployed on behalf of you ({$userStore?.email}) instead of {onBehalfOfEmail}
+						</Alert>
+					{/if}
+					<Button
+						size="xs"
+						variant="accent"
+						disabled={!hasChanges}
+						title="Save summary and path"
+						onclick={() => save(close)}
+					>
+						Save
+					</Button>
+				{:else}
+					<label class="block text-primary">
+						<div class="pb-1 text-xs font-semibold text-emphasis">Summary</div>
+						<TextInput
+							bind:this={summaryInput}
+							inputProps={{
+								type: 'text',
+								placeholder: 'Short summary',
+								onkeydown: (e) => {
+									if (e.key === 'Enter') {
+										close()
+									}
+								}
+							}}
+							bind:value={summary}
+						/>
+					</label>
+					<div class="block text-primary">
+						<div class="pb-1 text-xs font-semibold text-emphasis">Path</div>
+						<Path
+							autofocus={false}
+							bind:path
+							bind:dirty={dirtyPath}
+							initialPath={path ?? ''}
+							namePlaceholder={kind}
+							{kind}
+							hideFullPath
+							size="sm"
+							drawerOffset={4000}
+						/>
+					</div>
+				{/if}
+			</div>
+		{/snippet}
+	</Popover>
+{:else}
+	<div class="min-w-0 truncate flex flex-col px-2">
+		{#if !emptyString(summary)}
+			<span class="text-[10px] leading-tight text-tertiary font-mono truncate">{path}</span>
+		{/if}
+		<span class="text-sm font-semibold text-emphasis truncate">
+			{emptyString(summary) ? (path ?? '') : summary}
+		</span>
+	</div>
+{/if}

package/package/components/SummaryPathDisplay.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    summary?: string;
+    path?: string;
+    editable?: boolean;
+    onSaved?: (newPath: string) => void;
+    kind?: 'flow' | 'script';
+}
+declare const SummaryPathDisplay: import("svelte").Component<Props, {}, "summary" | "path">;
+type SummaryPathDisplay = ReturnType<typeof SummaryPathDisplay>;
+export default SummaryPathDisplay;