From b5727d180f0dcbff03df1685e24627a662a108fb Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 2 Oct 2023 11:43:02 +0000
Subject: [PATCH] fix: Fixed create base btn click not disabled when the button
 is disabled

---
 packages/nc-gui/components/project/AllTables.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 13ade9a689..89edd956af 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -68,6 +68,12 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
     close(1000)
   }
 }
+
+const onCreateBaseClick = () => {
+  if (isDataSourceLimitReached.value) return
+
+  isNewBaseModalOpen.value = true
+}
 </script>
 
 <template>
@@ -75,6 +81,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
     <div class="flex flex-row gap-x-6 pb-3 pt-6">
       <div
         v-if="isUIAllowed('tableCreate')"
+        role="button"
         class="nc-project-view-all-table-btn"
         data-testid="proj-view-btn__add-new-table"
         @click="openTableCreateDialog()"
@@ -84,6 +91,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
       </div>
       <div
         v-if="isUIAllowed('tableCreate')"
+        role="button"
         class="nc-project-view-all-table-btn"
         data-testid="proj-view-btn__import-data"
         @click="isImportModalOpen = true"
@@ -98,12 +106,13 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
           </div>
         </template>
         <div
+          role="button"
           class="nc-project-view-all-table-btn"
-          data-testid="proj-view-btn__import-data"
+          data-testid="proj-view-btn__create-source"
           :class="{
             disabled: isDataSourceLimitReached,
           }"
-          @click="isNewBaseModalOpen = true"
+          @click="onCreateBaseClick"
         >
           <GeneralIcon icon="dataSource" />
           <div class="label">{{ $t('labels.connectDataSource') }}</div>