windmill-components 1.613.5 → 1.623.1

package/package/components/raw_apps/RawAppDataTableList.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Plus, Database, Trash2, Table2, Star } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import DefaultDatabaseSelector from './DefaultDatabaseSelector.svelte';
-import { Button } from '../common';
 let { dataTableRefs = [], defaultDatatable = undefined, defaultSchema = undefined, onAdd, onRemove, onSelect, onDefaultChange, selectedIndex = undefined, standalone = false, hideDefaultSelector = false } = $props();
 const groupedRefs = $derived.by(() => {
     const groups = new Map();
@@ -45,7 +44,7 @@ function sortSchemaEntries(entries, datatableName) {
 </script>
 
 {#snippet actionButtons()}
-	<div class="flex items-center gap-1">
+	<div class="flex items-center">
 		<!-- Settings popover for default database/schema -->
 		{#if !hideDefaultSelector}
 			<DefaultDatabaseSelector
@@ -56,16 +55,14 @@ function sortSchemaEntries(entries, datatableName) {
 		{/if}
 
 		<!-- Add datatable button -->
-		<Button
-			onClick={() => onAdd?.()}
+		<button
+			onclick={() => onAdd?.()}
+			class="pt-1.5 pb-0.5 px-1 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
 			title="Add datatable reference"
-			unifiedSize="xs"
-			variant="subtle"
-			btnClasses="px-1 gap-0.5"
 		>
-			<Plus size={12} />
-			<Database size={12} />
-		</Button>
+			<Plus size={12} class="text-secondary" />
+			<Database size={12} class="text-tertiary" />
+		</button>
 	</div>
 {/snippet}
 
@@ -141,7 +138,7 @@ function sortSchemaEntries(entries, datatableName) {
 {#if standalone}
 	<div class="flex flex-col gap-2">
 		<div class="flex items-center justify-between">
-			<span class="text-xs text-emphasis font-semibold">Existing tables to use</span>
+			<span class="text-xs text-tertiary">Existing tables to use</span>
 			{@render actionButtons()}
 		</div>
 		{@render tableList()}
@@ -149,7 +146,7 @@ function sortSchemaEntries(entries, datatableName) {
 {:else}
 	<PanelSection
 		fullHeight={false}
-		size="sm"
+		size="lg"
 		title="data"
 		id="app-editor-data-panel"
 		tooltip="Data tables to use in the app. Adding some here does not change the behavior of the app, since they can be used in code directly regardless. But it allows AI to always keep their schema in context as well as allowing quick access and clear view of the app's data layer."

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 { WorkspaceService } from '../../gen';
+import {} from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { encodeState } from '../../utils';
 import { deepEqual } from 'fast-equals';
@@ -16,6 +16,7 @@ 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';
@@ -57,7 +58,7 @@ function saveFrontendDraft() {
     }, 500);
 }
 let iframe = $state(undefined);
-let sidebarPanelSize = $state(15);
+let sidebarPanelSize = $state(10);
 let jobs = $state([]);
 let jobsById = $state({});
 // Helper function to convert internal Runnable to BackendRunnable format
@@ -121,14 +122,6 @@ 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',
@@ -212,6 +205,7 @@ $effect(() => {
                 ...$state.snapshot(files ?? {}),
                 '/wmill.d.ts': genWmillTs(runnables)
             };
+            console.log('result', frontendFiles);
             return frontendFiles;
         },
         setFrontendFile: (path, content) => {
@@ -220,9 +214,10 @@ $effect(() => {
                 files = {};
             }
             files[path] = content;
+            setFilesInIframe(files);
             selectedDocument = path;
-            // Use combined setFilesAndSelect to avoid race condition
-            setFilesAndSelectInIframe(files, path);
+            handleSelectFile(path);
+            console.log('files after setting', files);
             return lint();
         },
         deleteFrontendFile: (path) => {
@@ -302,37 +297,24 @@ $effect(() => {
             };
         },
         getSelectedContext: () => {
-            const baseContext = {
-                inspectorElement: inspectorElement,
-                selectionExcluded: selectionExcludedFromPrompt,
-                toggleSelectionExcluded: toggleSelectionExcluded,
-                clearInspector: clearInspectorSelection,
-                clearRunnable: handleClearRunnable,
-                codeSelection: codeSelection,
-                clearCodeSelection: () => {
-                    codeSelection = undefined;
-                }
-            };
             if (selectedRunnable) {
-                const runnable = convertToBackendRunnable(selectedRunnable, runnables[selectedRunnable]);
+                console.log('selectedRunnable', selectedRunnable);
                 return {
                     type: 'backend',
-                    backendKey: selectedRunnable,
-                    backendRunnable: runnable,
-                    ...baseContext
+                    content: selectedRunnable ?? ''
                 };
             }
             if (selectedDocument) {
+                console.log('selectedDocument', selectedDocument);
                 return {
                     type: 'frontend',
-                    frontendPath: selectedDocument,
-                    frontendContent: files?.[selectedDocument],
-                    ...baseContext
+                    content: selectedDocument ?? ''
                 };
             }
+            console.log('no selection');
             return {
                 type: 'none',
-                ...baseContext
+                content: ''
             };
         },
         snapshot: () => {
@@ -345,71 +327,52 @@ $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 = [];
-            for (const schema of allSchemas) {
-                if (!whitelistedDatatables.has(schema.datatable_name)) {
-                    continue;
+            // 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;
+                    }
                 }
-                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
-                    });
+                if (!schema?.schema)
                     continue;
-                }
-                // 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)
+                // 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)
                         continue;
-                    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;
+                    const columns = {};
+                    for (const [colName, colDef] of Object.entries(tableSchema)) {
+                        columns[colName] = {
+                            type: colDef.type || 'unknown',
+                            required: colDef.required || false
+                        };
                     }
+                    tables.push({
+                        schema: schemaKey,
+                        table: tableKey,
+                        columns
+                    });
                 }
                 results.push({
-                    datatable_name: schema.datatable_name,
-                    schemas: filteredSchemas,
-                    error: schema.error
+                    name: datatableName,
+                    tables
                 });
             }
             return results;
@@ -459,44 +422,17 @@ $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, normalizedFiles)) {
-            files = normalizedFiles;
+        if (!deepEqual(files, e.data.files)) {
+            files = e.data.files;
             historyManager.markPendingChanges();
         }
     }
@@ -507,39 +443,7 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
-        // 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
-            };
-        }
+        selectedDocument = e.data.path;
     }
 }
 let getBundleResolve = undefined;
