windmill-components 1.677.1 → 1.687.0

package/package/components/DBManager.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import {} from '../stores';
-import { ChevronDownIcon, EditIcon, Loader2, Plus, Table2, Trash2Icon } from 'lucide-svelte';
+<script lang="ts">import { superadmin, userStore } from '../stores';
+import { ChevronDownIcon, EditIcon, Loader2, Plus, Table2, Trash2Icon, UploadIcon } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { ClearableInput, Drawer, DrawerContent } from './common';
 import { sendUserToast } from '../toast';
@@ -16,7 +16,7 @@ import { dbSupportsTransactionalDdl, diffTableEditorValues } from './apps/compon
 import { resource } from 'runed';
 import { capitalize, onlyAlphaNumAndUnderscore, pluralize } from '../utils';
 import Star from './Star.svelte';
-let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features, asset } = $props();
+let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, databaseIsEmpty, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features, asset, onImport } = $props();
 // Helper to check if a table is selected in multi-select mode
 function isTableSelected(schema, table) {
     return selectedTables.some((t) => t.schema === schema && t.table === table);
@@ -440,6 +440,34 @@ export const dbTable = () => _dbTable;
 		{#if tableKey && colDefs?.[tableKey]?.length}
 			{@const dbTableOps = dbTableOpsFactory({ colDefs: colDefs[tableKey], tableKey })}
 			<DBTable {dbTableOps} bind:this={_dbTable} />
+		{:else if databaseIsEmpty}
+			<div class="h-full w-full center-center flex-col gap-4">
+				<span class="text-hint">Database is empty</span>
+				{#if onImport}
+					<div class="flex gap-4">
+						<button
+							onclick={() => onImport('schema_only')}
+							class="hover:opacity-70 transition-opacity rounded-md border aspect-square w-52 gap-4 p-4 center-center flex-col"
+						>
+							<UploadIcon size={64} class="text-secondary" />
+							<span class="text-center font-normal text-sm text-secondary">
+								Import schema from database
+							</span>
+						</button>
+						{#if !!$userStore?.is_admin || !!$superadmin}
+							<button
+								onclick={() => onImport('schema_and_data')}
+								class="hover:opacity-70 transition-opacity rounded-md border aspect-square w-52 gap-4 p-4 center-center flex-col"
+							>
+								<UploadIcon size={64} class="text-secondary" />
+								<span class="text-center font-normal text-sm text-secondary">
+									Import schema and data from database
+								</span>
+							</button>
+						{/if}
+					</div>
+				{/if}
+			</div>
 		{/if}
 	</Pane>
 </Splitpanes>
@@ -490,7 +518,10 @@ export const dbTable = () => _dbTable;
 					computePreview={async ({ values }) => {
 						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
 							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
-							let sql = await dbSchemaOps.previewAlterSql({ values: diff, schema: selected.schemaKey })
+							let sql = await dbSchemaOps.previewAlterSql({
+								values: diff,
+								schema: selected.schemaKey
+							})
 							let alert = !dbSupportsTransactionalDdl(dbType)
 								? {
 										title: capitalize(dbType) + ' does not support transactional DDL',

package/package/components/DBManager.svelte.d.ts

@@ -14,6 +14,7 @@ type Props = {
     dbType: DbType;
     dbSchema: DBSchema;
     dbSupportsSchemas: boolean;
+    databaseIsEmpty?: boolean;
     colDefs: Record<string, ColumnDef[]> | undefined;
     dbTableOpsFactory: (params: {
         colDefs: ColumnDef[];
@@ -34,6 +35,7 @@ type Props = {
     disabledTables?: SelectedTable[];
     features?: DbFeatures;
     asset?: Asset;
+    onImport?: (mode: 'schema_and_data' | 'schema_only') => void;
 };
 declare const DBManager: import("svelte").Component<Props, {
     dbTable: () => ({

package/package/components/DBManagerContent.svelte

@@ -11,7 +11,7 @@ import {} from 'svelte';
 import { getDbSchemas, loadAllTablesMetaData } from './apps/components/display/dbtable/metadata';
 import { getDbFeatures } from './apps/components/display/dbtable/dbFeatures';
 import { resource } from 'runed';
-let { input, showRepl = true, hasReplResult = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
+let { input, showRepl = true, hasReplResult = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], onImport } = $props();
 let dbSchema = $derived(input && $dbSchemas[getDbSchemasPath(input)]);
 function getDbSchemasPath(input) {
     switch (input.type) {
@@ -99,6 +99,7 @@ export const dbManager = () => _dbManager;
 			</div>
 			<DbManager
 				dbSupportsSchemas={input?.type == 'database' && dbSupportsSchemas(input.resourceType)}
+				databaseIsEmpty={!Object.values(dbSchema.schema).flatMap((s) => Object.values(s)).length}
 				{dbSchema}
 				colDefs={colDefs.current}
 				dbTableOpsFactory={({ colDefs, tableKey }) =>
@@ -122,6 +123,7 @@ export const dbManager = () => _dbManager;
 				{dbType}
 				refresh={() => refresh()}
 				{dbSelector}
+				{onImport}
 				bind:selectedSchemaKey
 				bind:selectedTableKey
 				{multiSelectMode}

package/package/components/DBManagerContent.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     selectedTables?: SelectedTable[];
     /** Tables that are already added and should show as disabled */
     disabledTables?: SelectedTable[];
+    onImport?: (mode: 'schema_and_data' | 'schema_only') => void;
 }
 declare const DBManagerContent: import("svelte").Component<Props, {
     refresh: () => void;
@@ -26,6 +27,7 @@ declare const DBManagerContent: import("svelte").Component<Props, {
             dbType: import("./dbTypes").DbType;
             dbSchema: DBSchema;
             dbSupportsSchemas: boolean;
+            databaseIsEmpty?: boolean;
             colDefs: Record<string, import("./apps/components/display/dbtable/utils").ColumnDef[]> | undefined;
             dbTableOpsFactory: (params: {
                 colDefs: import("./apps/components/display/dbtable/utils").ColumnDef[];
@@ -43,6 +45,7 @@ declare const DBManagerContent: import("svelte").Component<Props, {
             disabledTables?: SelectedTable[];
             features?: import("./apps/components/display/dbtable/dbFeatures").DbFeatures;
             asset?: import("../gen").Asset;
+            onImport?: (mode: "schema_and_data" | "schema_only") => void;
         }>): void;
     } & {
         dbTable: () => ({

package/package/components/DBManagerDrawer.svelte

@@ -1,13 +1,17 @@
-<script lang="ts">import { workspaceStore } from '../stores';
+<script lang="ts">import { superadmin, userStore, workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
 import Button from './common/button/Button.svelte';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Select from './select/Select.svelte';
-import { ArrowLeft, Expand, LoaderCircle, Minimize, RefreshCcw } from 'lucide-svelte';
+import { ArrowLeft, Copy, Download, Expand, LoaderCircle, Minimize, RefreshCcw, Upload } from 'lucide-svelte';
 import DBManagerContent from './DBManagerContent.svelte';
 import { resource } from 'runed';
 import { untrack } from 'svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import Alert from './common/alert/Alert.svelte';
+import { sendUserToast } from '../toast';
+import { isCloudHosted } from '../cloud';
 let { uriState, offset = 0 } = $props();
 let open = $derived(uriState.open);
 // Load available datatables when drawer opens with datatable input
@@ -15,7 +19,7 @@ const datatables = resource([], async () => {
     if (!$workspaceStore)
         return [];
     try {
-        return await WorkspaceService.listDataTables({ workspace: $workspaceStore });
+        return (await WorkspaceService.listDataTables({ workspace: $workspaceStore })).map((d) => d.name);
     }
     catch (e) {
         console.error('Failed to load datatables:', e);
@@ -46,6 +50,70 @@ $effect(() => {
 });
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
+// Export/Import state
+let exportDrawerOpen = $state(false);
+let exportResult = $state('');
+let importDrawerOpen = $state(false);
+let importLoading = $state(false);
+let importSource = $state(undefined);
+let importBehavior = $state('schema_only');
+let isPostgresqlInput = $derived(uriState.isDatatableInput ||
+    (uriState.input?.type === 'database' && uriState.input.resourceType === 'postgresql'));
+let enableImportExport = $derived(isPostgresqlInput);
+function toSourceIdentifier(raw) {
+    if (raw.startsWith('datatable://') || raw.startsWith('$res:'))
+        return raw;
+    return `$res:${raw}`;
+}
+function currentSourceIdentifier() {
+    const input = uriState.effectiveInput;
+    if (!input || input.type !== 'database')
+        return undefined;
+    return toSourceIdentifier(input.resourcePath);
+}
+async function handleExportSchema() {
+    const source = currentSourceIdentifier();
+    if (!source || !$workspaceStore)
+        return;
+    try {
+        exportResult = await WorkspaceService.exportPgSchema({
+            workspace: $workspaceStore,
+            requestBody: { source }
+        });
+        exportDrawerOpen = true;
+    }
+    catch (e) {
+        sendUserToast(`Failed to export schema: ${e}`, true);
+    }
+}
+async function handleImportDatabase() {
+    if (!importSource || !$workspaceStore)
+        return;
+    const target = currentSourceIdentifier();
+    if (!target)
+        return;
+    importLoading = true;
+    try {
+        await WorkspaceService.importPgDatabase({
+            workspace: $workspaceStore,
+            requestBody: {
+                source: toSourceIdentifier(importSource),
+                target,
+                fork_behavior: importBehavior
+            }
+        });
+        sendUserToast('Database import completed successfully');
+        importDrawerOpen = false;
+        importSource = undefined;
+        dbManagerContent?.refresh();
+    }
+    catch (e) {
+        sendUserToast(`Failed to import database: ${e}`, true);
+    }
+    finally {
+        importLoading = false;
+    }
+}
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -78,6 +146,9 @@ let hasReplResult = $state(false);
 					bind:hasReplResult
 					bind:selectedSchemaKey={uriState.selectedSchema}
 					bind:selectedTableKey={uriState.selectedTable}
+					onImport={enableImportExport
+						? (mode) => ((importDrawerOpen = true), (importBehavior = mode))
+						: undefined}
 				>
 					{#snippet dbSelector()}
 						{#if uriState.isDatatableInput}
@@ -101,6 +172,12 @@ let hasReplResult = $state(false);
 			{/key}
 		{/if}
 		{#snippet actions()}
+			{#if enableImportExport}
+				<Button startIcon={{ icon: Download }} onClick={handleExportSchema}>Export</Button>
+				<Button startIcon={{ icon: Upload }} onClick={() => (importDrawerOpen = true)}>
+					Import
+				</Button>
+			{/if}
 			<Button
 				loading={dbManagerContent?.isLoading() ?? false}
 				on:click={() => {
@@ -123,3 +200,68 @@ let hasReplResult = $state(false);
 		{/snippet}
 	</DrawerContent>
 </Drawer>
+
+<Drawer bind:open={exportDrawerOpen} size="800px" offset={offset + 1}>
+	<DrawerContent title="Export Schemas" on:close={() => (exportDrawerOpen = false)}>
+		{#if exportResult}
+			<div class="flex flex-col gap-2 h-full relative">
+				<pre class="overflow-auto text-xs bg-surface-secondary p-4 rounded flex-1">{exportResult}</pre>
+				<Button
+					size="xs"
+					color="light"
+					startIcon={{ icon: Copy }}
+					wrapperClasses="absolute top-2 right-2"
+					btnClasses="bg-surface-tertiary"
+					on:click={() => {
+						navigator.clipboard.writeText(exportResult)
+						sendUserToast('Copied to clipboard')
+					}}
+				>
+					Copy
+				</Button>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:open={importDrawerOpen} size="600px" offset={offset + 1}>
+	<DrawerContent title="Import Database" on:close={() => (importDrawerOpen = false)}>
+		<div class="flex flex-col gap-4">
+			<Alert type="warning" title="Warning">
+				This will import the schemas from the selected source into the current database. Existing
+				tables with the same names may be affected.
+			</Alert>
+			<div class="flex flex-col gap-2">
+				<span class="text-sm font-medium">Source database</span>
+				<ResourcePicker datatableAsPgResource bind:value={importSource} resourceType="postgresql" />
+			</div>
+			<div class="flex flex-col gap-2">
+				<span class="text-sm font-medium">Import mode</span>
+				<Select
+					items={[
+						{ value: 'schema_only', label: 'Schema only' },
+						...(isCloudHosted() || (!$superadmin && !$userStore?.is_admin)
+							? []
+							: [{ value: 'schema_and_data', label: 'Schema and data' }])
+					]}
+					bind:value={importBehavior}
+				/>
+			</div>
+			{#if importBehavior === 'schema_and_data'}
+				<Alert type="warning" title="Heavy operation">
+					Importing schema and data will copy all rows from every table in the source database. This
+					may take a long time and use significant storage space depending on the size of the
+					source.
+				</Alert>
+			{/if}
+			<Button
+				disabled={!importSource}
+				loading={importLoading}
+				color="red"
+				on:click={handleImportDatabase}
+			>
+				Import {importBehavior === 'schema_and_data' ? 'schemas and data' : 'schemas'} into current database
+			</Button>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/DBTableEditor.svelte

@@ -35,7 +35,7 @@ import { Cell } from './table';
 import DataTable from './table/DataTable.svelte';
 import Head from './table/Head.svelte';
 import { datatypeHasLength } from './apps/components/display/dbtable/utils';
-import { DB_TYPES } from '../consts';
+import { DB_TYPES, NEW_COLUMN_ONLY_TYPES } from '../consts';
 import Popover from './meltComponents/Popover.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { sendUserToast } from '../toast';
@@ -52,6 +52,12 @@ import Alert from './common/alert/Alert.svelte';
 import Label from './Label.svelte';
 const { dbType, dbSchema, currentSchema, initialValues, features, onConfirm, computeBtnProps, computePreview } = $props();
 const columnTypes = DB_TYPES[untrack(() => dbType)];
+function columnTypesFor(column) {
+    if (column.initialName) {
+        return columnTypes.filter((t) => !NEW_COLUMN_ONLY_TYPES.includes(t));
+    }
+    return columnTypes;
+}
 const defaultColumnType = {
     postgresql: 'BIGSERIAL',
     snowflake: 'varchar',
@@ -153,7 +159,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 											}
 										}
 									}
-									items={safeSelectItems(columnTypes)}
+									items={safeSelectItems(columnTypesFor(column))}
 									class="w-48"
 								/>
 								{#if column.initialName && column.name !== column.initialName}
@@ -431,7 +437,9 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 			</Alert>
 		{/if}
 		{#if askingForConfirmation?.codeContent}
-			<div class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative group">
+			<div
+				class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative group"
+			>
 				<button
 					class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-surface-hover"
 					onclick={() => copyToClipboard(askingForConfirmation?.codeContent)}
@@ -439,7 +447,9 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 				>
 					<ClipboardCopy size={14} />
 				</button>
-				<pre class="whitespace-pre-wrap text-sm"><code>{askingForConfirmation.codeContent}</code></pre>
+				<pre class="whitespace-pre-wrap text-sm"
+					><code>{askingForConfirmation.codeContent}</code></pre
+				>
 			</div>
 		{/if}
 	</ConfirmationModal>

package/package/components/DatatablePicker.svelte

@@ -4,7 +4,7 @@ import Select from './select/Select.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import { usePromise } from '../svelte5Utils.svelte';
 let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
-let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' }));
+let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' }).then((d) => d.map((d) => d.name)));
 </script>
 
 <div class={className}>
@@ -19,9 +19,6 @@ let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $
 		{onClear}
 	/>
 	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'datatable', path: value })}
-		<ExploreAssetButton
-			class="mt-1 w-fit"
-			asset={{ kind: 'datatable', path: value }}
-		/>
+		<ExploreAssetButton class="mt-1 w-fit" asset={{ kind: 'datatable', path: value }} />
 	{/if}
 </div>