From 8779116abdea37a64bdbbe38cbf55d6cbbacd271 Mon Sep 17 00:00:00 2001
From: okxint <cashmein.eth@gmail.com>
Date: Mon, 20 Jul 2026 22:07:53 +0530
Subject: [PATCH] fix(databases): clone enum elements array to prevent mutation
 on cancel

Editing enum column elements in the edit dialog mutated the source
object in place because the form bound directly to selectedColumn.
Introduce editingColumn as a deep-cloned local copy on dialog open so
cancelled edits are discarded without touching the original data.
---
 .../table-[table]/columns/edit.svelte         | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
index 38b10b0373..5216f10f13 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
@@ -25,6 +25,7 @@
 
     let error: string;
     let currentColumn: Columns;
+    let editingColumn: Columns;
 
     onMount(() => {
         if (!isModal) {
@@ -54,7 +55,7 @@
 
     export async function submit() {
         try {
-            await option.update(databaseId, tableId, selectedColumn, originalKey);
+            await option.update(databaseId, tableId, editingColumn, originalKey);
             await invalidate(Dependencies.TABLE);
 
             if (isModal && !page.url.pathname.includes('columns')) {
@@ -65,12 +66,12 @@
 
             addNotification({
                 type: 'success',
-                message: `Column ${selectedColumn.key} has been updated`
+                message: `Column ${editingColumn.key} has been updated`
             });
 
             showEdit = false;
             const oldKey = originalKey;
-            const newKey = selectedColumn.key;
+            const newKey = editingColumn.key;
 
             // TODO: these stores need to be added.
             if (oldKey !== newKey && $columnsOrder.includes(oldKey)) {
@@ -106,17 +107,28 @@
     $: onShow(showEdit);
     $: title = `Update ${columnOptions.find((v) => v.name === option.name)?.sentenceName ?? ''} column`;
 
+    function deepCloneColumn(col: Columns): Columns {
+        return {
+            ...col,
+            ...('elements' in col && Array.isArray(col['elements'])
+                ? { elements: [...col['elements']] }
+                : {})
+        } as Columns;
+    }
+
     function onShow(show: boolean) {
         if (show) {
-            currentColumn ??= { ...selectedColumn };
+            editingColumn = deepCloneColumn(selectedColumn);
+            currentColumn ??= deepCloneColumn(selectedColumn);
             originalKey = currentColumn.key;
             error = null;
         } else {
             currentColumn = null;
+            editingColumn = null;
         }
     }
 
-    $: $databaseColumnSheetOptions.disableSubmit = deepEqual(currentColumn, selectedColumn);
+    $: $databaseColumnSheetOptions.disableSubmit = deepEqual(currentColumn, editingColumn);
 </script>
 
 {#if isModal}
@@ -125,45 +137,45 @@
             {option?.name}
         </svelte:fragment>
 
-        {#if selectedColumn}
-            {#if selectedColumn?.type !== 'relationship'}
+        {#if editingColumn}
+            {#if editingColumn?.type !== 'relationship'}
                 <InputText
                     id="key"
                     label="Column key"
                     placeholder="Enter key"
-                    bind:value={selectedColumn.key}
+                    bind:value={editingColumn.key}
                     autofocus />
             {/if}
             {#if option}
                 <svelte:component
                     this={option.component}
                     editing
-                    bind:data={selectedColumn}
+                    bind:data={editingColumn}
                     onclose={() => (option = null)} />
             {/if}
         {/if}
 
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
-            <Button submit disabled={deepEqual(currentColumn, selectedColumn)}>Update</Button>
+            <Button submit disabled={deepEqual(currentColumn, editingColumn)}>Update</Button>
         </svelte:fragment>
     </Modal>
-{:else if selectedColumn}
+{:else if editingColumn}
     <Layout.Stack gap="xxxl">
         <Layout.Stack gap="l">
-            {#if selectedColumn?.type !== 'relationship'}
+            {#if editingColumn?.type !== 'relationship'}
                 <InputText
                     id="key"
                     label="Column key"
                     placeholder="Enter key"
-                    bind:value={selectedColumn.key}
+                    bind:value={editingColumn.key}
                     autofocus />
             {/if}
             {#if option}
                 <svelte:component
                     this={option.component}
                     editing
-                    bind:data={selectedColumn}
+                    bind:data={editingColumn}
                     onclose={() => (option = null)} />
             {/if}
         </Layout.Stack>