windmill-components 1.504.6 → 1.511.0

package/package/components/ModuleTest.svelte

@@ -2,11 +2,11 @@
 import { workspaceStore } from '../stores';
 import { getScriptByPath } from '../scripts';
 import { getContext } from 'svelte';
-import TestJobLoader from './TestJobLoader.svelte';
+import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
 const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
@@ -22,31 +22,36 @@ export async function runTest(args) {
         jobProgressReset();
     if (modulesTestStates.states[mod.id]) {
         modulesTestStates.states[mod.id].cancel = async () => {
-            await testJobLoader?.cancelJob();
+            await jobLoader?.cancelJob();
             modulesTestStates.states[mod.id].testJob = undefined;
         };
         modulesTestStates.runTestCb?.(mod.id);
     }
     const val = mod.value;
     // let jobId: string | undefined = undefined
+    let callbacks = {
+        done: (x) => {
+            jobDone(x);
+        }
+    };
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag);
+        await jobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag, undefined, undefined, callbacks);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash);
+        await jobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash, callbacks);
     }
     else if (val.type == 'flow') {
-        await testJobLoader?.runFlowByPath(val.path, args);
+        await jobLoader?.runFlowByPath(val.path, args, callbacks);
     }
     else {
         throw Error('Not supported module type');
     }
 }
