From f82bfecda24fa60c101bab9f3ab519a5c6a695d6 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 11 Aug 2025 22:13:00 +0530
Subject: [PATCH] fix: Index Creation Sidebar Closes on Validation Errors

---
 .../table-[table]/indexes/createIndex.svelte  | 30 ++++++++++++-------
 .../table-[table]/layout/sidesheet.svelte     |  8 +++--
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index a3b3a48b7..7eeb58588 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -14,19 +14,24 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
-    export let showCreateIndex = false;
-    export let externalColumnKey: string = null;
+    let {
+        showCreateIndex = $bindable(false),
+        externalColumnKey = null
+    }: {
+        showCreateIndex: boolean;
+        externalColumnKey?: string;
+    } = $props();
 
     const databaseId = page.params.database;
 
-    let key = '';
+    let key = $state('');
     let types = [
         { value: IndexType.Key, label: 'Key' },
         { value: IndexType.Unique, label: 'Unique' },
         { value: IndexType.Fulltext, label: 'Fulltext' }
     ];
 
-    let selectedType = IndexType.Key;
+    let selectedType = $state(IndexType.Key);
 
     let columnOptions = $table.columns
         .filter((column) => !isRelationship(column))
@@ -35,7 +40,7 @@
             label: column.key
         }));
 
-    let columnList = [{ value: '', order: '', length: null }];
+    let columnList = $state([{ value: '', order: '', length: null }]);
 
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
@@ -56,12 +61,14 @@
         key = `index_${$indexes.length + 1}`;
     }
 
-    $: if (showCreateIndex) {
-        initialize();
-        key = generateIndexKey();
-    }
+    const addColumnDisabled = $derived(!columnList.at(-1)?.value || !columnList.at(-1)?.order);
 
-    $: addColumnDisabled = !columnList.at(-1)?.value || !columnList.at(-1)?.order;
+    $effect(() => {
+        if (showCreateIndex) {
+            initialize();
+            key = generateIndexKey();
+        }
+    });
 
     export async function create() {
         if (!(key && selectedType && !addColumnDisabled)) {
@@ -69,7 +76,7 @@
                 type: 'error',
                 message: 'Selected column key or type invalid'
             });
-            return;
+            throw new Error('Selected column key or type invalid');
         }
 
         try {
@@ -106,6 +113,7 @@
                 message: err.message
             });
             trackError(err, Submit.IndexCreate);
+            throw err;
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
index ad9e50e91..1a3629e4d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
@@ -39,8 +39,12 @@
         <Layout.Stack direction="column" justifyContent="space-evenly">
             <Form
                 onSubmit={async () => {
-                    await submit?.onClick();
-                    show = false;
+                    try {
+                        await submit?.onClick();
+                        show = false;
+                    } catch (error) {
+                        // error occurred, dont close the sidebar
+                    }
                 }}>
                 <Layout.Stack gap="xl" class="sheet-content">
                     {@render children?.()}