Merge pull request #6630 from nocodb/nc-fix/create-source

fix: disable closing create source modal while creating

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -547,15 +547,11 @@ const isEditBaseModalOpen = computed({
           </Draggable>
         </div>
       </div>
-      <GeneralModal v-model:visible="isNewBaseModalOpen" closable :mask-closable="false" size="medium">
-        <div class="py-6 px-8">
       <LazyDashboardSettingsDataSourcesCreateBase
+        v-model:open="isNewBaseModalOpen"
         :connection-type="clientType"
         @source-created="loadBases(true)"
-            @close="isNewBaseModalOpen = false"
       />
-        </div>
-      </GeneralModal>
       <GeneralModal v-model:visible="isErdModalOpen" size="large">
         <div class="h-[80vh]">
           <LazyDashboardSettingsErd :source-id="activeBaseId" />

packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@@ -27,9 +27,11 @@ import {
   watch,
 } from '#imports'
 
-const props = defineProps<{ connectionType?: ClientType }>()
+const props = defineProps<{ open: boolean; connectionType?: ClientType }>()
 
-const emit = defineEmits(['sourceCreated', 'close'])
+const emit = defineEmits(['update:open', 'sourceCreated'])
+
+const vOpen = useVModel(props, 'open', emit)
 
 const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL)
 
@@ -284,7 +286,7 @@ const createSource = async () => {
             }
 
             emit('sourceCreated')
-            emit('close')
+            vOpen.value = false
             creatingSource.value = false
           } else if (status === JobStatus.FAILED) {
             message.error('Failed to create base')
@@ -405,9 +407,21 @@ watch(
   },
   { immediate: true },
 )
+const toggleModal = (val: boolean) => {
+  vOpen.value = val
+}
 </script>
 
 <template>
+  <GeneralModal
+    :visible="vOpen"
+    :closable="!creatingSource"
+    :keyboard="!creatingSource"
+    :mask-closable="false"
+    size="medium"
+    @update:visible="toggleModal"
+  >
+    <div class="py-6 px-8">
       <div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full">
         <h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2">
           {{ $t('title.newBase') }}
@@ -415,7 +429,14 @@ watch(
           <span class="flex-grow"></span>
         </h1>
 
-    <a-form ref="form" :model="formState" name="external-base-create-form" layout="horizontal" no-style :label-col="{ span: 8 }">
+        <a-form
+          ref="form"
+          :model="formState"
+          name="external-base-create-form"
+          layout="horizontal"
+          no-style
+          :label-col="{ span: 8 }"
+        >
           <div
             class="nc-scrollbar-md"
             :style="{
@@ -451,7 +472,10 @@ watch(
             <template v-else>
               <!-- Host Address -->
               <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
-            <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" />
+                <a-input
+                  v-model:value="(formState.dataSource.connection as DefaultConnection).host"
+                  class="nc-extdb-host-address"
+                />
               </a-form-item>
 
               <!-- Port Number -->
@@ -506,7 +530,11 @@ watch(
                     <span>{{ $t('title.advancedParameters') }}</span>
                   </template>
                   <a-form-item label="SSL mode">
-                <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
+                    <a-select
+                      v-model:value="formState.sslUse"
+                      dropdown-class-name="nc-dropdown-ssl-mode"
+                      @select="onSSLModeChange"
+                    >
                       <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }} </a-select-option>
                     </a-select>
                   </a-form-item>
@@ -556,7 +584,11 @@ watch(
                   <a-divider />
 
                   <!--            Extra connection parameters -->
-              <a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters">
+                  <a-form-item
+                    class="mb-2"
+                    :label="$t('labels.extraConnectionParameters')"
+                    v-bind="validateInfos.extraParameters"
+                  >
                     <a-card>
                       <div v-for="(item, index) of formState.extraParameters" :key="index">
                         <div class="flex py-1 items-center gap-1">
@@ -662,6 +694,8 @@ watch(
           <a-input v-model:value="importURL" />
         </a-modal>
       </div>
+    </div>
+  </GeneralModal>
 </template>
 
 <style lang="scss" scoped>

packages/nc-gui/components/general/Modal.vue

@@ -7,18 +7,21 @@ const props = withDefaults(
     destroyOnClose?: boolean
     maskClosable?: boolean
     closable?: boolean
+    keyboard?: boolean
   }>(),
   {
     size: 'medium',
     destroyOnClose: true,
     maskClosable: true,
     closable: false,
+    keyboard: true,
   },
 )
 
 const emits = defineEmits(['update:visible'])
 
-const { width: propWidth, destroyOnClose, closable, maskClosable } = props
+const { width: propWidth, destroyOnClose } = props
+const { maskClosable, closable, keyboard } = toRefs(props)
 
 const width = computed(() => {
   if (propWidth) {
@@ -65,6 +68,7 @@ const visible = useVModel(props, 'visible', emits)
     :class="{ active: visible }"
     :width="width"
     :closable="closable"
+    :keyboard="keyboard"
     wrap-class-name="nc-modal-wrapper"
     :footer="null"
     :destroy-on-close="destroyOnClose"

packages/nc-gui/components/project/AllTables.vue

@@ -158,11 +158,7 @@ const onCreateBaseClick = () => {
       </div>
     </div>
     <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" />
-    <GeneralModal v-model:visible="isNewBaseModalOpen" size="medium">
-      <div class="py-6 px-8">
-        <LazyDashboardSettingsDataSourcesCreateBase @close="isNewBaseModalOpen = false" />
-      </div>
-    </GeneralModal>
+    <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" />
   </div>
 </template>
 

packages/nc-gui/components/workspace/View.vue

@@ -69,17 +69,6 @@ onMounted(() => {
         </a-tab-pane>
       </template>
 
-      <template v-if="isUIAllowed('workspaceBilling')">
-        <a-tab-pane key="billing" class="w-full">
-          <template #tab>
-            <div class="flex flex-row items-center px-2 pb-1 gap-x-1.5">
-              <MaterialSymbolsCreditCardOutline />
-              Billing
-            </div>
-          </template>
-          <WorkspaceBilling />
-        </a-tab-pane>
-      </template>
       <template v-if="isUIAllowed('workspaceManage')">
         <a-tab-pane key="settings" class="w-full">
           <template #tab>