windmill-components 1.642.0 → 1.655.1

package/package/components/ResourceEditorDrawer.svelte

@@ -1,40 +1,35 @@
 <script lang="ts">import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Loader2, Save } from 'lucide-svelte';
-let drawer;
-let canSave = true;
-let resource_type = undefined;
-let defaultValues = undefined;
-let resourceEditor = undefined;
-let path = undefined;
-let newResource = false;
+let drawer = $state();
+let canSave = $state(true);
+let resource_type = $state(undefined);
+let defaultValues = $state(undefined);
+let resourceEditor = $state(undefined);
+let path = $state(undefined);
 export async function initEdit(p) {
     resource_type = undefined;
-    newResource = false;
     path = p;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
 export async function initNew(resourceType, nDefaultValues) {
-    newResource = true;
     path = undefined;
     resource_type = resourceType;
     defaultValues = nDefaultValues;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
-let mode = newResource ? 'new' : 'edit';
-$: path ? (mode = 'edit') : (mode = 'new');
+let mode = $derived(!path ? 'new' : 'edit');
 </script>
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
 			<Module.default
-				{newResource}
 				{path}
 				{resource_type}
 				{defaultValues}
@@ -54,7 +49,7 @@ $: path ? (mode = 'edit') : (mode = 'new');
 					} else {
 						resourceEditor?.createResource()
 					}
-					drawer.closeDrawer()
+					drawer?.closeDrawer()
 				}}
 				disabled={!canSave}
 			>

package/package/components/ResourceEditorDrawer.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,16 +11,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResourceEditorDrawer: $$__sveltets_2_IsomorphicComponent<{
-    initEdit?: (p: string) => Promise<void>;
-    initNew?: (resourceType: string, nDefaultValues?: Record<string, any>) => Promise<void>;
-}, {
+declare const ResourceEditorDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     refresh: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     initEdit: (p: string) => Promise<void>;
     initNew: (resourceType: string, nDefaultValues?: Record<string, any>) => Promise<void>;
-}, string>;
+}, "">;
 type ResourceEditorDrawer = InstanceType<typeof ResourceEditorDrawer>;
 export default ResourceEditorDrawer;

package/package/components/ResourcePicker.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { ResourceService } from '../gen';
-import { globalDbManagerDrawer, workspaceStore } from '../stores';
+<script lang="ts">import { ResourceService, WorkspaceService } from '../gen';
+import { workspaceStore } from '../stores';
 import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
@@ -9,7 +9,7 @@ import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import DropdownV2 from './DropdownV2.svelte';
-let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
+let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined, datatableAsPgResource = false } = $props();
 if (initialValue && value == undefined) {
     value = initialValue;
 }
@@ -67,6 +67,23 @@ async function loadResources(resourceType) {
             label: x.path,
             type: x.resource_type
         }));
+        if (datatableAsPgResource && resourceType === 'postgresql') {
+            try {
+                const datatables = await WorkspaceService.listDataTables({
+                    workspace: $workspaceStore
+                });
+                for (const dt of datatables) {
+                    nc.push({
+                        value: `datatable://${dt}`,
+                        label: `datatable://${dt}`,
+                        type: 'postgresql'
+                    });
+                }
+            }
+            catch (e) {
+                console.error('Failed to load data tables', e);
+            }
+        }
         // TODO check if this is needed
         if (!nc.find((x) => x.value == value) && (initialValue || value)) {
             nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
@@ -83,7 +100,7 @@ async function loadResources(resourceType) {
     }
     loading = false;
 }
