windmill-components 1.623.1 → 1.642.0

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';
@@ -13,28 +13,17 @@ import DarkModeObserver from '../DarkModeObserver.svelte';
 import RawAppSidebar from './RawAppSidebar.svelte';
 import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
-import { onMount } from 'svelte';
+import { onMount, untrack } 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';
 import { parseDataTableRef, formatDataTableRef, DEFAULT_DATA } from './dataTableRefUtils';
-let { initFiles, initRunnables, initData, newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
+let { files = $bindable({}), runnables = $bindable({}), data = $bindable(DEFAULT_DATA), newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
 export const version = undefined;
-let runnables = $state(initRunnables);
-// Data configuration with tables and creation policy
-let data = $state(initData ?? DEFAULT_DATA);
 // Convert to object format for child components
 let dataTableRefsObjects = $derived(data.tables.map(parseDataTableRef));
-let initRunnablesContent = Object.fromEntries(Object.entries(initRunnables).map(([key, runnable]) => {
-    if (isRunnableByName(runnable)) {
-        return [key, runnable?.inlineScript?.content ?? ''];
-    }
-    return [key, ''];
-}));
-let files = $state(initFiles);
 // Initialize history manager
 const historyManager = new RawAppHistoryManager({
     maxEntries: 50,
@@ -58,7 +47,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
@@ -112,8 +101,21 @@ function convertToBackendRunnable(key, runnable) {
     return backendRunnable;
 }
 let iframeLoaded = $state(false); // @hmr:keep
+let suppressSetActiveDocument = false;
 function populateFiles() {
-    setFilesInIframe(initFiles);
+    if (files) {
+        // Suppress iframe's automatic setActiveDocument for a short window
+        // after sending files, to prevent it from resetting to App.tsx.
+        suppressSetActiveDocument = true;
+        setTimeout(() => { suppressSetActiveDocument = false; }, 500);
+        const doc = untrack(() => selectedDocument);
+        if (doc) {
+            setFilesAndSelectInIframe(files, doc);
+        }
+        else {
+            setFilesInIframe(files);
+        }
+    }
 }
 function setFilesInIframe(newFiles) {
     const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
@@ -122,6 +124,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 +215,6 @@ $effect(() => {
                 ...$state.snapshot(files ?? {}),
                 '/wmill.d.ts': genWmillTs(runnables)
             };
-            console.log('result', frontendFiles);
             return frontendFiles;
         },
         setFrontendFile: (path, content) => {
@@ -214,10 +223,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 +305,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 +348,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 +462,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 {};
+    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 +510,41 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
-        selectedDocument = e.data.path;
+        if (suppressSetActiveDocument)
+            return;
+        // 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;
@@ -465,19 +566,43 @@ $effect(() => {
     });
 });
 $effect(() => {
-    iframe && iframeLoaded && initFiles && populateFiles();
+    iframe && iframeLoaded && files && populateFiles();
 });
 $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 +620,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 +636,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 +696,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 +732,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)
 				}}
@@ -625,8 +761,26 @@ function handleKeydown(e) {
 						<RawAppInlineScriptsPanel
 							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/RawAppEditor.svelte.d.ts

@@ -3,10 +3,10 @@ import DiffDrawer from '../DiffDrawer.svelte';
 import { type Runnable } from './utils';
 import { type RawAppData } from './dataTableRefUtils';
 interface Props {
-    initFiles: Record<string, string>;
-    initRunnables: Record<string, Runnable>;
+    files?: Record<string, string>;
+    runnables?: Record<string, Runnable>;
     /** Data configuration including tables and creation policy */
-    initData: RawAppData | undefined;
+    data?: RawAppData;
     newApp: boolean;
     policy: Policy;
     summary?: string;
@@ -43,6 +43,6 @@ declare const RawAppEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     version: number | undefined;
-}, "summary" | "savedApp">;
+}, "summary" | "files" | "data" | "runnables" | "savedApp">;
 type RawAppEditor = InstanceType<typeof RawAppEditor>;
 export default RawAppEditor;