From 1eb314e8cb7d61d78e69d03ab0ef36362a1e4d88 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Mon, 31 Aug 2026 05:15:16 +0200
Subject: [PATCH] feat(datatables): fold removing a data table into its row
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The menu takes the place the close button held at the end of the row, and
migrations and permissions grey out while the row has unsaved edits — they
act on the saved data table, which an unsaved one is not.
---
 .../DataTableSettings.svelte                  | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
index 553e662eaa..1b572e6aa7 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
@@ -51,13 +51,11 @@
 </script>
 
 <script lang="ts">
-	import { History, KeyRound, Plus, PlugZap } from 'lucide-svelte'
+	import { History, KeyRound, Plus, PlugZap, Trash2 } from 'lucide-svelte'
 	import DropdownV2 from '../DropdownV2.svelte'
 
 	import Button from '../common/button/Button.svelte'
 
-	import CloseButton from '../common/CloseButton.svelte'
-
 	import ResourcePicker from '../ResourcePicker.svelte'
 	import SettingsPageHeader from '../settings/SettingsPageHeader.svelte'
 	import Select from '../select/Select.svelte'
@@ -428,22 +426,6 @@
 							workspace={$workspaceStore ?? ''}
 							datatable={dataTable.name}
 						/>
-						<DropdownV2
-							disabled={!!dirtyMap[dataTable.name]}
-							items={() => [
-								{
-									displayName: 'Migrations',
-									icon: History,
-									action: () => migrationsButtons[dataTable.name]?.open()
-								},
-								{
-									displayName: 'Permissions',
-									icon: KeyRound,
-									action: () => permissionsButtons[dataTable.name]?.openPermissions()
-								}
-							]}
-							btnId={'datatable-settings-actions-' + onlyAlphaNumAndUnderscore(dataTable.name)}
-						/>
 						<Button
 							size="xs"
 							color="light"
@@ -477,7 +459,32 @@
 					</div>
 				</Cell>
 				<Cell class="w-12">
-					<CloseButton small on:close={() => removeDataTable(dataTableIndex)} />
+					<DropdownV2
+						items={() => [
+							{
+								displayName: 'Migrations',
+								icon: History,
+								// Both act on the saved data table, which unsaved edits are not.
+								disabled: !!dirtyMap[dataTable.name],
+								tooltip: 'Save the settings first',
+								action: () => migrationsButtons[dataTable.name]?.open()
+							},
+							{
+								displayName: 'Permissions',
+								icon: KeyRound,
+								disabled: !!dirtyMap[dataTable.name],
+								tooltip: 'Save the settings first',
+								action: () => permissionsButtons[dataTable.name]?.openPermissions()
+							},
+							{
+								displayName: 'Remove',
+								icon: Trash2,
+								type: 'delete',
+								action: () => removeDataTable(dataTableIndex)
+							}
+						]}
+						btnId={'datatable-settings-actions-' + onlyAlphaNumAndUnderscore(dataTable.name)}
+					/>
 				</Cell>
 			</Row>
 		{/each}