windmill-components 1.623.1 → 1.642.0

package/package/components/raw_apps/RawAppSidebar.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import RawAppInlineScriptPanelList from './RawAppInlineScriptPanelList.svelte';
-import FileTreeNode from './FileTreeNode.svelte';
-import { buildFileTree } from './fileTreeUtils';
+import FileExplorer from '../FileExplorer.svelte';
 import { Plus, File, Folder, Camera } from 'lucide-svelte';
 import RawAppModules from './RawAppModules.svelte';
 import RawAppHistoryList from './RawAppHistoryList.svelte';
 import Button from '../common/button/Button.svelte';
 import RawAppDataTableList from './RawAppDataTableList.svelte';
 import RawAppDataTableDrawer from './RawAppDataTableDrawer.svelte';
-let { runnables, selectedRunnable = $bindable(), files = $bindable(), modules, onSelectFile, selectedDocument = $bindable(), historyManager, historySelectedId, onHistorySelect, onManualSnapshot, dataTableRefs = [], onDataTableRefsChange, defaultDatatable = undefined, defaultSchema = undefined, onDefaultChange } = $props();
+let { runnables, selectedRunnable = $bindable(), files = $bindable({}), modules, onSelectFile, selectedDocument = $bindable(), historyManager, historySelectedId, onHistorySelect, onHistorySelectCurrent, onManualSnapshot, dataTableRefs = [], onDataTableRefsChange, defaultDatatable = undefined, defaultSchema = undefined, onDefaultChange } = $props();
 let dataTableDrawer = $state();
 let selectedDataTableIndex = $state(undefined);
 function handleAddDataTable(ref) {
@@ -22,250 +21,64 @@ function handleRemoveDataTable(index) {
 }
 function handleSelectDataTable(ref, index) {
     selectedDataTableIndex = selectedDataTableIndex === index ? undefined : index;
-    // Open the drawer in manage mode when selecting a data table
     if (selectedDataTableIndex === index) {
         dataTableDrawer?.openDrawerWithRef(ref);
     }
 }
-const fileTree = $derived(buildFileTree(Object.keys(files ?? {})));
-let pathToRename = $state(undefined);
-let pathToExpand = $state(undefined);
-function handleFileClick(path) {
-    console.log('File clicked:', path);
+let fileExplorer = $state();
+function handleSelectPath(path) {
     selectedDocument = path;
-    onSelectFile?.(path);
-}
-function handleAddFile(folderPath) {
-    console.log('Add file to:', folderPath);
-    if (files) {
-        const nfiles = { ...files };
-        // Ensure folderPath ends with /
-        const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
-        const newPath = normalizedFolder + 'newfile.txt';
-        nfiles[newPath] = '';
-        files = nfiles;
-        pathToRename = newPath;
-        pathToExpand = normalizedFolder;
-    }
-}
-function handleRename(oldPath, newName) {
-    if (files) {
-        const nfiles = { ...files };
-        const pathParts = oldPath.split('/').filter(Boolean);
-        const parentPath = '/' + pathParts.slice(0, -1).join('/');
-        let newPath = parentPath === '/' ? '/' + newName : parentPath + '/' + newName;
-        // Check if this is a folder (ends with /)
-        const isFolder = oldPath.endsWith('/');
-        if (isFolder) {
-            // For folders, ensure new path also ends with /
-            if (!newPath.endsWith('/')) {
-                newPath = newPath + '/';
-            }
-            const oldFolderPath = oldPath;
-            const newFolderPath = newPath;
-            // Collect all paths to rename (including the folder itself and all children)
-            const pathsToRename = [];
-            Object.keys(nfiles).forEach((filePath) => {
-                if (filePath === oldFolderPath) {
-                    // The folder itself
-                    pathsToRename.push({ old: filePath, new: newFolderPath });
-                }
-                else if (filePath.startsWith(oldFolderPath)) {
-                    // Children of the folder
-                    const relativePath = filePath.substring(oldFolderPath.length);
-                    const updatedPath = newFolderPath + relativePath;
-                    pathsToRename.push({ old: filePath, new: updatedPath });
-                }
-            });
-            // Apply all renames
-            pathsToRename.forEach(({ old, new: newPath }) => {
-                nfiles[newPath] = nfiles[old];
-                delete nfiles[old];
-            });
-            selectedDocument = newFolderPath;
-        }
-        else {
-            // For files, simple rename
-            nfiles[newPath] = nfiles[oldPath];
-            delete nfiles[oldPath];
-            selectedDocument = newPath;
-        }
-        files = nfiles;
-        pathToRename = undefined;
-    }
-}
-function handleAddFolder(folderPath) {
-    console.log('Add folder to:', folderPath);
-    if (files) {
-        const nfiles = { ...files };
-        // Ensure folderPath ends with /
-        const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
-        const newPath = normalizedFolder + 'newfolder/';
-        nfiles[newPath] = '';
-        files = nfiles;
-        pathToRename = newPath;
-        pathToExpand = normalizedFolder;
-    }
-}
-function handleAddRootFile() {
-    console.log('Add file to root or selected folder');
-    if (files) {
-        const nfiles = { ...files };
-        let newPath;
-        let targetFolder;
-        if (selectedDocument) {
-            // If a folder is selected, add the file inside it
-            if (selectedDocument.endsWith('/')) {
-                newPath = selectedDocument + 'newfile.txt';
-                targetFolder = selectedDocument;
-            }
-            else {
-                // If a file is selected, add the new file in the same folder
-                const pathParts = selectedDocument.split('/').filter(Boolean);
-                if (pathParts.length > 1) {
-                    // File is in a subfolder
-                    const parentPath = '/' + pathParts.slice(0, -1).join('/') + '/';
-                    newPath = parentPath + 'newfile.txt';
-                    targetFolder = parentPath;
-                }
-                else {
-                    // File is at root
-                    newPath = '/newfile.txt';
-                }
-            }
-        }
-        else {
-            newPath = '/newfile.txt';
-        }
-        nfiles[newPath] = '';
-        files = nfiles;
-        pathToRename = newPath;
-        if (targetFolder) {
-            pathToExpand = targetFolder;
-        }
-    }
-}
-function handleAddRootFolder() {
-    if (files) {
-        const nfiles = { ...files };
-        let newPath;
-        let targetFolder;
-        if (selectedDocument) {
-            // If a folder is selected, add the folder inside it
-            if (selectedDocument.endsWith('/')) {
-                newPath = selectedDocument + 'newfolder/';
-                targetFolder = selectedDocument;
-            }
-            else {
-                // If a file is selected, add the new folder in the same folder
-                const pathParts = selectedDocument.split('/').filter(Boolean);
-                if (pathParts.length > 1) {
-                    // File is in a subfolder
-                    const parentPath = '/' + pathParts.slice(0, -1).join('/') + '/';
-                    newPath = parentPath + 'newfolder/';
-                    targetFolder = parentPath;
-                }
-                else {
-                    // File is at root
-                    newPath = '/newfolder/';
-                }
-            }
-        }
-        else {
-            newPath = '/newfolder/';
-        }
-        nfiles[newPath] = '';
-        files = nfiles;
-        pathToRename = newPath;
-        if (targetFolder) {
-            pathToExpand = targetFolder;
-        }
-    }
-}
-function handleDelete(path) {
-    if (files) {
-        console.log('Delete:', path);
-        const nfiles = { ...files };
-        // Check if this is a folder (ends with /)
-        const isFolder = path.endsWith('/');
-        if (isFolder) {
-            // Delete the folder and all its children
-            Object.keys(nfiles).forEach((filePath) => {
-                if (filePath === path || filePath.startsWith(path)) {
-                    delete nfiles[filePath];
-                }
-            });
-        }
-        else {
-            // Delete single file
-            delete nfiles[path];
-        }
-        files = nfiles;
-        console.log(nfiles);
-        // Clear selection if deleted item was selected
-        if (selectedDocument === path || (isFolder && selectedDocument?.startsWith(path))) {
-            selectedDocument = undefined;
-        }
+    if (!path.endsWith('/')) {
+        onSelectFile?.(path);
     }
 }
 </script>
 
-<PanelSection size="lg" fullHeight={false} title="frontend" id="app-editor-frontend-panel">
+<PanelSection size="sm" fullHeight={false} title="frontend" id="app-editor-frontend-panel">
 	{#snippet action()}
 		<div class="flex gap-1">
-			<div class="flex gap-0.5">
-				<button
-					onclick={handleAddRootFile}
-					class="p-0.5 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
-					title="Add file to root"
-				>
-					<Plus size={12} class="text-secondary" />
-					<File size={12} class="text-tertiary" />
-				</button>
-				<button
-					onclick={handleAddRootFolder}
-					class="p-0.5 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
-					title="Add folder to root"
-				>
-					<Plus size={12} class="text-secondary" />
-					<Folder size={12} class="text-tertiary" />
-				</button>
-			</div>
+			<Button
+				onClick={() => fileExplorer?.handleAddRootFile()}
+				title="Add file to root"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<File size={12} />
+			</Button>
+			<Button
+				onClick={() => fileExplorer?.handleAddRootFolder()}
+				title="Add folder to root"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<Folder size={12} />
+			</Button>
 		</div>
 	{/snippet}
-	<div class="flex flex-col gap-0.5 w-full">
-		{#each fileTree as node (node.path)}
-			<FileTreeNode
-				{node}
-				onFileClick={handleFileClick}
-				onAddFile={handleAddFile}
-				onAddFolder={handleAddFolder}
-				onRename={handleRename}
-				onDelete={handleDelete}
-				selectedPath={selectedDocument}
-				{pathToRename}
-				{pathToExpand}
-			/>
-		{/each}
-		<FileTreeNode
-			node={{
-				name: 'wmill.ts',
-				path: '/wmill.ts',
-				isFolder: false
-			}}
-			noEdit={true}
-			onFileClick={handleFileClick}
-			onAddFile={handleAddFile}
-			onAddFolder={handleAddFolder}
-			selectedPath={selectedDocument}
-		/>
-	</div>
+	<FileExplorer
+		bind:this={fileExplorer}
+		bind:files
+		selectedPath={selectedDocument}
+		onSelectPath={handleSelectPath}
+		extraNodes={[{ name: 'wmill.ts', path: '/wmill.ts', isFolder: false }]}
+		hideHeader
+	/>
 </PanelSection>
 
 <RawAppModules {modules} />
 
 <div class="py-4"></div>
-<RawAppInlineScriptPanelList bind:selectedRunnable {runnables} />
+<RawAppInlineScriptPanelList
+	bind:selectedRunnable
+	{runnables}
+	onSelect={() => {
+		selectedDocument = undefined
+	}}
+/>
 
 <div class="py-4"></div>
 <RawAppDataTableList
@@ -286,17 +99,20 @@ function handleDelete(path) {
 
 {#if historyManager && onHistorySelect && onManualSnapshot}
 	<div class="py-4"></div>
-	<PanelSection fullHeight={false} size="md" title="history" id="app-editor-history-panel">
+	<PanelSection fullHeight={false} size="sm" title="history" id="app-editor-history-panel">
 		{#snippet action()}
 			<div class="flex items-center gap-2">
 				<span class="text-2xs text-tertiary">{historyManager.allEntries.length}/50</span>
 				<Button
-					size="xs2"
-					color="dark"
-					variant="border"
-					startIcon={{ icon: Camera }}
+					unifiedSize="xs"
+					variant="subtle"
 					on:click={onManualSnapshot}
-				></Button>
+					btnClasses="px-1 gap-0.5"
+					title="Create a new snapshot"
+				>
+					<Plus size={12} />
+					<Camera size={12} />
+				</Button>
 			</div>
 		{/snippet}
 		<RawAppHistoryList
@@ -304,6 +120,7 @@ function handleDelete(path) {
 			branches={historyManager.allBranches}
 			selectedId={historySelectedId}
 			onSelect={onHistorySelect}
+			onSelectCurrent={onHistorySelectCurrent}
 		/>
 	</PanelSection>
 {/if}

package/package/components/raw_apps/RawAppSidebar.svelte.d.ts

@@ -5,13 +5,14 @@ import type { DataTableRef } from './dataTableRefUtils';
 interface Props {
     runnables: Record<string, Runnable>;
     selectedRunnable: string | undefined;
-    files: Record<string, string> | undefined;
+    files: Record<string, string>;
     modules?: Modules;
     onSelectFile?: (path: string) => void;
     selectedDocument: string | undefined;
     historyManager?: RawAppHistoryManager;
     historySelectedId?: number | undefined;
     onHistorySelect?: (id: number) => void;
+    onHistorySelectCurrent?: () => void;
     onManualSnapshot?: () => void;
     dataTableRefs?: DataTableRef[];
     onDataTableRefsChange?: (refs: DataTableRef[]) => void;

package/package/components/raw_apps/RunnableRow.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">import { Badge, Button } from '../common';
+import { Ellipsis, Pencil } from 'lucide-svelte';
+import DropdownV2 from '../DropdownV2.svelte';
+import { twMerge } from 'tailwind-merge';
+import TextInput from '../text_input/TextInput.svelte';
+import { tick } from 'svelte';
+let { id, runnable, isSelected, isEditing, onSelect, onDelete, onRename, onRequestEdit, onCancelEdit } = $props();
+let dropdownOpen = $state(false);
+let editValue = $state(id);
+let textInputElement = $state();
+function finishEdit() {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== id) {
+        onRename(trimmed);
+    }
+    else {
+        onCancelEdit();
+    }
+}
+function handleInputKeydown(e) {
+    if (e.key === 'Enter') {
+        finishEdit();
+    }
+    else if (e.key === 'Escape') {
+        editValue = id;
+        onCancelEdit();
+    }
+}
+$effect(() => {
+    if (isEditing && textInputElement) {
+        editValue = id;
+        tick().then(() => {
+            textInputElement?.focus();
+            textInputElement?.select();
+        });
+    }
+});
+</script>
+
+{#if isEditing}
+	<div
+		class="w-full flex items-center gap-1 h-6 rounded-md px-1
+		{isSelected ? 'bg-surface-accent-selected text-accent' : ''}"
+	>
+		<TextInput
+			bind:this={textInputElement}
+			bind:value={editValue}
+			inputProps={{
+				onkeydown: handleInputKeydown,
+				onblur: () => finishEdit(),
+				type: 'text'
+			}}
+			size="xs"
+		/>
+	</div>
+{:else}
+	<button
+		{id}
+		class="relative w-full gap-1 flex items-center h-6 rounded-md px-1 group
+		{isSelected ? 'bg-surface-accent-selected text-accent' : 'hover:bg-surface-hover'}"
+		onclick={onSelect}
+	>
+		<Badge color="indigo" class={isSelected ? 'bg-surface-tertiary' : ''}>{id}</Badge>
+		<span class="text-xs truncate font-normal pr-6">{runnable?.name}</span>
+		<DropdownV2
+			items={[
+				{
+					displayName: 'Rename',
+					icon: Pencil,
+					action: () => onRequestEdit()
+				},
+				{
+					displayName: 'Delete',
+					action: onDelete,
+					type: 'delete'
+				}
+			]}
+			class={twMerge(
+				'absolute -translate-y-1/2 top-1/2 right-1 hidden group-hover:block',
+				dropdownOpen ? 'block' : ''
+			)}
+			bind:open={dropdownOpen}
+		>
+			{#snippet buttonReplacement()}
+				<Button
+					iconOnly
+					unifiedSize="xs"
+					variant="subtle"
+					startIcon={{ icon: Ellipsis }}
+					nonCaptureEvent
+				/>
+			{/snippet}
+		</DropdownV2>
+	</button>
+{/if}

package/package/components/raw_apps/RunnableRow.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Runnable } from '../apps/inputType';
+interface Props {
+    id: string;
+    runnable: Runnable;
+    isSelected: boolean;
+    isEditing: boolean;
+    onSelect: () => void;
+    onDelete: () => void;
+    onRename: (newId: string) => void;
+    onRequestEdit: () => void;
+    onCancelEdit: () => void;
+}
+declare const RunnableRow: import("svelte").Component<Props, {}, "">;
+type RunnableRow = ReturnType<typeof RunnableRow>;
+export default RunnableRow;

package/package/components/raw_apps/datatableUtils.svelte.js

@@ -36,7 +36,7 @@ export function createSchemasResource(getDatatable) {
         let dbSchema = schemas[resourcePath];
         if (!dbSchema) {
             try {
-                await getDbSchemas('postgresql', resourcePath, workspace, schemas, (msg) => console.error('Schema error:', msg));
+                schemas[resourcePath] = await getDbSchemas('postgresql', resourcePath, workspace, (msg) => console.error('Schema error:', msg));
                 dbSchema = get(dbSchemas)[resourcePath];
             }
             catch (e) {

package/package/components/raw_apps/utils.d.ts

@@ -10,6 +10,6 @@ export type Runnable = RunnableWithInlineScript | undefined;
 export type RawApp = {
     files: string[];
 };
-export declare function htmlContent(workspace: string, secret: string | undefined, ctx: any): string;
+export declare function htmlContent(workspace: string, secret: string | undefined, ctx: any, baseUrl?: string, initialHash?: string): string;
 export declare function genWmillTs(runnables: Record<string, Runnable>): string;
 export {};

package/package/components/raw_apps/utils.js

@@ -1,23 +1,67 @@
 import { schemaToTsType } from '../../schema';
 import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
-export function htmlContent(workspace, secret, ctx) {
-    return `
-        <!DOCTYPE html>
-        <html>
-            <head>
-                <meta charset="UTF-8" />
-                <title>App Preview</title>
-                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${secret}.css" />
-				<script>
-					window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'}
-				</script>
-            </head>
-            <body>
-                <div id="root"></div>
-                <script src="/api/w/${workspace}/apps/get_data/v/${secret}.js"></script>
-            </body>
-        </html>
-    `;
+export function htmlContent(workspace, secret, ctx, baseUrl = '', initialHash = '') {
+    return `<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>App Preview</title>
+	<link rel="stylesheet" href="${baseUrl}/api/w/${workspace}/apps_u/get_data/v/${secret}.css" />
+	<script>
+		window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'};
+
+		// Sync hash with parent window for shareable URLs
+		(function() {
+			// Set initial hash from parent URL
+			var initialHash = ${JSON.stringify(initialHash)};
+			if (initialHash && initialHash !== '#' && !window.location.hash) {
+				history.replaceState(null, '', initialHash);
+			}
+
+			// Notify parent when hash changes
+			function notifyParent() {
+				var hash = window.location.hash;
+				console.log('[HashSync] notifyParent called, hash:', hash);
+				if (window.parent !== window) {
+					window.parent.postMessage({
+						type: 'windmill:hashchange',
+						hash: hash
+					}, '*');
+				}
+			}
+
+			// Listen for hash changes
+			window.addEventListener('hashchange', function() {
+				console.log('[HashSync] hashchange event');
+				notifyParent();
+			});
+
+			// Also notify on pushState/replaceState
+			var originalPushState = history.pushState;
+			var originalReplaceState = history.replaceState;
+
+			history.pushState = function() {
+				console.log('[HashSync] pushState called with:', arguments[2]);
+				originalPushState.apply(this, arguments);
+				notifyParent();
+			};
+
+			history.replaceState = function() {
+				console.log('[HashSync] replaceState called with:', arguments[2]);
+				originalReplaceState.apply(this, arguments);
+				notifyParent();
+			};
+
+			// Notify parent of initial hash after load
+			setTimeout(notifyParent, 0);
+		})();
+	</script>
+</head>
+<body>
+	<div id="root"></div>
+	<script src="${baseUrl}/api/w/${workspace}/apps_u/get_data/v/${secret}.js"></script>
+</body>
+</html>`;
 }
 function removeStaticFields(schema, fields) {
     const staticFields = Object.keys(fields).filter((k) => fields[k].type == 'static');
@@ -82,5 +126,19 @@ export declare function waitJob(id: string): Promise<Job>;
  * @param id
  */
 export declare function getJob(id: string): Promise<Job>;
+
+export type StreamUpdate = {
+  new_result_stream?: string;
+  stream_offset?: number;
+};
+
+/**
+ * Stream job results using SSE. Calls onUpdate for each stream update,
+ * and resolves with the final result when the job completes.
+ * @param id - The job ID to stream
+ * @param onUpdate - Optional callback for stream updates with new_result_stream data
+ * @returns Promise that resolves with the final job result
+ */
+export declare function streamJob(id: string, onUpdate?: (data: StreamUpdate) => void): Promise<any>;
 `;
 }

package/package/components/resources/resourcesFilter.d.ts

@@ -0,0 +1,70 @@
+import { Boxes, FileCode, FileText, FolderIcon, Braces, Users } from 'lucide-svelte';
+export declare function buildResourcesFilterSchema({ paths, resourceTypes, owners, showUserFoldersFilter, userFoldersLabel }: {
+    paths: string[];
+    resourceTypes: string[];
+    owners: string[];
+    showUserFoldersFilter?: boolean;
+    userFoldersLabel?: string;
+}): {
+    user_folders_only?: {
+        type: "boolean";
+        label: string;
+        icon: typeof Users;
+        description: string;
+    } | undefined;
+    resource_type: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowNegative: false;
+        allowMultiple: true;
+        label: string;
+        icon: typeof Boxes;
+        description: string;
+    };
+    owner: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowNegative: false;
+        allowMultiple: false;
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    path: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowNegative: true;
+        allowMultiple: true;
+        label: string;
+        icon: typeof FileCode;
+        description: string;
+    };
+    path_start: {
+        type: "string";
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    description: {
+        type: "string";
+        label: string;
+        icon: typeof FileText;
+        description: string;
+    };
+    value: {
+        type: "string";
+        format: "json";
+        label: string;
+        icon: typeof Braces;
+        description: string;
+    };
+};