@@ -566,38 +470,14 @@ $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) {
@@ -615,10 +495,9 @@ function handleRedo() {
     }
 }
 function handleHistorySelect(id) {
-    // 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);
+    // Create a snapshot if we have pending changes before navigating
+    if (historyManager.needsSnapshotBeforeNav) {
+        historyManager.manualSnapshot(files ?? {}, runnables, summary, data);
     }
     const entry = historyManager.selectEntry(id);
     if (entry) {
@@ -631,16 +510,15 @@ function applyEntry(entry) {
         runnables = structuredClone($state.snapshot(entry.runnables));
         summary = entry.summary;
         data = structuredClone($state.snapshot(entry.data));
-        // If there's a selected document that exists in the new files, use the combined message
+        setFilesInIframe(entry.files);
+        populateRunnables();
+        // Re-select the current document if it exists in the new files
         if (selectedDocument && entry.files[selectedDocument] !== undefined) {
-            // Use combined setFilesAndSelect message to avoid race condition
-            setFilesAndSelectInIframe(entry.files, selectedDocument);
+            iframe?.contentWindow?.postMessage({
+                type: 'selectFile',
+                path: selectedDocument
+            }, '*');
         }
-        else {
-            // Otherwise just set files normally
-            setFilesInIframe(entry.files);
-        }
-        populateRunnables();
     }
     catch (error) {
         console.error('Failed to apply entry:', error);
@@ -691,8 +569,8 @@ function handleKeydown(e) {
 		onRedo={handleRedo}
 	/>
 
-	<Splitpanes id="o2" class="grow min-h-0">
-		<Pane bind:size={sidebarPanelSize} maxSize={20} class="h-full overflow-y-auto">
+	<Splitpanes id="o2" class="grow">
+		<Pane bind:size={sidebarPanelSize} maxSize={20}>
 			<RawAppSidebar
 				bind:files={
 					() => files,
@@ -727,15 +605,6 @@ 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)
 				}}
@@ -757,26 +626,7 @@ function handleKeydown(e) {
 							appPath={path}
 							{selectedRunnable}
 							{initRunnablesContent}
-							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
-									}
-								}
-							}}
+							{runnables}
 						/>
 					</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, EllipsisVertical, FileJson, FileUp, History, Pen, Save, WandSparkles } from 'lucide-svelte';
