windmill-components 1.596.1 → 1.612.2

package/package/components/raw_apps/RawAppEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte';
 import RawAppEditorHeader from './RawAppEditorHeader.svelte';
-import {} from '../../gen';
+import { WorkspaceService } from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { encodeState } from '../../utils';
 import { deepEqual } from 'fast-equals';
@@ -16,7 +16,6 @@ import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { onMount } from 'svelte';
 import { rawAppLintStore } from './lintStore';
 import { dbSchemas } from '../../stores';
-import { getDbSchemas } from '../apps/components/display/dbtable/metadata';
 import { runScriptAndPollResult } from '../jobs/utils';
 import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
 import { sendUserToast } from '../../utils';
@@ -58,7 +57,7 @@ function saveFrontendDraft() {
     }, 500);
 }
 let iframe = $state(undefined);
-let sidebarPanelSize = $state(10);
+let sidebarPanelSize = $state(15);
 let jobs = $state([]);
 let jobsById = $state({});
 // Helper function to convert internal Runnable to BackendRunnable format
@@ -122,6 +121,14 @@ function setFilesInIframe(newFiles) {
         files: files
     }, '*');
 }
+function setFilesAndSelectInIframe(newFiles, pathToSelect) {
+    const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
+    iframe?.contentWindow?.postMessage({
+        type: 'setFilesAndSelect',
+        files: files,
+        pathToSelect: pathToSelect
+    }, '*');
+}
 function populateRunnables() {
     iframe?.contentWindow?.postMessage({
         type: 'setRunnables',
@@ -205,7 +212,6 @@ $effect(() => {
                 ...$state.snapshot(files ?? {}),
                 '/wmill.d.ts': genWmillTs(runnables)
             };
-            console.log('result', frontendFiles);
             return frontendFiles;
         },
         setFrontendFile: (path, content) => {
@@ -214,10 +220,9 @@ $effect(() => {
                 files = {};
             }
             files[path] = content;
-            setFilesInIframe(files);
             selectedDocument = path;
-            handleSelectFile(path);
-            console.log('files after setting', files);
+            // Use combined setFilesAndSelect to avoid race condition
+            setFilesAndSelectInIframe(files, path);
             return lint();
         },
         deleteFrontendFile: (path) => {
@@ -297,24 +302,37 @@ $effect(() => {
             };
         },
         getSelectedContext: () => {
+            const baseContext = {
+                inspectorElement: inspectorElement,
+                selectionExcluded: selectionExcludedFromPrompt,
+                toggleSelectionExcluded: toggleSelectionExcluded,
+                clearInspector: clearInspectorSelection,
+                clearRunnable: handleClearRunnable,
+                codeSelection: codeSelection,
+                clearCodeSelection: () => {
+                    codeSelection = undefined;
+                }
+            };
             if (selectedRunnable) {
-                console.log('selectedRunnable', selectedRunnable);
+                const runnable = convertToBackendRunnable(selectedRunnable, runnables[selectedRunnable]);
                 return {
                     type: 'backend',
-                    content: selectedRunnable ?? ''
+                    backendKey: selectedRunnable,
+                    backendRunnable: runnable,
+                    ...baseContext
                 };
             }
             if (selectedDocument) {
-                console.log('selectedDocument', selectedDocument);
                 return {
                     type: 'frontend',
-                    content: selectedDocument ?? ''
+                    frontendPath: selectedDocument,
+                    frontendContent: files?.[selectedDocument],
+                    ...baseContext
                 };
             }
-            console.log('no selection');
             return {
                 type: 'none',
-                content: ''
+                ...baseContext
             };
         },
         snapshot: () => {
@@ -327,52 +345,71 @@ $effect(() => {
             handleHistorySelect(id);
         },
         getDatatables: async () => {
+            if (!$workspaceStore) {
+                return [];
+            }
+            // Get all datatable schemas from the backend
+            const allSchemas = await WorkspaceService.listDataTableSchemas({
+                workspace: $workspaceStore
+            });
+            // Get unique datatable names from dataTableRefs (the whitelisted tables)
+            const whitelistedDatatables = new Set(dataTableRefsObjects.map((ref) => ref.datatable));
+            // If no datatables are configured, return all available datatables
+            // This allows users to see all datatables in the @ context menu
+            if (whitelistedDatatables.size === 0) {
+                return allSchemas;
+            }
+            // Build a map of whitelisted tables per datatable: datatable -> schema -> Set<table>
+            const whitelistedTables = new Map();
+            for (const ref of dataTableRefsObjects) {
+                if (!ref.table)
+                    continue;
+                if (!whitelistedTables.has(ref.datatable)) {
+                    whitelistedTables.set(ref.datatable, new Map());
+                }
+                const schemaKey = ref.schema || 'public';
+                const schemaMap = whitelistedTables.get(ref.datatable);
+                if (!schemaMap.has(schemaKey)) {
+                    schemaMap.set(schemaKey, new Set());
+                }
+                schemaMap.get(schemaKey).add(ref.table);
+            }
+            // Filter schemas to only include whitelisted datatables and tables
             const results = [];
-            // Get unique datatable names from dataTableRefs
-            const datatableNames = [...new Set(dataTableRefsObjects.map((ref) => ref.datatable))];
-            for (const datatableName of datatableNames) {
-                const resourcePath = `datatable://${datatableName}`;
-                // Get or load the schema
-                let schema = $dbSchemas[resourcePath];
-                if (!schema) {
-                    try {
-                        await getDbSchemas('postgresql', resourcePath, $workspaceStore, $dbSchemas, (msg) => console.error('Schema error:', msg));
-                        schema = $dbSchemas[resourcePath];
-                    }
-                    catch (e) {
-                        console.error(`Failed to load schema for ${datatableName}:`, e);
-                        continue;
-                    }
+            for (const schema of allSchemas) {
+                if (!whitelistedDatatables.has(schema.datatable_name)) {
+                    continue;
                 }
-                if (!schema?.schema)
+                const allowedTables = whitelistedTables.get(schema.datatable_name);
+                if (!allowedTables) {
+                    // Include the datatable but with empty schemas
+                    results.push({
+                        datatable_name: schema.datatable_name,
+                        schemas: {},
+                        error: schema.error
+                    });
                     continue;
-                // Get the tables for this datatable from the refs
-                const refsForDatatable = dataTableRefsObjects.filter((ref) => ref.datatable === datatableName);
-                const tables = [];
-                for (const ref of refsForDatatable) {
-                    const schemaKey = ref.schema || 'public';
-                    const tableKey = ref.table;
-                    if (!tableKey)
-                        continue; // Skip if no table specified
-                    const tableSchema = schema.schema[schemaKey]?.[tableKey];
-                    if (!tableSchema)
+                }
+                // Filter schemas to only include whitelisted tables
+                const filteredSchemas = {};
+                for (const [schemaName, tables] of Object.entries(schema.schemas)) {
+                    const allowedTablesInSchema = allowedTables.get(schemaName);
+                    if (!allowedTablesInSchema)
                         continue;
-                    const columns = {};
-                    for (const [colName, colDef] of Object.entries(tableSchema)) {
-                        columns[colName] = {
-                            type: colDef.type || 'unknown',
-                            required: colDef.required || false
-                        };
+                    const filteredTables = {};
+                    for (const [tableName, columns] of Object.entries(tables)) {
+                        if (allowedTablesInSchema.has(tableName)) {
+                            filteredTables[tableName] = columns;
+                        }
+                    }
+                    if (Object.keys(filteredTables).length > 0) {
+                        filteredSchemas[schemaName] = filteredTables;
                     }
-                    tables.push({
-                        schema: schemaKey,
-                        table: tableKey,
-                        columns
-                    });
                 }
                 results.push({
-                    name: datatableName,
-                    tables
+                    datatable_name: schema.datatable_name,
+                    schemas: filteredSchemas,
+                    error: schema.error
                 });
             }
             return results;
@@ -422,17 +459,44 @@ $effect(() => {
                 const errorMsg = e instanceof Error ? e.message : String(e);
                 return { success: false, error: errorMsg };
             }
+        },
+        addTableToWhitelist: (datatableName, schemaName, tableName) => {
+            // Format the table reference
+            const newRef = formatDataTableRef({
+                datatable: datatableName,
+                schema: schemaName === 'public' ? undefined : schemaName,
+                table: tableName
+            });
+            // Only add if not already present
+            if (!data.tables.includes(newRef)) {
+                data.tables = [...data.tables, newRef];
+                saveFrontendDraft();
+            }
         }
     });
 });
 let selectedRunnable = $state(undefined);
 let selectedDocument = $state(undefined);
+let inspectorElement = $state(undefined);
+let selectionExcludedFromPrompt = $state(false);
+let codeSelection = $state(undefined);
+function toggleSelectionExcluded() {
+    selectionExcludedFromPrompt = !selectionExcludedFromPrompt;
+}
 let modules = $state({});
+// Normalize Windows-style path separators to Linux-style
+function normalizeFilePaths(filesObj) {
+    if (!filesObj)
+        return filesObj;
+    return Object.fromEntries(Object.entries(filesObj).map(([path, content]) => [path.replace(/\\/g, '/'), content]));
+}
 function listener(e) {
     if (e.data.type === 'setFiles') {
+        // Normalize Windows-style path separators to Linux-style
+        const normalizedFiles = normalizeFilePaths(e.data.files);
         // Only mark pending changes if files actually changed (ignore echo from setFilesInIframe)
-        if (!deepEqual(files, e.data.files)) {
-            files = e.data.files;
+        if (!deepEqual(files, normalizedFiles)) {
+            files = normalizedFiles;
             historyManager.markPendingChanges();
         }
     }
@@ -443,7 +507,39 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
-        selectedDocument = e.data.path;
+        // Normalize Windows-style path separators to Linux-style
+        selectedDocument = e.data.path?.replace(/\\/g, '/');
+    }
+    else if (e.data.type === 'inspectorSelect') {
+        // Handle inspector element selection from the iframe preview
+        inspectorElement = e.data.element;
+    }
+    else if (e.data.type === 'inspectorClear') {
+        // Clear the inspector element when user dismisses the selection
+        inspectorElement = undefined;
+    }
+    else if (e.data.type === 'editorSelection') {
+        // Handle code selection from the iframe editor
+        const selection = e.data.selection;
+        if (selection === null) {
+            // Selection cleared
+            codeSelection = undefined;
+        }
+        else {
+            // Normalize path
+            const normalizedPath = selection.path?.replace(/\\/g, '/');
+            codeSelection = {
+                type: 'app_code_selection',
+                source: normalizedPath,
+                sourceType: 'frontend',
+                title: `${normalizedPath}:L${selection.range.startLine}-L${selection.range.endLine}`,
+                content: selection.content,
+                startLine: selection.range.startLine,
+                endLine: selection.range.endLine,
+                startColumn: selection.range.startColumn,
+                endColumn: selection.range.endColumn
+            };
+        }
     }
 }
 let getBundleResolve = undefined;
@@ -470,14 +566,38 @@ $effect(() => {
 $effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
 });
+function clearInspectorSelection() {
+    inspectorElement = undefined;
+    iframe?.contentWindow?.postMessage({ type: 'inspectorClear' }, '*');
+}
 function handleSelectFile(path) {
     console.log('event Select file:', path);
     selectedRunnable = undefined;
+    // Inspector is cleared by the $effect watching selection changes
     iframe?.contentWindow?.postMessage({
         type: 'selectFile',
         path: path
     }, '*');
 }
+function handleClearRunnable() {
+    selectedRunnable = undefined;
+}
+// Track previous values for change detection
+let prevSelectedRunnable = undefined;
+let prevSelectedDocument = undefined;
+// Clear inspector and reset exclusion when selection changes
+$effect(() => {
+    if (selectedRunnable !== prevSelectedRunnable || selectedDocument !== prevSelectedDocument) {
+        // Only clear if we're actually switching to something different
+        if (prevSelectedRunnable !== undefined || prevSelectedDocument !== undefined) {
+            clearInspectorSelection();
+        }
+        // Reset exclusion when switching files/runnables
+        selectionExcludedFromPrompt = false;
+        prevSelectedRunnable = selectedRunnable;
+        prevSelectedDocument = selectedDocument;
+    }
+});
 function handleUndo() {
     // Create a snapshot if we're at the latest position with pending changes
     if (historyManager.needsSnapshotBeforeNav) {
@@ -495,9 +615,10 @@ function handleRedo() {
     }
 }
 function handleHistorySelect(id) {
-    // Create a snapshot if we have pending changes before navigating
-    if (historyManager.needsSnapshotBeforeNav) {
-        historyManager.manualSnapshot(files ?? {}, runnables, summary, data);
+    // Save current state temporarily (not as a snapshot) when navigating to history
+    // Only if we're currently at the "current" state (not already viewing history)
+    if (historyManager.selectedEntryId === undefined) {
+        historyManager.saveTemporaryCurrentState(files ?? {}, runnables, summary, data);
     }
     const entry = historyManager.selectEntry(id);
     if (entry) {
@@ -510,15 +631,16 @@ function applyEntry(entry) {
         runnables = structuredClone($state.snapshot(entry.runnables));
         summary = entry.summary;
         data = structuredClone($state.snapshot(entry.data));
-        setFilesInIframe(entry.files);
-        populateRunnables();
-        // Re-select the current document if it exists in the new files
+        // If there's a selected document that exists in the new files, use the combined message
         if (selectedDocument && entry.files[selectedDocument] !== undefined) {
-            iframe?.contentWindow?.postMessage({
-                type: 'selectFile',
-                path: selectedDocument
-            }, '*');
+            // Use combined setFilesAndSelect message to avoid race condition
+            setFilesAndSelectInIframe(entry.files, selectedDocument);
         }
+        else {
+            // Otherwise just set files normally
+            setFilesInIframe(entry.files);
+        }
+        populateRunnables();
     }
     catch (error) {
         console.error('Failed to apply entry:', error);
@@ -569,8 +691,8 @@ function handleKeydown(e) {
 		onRedo={handleRedo}
 	/>
 
-	<Splitpanes id="o2" class="grow">
-		<Pane bind:size={sidebarPanelSize} maxSize={20}>
+	<Splitpanes id="o2" class="grow min-h-0">
+		<Pane bind:size={sidebarPanelSize} maxSize={20} class="h-full overflow-y-auto">
 			<RawAppSidebar
 				bind:files={
 					() => files,
@@ -605,6 +727,15 @@ function handleKeydown(e) {
 				{historyManager}
 				historySelectedId={historyManager.selectedEntryId}
 				onHistorySelect={handleHistorySelect}
+				onHistorySelectCurrent={() => {
+					// Restore the temporary current state if it exists
+					const tempState = historyManager.getAndClearTemporaryState()
+					if (tempState) {
+						applyEntry(tempState)
+					}
+					// Clear selection to indicate we're at current state
+					historyManager.clearSelection()
+				}}
 				onManualSnapshot={() => {
 					historyManager.manualSnapshot(files ?? {}, runnables, summary, data, true)
 				}}
@@ -626,7 +757,26 @@ function handleKeydown(e) {
 							appPath={path}
 							{selectedRunnable}
 							{initRunnablesContent}
-							{runnables}
+							bind:runnables
+							onSelectionChange={(selection) => {
+								console.log('handle selection', selection)
+
+								if (selection === null) {
+									codeSelection = undefined
+								} else if (selectedRunnable) {
+									codeSelection = {
+										type: 'app_code_selection',
+										source: selectedRunnable,
+										sourceType: 'backend',
+										title: `${selectedRunnable}:L${selection.startLine}-L${selection.endLine}`,
+										content: selection.content,
+										startLine: selection.startLine,
+										endLine: selection.endLine,
+										startColumn: selection.startColumn,
+										endColumn: selection.endColumn
+									}
+								}
+							}}
 						/>
 					</div>
 				{/if}

package/package/components/raw_apps/RawAppEditorHeader.svelte

@@ -3,7 +3,7 @@ import Button from '../common/button/Button.svelte';
 import UndoRedo from '../common/button/UndoRedo.svelte';
 import { AppService, DraftService } from '../../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
-import { Bug, DiffIcon, FileJson, FileUp, History, MoreVertical, Pen, Save, WandSparkles } from 'lucide-svelte';
+import { Bug, DiffIcon, EllipsisVertical, FileJson, FileUp, History, Pen, Save, WandSparkles } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined, defaultIfEmptyString } from '../../utils';
 // import {  allItems, toStatic } from '../apps/editor/settingsPanel/utils'
@@ -54,6 +54,9 @@ async function createApp(path) {
         sendUserToast(`App hasn't been loaded yet`, true);
         return;
     }
+    if (!policy.execution_mode) {
+        policy.execution_mode = 'publisher';
+    }
     await computeTriggerables();
     try {
         const { js, css } = await getBundle();
@@ -152,6 +155,9 @@ async function updateApp(npath) {
     }
     const { js, css } = await getBundle();
     await computeTriggerables();
+    if (!policy.execution_mode) {
+        policy.execution_mode = 'publisher';
+    }
     await AppService.updateAppRaw({
         workspace: $workspaceStore,
         path: appPath,
@@ -493,19 +499,26 @@ $effect(() => {
 						startIcon={{ icon: Save }}
 						disabled={pathError != '' || app == undefined}
 						on:click={() => saveInitialDraft()}
+						unifiedSize="md"
+						variant="accent"
 					>
 						Save initial draft
 					</Button>
 				</div>
 			{/snippet}
-			<AppEditorHeaderDeployInitialDraft {summary} {appPath} bind:pathError bind:newEditedPath />
+			<AppEditorHeaderDeployInitialDraft
+				bind:summary
+				bind:appPath
+				bind:pathError
+				bind:newEditedPath
+			/>
 		</DrawerContent>
 	</Drawer>
 {/if}
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
 		{#snippet actions()}
-			<div class="flex flex-row gap-4">
+			<div class="flex flex-row gap-2">
 				<Button
 					variant="default"
 					disabled={!savedApp || savedApp.draft_only}
@@ -548,6 +561,8 @@ $effect(() => {
 					</div>
 				</Button>
 				<Button
+					variant="accent"
+					unifiedSize="md"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != '' || app == undefined}
 					on:click={() => {
@@ -576,7 +591,6 @@ $effect(() => {
 			bind:customPathError
 			bind:pathError
 			bind:newEditedPath
-			hideSecretUrl={true}
 		/>
 	</DrawerContent>
 </Drawer>
@@ -602,7 +616,7 @@ $effect(() => {
 />
 
 <div
-	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto min-h-10"
+	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto min-h-10 shrink-0"
 >
 	<div class="flex flex-row gap-2 items-center">
 		<Summary bind:value={summary} />
@@ -654,11 +668,13 @@ $effect(() => {
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<DropdownV2 items={moreItems} class="h-auto">
 			{#snippet buttonReplacement()}
-				<Button nonCaptureEvent size="xs" color="light">
-					<div class="flex flex-row items-center">
-						<MoreVertical size={14} />
-					</div>
-				</Button>
+				<Button
+					nonCaptureEvent
+					unifiedSize="md"
+					variant="subtle"
+					startIcon={{ icon: EllipsisVertical }}
+					iconOnly
+				></Button>
 			{/snippet}
 		</DropdownV2>
 
@@ -668,8 +684,8 @@ $effect(() => {
 					jobsDrawerOpen = true
 				}}
 				color="light"
-				size="xs"
-				variant="border"
+				unifiedSize="md"
+				variant="default"
 				btnClasses="relative"
 			>
 				<div class="flex flex-row gap-1 items-center">
@@ -684,8 +700,7 @@ $effect(() => {
 		</div>
 		<AppExportButton bind:this={appExport} />
 		<Button
-			unifiedSized="sm"
-			color="light"
+			unifiedSize="md"
 			variant="default"
 			onClick={() => aiChatManager.toggleOpen()}
 			startIcon={{ icon: WandSparkles }}
@@ -698,7 +713,8 @@ $effect(() => {
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={() => saveDraft()}
-			size="xs"
+			unifiedSize="md"
+			variant="default"
 			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
 		>
@@ -708,7 +724,8 @@ $effect(() => {
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={save}
-			size="xs"
+			unifiedSize="md"
+			variant="accent"
 			dropdownItems={appPath != ''
 				? () => [
 						{