From c6cf2a853ea36531662098ec1d418d6ffcf9a6f8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 2 Sep 2025 17:25:34 +0530
Subject: [PATCH] fix: deletion message.

---
 src/lib/components/confirm.svelte             |  3 ++-
 .../table-[table]/columns/deleteColumn.svelte | 23 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
index fa23d1b71..d6488ff00 100644
--- a/src/lib/components/confirm.svelte
+++ b/src/lib/components/confirm.svelte
@@ -10,6 +10,7 @@
     export let disabled: boolean = false;
     export let submissionLoader = false;
     export let confirmDeletion: boolean = false;
+    export let confirmDeletionLabel: string = 'I understand and confirm';
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
@@ -46,7 +47,7 @@
                         required
                         id={checkboxId}
                         bind:checked={confirm}
-                        label="I understand and confirm" />
+                        label={confirmDeletionLabel} />
                 {/if}
             </Layout.Stack>
         </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
index 8eab71181..f201bb202 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { page } from '$app/state';
-    import { InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { table } from '../store';
     import type { Columns } from '../store';
@@ -21,7 +20,6 @@
         selectedColumn: Columns | string[];
     } = $props();
 
-    let checked = $state(false);
     let error = $state<string | null>(null);
 
     const selectedColumns = $derived(
@@ -38,8 +36,6 @@
             .some((col) => isRelationship(col) && col.twoWay)
     );
 
-    const isDeleteBtnDisabled = $derived(requiresTwoWayConfirm && !checked);
-
     async function handleDelete() {
         try {
             const client = sdk.forProject(page.params.region, page.params.project);
@@ -75,6 +71,16 @@
     function getAsRelationship(column: string | Columns): Models.ColumnRelationship {
         return column as Models.ColumnRelationship;
     }
+
+    const relatedColumn = $derived(
+        requiresTwoWayConfirm ? getAsRelationship(selectedColumns[0]) : undefined
+    );
+
+    const confirmDeletionLabel = $derived(
+        !requiresTwoWayConfirm
+            ? 'I understand and confirm'
+            : `Delete relationship between ${relatedColumn.key} to ${relatedColumn.twoWayKey}`
+    );
 </script>
 
 <Confirm
@@ -83,7 +89,7 @@
     title="Delete column"
     bind:error
     confirmDeletion
-    disabled={isDeleteBtnDisabled}>
+    {confirmDeletionLabel}>
     {#if selectedColumns.length === 1}
         <p>
             Are you sure you want to delete <b data-private>{selectedKeys[0]}</b> from
@@ -98,19 +104,12 @@
 
     {#if requiresTwoWayConfirm}
         <!-- not allowed on multi selections, safe to assume that this isn't a string! -->
-        {@const column = getAsRelationship(selectedColumns[0])}
         <Layout.Stack direction="column" gap="xl">
             <p>
                 This is a two way relationship and the corresponding relationship will also be
                 deleted.
             </p>
             <p><b>This action is irreversible.</b></p>
-            <ul>
-                <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                    Delete relationship between <b data-private>{column.key}</b> to
-                    <b data-private>{column.twoWayKey}</b>
-                </InputChoice>
-            </ul>
         </Layout.Stack>
     {/if}
 </Confirm>