feat: multiple-source front end improvements

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -92,6 +92,7 @@ const deleteBase = (base: BaseType) => {
         message.error(await extractSdkResponseErrorMsg(e))
       }
     },
+    style: 'top: 30%!important',
   })
 }
 
@@ -181,7 +182,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-row w-full">
+  <div class="flex flex-row w-full h-full">
     <div class="flex flex-col w-full overflow-auto">
       <div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
         <div class="ds-table-head">
@@ -384,11 +385,11 @@ watch(
 }
 
 .ds-table-name {
-  @apply col-span-9;
+  @apply col-span-8;
 }
 
 .ds-table-actions {
-  @apply col-span-9;
+  @apply col-span-10;
 }
 
 .ds-table-col:last-child {

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

@@ -261,20 +261,22 @@ watch(
           <a-divider style="margin: 10px 0" />
         </div>
 
-        <component
-          :is="selectedSubTab?.body"
-          v-if="selectedSubTabKeys[0] === 'dataSources'"
-          v-model:state="vDataState"
-          v-model:reload="dataSourcesReload"
-          class="px-2 pb-2"
-          :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
-        />
-        <component
-          :is="selectedSubTab?.body"
-          v-else
-          class="px-2 py-6"
-          :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
-        />
+        <div class="h-[600px]">
+          <component
+            :is="selectedSubTab?.body"
+            v-if="selectedSubTabKeys[0] === 'dataSources'"
+            v-model:state="vDataState"
+            v-model:reload="dataSourcesReload"
+            class="px-2 pb-2"
+            :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+          />
+          <component
+            :is="selectedSubTab?.body"
+            v-else
+            class="px-2 py-6"
+            :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+          />
+        </div>
       </a-layout-content>
     </a-layout>
   </a-modal>

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

@@ -263,11 +263,11 @@ const testConnection = async () => {
           title: t('msg.info.dbConnected'),
           icon: null,
           type: 'success',
-
           okText: 'Ok & Add Base',
           okType: 'primary',
           cancelText: t('general.cancel'),
           onOk: createBase,
+          style: 'top: 30%!important',
         })
       } else {
         testSuccess.value = false
@@ -345,9 +345,7 @@ watch(
 </script>
 
 <template>
-  <div
-    class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-  >
+  <div class="create-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8">
     <h1 class="prose-2xl font-bold self-center my-4">New Base</h1>
 
     <a-form
@@ -600,7 +598,7 @@ watch(
   @apply !min-h-0;
 }
 
-.create-external {
+.create-base {
   :deep(.ant-input-affix-wrapper),
   :deep(.ant-input),
   :deep(.ant-select) {

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

@@ -259,11 +259,11 @@ const testConnection = async () => {
           title: t('msg.info.dbConnected'),
           icon: null,
           type: 'success',
-
           okText: 'Ok & Edit Base',
           okType: 'primary',
           cancelText: t('general.cancel'),
           onOk: editBase,
+          style: 'top: 30%!important',
         })
       } else {
         testSuccess.value = false
@@ -338,9 +338,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
-    class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-  >
+  <div class="edit-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8">
     <h1 class="prose-2xl font-bold self-center my-4">Edit Base</h1>
 
     <a-form
@@ -545,6 +543,10 @@ onMounted(async () => {
           </a-button>
         </div>
       </a-form-item>
+      <div class="w-full flex items-center mt-2 text-[#e65100]">
+        <MdiWarning class="mr-1" />
+        Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
+      </div>
     </a-form>
 
     <a-modal
@@ -593,7 +595,7 @@ onMounted(async () => {
   @apply !min-h-0;
 }
 
-.create-external {
+.edit-base {
   :deep(.ant-input-affix-wrapper),
   :deep(.ant-input),
   :deep(.ant-select) {