+import { Bug, DiffIcon, FileJson, FileUp, History, MoreVertical, 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,9 +54,6 @@ 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();
@@ -155,9 +152,6 @@ 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,
@@ -499,26 +493,19 @@ $effect(() => {
 						startIcon={{ icon: Save }}
 						disabled={pathError != '' || app == undefined}
 						on:click={() => saveInitialDraft()}
-						unifiedSize="md"
-						variant="accent"
 					>
 						Save initial draft
 					</Button>
 				</div>
 			{/snippet}
-			<AppEditorHeaderDeployInitialDraft
-				bind:summary
-				bind:appPath
-				bind:pathError
-				bind:newEditedPath
-			/>
+			<AppEditorHeaderDeployInitialDraft {summary} {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-2">
+			<div class="flex flex-row gap-4">
 				<Button
 					variant="default"
 					disabled={!savedApp || savedApp.draft_only}
@@ -561,8 +548,6 @@ $effect(() => {
 					</div>
 				</Button>
 				<Button
-					variant="accent"
-					unifiedSize="md"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != '' || app == undefined}
 					on:click={() => {
@@ -591,6 +576,7 @@ $effect(() => {
 			bind:customPathError
 			bind:pathError
 			bind:newEditedPath
+			hideSecretUrl={true}
 		/>
 	</DrawerContent>
 </Drawer>
@@ -616,7 +602,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 shrink-0"
+	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"
 >
 	<div class="flex flex-row gap-2 items-center">
 		<Summary bind:value={summary} />
@@ -668,13 +654,11 @@ $effect(() => {
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<DropdownV2 items={moreItems} class="h-auto">
 			{#snippet buttonReplacement()}
-				<Button
-					nonCaptureEvent
-					unifiedSize="md"
-					variant="subtle"
-					startIcon={{ icon: EllipsisVertical }}
-					iconOnly
-				></Button>
+				<Button nonCaptureEvent size="xs" color="light">
+					<div class="flex flex-row items-center">
+						<MoreVertical size={14} />
+					</div>
+				</Button>
 			{/snippet}
 		</DropdownV2>
 
@@ -684,8 +668,8 @@ $effect(() => {
 					jobsDrawerOpen = true
 				}}
 				color="light"
-				unifiedSize="md"
-				variant="default"
+				size="xs"
+				variant="border"
 				btnClasses="relative"
 			>
 				<div class="flex flex-row gap-1 items-center">
@@ -700,7 +684,8 @@ $effect(() => {
 		</div>
 		<AppExportButton bind:this={appExport} />
 		<Button
-			unifiedSize="md"
+			unifiedSized="sm"
+			color="light"
 			variant="default"
 			onClick={() => aiChatManager.toggleOpen()}
 			startIcon={{ icon: WandSparkles }}
@@ -713,8 +698,7 @@ $effect(() => {
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={() => saveDraft()}
-			unifiedSize="md"
-			variant="default"
+			size="xs"
 			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
 		>
@@ -724,8 +708,7 @@ $effect(() => {
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={save}
-			unifiedSize="md"
-			variant="accent"
+			size="xs"
 			dropdownItems={appPath != ''
 				? () => [
 						{