windmill-components 1.613.5 → 1.623.1

package/package/components/DBManagerContent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { dbSchemas, workspaceStore } from '../stores';
 import { sendUserToast, sortArray } from '../utils';
 import { Loader2 } from 'lucide-svelte';
-import { dbSupportsSchemas, getDbFeatures } from './apps/components/display/dbtable/utils';
+import { dbSupportsSchemas } from './apps/components/display/dbtable/utils';
 import DbManager from './DBManager.svelte';
 import { dbSchemaOpsWithPreviewScripts, dbTableOpsWithPreviewScripts, getDbType, getDucklakeSchema } from './dbOps';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -10,7 +10,7 @@ import SimpleAgTable from './SimpleAgTable.svelte';
 import { untrack } from 'svelte';
 import { getDbSchemas, loadAllTablesMetaData, loadTableMetaData } from './apps/components/display/dbtable/metadata';
 let { input, showRepl = true, hasReplResult = $bindable(false), isRefreshing = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
-let dbSchema = $derived(input && $dbSchemas[getDbSchemasPath(input)]);
+let dbSchema = $derived($dbSchemas[getDbSchemasPath(input)]);
 function getDbSchemasPath(input) {
     switch (input.type) {
         case 'database':
@@ -138,7 +138,7 @@ export function clearReplResult() {
 				{/if}
 			</div>
 			<DbManager
-				dbSupportsSchemas={input?.type == 'database' && dbSupportsSchemas(input.resourceType)}
+				dbSupportsSchemas={input.type == 'database' && dbSupportsSchemas(input.resourceType)}
 				{dbSchema}
 				{getColDefs}
 				dbTableOpsFactory={({ colDefs, tableKey }) =>
@@ -162,7 +162,6 @@ export function clearReplResult() {
 				{multiSelectMode}
 				bind:selectedTables
 				{disabledTables}
-				features={getDbFeatures(input)}
 			/>
 		</Pane>
 		{#if showRepl}

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

@@ -2,7 +2,7 @@ import { type Snippet } from 'svelte';
 import type { DbInput } from './dbTypes';
 import type { SelectedTable } from './DBManager.svelte';
 interface Props {
-    input?: DbInput;
+    input: DbInput;
     showRepl?: boolean;
     hasReplResult?: boolean;
     isRefreshing?: boolean;

package/package/components/DBTableEditor.svelte

@@ -37,6 +37,7 @@ import { datatypeHasLength, dbSupportsSchemas } from './apps/components/display/
 import { DB_TYPES } from '../consts';
 import Popover from './meltComponents/Popover.svelte';
 import Tooltip from './meltComponents/Tooltip.svelte';
+import { datatypeDefaultLength } from './apps/components/display/dbtable/queries/createTable';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { sendUserToast } from '../toast';
 import { copyToClipboard } from '../utils';
@@ -47,10 +48,7 @@ import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Portal from './Portal.svelte';
-import { Debounced } from 'runed';
-import { datatypeDefaultLength } from './apps/components/display/dbtable/tableEditor';
-import Alert from './common/alert/Alert.svelte';
-const { dbType, dbSchema, currentSchema, initialValues, features, onConfirm, computeBtnProps, computePreview } = $props();
+const { onConfirm, dbType, previewSql, dbSchema, currentSchema } = $props();
 const columnTypes = DB_TYPES[dbType];
 const defaultColumnType = {
     postgresql: 'BIGSERIAL',
@@ -60,7 +58,7 @@ const defaultColumnType = {
     mysql: 'varchar',
     duckdb: 'string'
 }[dbType];
-const values = $state($state.snapshot(initialValues) ?? {
+const values = $state({
     name: '',
     columns: [],
     foreignKeys: []
@@ -72,17 +70,13 @@ function addColumn({ name, primaryKey }) {
         ...(datatypeHasLength(defaultColumnType) && {
             datatype_length: datatypeDefaultLength(defaultColumnType)
         }),
-        ...(primaryKey && { primaryKey }),
-        ...(!features?.defaultToNotNull && { nullable: true })
+        ...(primaryKey && { primaryKey })
     });
 }
-if (!initialValues) {
-    addColumn({ name: 'id', primaryKey: features?.primaryKeys });
-}
+addColumn({ name: 'id', primaryKey: dbType !== 'duckdb' });
 const errors = $derived(validate(values, dbSchema));
 let askingForConfirmation = $state();
 let darkMode = $state(false);
-let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -93,7 +87,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 			Name
 			<TextInput
 				inputProps={{ type: 'text', placeholder: 'my_table' }}
-				error={errors?.name}
+				class={errors?.name ? 'border !border-red-600/60' : ''}
 				bind:value={values.name}
 			/>
 		</label>
@@ -106,39 +100,18 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 					<tr>
 						<Cell head first>Name</Cell>
 						<Cell head>Type</Cell>
-						<Cell head last>{features?.primaryKeys ? 'Primary' : ''}</Cell>
+						<Cell head last>Primary</Cell>
 					</tr>
 				</Head>
 				<tbody class="divide-y bg-surface">
 					{#each values.columns as column, i}
 						<tr>
 							<Cell first>
-								<div class="flex flex-col">
-									<TextInput
-										error={errors?.columns?.includes(column.name)}
-										inputProps={{ type: 'text', placeholder: 'column_name' }}
-										bind:value={
-											() => column.name,
-											(newName) => {
-												const oldName = column.name
-												column.name = newName
-												// Update all foreign keys that reference this column
-												if (oldName && oldName !== newName) {
-													values.foreignKeys.forEach((fk) => {
-														fk.columns.forEach((fkCol) => {
-															if (fkCol.sourceColumn === oldName) {
-																fkCol.sourceColumn = newName
-															}
-														})
-													})
-												}
-											}
-										}
-									/>
-									{#if column.initialName && column.name !== column.initialName}
-										<span class="text-xs text-hint">Old name: {column.initialName}</span>
-									{/if}
-								</div>
+								<TextInput
+									error={errors?.columns?.includes(column.name)}
+									inputProps={{ type: 'text', placeholder: 'column_name' }}
+									bind:value={column.name}
+								/>
 							</Cell>
 							<Cell>
 								<Select
@@ -156,14 +129,9 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 									items={safeSelectItems(columnTypes)}
 									class="w-48"
 								/>
-								{#if column.initialName && column.name !== column.initialName}
-									<span class="text-xs">&nbsp;</span>
-								{/if}
 							</Cell>
 							<Cell last class="flex items-center mt-1.5">
-								{#if features?.primaryKeys}
-									<input type="checkbox" class="!w-4 !h-4" bind:checked={column.primaryKey} />
-								{/if}
+								<input type="checkbox" class="!w-4 !h-4" bind:checked={column.primaryKey} />
 								<Popover class="ml-8" contentClasses="py-3 px-5 flex flex-col gap-6">
 									{#snippet trigger()}
 										<Settings size={18} />
@@ -175,25 +143,23 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 												<input type="number" placeholder="0" bind:value={column.datatype_length} />
 											</label>
 										{/if}
-										{#if features?.defaultValues}
-											<label class="text-xs">
-												<span class="flex gap-1 mb-1">
-													Default value
-													<Tooltip>
-														<Info size={14} />
-														{#snippet text()}
-															Surround your expressions with curly brackets:
-															<code>
-																{'{NOW()}'}
-															</code>.
-															<br />
-															By default, it will be parsed as a literal
-														{/snippet}
-													</Tooltip>
-												</span>
-												<input type="text" placeholder="NULL" bind:value={column.defaultValue} />
-											</label>
-										{/if}
+										<label class="text-xs">
+											<span class="flex gap-1 mb-1">
+												Default value
+												<Tooltip>
+													<Info size={14} />
+													{#snippet text()}
+														Surround your expressions with curly brackets:
+														<code>
+															{'{NOW()}'}
+														</code>.
+														<br />
+														By default, it will be parsed as a literal
+													{/snippet}
+												</Tooltip>
+											</span>
+											<input type="text" placeholder="NULL" bind:value={column.defaultValue} />
+										</label>
 										{#if !column.primaryKey}
 											<label class="flex gap-2 items-center text-xs">
 												<input type="checkbox" class="!w-4 !h-4" bind:checked={column.nullable} />
@@ -227,153 +193,156 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 				</tbody>
 			</DataTable>
 		</div>
-		{#if features?.foreignKeys}
-			<div class="flex flex-col">
-				<!-- svelte-ignore a11y_label_has_associated_control -->
-				<label>Foreign Keys</label>
-				<DataTable>
-					<Head>
+		<div class="flex flex-col">
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<label>Foreign Keys</label>
+			<DataTable>
+				<Head>
+					<tr>
+						<Cell head first>Table</Cell>
+						<Cell head last>Columns</Cell>
+					</tr>
+				</Head>
+				<tbody class="divide-y bg-surface">
+					{#each values.foreignKeys as foreignKey, foreignKeyIndex}
+						{@const fkErrors = errors?.foreignKeys?.[foreignKeyIndex]}
 						<tr>
-							<Cell head first>Table</Cell>
-							<Cell head last>Columns</Cell>
-						</tr>
-					</Head>
-					<tbody class="divide-y bg-surface">
-						{#each values.foreignKeys as foreignKey, foreignKeyIndex}
-							{@const fkErrors = errors?.foreignKeys?.[foreignKeyIndex]}
-							<tr>
-								<Cell first class="flex">
-									<Select
-										inputClass={twMerge('!w-48')}
-										error={fkErrors?.emptyTarget}
-										placeholder=""
-										bind:value={foreignKey.targetTable}
-										items={getFlatTableNamesFromSchema(dbSchema).map((o) => ({
-											value: o,
-											label:
-												(currentSchema && o.startsWith(currentSchema)) || !dbSupportsSchemas(dbType)
-													? o.split('.')[1]
-													: o
-										}))}
-									/>
-								</Cell>
-								<Cell>
-									<div class="flex flex-col gap-2">
-										{#each foreignKey.columns as column, columnIndex}
-											<div class="flex">
-												<div class="flex items-center gap-1 w-60">
-													<!-- Div wrappers with absolute select are to prevent the Select content
+							<Cell first class="flex">
+								<Select
+									inputClass={twMerge(
+										'!w-48',
+										fkErrors?.emptyTarget ? 'border !border-red-600/60' : ''
+									)}
+									placeholder=""
+									bind:value={foreignKey.targetTable}
+									items={getFlatTableNamesFromSchema(dbSchema).map((o) => ({
+										value: o,
+										label:
+											(currentSchema && o.startsWith(currentSchema)) || !dbSupportsSchemas(dbType)
+												? o.split('.')[1]
+												: o
+									}))}
+								/>
+							</Cell>
+							<Cell>
+								<div class="flex flex-col gap-2">
+									{#each foreignKey.columns as column, columnIndex}
+										<div class="flex">
+											<div class="flex items-center gap-1 w-60">
+												<!-- Div wrappers with absolute select are to prevent the Select content
 												 		 from x-overflowing -->
-													<div class="grow h-[2rem] relative">
-														<Select
-															class="!absolute inset-0"
-															error={fkErrors?.nonExistingSourceColumns.includes(
-																column.sourceColumn
-															)}
-															placeholder=""
-															bind:value={column.sourceColumn}
-															items={values.columns
-																.filter((c) => c.name.length)
-																.map((c) => ({ value: c.name }))}
-															clearable={false}
-														/>
-													</div>
-													<ArrowRight size={16} class="h-fit shrink-0" />
-													<div class="grow h-[2rem] relative">
-														<Select
-															class="!absolute inset-0"
-															error={fkErrors?.nonExistingTargetColumns.includes(
-																column.targetColumn
-															)}
-															placeholder=""
-															bind:value={column.targetColumn}
-															items={Object.keys(
-																dbSchema?.schema?.[foreignKey.targetTable?.split('.')?.[0] ?? '']?.[
-																	foreignKey.targetTable?.split('.')[1]
-																] ?? {}
-															).map((value) => ({ value }))}
-															clearable={false}
-														/>
-													</div>
+												<div class="grow h-[2rem] relative">
+													<Select
+														class="!absolute inset-0"
+														inputClass={twMerge(
+															fkErrors?.nonExistingSourceColumns.includes(column.sourceColumn)
+																? 'border !border-red-600/60'
+																: ''
+														)}
+														placeholder=""
+														bind:value={column.sourceColumn}
+														items={values.columns
+															.filter((c) => c.name.length)
+															.map((c) => ({ value: c.name }))}
+														clearable={false}
+													/>
 												</div>
-												<div class="ml-auto flex">
-													{#if columnIndex === 0}
-														<Popover contentClasses="py-3 px-5 w-52 flex flex-col gap-6">
-															{#snippet trigger()}
-																<Settings size={18} />
-															{/snippet}
-															{#snippet content()}
-																<span>
-																	ON DELETE <select bind:value={foreignKey.onDelete}>
-																		<option value="NO ACTION" selected>NO ACTION</option>
-																		<option value="CASCADE" selected>CASCADE</option>
-																		<option value="SET NULL" selected>SET NULL</option>
-																	</select>
-																</span>
-																<span>
-																	ON UPDATE <select bind:value={foreignKey.onUpdate}>
-																		<option value="NO ACTION" selected>NO ACTION</option>
-																		<option value="CASCADE" selected>CASCADE</option>
-																		<option value="SET NULL" selected>SET NULL</option>
-																	</select>
-																</span>
-															{/snippet}
-														</Popover>
-													{/if}
-													<Button
-														color="light"
-														startIcon={{ icon: X }}
-														wrapperClasses="w-fit ml-2"
-														btnClasses="p-0"
-														on:click={foreignKey.columns.length > 1
-															? () => foreignKey.columns.splice(columnIndex, 1)
-															: () => values.foreignKeys.splice(foreignKeyIndex, 1)}
+												<ArrowRight size={16} class="h-fit shrink-0" />
+												<div class="grow h-[2rem] relative">
+													<Select
+														class="!absolute inset-0"
+														inputClass={twMerge(
+															fkErrors?.nonExistingTargetColumns.includes(column.targetColumn)
+																? 'border !border-red-600/60'
+																: ''
+														)}
+														placeholder=""
+														bind:value={column.targetColumn}
+														items={Object.keys(
+															dbSchema?.schema?.[foreignKey.targetTable?.split('.')?.[0] ?? '']?.[
+																foreignKey.targetTable?.split('.')[1]
+															] ?? {}
+														).map((value) => ({ value }))}
+														clearable={false}
 													/>
 												</div>
 											</div>
-										{/each}
-										<button
-											class="w-60 border-dashed dark:border-gray-600 border-2 rounded-md flex justify-center items-center py-1 gap-2 text-primary-500 font-normal"
-											onclick={() => foreignKey.columns.push({})}
-										>
-											<Plus class="h-fit" size={12} /> Add
-										</button>
-									</div></Cell
-								>
-							</tr>
-						{/each}
-						<tr class="w-full">
-							<td colspan={99} class="p-1">
-								<Button
-									wrapperClasses="mx-auto"
-									startIcon={{ icon: Plus }}
-									color="light"
-									on:click={() =>
-										values.foreignKeys.push({
-											columns: [{}],
-											onDelete: 'NO ACTION',
-											onUpdate: 'NO ACTION'
-										})}
-								>
-									Add
-								</Button>
-							</td>
+											<div class="ml-auto flex">
+												{#if columnIndex === 0}
+													<Popover contentClasses="py-3 px-5 w-52 flex flex-col gap-6">
+														{#snippet trigger()}
+															<Settings size={18} />
+														{/snippet}
+														{#snippet content()}
+															<span>
+																ON DELETE <select bind:value={foreignKey.onDelete}>
+																	<option value="NO ACTION" selected>NO ACTION</option>
+																	<option value="CASCADE" selected>CASCADE</option>
+																	<option value="SET NULL" selected>SET NULL</option>
+																</select>
+															</span>
+															<span>
+																ON UPDATE <select bind:value={foreignKey.onUpdate}>
+																	<option value="NO ACTION" selected>NO ACTION</option>
+																	<option value="CASCADE" selected>CASCADE</option>
+																	<option value="SET NULL" selected>SET NULL</option>
+																</select>
+															</span>
+														{/snippet}
+													</Popover>
+												{/if}
+												<Button
+													color="light"
+													startIcon={{ icon: X }}
+													wrapperClasses="w-fit ml-2"
+													btnClasses="p-0"
+													on:click={foreignKey.columns.length > 1
+														? () => foreignKey.columns.splice(columnIndex, 1)
+														: () => values.foreignKeys.splice(foreignKeyIndex, 1)}
+												/>
+											</div>
+										</div>
+									{/each}
+									<button
+										class="w-60 border-dashed dark:border-gray-600 border-2 rounded-md flex justify-center items-center py-1 gap-2 text-primary-500 font-normal"
+										onclick={() => foreignKey.columns.push({})}
+									>
+										<Plus class="h-fit" size={12} /> Add
+									</button>
+								</div></Cell
+							>
 						</tr>
-					</tbody>
-				</DataTable>
-			</div>
-		{/if}
+					{/each}
+					<tr class="w-full">
+						<td colspan={99} class="p-1">
+							<Button
+								wrapperClasses="mx-auto"
+								startIcon={{ icon: Plus }}
+								color="light"
+								on:click={() =>
+									values.foreignKeys.push({
+										columns: [{}],
+										onDelete: 'NO ACTION',
+										onUpdate: 'NO ACTION'
+									})}
+							>
+								Add
+							</Button>
+						</td>
+					</tr>
+				</tbody>
+			</DataTable>
+		</div>
 	</div>
 	<Button
-		disabled={!!errors || btnProps.current.disabled}
-		loading={btnProps.pending}
-		on:click={() => {
-			let preview = computePreview?.({ values })
-			askingForConfirmation = {
+		disabled={!!errors}
+		on:click={() =>
+			(askingForConfirmation = {
 				onConfirm: async () => {
 					try {
 						askingForConfirmation && (askingForConfirmation.loading = true)
-						await onConfirm({ values })
+						await onConfirm(values)
+						sendUserToast(values.name + ' created!')
 					} catch (e) {
 						let msg: string | undefined = (e as Error)?.message
 						if (typeof msg !== 'string') msg = e ? JSON.stringify(e) : 'An error occurred'
@@ -382,14 +351,11 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 					askingForConfirmation = undefined
 				},
 				title: 'Confirm running the following:',
-				confirmationText: btnProps.current.text,
+				confirmationText: 'Create ' + values.name,
 				open: true,
-				...(preview && { codeContent: preview.sql, alert: preview.alert })
-			}
-		}}
+				...(previewSql && { codeContent: previewSql(values) })
+			})}>Create table</Button
 	>
-		{btnProps.current.text}
-	</Button>
 </div>
 
 <Portal>
@@ -398,11 +364,6 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 		on:canceled={() => (askingForConfirmation = undefined)}
 		on:confirmed={askingForConfirmation?.onConfirm ?? (() => {})}
 	>
-		{#if askingForConfirmation?.alert}
-			<Alert title={askingForConfirmation.alert.title} type="error" class="mb-2">
-				{askingForConfirmation.alert.body}
-			</Alert>
-		{/if}
 		{#if askingForConfirmation?.codeContent}
 			<div class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative">
 				<code class="whitespace-pre-wrap">

package/package/components/DBTableEditor.svelte.d.ts

@@ -1,31 +1,12 @@
-import { type DbFeatures } from './apps/components/display/dbtable/utils';
+import { type CreateTableValues } from './apps/components/display/dbtable/queries/createTable';
 import { type DBSchema } from '../stores';
 import type { DbType } from './dbTypes';
-import { type TableEditorValues } from './apps/components/display/dbtable/tableEditor';
 type Props = {
+    onConfirm: (values: CreateTableValues) => void | Promise<void>;
+    previewSql?: (values: CreateTableValues) => string;
     dbType: DbType;
     dbSchema?: DBSchema;
     currentSchema?: string;
-    initialValues?: TableEditorValues;
-    features?: DbFeatures;
-    onConfirm: (params: {
-        values: TableEditorValues;
-    }) => void | Promise<void>;
-    computePreview: (params: {
-        values: TableEditorValues;
-    }) => {
-        sql: string;
-        alert?: {
-            title: string;
-            body?: string;
-        };
-    };
-    computeBtnProps: (params: {
-        values: TableEditorValues;
-    }) => {
-        text: string;
-        disabled?: boolean;
-    };
 };
 declare const DBTableEditor: import("svelte").Component<Props, {}, "">;
 type DBTableEditor = ReturnType<typeof DBTableEditor>;

package/package/components/Description.svelte

@@ -1,11 +1,10 @@
-<script lang="ts">import { ExternalLink } from 'lucide-svelte';
-import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { twMerge } from 'tailwind-merge';
 export let link = undefined;
 </script>
 
 <div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
 	<slot />
 	{#if link}
-		<a href={link} target="_blank">Learn more <ExternalLink size={12} class="inline-block" /></a>
+		<a href={link} target="_blank">Learn more</a>
 	{/if}
 </div>

package/package/components/Dev.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">import SchemaForm from './SchemaForm.svelte';
-import JsonInputs from './JsonInputs.svelte';
 import JobLoader from './JobLoader.svelte';
 import { Button } from './common';
 import { WindmillIcon } from './icons';
@@ -75,9 +74,6 @@ let socket = undefined;
 // Test args input
 let args = $state({});
 let isValid = $state(true);
-let jsonView = $state(false);
-let jsonEditor = $state(undefined);
-let schemaHeight = $state(0);
 // Test
 let testIsLoading = $state(false);
 let testJob = $state();
@@ -420,7 +416,6 @@ setContext('FlowEditorContext', {
     selectionManager,
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
-    flowEditorDrawer: writable(undefined),
     moving,
     history,
     pathStore: pathStore,
@@ -670,38 +665,9 @@ const selectedId = $derived(selectionManager.getSelectedId());
 			<Splitpanes horizontal style="height: 1000px;">
 				<Pane size={33}>
 					<div class="px-2">
-						<div class="flex justify-end mb-2">
-							<Toggle
-								bind:checked={jsonView}
-								size="xs"
-								options={{
-									right: 'JSON',
-									rightTooltip: 'Fill args from JSON'
-								}}
-								lightMode
-								on:change={() => {
-									jsonEditor?.setCode(JSON.stringify(args ?? {}, null, '\t'))
-								}}
-							/>
+						<div class="break-words relative font-sans">
+							<SchemaForm compact {schema} bind:args bind:isValid />
 						</div>
-						{#if jsonView}
-							<div class="py-2" style="height: {Math.max(schemaHeight, 300)}px">
-								<JsonInputs
-									bind:this={jsonEditor}
-									on:select={(e) => {
-										if (e.detail) {
-											args = e.detail
-										}
-									}}
-									updateOnBlur={false}
-									placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
-								/>
-							</div>
-						{:else}
-							<div class="break-words relative font-sans" bind:clientHeight={schemaHeight}>
-								<SchemaForm compact {schema} bind:args bind:isValid />
-							</div>
-						{/if}
 					</div>
 				</Pane>
 				<Pane size={67}>