windmill-components 1.596.1 → 1.612.2

package/package/components/DBTableEditor.svelte

@@ -37,7 +37,6 @@ 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';
@@ -48,7 +47,10 @@ import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Portal from './Portal.svelte';
-const { onConfirm, dbType, previewSql, dbSchema, currentSchema } = $props();
+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 columnTypes = DB_TYPES[dbType];
 const defaultColumnType = {
     postgresql: 'BIGSERIAL',
@@ -58,7 +60,7 @@ const defaultColumnType = {
     mysql: 'varchar',
     duckdb: 'string'
 }[dbType];
-const values = $state({
+const values = $state($state.snapshot(initialValues) ?? {
     name: '',
     columns: [],
     foreignKeys: []
@@ -70,13 +72,17 @@ function addColumn({ name, primaryKey }) {
         ...(datatypeHasLength(defaultColumnType) && {
             datatype_length: datatypeDefaultLength(defaultColumnType)
         }),
-        ...(primaryKey && { primaryKey })
+        ...(primaryKey && { primaryKey }),
+        ...(!features?.defaultToNotNull && { nullable: true })
     });
 }
-addColumn({ name: 'id', primaryKey: dbType !== 'duckdb' });
+if (!initialValues) {
+    addColumn({ name: 'id', primaryKey: features?.primaryKeys });
+}
 const errors = $derived(validate(values, dbSchema));
 let askingForConfirmation = $state();
 let darkMode = $state(false);
+let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -87,7 +93,7 @@ let darkMode = $state(false);
 			Name
 			<TextInput
 				inputProps={{ type: 'text', placeholder: 'my_table' }}
-				class={errors?.name ? 'border !border-red-600/60' : ''}
+				error={errors?.name}
 				bind:value={values.name}
 			/>
 		</label>
@@ -100,18 +106,39 @@ let darkMode = $state(false);
 					<tr>
 						<Cell head first>Name</Cell>
 						<Cell head>Type</Cell>
-						<Cell head last>Primary</Cell>
+						<Cell head last>{features?.primaryKeys ? 'Primary' : ''}</Cell>
 					</tr>
 				</Head>
 				<tbody class="divide-y bg-surface">
 					{#each values.columns as column, i}
 						<tr>
 							<Cell first>
-								<TextInput
-									error={errors?.columns?.includes(column.name)}
-									inputProps={{ type: 'text', placeholder: 'column_name' }}
-									bind:value={column.name}
-								/>
+								<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>
 							</Cell>
 							<Cell>
 								<Select
@@ -129,9 +156,14 @@ let darkMode = $state(false);
 									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">
-								<input type="checkbox" class="!w-4 !h-4" bind:checked={column.primaryKey} />
+								{#if features?.primaryKeys}
+									<input type="checkbox" class="!w-4 !h-4" bind:checked={column.primaryKey} />
+								{/if}
 								<Popover class="ml-8" contentClasses="py-3 px-5 flex flex-col gap-6">
 									{#snippet trigger()}
 										<Settings size={18} />
@@ -143,23 +175,25 @@ let darkMode = $state(false);
 												<input type="number" placeholder="0" bind:value={column.datatype_length} />
 											</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 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}
 										{#if !column.primaryKey}
 											<label class="flex gap-2 items-center text-xs">
 												<input type="checkbox" class="!w-4 !h-4" bind:checked={column.nullable} />
@@ -193,156 +227,153 @@ let darkMode = $state(false);
 				</tbody>
 			</DataTable>
 		</div>
-		<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]}
+		{#if features?.foreignKeys}
+			<div class="flex flex-col">
+				<!-- svelte-ignore a11y_label_has_associated_control -->
+				<label>Foreign Keys</label>
+				<DataTable>
+					<Head>
 						<tr>
-							<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
+							<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
 												 		 from x-overflowing -->
-												<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 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>
-												<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 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>
-											<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
-							>
+										{/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>
 						</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>
-					</tr>
-				</tbody>
-			</DataTable>
-		</div>
+					</tbody>
+				</DataTable>
+			</div>
+		{/if}
 	</div>
 	<Button
-		disabled={!!errors}
-		on:click={() =>
-			(askingForConfirmation = {
+		disabled={!!errors || btnProps.current.disabled}
+		loading={btnProps.pending}
+		on:click={() => {
+			let preview = computePreview?.({ values })
+			askingForConfirmation = {
 				onConfirm: async () => {
 					try {
 						askingForConfirmation && (askingForConfirmation.loading = true)
-						await onConfirm(values)
-						sendUserToast(values.name + ' created!')
+						await onConfirm({ values })
 					} catch (e) {
 						let msg: string | undefined = (e as Error)?.message
 						if (typeof msg !== 'string') msg = e ? JSON.stringify(e) : 'An error occurred'
@@ -351,11 +382,14 @@ let darkMode = $state(false);
 					askingForConfirmation = undefined
 				},
 				title: 'Confirm running the following:',
-				confirmationText: 'Create ' + values.name,
+				confirmationText: btnProps.current.text,
 				open: true,
-				...(previewSql && { codeContent: previewSql(values) })
-			})}>Create table</Button
+				...(preview && { codeContent: preview.sql, alert: preview.alert })
+			}
+		}}
 	>
+		{btnProps.current.text}
+	</Button>
 </div>
 
 <Portal>
@@ -364,6 +398,11 @@ let darkMode = $state(false);
 		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,12 +1,31 @@
-import { type CreateTableValues } from './apps/components/display/dbtable/queries/createTable';
+import { type DbFeatures } from './apps/components/display/dbtable/utils';
 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,10 +1,11 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { ExternalLink } from 'lucide-svelte';
+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</a>
+		<a href={link} target="_blank">Learn more <ExternalLink size={12} class="inline-block" /></a>
 	{/if}
 </div>

package/package/components/Dev.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -74,6 +75,9 @@ 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();
@@ -416,6 +420,7 @@ setContext('FlowEditorContext', {
     selectionManager,
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
+    flowEditorDrawer: writable(undefined),
     moving,
     history,
     pathStore: pathStore,
@@ -665,9 +670,38 @@ const selectedId = $derived(selectionManager.getSelectedId());
 			<Splitpanes horizontal style="height: 1000px;">
 				<Pane size={33}>
 					<div class="px-2">
-						<div class="break-words relative font-sans">
-							<SchemaForm compact {schema} bind:args bind:isValid />
+						<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>
+						{#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}>

package/package/components/DiffDrawer.svelte

@@ -5,7 +5,6 @@ import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import { cleanValueProperties, orderedJsonStringify, orderedYamlStringify, replaceFalseWithUndefined } from '../utils';
 let diffType = $state(undefined);
-let flowdiffMode = $state('yaml');
 let contentType = $derived.by(() => {
     if (!data || !diffType)
         return undefined;
@@ -173,34 +172,14 @@ export function setDiff(diff) {
 									{/await}
 								{:else if contentType === 'metadata'}
 									{#if isFlow}
-										<Tabs bind:selected={flowdiffMode}>
-											<Tab value="yaml" label={`YAML`} />
-											<Tab value="graph" label={`Graph`} />
-										</Tabs>
-										{#if flowdiffMode === 'yaml'}
-											{#await import('./DiffEditor.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													open={true}
-													automaticLayout
-													className="h-full"
-													defaultLang="yaml"
-													defaultOriginal={metadata}
-													defaultModified={data.current.metadata}
-													readOnly
-												/>
-											{/await}
-										{:else if flowdiffMode === 'graph'}
-											{#await import('./FlowGraphDiffViewer.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													beforeYaml={metadata ?? ''}
-													afterYaml={data.current.metadata}
-												/>
-											{/await}
-										{/if}
+										{#await import('./FlowDiffViewer.svelte')}
+											<Loader2 class="animate-spin" />
+										{:then Module}
+											<Module.default
+												beforeYaml={metadata ?? ''}
+												afterYaml={data.current.metadata}
+											/>
+										{/await}
 									{:else}
 										{#await import('./DiffEditor.svelte')}
 											<Loader2 class="animate-spin" />