-function jobDone() {
-    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+function jobDone(testJob) {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob') {
         if ($flowStateStore[mod.id]) {
             $flowStateStore[mod.id].previewResult = testJob.result;
             $flowStateStore[mod.id].previewSuccess = testJob.success;
@@ -76,11 +81,11 @@ modulesTestStates.states[mod.id] = {
 };
 </script>
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	toastError={noEditor}
-	on:done={() => jobDone()}
 	bind:scriptProgress
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={
 		() => modulesTestStates.states[mod.id]?.loading ?? false,
 		(v) => {

package/package/components/NumberTypeNarrowing.svelte

@@ -2,24 +2,21 @@
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
-export let min;
-export let max;
-export let currency;
-export let currencyLocale;
-let minChecked = min != undefined;
-let maxChecked = max != undefined;
+let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
+let minChecked = $state(min != undefined);
+let maxChecked = $state(max != undefined);
 </script>
 
 <div class="flex flex-col gap-2">
 	<div class="grid grid-cols-2 gap-4">
 		<Label label="Min" class="w-full col-span-1">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Set a minimum value for the number. If both min and max are set, the input will render as
 					a range slider.
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="action">
+			{/snippet}
+			{#snippet action()}
 				<Toggle
 					bind:checked={minChecked}
 					on:change={(e) => {
@@ -32,17 +29,17 @@ let maxChecked = max != undefined;
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			</svelte:fragment> <input type="number" bind:value={min} disabled={!minChecked} />
+			{/snippet} <input type="number" bind:value={min} disabled={!minChecked} />
 		</Label>
 
 		<Label label="Max" class="w-full col-span-1 ">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Set a maximum value for the number. If both min and max are set, the input will render as
 					a range slider.
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="action">
+			{/snippet}
+			{#snippet action()}
 				<Toggle
 					bind:checked={maxChecked}
 					on:change={(e) => {
@@ -55,18 +52,18 @@ let maxChecked = max != undefined;
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			</svelte:fragment>
+			{/snippet}
 			<input type="number" bind:value={max} disabled={!maxChecked} />
 		</Label>
 	</div>
 	<div class="grid grid-cols-3 gap-4">
 		<Label label="Currency" class="w-full col-span-2">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
 					a locale to format the number according to that locale.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<select bind:value={currency}>
 				<option value={undefined}> No currency </option>
 				{#each selectOptions.currencyOptions as c}

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -1,23 +1,9 @@
-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 NumberTypeNarrowing: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     min: number | undefined;
     max: number | undefined;
     currency: string | undefined;
     currencyLocale: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NumberTypeNarrowing = InstanceType<typeof NumberTypeNarrowing>;
+}
+declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "currency" | "min" | "max" | "currencyLocale">;
+type NumberTypeNarrowing = ReturnType<typeof NumberTypeNarrowing>;
 export default NumberTypeNarrowing;

package/package/components/PullGitRepoPopover.svelte

@@ -0,0 +1,355 @@
+<script lang="ts">import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
+import { Loader2, Eye, Save, CheckCircle2, XCircle, DownloadCloud, AlertTriangle, Terminal, ChevronDown, ChevronUp } from 'lucide-svelte';
+import { workspaceStore } from '../stores';
+import hubPaths from '../hubPaths.json';
+import { JobService } from '../gen';
+import { tryEvery } from '../utils';
+import { sendUserToast } from '../toast';
+import GitDiffPreview from './GitDiffPreview.svelte';
+import { page } from '$app/stores';
+let { gitRepoResourcePath, uiState, onFilterUpdate } = $props();
+let previewResult = $state(undefined);
+let isPreviewLoading = $state(false);
+let isPulling = $state(false);
+let pullGitRepoPopover = $state(null);
+let jobStatus = $state({
+    id: null,
+    status: undefined,
+    type: 'preview'
+});
+let isCliInfoExpanded = $state(false);
+async function handleJobCompletion(jobId, workspace) {
+    let success = false;
+    await tryEvery({
+        tryCode: async () => {
+            const result = await JobService.getCompletedJob({
+                workspace,
+                id: jobId
+            });
+            success = !!result.success;
+        },
+        timeoutCode: async () => {
+            try {
+                await JobService.cancelQueuedJob({
+                    workspace,
+                    id: jobId,
+                    requestBody: {
+                        reason: 'Job timed out after 5s'
+                    }
+                });
+            }
+            catch (err) {
+                console.error(err);
+            }
+        },
+        interval: 500,
+        timeout: 10000
+    });
+    return success;
+}
+async function previewChanges() {
+    const workspace = $workspaceStore;
+    if (!workspace)
+        return;
+    console.log('Previewing changes for repo:', gitRepoResourcePath);
+    isPreviewLoading = true;
+    jobStatus = { id: null, status: undefined, type: 'preview' };
+    try {
+        // Always use the simplified JSON approach
+        const jobId = await JobService.runScriptByPath({
+            workspace,
+            path: hubPaths.gitInitRepo,
+            requestBody: {
+                workspace_id: workspace,
+                repo_url_resource_path: gitRepoResourcePath,
+                dry_run: true,
+                pull: true,
+                only_wmill_yaml: false,
+                settings_json: JSON.stringify(uiState)
+            },
+            skipPreprocessor: true
+        });
+        jobStatus = { id: jobId, status: 'running', type: 'preview' };
+        const success = await handleJobCompletion(jobId, workspace);
+        if (success) {
+            const rawResult = await JobService.getCompletedJobResult({ workspace, id: jobId });
+            console.log('Preview result:', rawResult);
+            // Convert new CLI format to expected format
+            const added = [];
+            const deleted = [];
+            const modified = [];
+            if (rawResult &&
+                rawResult.changes &&
+                Array.isArray(rawResult.changes)) {
+                for (const change of rawResult.changes) {
+                    if (change.type === 'added') {
+                        added.push(change.path);
+                    }
+                    else if (change.type === 'deleted') {
+                        deleted.push(change.path);
+                    }
+                    else if (change.type === 'modified') {
+                        modified.push(change.path);
+                    }
+                }
+            }
+            // For full sync mode, just use the CLI results directly
+            // The CLI already handles wmill.yaml changes with --include-wmill-yaml flag
+            previewResult = { added, deleted, modified };
+            jobStatus.status = 'success';
+        }
+        else {
+            previewResult = undefined;
+            jobStatus.status = 'failure';
+        }
+    }
+    catch (error) {
+        console.error('Failed to preview changes:', error);
+        previewResult = undefined;
+        jobStatus = {
+            ...jobStatus,
+            status: 'failure',
+            error: error instanceof Error ? error.message : String(error)
+        };
+    }
+    finally {
+        isPreviewLoading = false;
+    }
+}
+async function pullFromRepo() {
+    const workspace = $workspaceStore;
+    if (!workspace)
+        return;
+    console.log('Pulling from repo:', gitRepoResourcePath);
+    isPulling = true;
+    jobStatus = { id: null, status: undefined, type: 'pull' };
+    try {
+        // Use init git repo script with dry_run: false (actual pull operation)
+        // The script will read wmill.yaml directly from the cloned repo, no need to pass settings
+        const jobId = await JobService.runScriptByPath({
+            workspace,
+            path: hubPaths.gitInitRepo,
+            requestBody: {
+                workspace_id: workspace,
+                repo_url_resource_path: gitRepoResourcePath,
+                dry_run: false,
+                branch_to_push: '',
+                only_wmill_yaml: false,
+                pull: true,
+                settings_json: undefined // Let script use wmill.yaml from repo
+            },
+            skipPreprocessor: true
+        });
+        jobStatus = { id: jobId, status: 'running', type: 'pull' };
+        const success = await handleJobCompletion(jobId, workspace);
+        jobStatus.status = success ? 'success' : 'failure';
+        if (success) {
+            // Get the result which should contain the local git repo settings as JSON
+            const result = (await JobService.getCompletedJobResult({ workspace, id: jobId }));
+            console.log('Pull result:', result);
+            // Apply the settings from the sync operation result to the UI
+            if (result?.settings_json) {
+                // Directly update the UI state with the JSON result - no YAML conversion needed!
+                const settingsJson = result.settings_json;
+                onFilterUpdate({
+                    include_path: settingsJson.include_path || ['f/**'],
+                    exclude_path: settingsJson.exclude_path || [],
+                    extra_include_path: settingsJson.extra_include_path || [],
+                    include_type: settingsJson.include_type || ['script', 'flow', 'app', 'folder']
+                });
+                sendUserToast('Successfully pulled workspace content from repository');
+                // Reset popover state after successful pull
+                previewResult = undefined;
+                jobStatus = { id: null, status: undefined, type: 'preview' };
+                pullGitRepoPopover?.close();
+            }
+            else {
+                console.warn('No settings_json returned from pull operation');
+                sendUserToast('Pull completed but could not update filter settings', true);
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to pull from repo:', error);
+        jobStatus = {
+            ...jobStatus,
+            status: 'failure',
+            error: error instanceof Error ? error.message : String(error)
+        };
+    }
+    finally {
+        isPulling = false;
+    }
+}
+</script>
+
+<Popover
+	bind:this={pullGitRepoPopover}
+	floatingConfig={{
+		placement: 'top-start',
+		strategy: 'fixed',
+		flip: false,
+		shift: true
+	}}
+	contentClasses="p-4 w-1/3"
+>
+	<svelte:fragment slot="trigger">
+		<Button
+			color="dark"
+			size="sm"
+			nonCaptureEvent
+			onclick={pullGitRepoPopover?.open}
+			startIcon={{ icon: DownloadCloud }}
+		>
+			Pull workspace from Git repo
+		</Button>
+	</svelte:fragment>
+
+	<svelte:fragment slot="content" let:close>
+		<div class="flex flex-col gap-4">
+			<div class="flex flex-col gap-2">
+				<h3 class="text-lg font-semibold">Pull workspace from Git repository</h3>
+				<div class="prose max-w-none text-2xs text-tertiary">
+					This action will pull all workspace objects from your Git repository according to the
+					filters set in the Git repository wmill.yaml file and apply those filter settings to the
+					workspace.
+					<span class="text-orange-600 flex items-center gap-1">
+						<AlertTriangle size={14} /> This will overwrite your current workspace content and Git sync
+						filter settings with the content from the Git repository.
+					</span>
+
+					<!-- Collapsible CLI Info Section -->
+					<div class="mt-2 border rounded-md">
+						<button
+							class="w-full flex items-center justify-between p-1.5 bg-surface-secondary hover:bg-surface-hover"
+							onclick={() => (isCliInfoExpanded = !isCliInfoExpanded)}
+						>
+							<span class="font-medium flex items-center gap-2">
+								<Terminal size={14} />
+								Windmill CLI to push local files to Windmill
+							</span>
+							{#if isCliInfoExpanded}
+								<ChevronUp size={16} />
+							{:else}
+								<ChevronDown size={16} />
+							{/if}
+						</button>
+
+						{#if isCliInfoExpanded}
+							<div class="p-1 bg-surface-tertiary">
+								<div class="text-2xs mb-2">
+									Not familiar with Windmill CLI? <a
+										href="https://www.windmill.dev/docs/advanced/cli/sync"
+										class="text-blue-500 hover:text-blue-600 underline"
+										target="_blank"
+										rel="noopener noreferrer">Check out the docs</a
+									>
+								</div>
+								<div class="font-mono text-2xs">
+									<pre class="overflow-auto max-h-60"
+										><code
+											>npm install -g windmill-cli
+# Clone your git repository
+git clone $REPO_URL
+cd $REPO_NAME
+# Configure Windmill CLI
+wmill workspace add {$workspaceStore} {$workspaceStore} {`${$page.url.protocol}//${$page.url.hostname}/`}
+# Push the content to Windmill
+wmill sync push --yes
+# Optional: add --skip-secrets --skip-variables --skip-resources flags as needed</code
+										></pre
+									>
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			{#if previewResult}
+				<GitDiffPreview {previewResult} />
+			{/if}
+
+			{#if jobStatus.id}
+				<div class="flex items-center gap-2 text-xs text-tertiary">
+					{#if jobStatus.status === 'running'}
+						<Loader2 class="animate-spin" size={14} />
+					{:else if jobStatus.status === 'success'}
+						<CheckCircle2 size={14} class="text-green-600" />
+					{:else if jobStatus.status === 'failure'}
+						<XCircle size={14} class="text-red-700" />
+					{/if}
+					{jobStatus.type === 'preview' ? 'Preview' : 'Pull'} job:
+					<a
+						target="_blank"
+						class="underline"
+						href={`/run/${jobStatus.id}?workspace=${$workspaceStore}`}
+					>
+						{jobStatus.id}
+					</a>
+				</div>
+				{#if jobStatus.error}
+					<div class="text-xs text-red-600">{jobStatus.error}</div>
+				{/if}
+			{/if}
+
+			<div class="flex justify-between items-center mt-4">
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => {
+						previewResult = undefined
+						jobStatus = { id: null, status: undefined, type: 'preview' }
+						close()
+					}}
+					disabled={isPreviewLoading || isPulling}
+				>
+					Cancel
+				</Button>
+				<div class="flex gap-2">
+					{#if !previewResult}
+						<Button
+							size="xs"
+							on:click={previewChanges}
+							disabled={isPreviewLoading || isPulling}
+							startIcon={{
+								icon: isPreviewLoading ? Loader2 : Eye,
+								classes: isPreviewLoading ? 'animate-spin' : ''
+							}}
+						>
+							Preview
+						</Button>
+					{:else}
+						<Button
+							size="xs"
+							on:click={previewChanges}
+							disabled={isPreviewLoading || isPulling}
+							startIcon={{
+								icon: isPreviewLoading ? Loader2 : Eye,
+								classes: isPreviewLoading ? 'animate-spin' : ''
+							}}
+							title="Preview changes again"
+						>
+							Preview
+						</Button>
+						{#if previewResult.added?.length || previewResult.deleted?.length || previewResult.modified?.length}
+							<Button
+								color="red"
+								size="xs"
+								on:click={pullFromRepo}
+								disabled={isPreviewLoading || isPulling}
+								startIcon={{
+									icon: isPulling ? Loader2 : Save,
+									classes: isPulling ? 'animate-spin' : ''
+								}}
+							>
+								{isPulling ? 'Pulling...' : 'Pull'}
+							</Button>
+						{/if}
+					{/if}
+				</div>
+			</div>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/PullGitRepoPopover.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    gitRepoResourcePath: string;
+    uiState: {
+        include_path: string[];
+        exclude_path: string[];
+        extra_include_path: string[];
+        include_type: string[];
+    };
+    onFilterUpdate: (filters: {
+        include_path: string[];
+        exclude_path: string[];
+        extra_include_path: string[];
+        include_type: string[];
+    }) => void;
+};
+declare const PullGitRepoPopover: import("svelte").Component<$$ComponentProps, {}, "">;
+type PullGitRepoPopover = ReturnType<typeof PullGitRepoPopover>;
+export default PullGitRepoPopover;

package/package/components/ResourceTypePicker.svelte

@@ -8,10 +8,9 @@ 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';
-export let value;
-export let notPickable = false;
-export let nonePickable = false;
-let resources = [];
+import { untrack } from 'svelte';
+let { value = $bindable(), notPickable = false, nonePickable = false } = $props();
+let resources = $state([]);
 async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
@@ -20,19 +19,23 @@ function onClick(resource) {
     value = resource;
     dispatch('click', resource);
 }
-$: if ($workspaceStore) {
-    loadResources();
-}
-let search = '';
-$: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.toLowerCase()));
+$effect(() => {
+    if ($workspaceStore) {
+        untrack(() => {
+            loadResources();
+        });
+    }
+});
+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">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
-	<svelte:fragment slot="action">
+	{#snippet action()}
 		<div class="flex flex-row gap-1">
 			<Button
 				size="xs"
@@ -50,10 +53,10 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 				}}
 				contentClasses="flex flex-col gap-2 h-full p-4 max-h-[40vh] w-[500px]"
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
+				{/snippet}
+				{#snippet content({ close })}
 					<ClearableInput bind:value={search} placeholder="Search resource..." />
 
 					<div class="overflow-y-scroll h-full">
@@ -98,10 +101,10 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 							{/if}
 						</div>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 	<div class="flex flex-row items-center w-full justify-between">
 		<Badge color={!value ? 'gray' : 'blue'}>
 			{value ?? 'None'}

package/package/components/ResourceTypePicker.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    value: string | undefined;
+    notPickable?: boolean;
+    nonePickable?: boolean;
+}
 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;
@@ -11,14 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResourceTypePicker: $$__sveltets_2_IsomorphicComponent<{
-    value: string | undefined;
-    notPickable?: boolean;
-    nonePickable?: boolean;
-}, {
+declare const ResourceTypePicker: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value">;
 type ResourceTypePicker = InstanceType<typeof ResourceTypePicker>;
 export default ResourceTypePicker;

package/package/components/S3FilePicker.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
 const bubble = createBubbler();
 import { File as FileIcon, FolderClosed, FolderOpen, RotateCw, Loader2, Download, Trash, FileUp, MoveRight } from 'lucide-svelte';
 import { workspaceStore } from '../stores';
@@ -47,8 +47,9 @@ let filter = $state('');
 let timeout = undefined;
 let firstLoad = true;
 let secondaryStorageNames = usePromise(() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }), { loadInit: false });
+let wasOpen = $state(false);
 $effect(() => {
-    $workspaceStore && untrack(() => secondaryStorageNames.refresh());
+    wasOpen && $workspaceStore && untrack(() => secondaryStorageNames.refresh());
 });
 function onFilterChange() {
     if (!firstLoad) {
@@ -294,6 +295,7 @@ async function moveS3File(srcFileKey, destFileKey) {
 }
 let storage = $state(undefined);
 export async function open(_preSelectedFileKey = undefined) {
+    wasOpen = true;
     const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey);
     storage = preSelectedFileKey?.storage;
     if (preSelectedFileKey !== undefined) {
@@ -394,7 +396,7 @@ function selectItem(index, toggleCollapsed = true) {
         loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
     }
 }
-run(() => {
+$effect.pre(() => {
     filter != undefined && untrack(() => onFilterChange());
 });
 </script>