windmill-components 1.493.10 → 1.501.5

package/package/components/FlowTimeline.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">import { debounce, displayDate, msToSec } from '../utils';
-import { onDestroy } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import { Loader2 } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
 import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
-export let selfWaitTime = undefined;
-export let aggregateWaitTime = undefined;
-export let flowModules;
-export let durationStatuses;
-export let flowDone = false;
-let min = undefined;
-let max = undefined;
-let total = undefined;
-let items = undefined;
-let debounced = debounce(() => computeItems($durationStatuses), 30);
-$: flowDone != undefined && $durationStatuses && debounced();
+let { selfWaitTime = undefined, aggregateWaitTime = undefined, flowModules, durationStatuses, flowDone = false } = $props();
+let min = $state(undefined);
+let max = $state(undefined);
+let total = $state(undefined);
+let items = $state(undefined);
+let { debounced, clearDebounce } = debounce(() => computeItems($durationStatuses), 30);
+$effect(() => {
+    flowDone != undefined && $durationStatuses && untrack(() => debounced());
+});
 export function reset() {
     min = undefined;
     max = undefined;
@@ -74,7 +72,7 @@ function computeItems(durationStatuses) {
         total = Math.max(total, 2000);
     }
 }
-let now = getDbClockNow().getTime();
+let now = $state(getDbClockNow().getTime());
 let interval = setInterval((x) => {
     if (!max) {
         now = getDbClockNow().getTime();
@@ -85,6 +83,7 @@ let interval = setInterval((x) => {
 }, 30);
 onDestroy(() => {
     interval && clearInterval(interval);
+    clearDebounce();
 });
 </script>
 
@@ -132,7 +131,7 @@ onDestroy(() => {
 					<div class="w-full flex flex-row-reverse sticky top-0">
 						<button
 							class="!text-secondary underline mr-2 text-2xs text-right whitespace-nowrap"
-							on:click={() => {
+							onclick={() => {
 								let r = $durationStatuses[k]
 								if (r.iteration_from) {
 									r.iteration_from -= 20
@@ -155,8 +154,8 @@ onDestroy(() => {
 										? b.started_at
 											? b.started_at - b?.created_at
 											: b.duration_ms
-											? 0
-											: now - b?.created_at
+												? 0
+												: now - b?.created_at
 										: 0}
 									<div class="flex w-full">
 										<TimelineBar
@@ -177,7 +176,7 @@ onDestroy(() => {
 												{min}
 												concat
 												started_at={b.started_at}
-												len={b.started_at ? b?.duration_ms ?? now - b?.started_at : 0}
+												len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
 												running={b?.duration_ms == undefined}
 											/>
 										{/if}

package/package/components/FlowTimeline.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { Writable } from 'svelte/store';
-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 FlowTimeline: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     selfWaitTime?: number | undefined;
     aggregateWaitTime?: number | undefined;
     flowModules: string[];
@@ -26,11 +13,9 @@ declare const FlowTimeline: $$__sveltets_2_IsomorphicComponent<{
         iteration_total?: number;
     }>>;
     flowDone?: boolean;
-    reset?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const FlowTimeline: import("svelte").Component<Props, {
     reset: () => void;
-}, string>;
-type FlowTimeline = InstanceType<typeof FlowTimeline>;
+}, "">;
+type FlowTimeline = ReturnType<typeof FlowTimeline>;
 export default FlowTimeline;

package/package/components/FlowTutorials.svelte

@@ -4,11 +4,11 @@ import FlowBuilderTutorialBranchOne from './tutorials/FlowBuilderTutorialBranchO
 import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte';
 import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte';
 import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte';
-let flowBuilderTutorialSimpleFlow = undefined;
-let flowBuilderTutorialForLoop = undefined;
-let flowBuilderTutorialBranchOne = undefined;
-let flowBuilderTutorialBranchAll = undefined;
-let flowBuilderTutorialErrorHandler = undefined;
+let flowBuilderTutorialSimpleFlow = $state(undefined);
+let flowBuilderTutorialForLoop = $state(undefined);
+let flowBuilderTutorialBranchOne = $state(undefined);
+let flowBuilderTutorialBranchAll = $state(undefined);
+let flowBuilderTutorialErrorHandler = $state(undefined);
 export function runTutorialById(id, indexToInsertAt) {
     if (id === 'forloop') {
         flowBuilderTutorialForLoop?.runTutorial(indexToInsertAt);

package/package/components/FlowTutorials.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,15 +11,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowTutorials: $$__sveltets_2_IsomorphicComponent<{
-    runTutorialById?: (id: string, indexToInsertAt?: number | undefined) => void;
-}, {
+declare const FlowTutorials: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     error: any;
     reload: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorialById: (id: string, indexToInsertAt?: number | undefined) => void;
-}, string>;
+}, "">;
 type FlowTutorials = InstanceType<typeof FlowTutorials>;
 export default FlowTutorials;

package/package/components/FlowViewer.svelte

@@ -4,13 +4,7 @@ import FlowGraphViewer from './FlowGraphViewer.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
-export let flow;
-export let initialOpen = undefined;
-export let noSide = false;
-export let noGraph = false;
-export let tab = noGraph ? 'schema' : 'ui';
-export let noSummary = false;
-export let noGraphDownload = false;
+let { flow, initialOpen = undefined, noSide = false, noGraph = false, tab = $bindable(noGraph ? 'schema' : 'ui'), noSummary = false, noGraphDownload = false } = $props();
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -26,7 +20,7 @@ if (initialOpen) {
 	<Tab value="raw">Raw</Tab>
 	<Tab value="schema">Input Schema</Tab>
 
-	<svelte:fragment slot="content">
+	{#snippet content()}
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}
@@ -53,5 +47,5 @@ if (initialOpen) {
 			<div class="my-4"></div>
 			<SchemaViewer schema={flow.schema} />
 		</TabContent>
-	</svelte:fragment>
+	{/snippet}
 </Tabs>

package/package/components/FlowViewer.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { FlowValue } from '../gen';
-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 FlowViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow: {
         summary: string;
         description?: string;
@@ -22,11 +9,10 @@ declare const FlowViewer: $$__sveltets_2_IsomorphicComponent<{
     initialOpen?: number | undefined;
     noSide?: boolean;
     noGraph?: boolean;
-    tab?: "ui" | "raw" | "schema";
+    tab?: 'ui' | 'raw' | 'schema';
     noSummary?: boolean;
     noGraphDownload?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowViewer = InstanceType<typeof FlowViewer>;
+}
+declare const FlowViewer: import("svelte").Component<Props, {}, "tab">;
+type FlowViewer = ReturnType<typeof FlowViewer>;
 export default FlowViewer;

package/package/components/FlowViewerInner.svelte

@@ -7,15 +7,15 @@ import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
 import HighlightTheme from './HighlightTheme.svelte';
 import { filteredContentForExport } from './flows/utils';
-export let flow;
-$: flowFiltered = filteredContentForExport(flow);
-let rawType = 'yaml';
+let { flow } = $props();
+let flowFiltered = $derived(filteredContentForExport(flow));
+let rawType = $state('yaml');
 function trimStringToLines(inputString, maxLines = 100) {
     const lines = inputString?.split('\n') ?? [];
     const linesToKeep = lines.slice(0, maxLines);
     return linesToKeep.join('\n');
 }
-let code = '';
+let code = $state('');
 function computeCode() {
     const str = rawType === 'json' ? JSON.stringify(flowFiltered, null, 4) : YAML.stringify(flowFiltered);
     const numberOfLines = str.split('\n').length;
@@ -24,9 +24,11 @@ function computeCode() {
     }
     code = str;
 }
-let shouldDisplayLoadMore = false;
-$: flowFiltered && rawType && computeCode();
-let maxLines = 100;
+let shouldDisplayLoadMore = $state(false);
+$effect(() => {
+    flowFiltered && rawType && computeCode();
+});
+let maxLines = $state(100);
 </script>
 
 <HighlightTheme />
@@ -40,7 +42,7 @@ let maxLines = 100;
 	>
 		<Tab value="yaml">YAML</Tab>
 		<Tab value="json">JSON</Tab>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="relative pt-2">
 				<Button
 					on:click={() =>
@@ -83,7 +85,7 @@ let maxLines = 100;
 					</Button>
 				{/if}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>
 

package/package/components/FlowViewerInner.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { FlowValue } from '../gen';
-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 FlowViewerInner: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow: {
         summary: string;
         description?: string;
         value: FlowValue;
         schema?: any;
     };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowViewerInner = InstanceType<typeof FlowViewerInner>;
+}
+declare const FlowViewerInner: import("svelte").Component<Props, {}, "">;
+type FlowViewerInner = ReturnType<typeof FlowViewerInner>;
 export default FlowViewerInner;

package/package/components/FolderEditor.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { userStore, workspaceStore } from '../stores';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { userStore, workspaceStore } from '../stores';
 import { FolderService, UserService, GranularAclService, GroupService } from '../gen';
-import AutoComplete from 'simple-svelte-autocomplete';
 import TableCustom from './TableCustom.svelte';
 import { Alert, Button, Drawer, DrawerContent } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
@@ -12,26 +12,23 @@ import { Eye, Plus } from 'lucide-svelte';
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import { createEventDispatcher } from 'svelte';
-export let name;
-let can_write = false;
+import Select from './select/Select.svelte';
+import { safeSelectItems } from './select/utils.svelte';
+let { name } = $props();
+let can_write = $state(false);
 let folder;
-let perms = undefined;
-let usernames = [];
-let groups = [];
-let ownerItem = '';
-let newGroup;
-let viewGroup;
+let perms = $state(undefined);
+let usernames = $state([]);
+let groups = $state([]);
+let ownerItem = $state('');
+let newGroup = $state(undefined);
+let viewGroup = $state(undefined);
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
 async function loadGroups() {
     groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
 }
-$: {
-    if ($workspaceStore && $userStore) {
-        load();
-    }
-}
 async function load() {
     loadUsernames();
     loadGroups();
@@ -49,7 +46,7 @@ async function addToFolder() {
     ownerItem = '';
     loadFolder();
 }
-let folderNotFound = undefined;
+let folderNotFound = $state(undefined);
 async function loadFolder() {
     try {
         folder = await FolderService.getFolder({ workspace: $workspaceStore, name });
@@ -87,10 +84,10 @@ function getRole(x) {
         return 'viewer';
     }
 }
-let ownerKind = 'user';
-let groupCreated = undefined;
-let newGroupName = '';
-let summary = '';
+let ownerKind = $state('user');
+let groupCreated = $state(undefined);
+let newGroupName = $state('');
+let summary = $state('');
 async function addGroup() {
     await GroupService.createGroup({
         workspace: $workspaceStore ?? '',
@@ -112,13 +109,18 @@ async function updateFolder() {
     dispatch('update');
     loadFolder();
 }
+run(() => {
+    if ($workspaceStore && $userStore) {
+        load();
+    }
+});
 </script>
 
 <Drawer bind:this={newGroup}>
 	<DrawerContent
 		title="New Group"
 		on:close={() => {
-			newGroup.closeDrawer()
+			newGroup?.closeDrawer()
 			groupCreated = undefined
 		}}
 	>
@@ -153,30 +155,25 @@ async function updateFolder() {
 <Section label={`Permissions (${perms?.length ?? 0})`}>
 	<div class="flex flex-col gap-6">
 		{#if can_write}
-			<Alert role="info" title="New permissions may take up to 60s to apply">
+			<Alert type="info" title="New permissions may take up to 60s to apply">
 				<span class="text-xs text-tertiary">Due to permissions cache invalidation </span>
 			</Alert>
 			<div class="flex items-center gap-1">
 				<div>
-					<ToggleButtonGroup
-						bind:selected={ownerKind}
-						on:selected={() => (ownerItem = '')}
-						let:item
-					>
-						<ToggleButton value="user" label="User" {item} />
-						<ToggleButton value="group" label="Group" {item} />
+					<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
+						{#snippet children({ item })}
+							<ToggleButton value="user" label="User" {item} />
+							<ToggleButton value="group" label="Group" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 
 				{#key ownerKind}
-					<AutoComplete
-						required
-						noInputStyles
-						items={ownerKind === 'user'
+					{@const items =
+						ownerKind === 'user'
 							? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/' + x))
 							: groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))}
-						bind:selectedItem={ownerItem}
-					/>
+					<Select items={safeSelectItems(items)} bind:value={ownerItem} />
 					{#if ownerKind == 'group'}
 						<Button
 							title="View Group"
@@ -238,115 +235,120 @@ async function updateFolder() {
 		{/if}
 		{#if perms}
 			<TableCustom>
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 				<tr slot="header-row">
 					<th>user/group</th>
 					<th></th>
 					<th></th>
 				</tr>
-				<tbody slot="body">
-					{#each perms as { owner_name, role }}<tr>
-							<td>{owner_name}</td>
-							<td>
-								{#if can_write}
-									<div>
-										<ToggleButtonGroup
-											disabled={owner_name == 'u/' + $userStore?.username && !$userStore?.is_admin}
-											selected={role}
-											let:item
-											on:selected={async (e) => {
-												const role = e.detail
-												// const wasInFolder = (folder?.owners ?? []).includes(folder)
-												// const inAcl = (
-												// 	folder?.extra_perms ? Object.keys(folder?.extra_perms) : []
-												// ).includes(folder)
-												if (role == 'admin') {
-													await FolderService.addOwnerToFolder({
-														workspace: $workspaceStore ?? '',
-														name,
-														requestBody: {
-															owner: owner_name
-														}
-													})
-												} else if (role == 'writer') {
-													await FolderService.removeOwnerToFolder({
+				{#snippet body()}
+					<tbody>
+						{#each perms ?? [] as { owner_name, role }}<tr>
+								<td>{owner_name}</td>
+								<td>
+									{#if can_write}
+										<div>
+											<ToggleButtonGroup
+												disabled={owner_name == 'u/' + $userStore?.username &&
+													!$userStore?.is_admin}
+												selected={role}
+												on:selected={async (e) => {
+													const role = e.detail
+													// const wasInFolder = (folder?.owners ?? []).includes(folder)
+													// const inAcl = (
+													// 	folder?.extra_perms ? Object.keys(folder?.extra_perms) : []
+													// ).includes(folder)
+													if (role == 'admin') {
+														await FolderService.addOwnerToFolder({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																owner: owner_name
+															}
+														})
+													} else if (role == 'writer') {
+														await FolderService.removeOwnerToFolder({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																owner: owner_name,
+																write: true
+															}
+														})
+													} else if (role == 'viewer') {
+														await FolderService.removeOwnerToFolder({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																owner: owner_name,
+																write: false
+															}
+														})
+													}
+													loadFolder()
+												}}
+											>
+												{#snippet children({ item })}
+													<ToggleButton
+														value="viewer"
+														label="Viewer"
+														tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+														{item}
+													/>
+
+													<ToggleButton
+														position="center"
+														value="writer"
+														label="Writer"
+														tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+														{item}
+													/>
+
+													<ToggleButton
+														position="right"
+														value="admin"
+														label="Admin"
+														tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
+														{item}
+													/>
+												{/snippet}
+											</ToggleButtonGroup>
+										</div>
+									{:else}
+										{role}
+									{/if}</td
+								>
+								<td>
+									{#if can_write && (owner_name != 'u/' + $userStore?.username || $userStore?.is_admin)}
+										<button
+											class="ml-2 text-red-500"
+											onclick={async () => {
+												await Promise.all([
+													FolderService.removeOwnerToFolder({
 														workspace: $workspaceStore ?? '',
 														name,
-														requestBody: {
-															owner: owner_name,
-															write: true
-														}
-													})
-												} else if (role == 'viewer') {
-													await FolderService.removeOwnerToFolder({
+														requestBody: { owner: owner_name }
+													}),
+													GranularAclService.removeGranularAcls({
 														workspace: $workspaceStore ?? '',
-														name,
+														path: name,
+														kind: 'folder',
 														requestBody: {
-															owner: owner_name,
-															write: false
+															owner: owner_name
 														}
 													})
-												}
+												])
+
 												loadFolder()
-											}}
+											}}>remove</button
 										>
-											<ToggleButton
-												value="viewer"
-												label="Viewer"
-												tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-												{item}
-											/>
-
-											<ToggleButton
-												position="center"
-												value="writer"
-												label="Writer"
-												tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-												{item}
-											/>
-
-											<ToggleButton
-												position="right"
-												value="admin"
-												label="Admin"
-												tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
-												{item}
-											/>
-										</ToggleButtonGroup>
-									</div>
-								{:else}
-									{role}
-								{/if}</td
-							>
-							<td>
-								{#if can_write && (owner_name != 'u/' + $userStore?.username || $userStore?.is_admin)}
-									<button
-										class="ml-2 text-red-500"
-										on:click={async () => {
-											await Promise.all([
-												FolderService.removeOwnerToFolder({
-													workspace: $workspaceStore ?? '',
-													name,
-													requestBody: { owner: owner_name }
-												}),
-												GranularAclService.removeGranularAcls({
-													workspace: $workspaceStore ?? '',
-													path: name,
-													kind: 'folder',
-													requestBody: {
-														owner: owner_name
-													}
-												})
-											])
-
-											loadFolder()
-										}}>remove</button
-									>
-								{:else}
-									<span class="text-tertiary text-xs">cannot remove yourself</span>
-								{/if}</td
-							>
-						</tr>{/each}
-				</tbody>
+									{:else}
+										<span class="text-tertiary text-xs">cannot remove yourself</span>
+									{/if}</td
+								>
+							</tr>{/each}
+					</tbody>
+				{/snippet}
 			</TableCustom>
 			<!-- <h2 class="mt-10"
 				>Folders managing this folder <Tooltip