-let previousResourceType = resourceType;
+let previousResourceType = untrack(() => resourceType);
 $effect(() => {
     $workspaceStore && resourceType;
     untrack(() => {
@@ -102,8 +119,8 @@ $effect(() => {
 });
 let appConnect = $state();
 let resourceEditor = $state();
-let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let hovering = $state(false);
+let isDatatableSelected = $derived(value?.startsWith('datatable://') ?? false);
 </script>
 
 <AppConnect
@@ -159,16 +176,18 @@ let hovering = $state(false);
 			id="resource-picker-select"
 		>
 			{#snippet endSnippet({ item, close })}
-				<Button
-					{disabled}
-					variant="subtle"
-					size="xs2"
-					wrapperClasses="-mr-2 pl-1 -my-2"
-					btnClasses="hover:bg-surface-tertiary"
-					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
-					startIcon={{ icon: Pen }}
-					iconOnly
-				/>
+				{#if !item.value?.startsWith('datatable://')}
+					<Button
+						{disabled}
+						variant="subtle"
+						size="xs2"
+						wrapperClasses="-mr-2 pl-1 -my-2"
+						btnClasses="hover:bg-surface-tertiary"
+						on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
+						startIcon={{ icon: Pen }}
+						iconOnly
+					/>
+				{/if}
 			{/snippet}
 			{#snippet bottomSnippet({ close })}
 				<div class="flex bg-surface border-t divide-x">
@@ -223,7 +242,7 @@ let hovering = $state(false);
 				</div>
 			{/snippet}
 		</Select>
-		{#if value && hovering}
+		{#if value && hovering && !isDatatableSelected}
 			<div class="absolute {disabled ? 'right-2' : 'right-10'} z-20">
 				<Button
 					variant="subtle"
@@ -242,7 +261,6 @@ let hovering = $state(false);
 			class="mt-1"
 			_resourceMetadata={{ resource_type: resourceType }}
 			asset={{ kind: 'resource', path: value }}
-			{dbManagerDrawer}
 		/>
 	{/if}
 </div>

package/package/components/ResourcePicker.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     class?: string;
     onClear?: () => void;
     excludedValues?: string[];
+    datatableAsPgResource?: boolean;
 }
 declare const ResourcePicker: import("svelte").Component<Props, {
     askNewResource: () => Promise<void>;

package/package/components/RunForm.svelte

@@ -6,7 +6,7 @@ import TimeAgo from './TimeAgo.svelte';
 import Popover from './meltComponents/Popover.svelte';
 import { Calendar, Check, CornerDownLeft } from 'lucide-svelte';
 import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { replaceState } from '$app/navigation';
 import JsonInputs from './JsonInputs.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
@@ -38,7 +38,7 @@ function onArgsChange(args) {
             const nurl = new URL(window.location.href);
             nurl.hash = computeSharableHash(args);
             try {
-                replaceState(nurl.toString(), $page.state);
+                replaceState(nurl.toString(), page.state);
             }
             catch (e) {
                 console.error(e);

package/package/components/RunFormAdvancedPopup.svelte

@@ -6,10 +6,7 @@ import { userStore, workerTags, workspaceStore } from '../stores';
 import { Button } from './common';
 import { WorkerService } from '../gen';
 import DateTimeInput from './DateTimeInput.svelte';
-export let runnable;
-export let scheduledForStr;
-export let invisible_to_owner;
-export let overrideTag;
+let { runnable, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable() } = $props();
 loadWorkerGroups();
 async function loadWorkerGroups() {
     if (!$workerTags) {

package/package/components/RunFormAdvancedPopup.svelte.d.ts

@@ -1,17 +1,4 @@
-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 RunFormAdvancedPopup: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     runnable: {
         summary?: string;
         description?: string;
@@ -27,8 +14,7 @@ declare const RunFormAdvancedPopup: $$__sveltets_2_IsomorphicComponent<{
     scheduledForStr: string | undefined;
     invisible_to_owner: boolean | undefined;
     overrideTag: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RunFormAdvancedPopup = InstanceType<typeof RunFormAdvancedPopup>;
+}
+declare const RunFormAdvancedPopup: import("svelte").Component<Props, {}, "invisible_to_owner" | "scheduledForStr" | "overrideTag">;
+type RunFormAdvancedPopup = ReturnType<typeof RunFormAdvancedPopup>;
 export default RunFormAdvancedPopup;

package/package/components/RunsPage.svelte

@@ -21,7 +21,7 @@ import { page } from '$app/state';
 import Select from './select/Select.svelte';
 import AnimatedPane from './splitPanes/AnimatedPane.svelte';
 import { StaleWhileLoading, useLocalStorageValue } from '../svelte5Utils.svelte';
-import { CircleAlert, CircleCheck, CirclePlay, Hourglass, TriangleAlertIcon } from 'lucide-svelte';
+import { Calendar, CircleAlert, CircleCheck, CirclePlay, Clock, Hourglass, TriangleAlertIcon } from 'lucide-svelte';
 import DropdownV2 from './DropdownV2.svelte';
 import TimeframeSelect, { buildManualTimeframe, runsTimeframes, useSyncedTimeframe } from './runs/TimeframeSelect.svelte';
 import FilterSearchbar, { useUrlSyncedFilterInstance } from './FilterSearchbar.svelte';
@@ -37,16 +37,35 @@ let runsFilterSearchbarSchema = $derived(buildRunsFilterSearchbarSchema({
     usernames,
     folders,
     jobTriggerKinds,
-    isSuperAdmin: !!$superadmin
+    isSuperAdmin: !!$superadmin,
+    isAdminsWorkspace: $workspaceStore === 'admins'
 }));
 let perPage = useLocalStorageValue('runs_per_page', 1000, 'number');
+let showSchedulesStorage = useLocalStorageValue('runs_show_schedules', true, 'boolean');
+let showFutureJobsStorage = useLocalStorageValue('runs_show_future_jobs', true, 'boolean');
 let filters = useUrlSyncedFilterInstance(untrack(() => runsFilterSearchbarSchema));
 let { initialPath } = $props();
 let batchRerunOptionsIsOpen = $state(false);
 // Initialize path filter from route param if provided and not already set via query params
-if (initialPath && !filters.val.path) {
-    filters.val.path = initialPath;
+if (untrack(() => initialPath) && !filters.val.path) {
+    filters.val.path = untrack(() => initialPath);
 }
+// Apply persistent toggle values from local storage if URL doesn't specify them
+if (!page.url.searchParams.has('job_trigger_kind') && showSchedulesStorage.val === false) {
+    filters.val.job_trigger_kind = '!schedule';
+}
+if (!page.url.searchParams.has('show_future_jobs') && showFutureJobsStorage.val === false) {
+    filters.val.show_future_jobs = false;
+}
+// Sync toggle state back to local storage when filters change
+$effect(() => {
+    if (!filters.val.job_trigger_kind || filters.val.job_trigger_kind === '!schedule') {
+        showSchedulesStorage.val = filters.val.job_trigger_kind !== '!schedule';
+    }
+});
+$effect(() => {
+    showFutureJobsStorage.val = filters.val.show_future_jobs !== false;
+});
 let selectedIds = $state([]);
 let selectedWorkspace = $state(undefined);
 let jobKinds = $derived(computeJobKinds(filters.val.job_kinds ?? null));
@@ -56,15 +75,16 @@ let autoRefresh = useLocalStorageValue('auto_refresh_in_runs', true, 'boolean');
 let runDrawer = $state(undefined);
 let lookback = $state(1);
 let askingForConfirmation = $state(undefined);
-let automaticTimeframeState = useLocalStorageValue('runs_automatic_timeframe', 'null', 'string');
 let _timeframe = useSyncedTimeframe(runsTimeframes, () => ({
     maxTs: filters.val.max_ts?.toISOString(),
     minTs: filters.val.min_ts?.toISOString(),
-    timeframe: automaticTimeframeState.val === 'null' ? null : automaticTimeframeState.val
+    timeframe: filters.val.timeframe
 }), (v) => {
     v.maxTs ? (filters.val.max_ts = new Date(v.maxTs)) : delete filters.val.max_ts;
     v.minTs ? (filters.val.min_ts = new Date(v.minTs)) : delete filters.val.min_ts;
-    automaticTimeframeState.val = v.timeframe ?? 'null';
+    v.timeframe && v.timeframe !== 'Latest runs'
+        ? (filters.val.timeframe = v.timeframe)
+        : delete filters.val.timeframe;
 });
 let timeframe = $derived(_timeframe.val);
 let manualTimeframe = $derived(timeframe.type === 'manual' ? timeframe : undefined);
@@ -79,9 +99,10 @@ let jobsLoader = useJobsLoader(() => ({
     resultError,
     perPage: perPage.val,
     lookback: graph === 'RunChart' ? 0 : lookback,
-    onSetPerPage: (p) => (perPage.val = p),
     currentWorkspace: $workspaceStore ?? ''
 }));
+let batchProgress = $derived(jobsLoader.batchProgress);
+let currentBatchSize = $derived(jobsLoader.currentBatchSize);
 let lastFetchWentToEnd = $derived(jobsLoader.lastFetchWentToEnd);
 let queue_count = $derived(jobsLoader.queue_count);
 let suspended_count = $derived(jobsLoader.suspended_count);
@@ -329,14 +350,14 @@ async function loadExtra() {
     await jobsLoader?.loadExtraJobs();
 }
 function jobsFilter(f) {
-    filters.val.path = undefined;
-    filters.val.user = undefined;
-    filters.val.folder = undefined;
-    filters.val.label = undefined;
-    filters.val.concurrency_key = undefined;
-    filters.val.tag = undefined;
-    filters.val.worker = undefined;
-    filters.val.schedule_path = undefined;
+    delete filters.val.path;
+    delete filters.val.user;
+    delete filters.val.folder;
+    delete filters.val.label;
+    delete filters.val.concurrency_key;
+    delete filters.val.tag;
+    delete filters.val.worker;
+    delete filters.val.schedule_path;
     filters.val.status = filters.val.status == f ? undefined : f;
     filters.val.job_kinds = 'all';
 }
@@ -463,7 +484,7 @@ let manualSelectionMode = $state();
 
 			<div class="hidden xl:flex gap-2 ml-6">
 				<ToggleButtonGroup
-					tabListClass="hidden 2xl:flex"
+					tabListClass="hidden xl:flex"
 					bind:selected={
 						() => filters.val.job_kinds ?? 'runs',
 						(v) => (v === 'runs' ? delete filters.val.job_kinds : (filters.val.job_kinds = v))
@@ -474,18 +495,17 @@ let manualSelectionMode = $state();
 						<ToggleButton
 							value="runs"
 							label="Runs"
-							showTooltipIcon
 							tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
 							{item}
 						/>
 						<ToggleButton
 							value="dependencies"
 							label="Deps"
-							showTooltipIcon
 							tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
 							{item}
 						/>
 						<ToggleButtonMore
+							hideSelectedOption={innerWidth < smallScreenWidth}
 							togglableItems={[
 								{
 									label: 'Previews',
@@ -568,6 +588,39 @@ let manualSelectionMode = $state();
 				</ToggleButtonGroup>
 			</div>
 
+			<div class="hidden xl:flex gap-2 items-center min-h-8 ml-2">
+				{#if !filters.val.job_trigger_kind || filters.val.job_trigger_kind === '!schedule'}
+					<div class="flex items-center gap-1" title="Show schedules">
+						<Toggle
+							size="xs"
+							color="nord"
+							id="show-schedules"
+							bind:checked={
+								() => filters.val.job_trigger_kind !== '!schedule',
+								(v) =>
+									v
+										? delete filters.val.job_trigger_kind
+										: (filters.val.job_trigger_kind = '!schedule')
+							}
+						/>
+						<Calendar size={14} />
+					</div>
+				{/if}
+				<div class="flex items-center gap-1" title="Show future jobs">
+					<Toggle
+						size="xs"
+						color="nord"
+						id="show-future-jobs"
+						bind:checked={
+							() => filters.val.show_future_jobs !== false,
+							(v) =>
+								v ? delete filters.val.show_future_jobs : (filters.val.show_future_jobs = false)
+						}
+					/>
+					<Clock size={14} />
+				</div>
+			</div>
+
 			<TimeframeSelect
 				wrapperClasses="ml-auto"
 				onClick={() => jobsLoader?.loadJobs(true)}
@@ -576,9 +629,18 @@ let manualSelectionMode = $state();
 				bind:value={_timeframe.val}
 			/>
 			<FilterSearchbar
-				class="flex-1 relative max-w-[34rem] min-w-[18rem] {ButtonType.UnifiedMinHeightClasses.md}"
+				class={twMerge(
+					'flex-1 relative min-w-[18rem]',
+					Object.keys(filters.val).length <= 3
+						? 'max-w-[20rem] 2xl:max-w-[28rem]'
+						: 'max-w-[34rem]',
+					ButtonType.UnifiedMinHeightClasses.md
+				)}
 				schema={runsFilterSearchbarSchema}
-				presets={buildRunsFilterPresets({ isSuperadmin: !!$superadmin })}
+				presets={buildRunsFilterPresets({
+					isSuperadmin: !!$superadmin,
+					isAdminsWorkspace: $workspaceStore === 'admins'
+				})}
 				bind:value={filters.val}
 				placeholder="Filter runs..."
 			/>
@@ -611,8 +673,13 @@ let manualSelectionMode = $state();
 						transformInputSelectedText={(_, v) => `${pluralize(v, 'day')} lookback`}
 						tooltip={'How far behind the min datetime to start considering jobs for the concurrency graph. Change this value to include jobs started before the set time window for the computation of the graph'}
 					/>
-				{:else if !lastFetchWentToEnd}
-					<Button wrapperClasses="ml-2" unifiedSize="md" onClick={() => jobsLoader.loadExtraJobs()}>
+				{:else if !lastFetchWentToEnd && (jobs?.length ?? 0) >= (perPage.val ?? 1000)}
+					<Button
+						wrapperClasses="ml-2"
+						unifiedSize="md"
+						loading={jobsLoader.loadingExtra}
+						onClick={() => jobsLoader.loadExtraJobs()}
+					>
 						Load more
 						<Tooltip>There are more jobs to load</Tooltip>
 					</Button>
@@ -627,9 +694,8 @@ let manualSelectionMode = $state();
 					maxTimeSet={manualTimeframe?.maxTs}
 					maxIsNow={manualTimeframe?.maxTs == undefined}
 					jobs={completedJobs}
-					onZoom={async (zoom) => {
+					onZoom={(zoom) => {
 						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
-						jobsLoader?.loadJobs(true)
 					}}
 					onPointClicked={(ids) => {
 						runsTable?.scrollToRun(ids)
@@ -641,9 +707,8 @@ let manualSelectionMode = $state();
 					maxTimeSet={manualTimeframe?.maxTs}
 					maxIsNow={manualTimeframe?.maxTs == undefined}
 					{extendedJobs}
-					onZoom={async (zoom) => {
+					onZoom={(zoom) => {
 						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
-						jobsLoader?.loadJobs(true)
 					}}
 				/>
 			{/if}
@@ -654,6 +719,38 @@ let manualSelectionMode = $state();
 				<Pane minSize={40}>
 					<div class="h-full flex">
 						<div class="flex flex-col flex-1 m-4 mt-2 mr-2">
+							{#if batchProgress}
+								<div class="flex items-center gap-3 px-1 pb-2 text-xs text-secondary">
+									<span>Loading jobs: {batchProgress.loaded} of {batchProgress.total}...</span>
+									<div class="flex-1 bg-surface-hover rounded-full h-1.5">
+										<div
+											class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+											style="width: {Math.round(
+												(batchProgress.loaded / batchProgress.total) * 100
+											)}%"
+										></div>
+									</div>
+									{#if currentBatchSize != null}
+										<span class="whitespace-nowrap shrink-0">Batch size:</span>
+										<input
+											type="number"
+											min="1"
+											max="1000"
+											value={currentBatchSize}
+											class="!w-14 shrink-0 text-xs px-1 py-0.5 border rounded text-center"
+											onchange={(e) => {
+												const v = parseInt(e.currentTarget.value)
+												if (v >= 1 && v <= 1000) {
+													jobsLoader.restreamWithBatchSize(v)
+												}
+											}}
+										/>
+									{/if}
+									<Button size="xs" destructive onClick={() => jobsLoader.stopBatchLoading()}>
+										Stop
+									</Button>
+								</div>
+							{/if}
 							<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
 							<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
 								{#if jobs}
@@ -664,6 +761,7 @@ let manualSelectionMode = $state();
 										showExternalJobs={graph !== 'RunChart'}
 										activeLabel={filters.val.label}
 										{lastFetchWentToEnd}
+										loadingExtra={jobsLoader.loadingExtra}
 										bind:selectedIds
 										bind:selectedWorkspace
 										on:loadExtra={loadExtra}
@@ -734,6 +832,7 @@ let manualSelectionMode = $state();
 								<div class="flex-1"></div>
 								<Toggle
 									size="xs"
+									color="nord"
 									bind:checked={autoRefresh.val}
 									options={{ right: 'Auto-refresh' }}
 									textClass="whitespace-nowrap"

package/package/components/S3FilePicker.svelte

@@ -8,7 +8,7 @@ import { FileUp } from 'lucide-svelte';
 import { SettingService } from '../gen';
 import { workspaceStore } from '../stores';
 import { resource } from 'runed';
-let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, onClose, onSelectAndClose } = $props();
+let { fromWorkspaceSettings = false, readOnlyMode, allowDelete = false, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, onClose, onSelectAndClose } = $props();
 let drawer = $state();
 let s3FilePickerInner = $state();
 let workspaceSettingsInitialized = $state(true);
@@ -51,6 +51,7 @@ export async function open(_preSelectedFileKey = undefined) {
 			}}
 			{fromWorkspaceSettings}
 			{readOnlyMode}
+			{allowDelete}
 			bind:initialFileKey
 			bind:selectedFileKey
 			bind:workspaceSettingsInitialized

package/package/components/S3FilePicker.svelte.d.ts

@@ -2,6 +2,7 @@ import { type S3Object } from '../utils';
 interface Props {
     fromWorkspaceSettings?: boolean;
     readOnlyMode: boolean;
+    allowDelete?: boolean;
     initialFileKey?: {
         s3: string;
         storage?: string;

package/package/components/S3FilePickerInner.svelte

@@ -20,7 +20,8 @@ let moveModalOpen = $state(false);
 let moveDestKey = $state(undefined);
 let fileMoveInProgress = $state(false);
 let initialFileKeyInternalCopy;
-let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
+let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath: initialRootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), allowDelete = false, replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
+let rootPath = $state(initialRootPath);
 let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1));
 let csvSeparatorChar = $state(',');
 let csvHasHeader = $state(true);
@@ -133,7 +134,7 @@ async function loadFiles() {
             }
         }
     }
-    displayedFileKeys = displayedFileKeys.sort();
+    displayedFileKeys = [...new Set(displayedFileKeys)].sort();
     fileListLoading = false;
     fileInfoLoading = false;
 }
@@ -244,7 +245,7 @@ async function deleteFileFromS3(fileKey) {
             }
         }
     }
-    displayedFileKeys = displayedFileKeys.sort();
+    displayedFileKeys = [...new Set(displayedFileKeys)].sort();
 }
 async function clearAndLoadFiles({ keepFilter } = {}) {
     displayedFileKeys = [];
@@ -285,10 +286,19 @@ async function moveS3File(srcFileKey, destFileKey) {
 export async function open(_preSelectedFileKey = undefined) {
     const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey);
     storage = preSelectedFileKey?.storage;
-    if (preSelectedFileKey !== undefined) {
+    if (preSelectedFileKey !== undefined && preSelectedFileKey.s3.endsWith('/')) {
+        rootPath = preSelectedFileKey.s3;
+        filter = '';
+        selectedFileKey = undefined;
+    }
+    else if (preSelectedFileKey !== undefined) {
+        rootPath = '';
         initialFileKey = { ...preSelectedFileKey };
         selectedFileKey = { ...preSelectedFileKey };
     }
+    else {
+        rootPath = '';
+    }
     reloadContent();
 }
 export async function close() {
@@ -322,7 +332,7 @@ export async function reloadContent() {
         if (allFilesByKey[selectedFileKey.s3] === undefined) {
             selectedFileKey = { s3: '', storage };
         }
-        else {
+        else if (allFilesByKey[selectedFileKey.s3].type !== 'folder') {
             loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
         }
     }
@@ -378,7 +388,7 @@ function selectItem(index, toggleCollapsed = true) {
                 }
             }
         }
-        displayedFileKeys = displayedFileKeys.sort();
+        displayedFileKeys = [...new Set(displayedFileKeys)].sort();
     }
     else {
         selectedFileKey = {
@@ -580,8 +590,10 @@ $effect.pre(() => {
 											startIcon={{ icon: MoveRight }}
 											iconOnly={true}
 										/>
+									{/if}
+									{#if !readOnlyMode || allowDelete}
 										<Button
-											title="Delete file from S3"
+											title="Delete file"
 											variant="default"
 											on:click={() => {
 												deletionModalOpen = true

package/package/components/S3FilePickerInner.svelte.d.ts

@@ -28,6 +28,7 @@ interface Props {
         nestingLevel: number;
         count: number;
     }>;
+    allowDelete?: boolean;
     replaceUnauthorizedWarning?: Snippet;
     listStoredFilesRequest?: (d: ListStoredFilesData) => CancelablePromise<ListStoredFilesResponse>;
     loadFilePreviewRequest?: (d: LoadFilePreviewData) => CancelablePromise<LoadFilePreviewResponse>;