windmill-components 1.623.1 → 1.623.2

package/package/components/DBTableEditor.svelte

@@ -28,16 +28,14 @@ function validate(values, dbSchema) {
 }
 </script>
 
-<script lang="ts">import { ArrowRight, ClipboardCopy, Info, Plus, Settings, X } from 'lucide-svelte';
+<script lang="ts">import { ArrowRight, ClipboardCopy, Plus, Settings, X } from 'lucide-svelte';
 import { Button } from './common';
 import { Cell } from './table';
 import DataTable from './table/DataTable.svelte';
 import Head from './table/Head.svelte';
-import { datatypeHasLength, dbSupportsSchemas } from './apps/components/display/dbtable/utils';
+import { datatypeHasLength } from './apps/components/display/dbtable/utils';
 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 +46,11 @@ 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';
+import Label from './Label.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: []
@@ -73,10 +75,13 @@ function addColumn({ name, primaryKey }) {
         ...(primaryKey && { primaryKey })
     });
 }
-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,12 +92,12 @@ 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>
 
-		<div class="flex flex-col">
+		<div class="flex flex-col" id="columns-section">
 			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label>Columns</label>
 			<DataTable>
@@ -100,18 +105,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,12 +155,25 @@ 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} />
-								<Popover class="ml-8" contentClasses="py-3 px-5 flex flex-col gap-6">
+								{#if features?.primaryKeys}
+									<input
+										type="checkbox"
+										class="!w-4 !h-4 primary-key-checkbox"
+										bind:checked={column.primaryKey}
+									/>
+								{/if}
+								<Popover
+									class="ml-8"
+									contentClasses="py-3 px-5 flex flex-col gap-6"
+									enableFlyTransition
+								>
 									{#snippet trigger()}
-										<Settings size={18} />
+										<Settings size={18} class="settings-menu-btn" />
 									{/snippet}
 									{#snippet content()}
 										{#if datatypeHasLength(column.datatype)}
@@ -143,26 +182,27 @@ 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="flex gap-1 mb-1"
+												label="Default Value"
+												tooltip="Parsed as literal by default. Use curly brackets for expressions (e.g. {'{NOW()}'} )."
+											>
+												<input
+													class="default-value"
+													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} />
+												<input
+													type="checkbox"
+													class="nullable-checkbox !w-4 !h-4"
+													bind:checked={column.nullable}
+												/>
 												Nullable
 											</label>
 										{/if}
@@ -172,7 +212,7 @@ let darkMode = $state(false);
 									color="light"
 									startIcon={{ icon: X }}
 									wrapperClasses="w-fit ml-2"
-									btnClasses="p-0"
+									btnClasses="delete-column-btn p-0"
 									on:click={() => values.columns.splice(i, 1)}
 								/>
 							</Cell>
@@ -193,156 +233,163 @@ 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" id="foreign-keys-section">
+				<!-- 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('fk-table-select !w-48')}
+										error={fkErrors?.emptyTarget}
+										placeholder=""
+										bind:value={foreignKey.targetTable}
+										items={getFlatTableNamesFromSchema(dbSchema).map((o) => ({
+											value: o,
+											label:
+												!features?.schemas ||
+												(currentSchema && o.toLowerCase().startsWith(currentSchema.toLowerCase()))
+													? 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="fk-source-col-select !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="fk-target-col-select !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 && features.enforcedForeignKeys}
+														<Popover
+															contentClasses="py-3 px-5 w-52 flex flex-col gap-4"
+															enableFlyTransition
+														>
+															{#snippet trigger()}
+																<Settings class="fk-settings-btn" size={18} />
+															{/snippet}
+															{#snippet content()}
+																<Label label="On delete">
+																	<select
+																		class="fk-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>
+																</Label>
+																<Label label="On update">
+																	<select
+																		class="fk-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>
+																</Label>
+															{/snippet}
+														</Popover>
+													{/if}
+													<Button
+														color="light"
+														startIcon={{ icon: X }}
+														wrapperClasses="w-fit ml-2"
+														btnClasses="fk-delete-btn 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,19 +398,28 @@ 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>
 	<ConfirmationModal
+		id="db-table-editor-confirmation-modal"
 		{...askingForConfirmation ?? { confirmationText: '', title: '' }}
 		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 DBSchema } from '../stores';
 import type { DbType } from './dbTypes';
+import { type TableEditorValues } from './apps/components/display/dbtable/tableEditor';
+import type { DbFeatures } from './apps/components/display/dbtable/dbFeatures';
 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>;