From 3e10559d7cf713425d26112d3d2f822528c6eead Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 1/8] fix: sub-text & alignments

---
 .../data-sources/SourceRestrictions.vue       |  4 +-
 .../nc-gui/components/project/AllTables.vue   | 41 +++++++++++--------
 .../workspace/integrations/List.vue           |  2 +-
 .../integrations/newAvailableList.vue         |  5 +--
 packages/nc-gui/lang/en.json                  |  4 +-
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/SourceRestrictions.vue b/packages/nc-gui/components/dashboard/settings/data-sources/SourceRestrictions.vue
index 056be9b3b8..181f5f08ac 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/SourceRestrictions.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/SourceRestrictions.vue
@@ -12,7 +12,7 @@ const metaWrite = useVModel(props, 'allowMetaWrite', emits)
 
 <template>
   <a-form-item class="nc-source-restictions-card">
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
       <div class="flex items-center gap-3">
         <NcTooltip :disabled="!metaWrite" placement="topLeft" class="flex">
           <template #title>
@@ -30,7 +30,7 @@ const metaWrite = useVModel(props, 'allowMetaWrite', emits)
     </div>
   </a-form-item>
   <a-form-item class="nc-source-restictions-card">
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
       <div class="flex items-center gap-3">
         <a-switch
           v-model:checked="metaWrite"
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index e1de5b0e3b..fa16fbfeb5 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -130,7 +130,7 @@ const onCreateBaseClick = () => {
 
           <div class="label">{{ $t('general.create') }} {{ $t('general.new') }} {{ $t('objects.table') }}</div>
         </div>
-        <div class="subtext">Start from scratch by creating a new table.</div>
+        <div class="subtext">Start from scratch.</div>
       </div>
 
       <div
@@ -145,9 +145,14 @@ const onCreateBaseClick = () => {
           <GeneralIcon icon="download" class="!text-orange-700 !h-5 !w-5" />
           <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
         </div>
-        <div class="subtext">Quickly bring in existing data from various files & external sources.</div>
+        <div class="subtext">From files & external sources</div>
       </div>
-      <NcTooltip v-if="isUIAllowed('sourceCreate')" placement="bottom" :disabled="!isDataSourceLimitReached" class="flex-none flex">
+      <NcTooltip
+        v-if="isUIAllowed('sourceCreate')"
+        placement="bottom"
+        :disabled="!isDataSourceLimitReached"
+        class="flex-none flex"
+      >
         <template #title>
           {{ $t('tooltip.reachedSourceLimit') }}
         </template>
@@ -165,24 +170,24 @@ const onCreateBaseClick = () => {
             <GeneralIcon icon="server1" class="!text-green-700 !h-5 !w-5" />
             <div class="label">{{ $t('labels.connectDataSource') }}</div>
           </div>
-          <div class="subtext">Connect directly in realtime to external databases.</div>
+          <div class="subtext">In realtime to external databases.</div>
         </div>
       </NcTooltip>
 
-      <div
-        v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
-        v-e="['c:table:create-source']"
-        role="button"
-        class="nc-base-view-all-table-btn"
-        data-testid="proj-view-btn__create-source"
-        @click="syncDataModalOpen = true"
-      >
-        <div class="flex items-center gap-3">
-          <GeneralIcon icon="refresh" class="!text-blue-700 !h-5 !w-5" />
-          <div class="label capitalize">{{ $t('labels.syncData') }}</div>
-        </div>
-        <div class="subtext">Keep your data updated and in sync across multiple sources.</div>
-      </div>
+      <!--      <div-->
+      <!--        v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"-->
+      <!--        v-e="['c:table:create-source']"-->
+      <!--        role="button"-->
+      <!--        class="nc-base-view-all-table-btn"-->
+      <!--        data-testid="proj-view-btn__create-source"-->
+      <!--        @click="syncDataModalOpen = true"-->
+      <!--      >-->
+      <!--        <div class="flex items-center gap-3">-->
+      <!--          <GeneralIcon icon="refresh" class="!text-blue-700 !h-5 !w-5" />-->
+      <!--          <div class="label capitalize">{{ $t('labels.syncData') }}</div>-->
+      <!--        </div>-->
+      <!--        <div class="subtext">Keep your data updated and in sync across multiple sources.</div>-->
+      <!--      </div>-->
     </div>
     <div
       v-if="base?.isLoading"
diff --git a/packages/nc-gui/components/workspace/integrations/List.vue b/packages/nc-gui/components/workspace/integrations/List.vue
index 034dded030..02c096a730 100644
--- a/packages/nc-gui/components/workspace/integrations/List.vue
+++ b/packages/nc-gui/components/workspace/integrations/List.vue
@@ -225,7 +225,7 @@ onKeyStroke('ArrowDown', onDown)
     <div class="flex justify-between gap-12">
       <div class="text-sm font-normal text-gray-600">
         <div>
-          Connections simplify managing stored configurations for different integrations.
+          Manage connections for your integrations.
           <a target="_blank" rel="noopener noreferrer"> Learn more </a>
         </div>
       </div>
diff --git a/packages/nc-gui/components/workspace/integrations/newAvailableList.vue b/packages/nc-gui/components/workspace/integrations/newAvailableList.vue
index f9dcc926f1..811d47e7e3 100644
--- a/packages/nc-gui/components/workspace/integrations/newAvailableList.vue
+++ b/packages/nc-gui/components/workspace/integrations/newAvailableList.vue
@@ -83,10 +83,7 @@ const handleAddIntegration = (type: typeof integrationType) => {
                 'max-w-[740px]': !isModal,
               }"
             >
-              <div>
-                Centralise your operations by aggregating information from various external platforms into NocoDB. Select from the
-                available integrations below to get started. <a target="_blank" rel="noopener noreferrer"> Learn more </a>
-              </div>
+              <div>Connect integrations with NocoDB. <a target="_blank" rel="noopener noreferrer"> Learn more </a></div>
             </div>
 
             <div class="integration-type-wrapper">
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index b69d5ccaf0..a883444be8 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -1787,8 +1787,8 @@
       "passwordChanged": "Password changed successfully. Please login again.",
       "settingsSaved": "Settings saved successfully",
       "roleUpdated": "Role updated successfully",
-      "connectionAdded": "Connection Successfully Created",
-      "connectionAddedDesc": "All Base owners & creators in this Workspace can now use this connection to easily add a new Data Source to their Base."
+      "connectionAdded": "Integration connected successfully",
+      "connectionAddedDesc": "Base owners and creators can now add a data source without re-entering credentials."
     }
   }
 }

From 7489695164dec5b374fc523bac5c536b8a4f783e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 2/8] fix(nc-gui): base home page buttons in old design

---
 .../nc-gui/components/project/AllTables.vue   | 54 ++++++++++---------
 .../components/project/SyncDataModal.vue      |  2 +-
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index fa16fbfeb5..8f0252e8a4 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -125,12 +125,12 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__add-new-table"
         @click="openTableCreateDialog()"
       >
-        <div class="flex items-center gap-3">
-          <GeneralIcon icon="addOutlineBox" class="!text-brand-500 !h-5 !w-5" />
+        <GeneralIcon icon="addOutlineBox" class="!text-brand-500" />
 
+        <div class="flex flex-col gap-1">
           <div class="label">{{ $t('general.create') }} {{ $t('general.new') }} {{ $t('objects.table') }}</div>
+          <div class="subtext">Start from scratch.</div>
         </div>
-        <div class="subtext">Start from scratch.</div>
       </div>
 
       <div
@@ -141,11 +141,12 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__import-data"
         @click="isImportModalOpen = true"
       >
-        <div class="flex items-center gap-3">
-          <GeneralIcon icon="download" class="!text-orange-700 !h-5 !w-5" />
+        <GeneralIcon icon="download" class="!text-orange-700" />
+        <div class="flex flex-col gap-1">
           <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
+
+          <div class="subtext">From files & external sources</div>
         </div>
-        <div class="subtext">From files & external sources</div>
       </div>
       <NcTooltip
         v-if="isUIAllowed('sourceCreate')"
@@ -166,29 +167,30 @@ const onCreateBaseClick = () => {
           }"
           @click="onCreateBaseClick"
         >
-          <div class="flex items-center gap-3">
-            <GeneralIcon icon="server1" class="!text-green-700 !h-5 !w-5" />
+          <GeneralIcon icon="server1" class="!text-green-700" />
+          <div class="flex flex-col gap-1">
             <div class="label">{{ $t('labels.connectDataSource') }}</div>
+            <div class="subtext">In realtime to external databases.</div>
           </div>
-          <div class="subtext">In realtime to external databases.</div>
         </div>
       </NcTooltip>
 
-      <!--      <div-->
-      <!--        v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"-->
-      <!--        v-e="['c:table:create-source']"-->
-      <!--        role="button"-->
-      <!--        class="nc-base-view-all-table-btn"-->
-      <!--        data-testid="proj-view-btn__create-source"-->
-      <!--        @click="syncDataModalOpen = true"-->
-      <!--      >-->
-      <!--        <div class="flex items-center gap-3">-->
-      <!--          <GeneralIcon icon="refresh" class="!text-blue-700 !h-5 !w-5" />-->
-      <!--          <div class="label capitalize">{{ $t('labels.syncData') }}</div>-->
-      <!--        </div>-->
-      <!--        <div class="subtext">Keep your data updated and in sync across multiple sources.</div>-->
-      <!--      </div>-->
-    </div>
+      <!--
+        <div
+        v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
+        v-e="['c:table:create-source']"
+        role="button"
+        class="nc-base-view-all-table-btn"
+        data-testid="proj-view-btn__create-source"
+        @click="syncDataModalOpen = true"
+      >
+        <div class="flex items-center gap-3">
+          <GeneralIcon icon="refresh" class="!text-blue-700 !h-5 !w-5" />
+          <div class="label capitalize">{{ $t('labels.syncData') }}</div>
+        </div>
+        <div class="subtext">Keep your data updated and in sync across multiple sources.</div>
+      </div>
+    --></div>
     <div
       v-if="base?.isLoading"
       class="flex items-center justify-center text-center mt-4"
@@ -282,13 +284,13 @@ const onCreateBaseClick = () => {
 
 <style lang="scss" scoped>
 .nc-base-view-all-table-btn {
-  @apply flex-none flex flex-col gap-y-3 px-3 py-5 bg-gray-50 rounded-xl border-1 border-gray-100 min-w-[230px] max-w-[245px] cursor-pointer text-gray-800 hover:(bg-gray-100 border-gray-200) transition-all duration-300;
+  @apply flex-none flex flex-col gap-y-3 p-4 bg-gray-50 rounded-xl border-1 border-gray-100 min-w-[230px] max-w-[245px] cursor-pointer text-gray-800 hover:(bg-gray-100 border-gray-200) transition-all duration-300;
   &:hover {
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
   }
 
   .nc-icon {
-    @apply h-6 w-6;
+    @apply h-10 w-10;
   }
 
   .label {
diff --git a/packages/nc-gui/components/project/SyncDataModal.vue b/packages/nc-gui/components/project/SyncDataModal.vue
index 79052fdee6..05190ba453 100644
--- a/packages/nc-gui/components/project/SyncDataModal.vue
+++ b/packages/nc-gui/components/project/SyncDataModal.vue
@@ -22,7 +22,7 @@ const upvotesData = computed(() => {
 const handleUpvote = (syncDataType: SyncDataType) => {
   if (upvotesData.value.has(syncDataType)) return
 
-  $e(`a:sync-request:${syncDataType}`)
+  $e(`a:integration-request:${syncDataType}`)
 
   updateSyncDataUpvotes([...syncDataUpvotes.value, syncDataType])
 }

From da5dabc50231f54975c0cb2c83ef2d3a39014e19 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 3/8] fix(nc-gui): add data source, additional details appear
 after selection of connection

---
 .../settings/data-sources/CreateBase.vue      | 293 +++++++++---------
 1 file changed, 145 insertions(+), 148 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index a396cd1049..8eb556a558 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -471,7 +471,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
           <NcButton
             size="small"
             type="primary"
-            :disabled="!testSuccess"
+            :disabled="!testSuccess || !selectedIntegration"
             :loading="creatingSource"
             class="nc-extdb-btn-submit"
             @click="createSource"
@@ -560,162 +560,159 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
                 </div>
               </div>
 
-              <div class="nc-form-section">
-                <div class="flex items-center justify-between">
-                  <div class="nc-form-section-title">Connection details</div>
-                </div>
-                <div class="nc-form-section-body">
-                  <!-- SQLite File -->
-                  <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
-                  <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
-                    <a-row :gutter="24">
-                      <a-col :span="12">
-                        <!-- Database -->
-                        <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-                          <a-input
-                            v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
-                            class="nc-extdb-host-database"
-                          />
-                        </a-form-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <!-- Schema -->
-                        <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
-                          <a-input
-                            v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
-                            class="nc-extdb-host-database"
-                          />
-                        </a-form-item>
-                      </a-col>
-                    </a-row>
-                  </template>
-
-                  <template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
-                    <a-row :gutter="24">
-                      <a-col :span="12">
-                        <a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
-                          <a-input
-                            v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
-                            class="nc-extdb-host-database"
-                          />
-                        </a-form-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
-                          <a-input
-                            v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
-                            class="nc-extdb-host-schema"
-                          />
-                        </a-form-item>
-                      </a-col>
-                    </a-row>
-                  </template>
-                  <template v-else>
-                    <a-row :gutter="24">
-                      <a-col :span="12">
-                        <!-- Database -->
-                        <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-                          <!-- Database : create if not exists -->
-                          <a-input
-                            v-model:value="formState.dataSource.connection.database"
-                            :placeholder="$t('labels.dbCreateIfNotExists')"
-                            class="nc-extdb-host-database"
-                          />
-                        </a-form-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <!-- Schema name -->
-                        <a-form-item
-                          v-if="
-                            ([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
-                              [ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
-                            formState.dataSource.searchPath
-                          "
-                          :label="$t('labels.schemaName')"
-                          v-bind="validateInfos['dataSource.searchPath.0']"
-                        >
-                          <a-input
-                            v-model:value="formState.dataSource.searchPath[0]"
-                            :placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
-                          />
-                        </a-form-item>
-                      </a-col>
-                    </a-row>
-                  </template>
+              <template v-if="selectedIntegration">
+                <div class="nc-form-section">
+                  <div class="flex items-center justify-between">
+                    <div class="nc-form-section-title">Connection details</div>
+                  </div>
+                  <div class="nc-form-section-body">
+                    <!-- SQLite File -->
+                    <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
+                    <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
+                      <a-row :gutter="24">
+                        <a-col :span="12">
+                          <!-- Database -->
+                          <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+                            <a-input
+                              v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
+                              class="nc-extdb-host-database"
+                            />
+                          </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                          <!-- Schema -->
+                          <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
+                            <a-input
+                              v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
+                              class="nc-extdb-host-database"
+                            />
+                          </a-form-item>
+                        </a-col>
+                      </a-row>
+                    </template>
+
+                    <template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
+                      <a-row :gutter="24">
+                        <a-col :span="12">
+                          <a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
+                            <a-input
+                              v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
+                              class="nc-extdb-host-database"
+                            />
+                          </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                          <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
+                            <a-input
+                              v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
+                              class="nc-extdb-host-schema"
+                            />
+                          </a-form-item>
+                        </a-col>
+                      </a-row>
+                    </template>
+                    <template v-else>
+                      <a-row :gutter="24">
+                        <a-col :span="12">
+                          <!-- Database -->
+                          <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+                            <!-- Database : create if not exists -->
+                            <a-input
+                              v-model:value="formState.dataSource.connection.database"
+                              :placeholder="$t('labels.dbCreateIfNotExists')"
+                              class="nc-extdb-host-database"
+                            />
+                          </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                          <!-- Schema name -->
+                          <a-form-item
+                            v-if="
+                              ([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
+                                [ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
+                              formState.dataSource.searchPath
+                            "
+                            :label="$t('labels.schemaName')"
+                            v-bind="validateInfos['dataSource.searchPath.0']"
+                          >
+                            <a-input
+                              v-model:value="formState.dataSource.searchPath[0]"
+                              :placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
+                            />
+                          </a-form-item>
+                        </a-col>
+                      </a-row>
+                    </template>
+                  </div>
                 </div>
-              </div>
 
-              <div class="nc-form-section">
-                <div class="nc-form-section-title">Permissions</div>
-                <div class="nc-form-section-body">
-                  <DashboardSettingsDataSourcesSourceRestrictions
-                    v-model:allowMetaWrite="allowMetaWrite"
-                    v-model:allowDataWrite="allowDataWrite"
-                  />
+                <div class="nc-form-section">
+                  <div class="nc-form-section-title">Permissions</div>
+                  <div class="nc-form-section-body">
+                    <DashboardSettingsDataSourcesSourceRestrictions
+                      v-model:allowMetaWrite="allowMetaWrite"
+                      v-model:allowDataWrite="allowDataWrite"
+                    />
+                  </div>
                 </div>
-              </div>
 
-              <template
-                v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
-              >
-                <a-collapse
-                v-model:active-key="advancedOptionsExpansionPanel" 
-                  ghost
-                  class="nc-source-advanced-options !mt-4"
+                <template
+                  v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
                 >
-                  <template #expandIcon="{ isActive }">
-                    <NcButton
-                      type="text"
-                      size="small"
-                      class="!-ml-1.5"
-                      @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
-                    >
-                      <div class="nc-form-section-title">Advanced options</div>
-
-                      <GeneralIcon
-                        icon="chevronDown"
-                        class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
-                        :class="{ '!rotate-180': isActive }"
-                      />
-                    </NcButton>
-                  </template>
-                  <a-collapse-panel key="1" collapsible="disabled">
-                    <template #header>
-                      <span></span>
+                  <a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
+                    <template #expandIcon="{ isActive }">
+                      <NcButton
+                        type="text"
+                        size="small"
+                        class="!-ml-1.5"
+                        @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
+                      >
+                        <div class="nc-form-section-title">Advanced options</div>
+
+                        <GeneralIcon
+                          icon="chevronDown"
+                          class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
+                          :class="{ '!rotate-180': isActive }"
+                        />
+                      </NcButton>
                     </template>
+                    <a-collapse-panel key="1" collapsible="disabled">
+                      <template #header>
+                        <span></span>
+                      </template>
 
-                    <div class="flex flex-col gap-4">
                       <div class="flex flex-col gap-4">
-                        <a-row :gutter="24">
-                          <a-col :span="12">
-                            <a-form-item :label="$t('labels.inflection.tableName')">
-                              <NcSelect
-                                v-model:value="formState.inflection.inflectionTable"
-                                class="nc-select-shadow"
-                                dropdown-class-name="nc-dropdown-inflection-table-name"
-                              >
-                                <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
-                              </NcSelect>
-                            </a-form-item>
-                          </a-col>
-                          <a-col :span="12">
-                            <a-form-item :label="$t('labels.inflection.columnName')">
-                              <NcSelect
-                                v-model:value="formState.inflection.inflectionColumn"
-                                class="nc-select-shadow"
-                                dropdown-class-name="nc-dropdown-inflection-column-name"
-                              >
-                                <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
-                              </NcSelect>
-                            </a-form-item>
-                          </a-col>
-                        </a-row>
+                        <div class="flex flex-col gap-4">
+                          <a-row :gutter="24">
+                            <a-col :span="12">
+                              <a-form-item :label="$t('labels.inflection.tableName')">
+                                <NcSelect
+                                  v-model:value="formState.inflection.inflectionTable"
+                                  class="nc-select-shadow"
+                                  dropdown-class-name="nc-dropdown-inflection-table-name"
+                                >
+                                  <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
+                                </NcSelect>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item :label="$t('labels.inflection.columnName')">
+                                <NcSelect
+                                  v-model:value="formState.inflection.inflectionColumn"
+                                  class="nc-select-shadow"
+                                  dropdown-class-name="nc-dropdown-inflection-column-name"
+                                >
+                                  <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
+                                </NcSelect>
+                              </a-form-item>
+                            </a-col>
+                          </a-row>
+                        </div>
                       </div>
-                    </div>
-                  </a-collapse-panel>
-                </a-collapse>
+                    </a-collapse-panel>
+                  </a-collapse>
+                </template>
               </template>
-
               <div>
                 <!-- For spacing -->
               </div>
@@ -726,7 +723,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
           </div>
         </div>
         <div class="nc-add-source-right-panel">
-          <DashboardSettingsDataSourcesSupportedDocs/>
+          <DashboardSettingsDataSourcesSupportedDocs />
           <NcDivider />
         </div>
       </div>

From 6e6bd728a664990fdfaa710bf0ee21d8f4f19e57 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 4/8] fix(nc-gui): update oss and edit source modal

---
 .../settings/data-sources/CreateBase.vue      | 13 ++----
 .../settings/data-sources/EditBase.vue        | 40 +++++++++++--------
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 8eb556a558..812ecbec70 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -435,10 +435,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
         <div class="h-6 self-start flex items-center">
           <GeneralIcon icon="server1" class="!text-green-700 !h-4 !w-4" />
         </div>
-        <div class="flex-1">
-          <div class="flex-1 text-base font-weight-700">New Source</div>
-          <div class="text-xs text-gray-600">Connect with a new external data source, directly in real time.</div>
-        </div>
+        <div class="flex-1 text-base font-weight-700">Add Data Source</div>
 
         <div class="flex items-center gap-3">
           <div class="w-[15px] h-[15px] cursor-pointer" @dblclick="onEasterEgg"></div>
@@ -483,7 +480,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
           </NcButton>
         </div>
       </div>
-      <div class="h-[calc(100%_-_66px)] flex">
+      <div class="h-[calc(100%_-_58px)] flex">
         <div class="nc-add-source-left-panel nc-scrollbar-thin">
           <div class="create-source bg-white relative flex flex-col gap-2 w-full max-w-[768px]">
             <a-form
@@ -496,11 +493,10 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
               class="flex flex-col gap-5.5"
             >
               <div class="nc-form-section">
-                <div class="nc-form-section-title">Source details</div>
                 <div class="nc-form-section-body">
                   <a-row :gutter="24">
                     <a-col :span="12">
-                      <a-form-item label="Source name" v-bind="validateInfos.title">
+                      <a-form-item label="Data Source Name" v-bind="validateInfos.title">
                         <a-input v-model:value="formState.title" @input="populateName(formState.title)" />
                       </a-form-item>
                     </a-col>
@@ -562,9 +558,6 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
 
               <template v-if="selectedIntegration">
                 <div class="nc-form-section">
-                  <div class="flex items-center justify-between">
-                    <div class="nc-form-section-title">Connection details</div>
-                  </div>
                   <div class="nc-form-section-body">
                     <!-- SQLite File -->
                     <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 380b4d968b..40e529bb38 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -48,6 +48,8 @@ const easterEgg = ref(false)
 
 const easterEggCount = ref(0)
 
+const advancedOptionsExpansionPanel = ref<string[]>([])
+
 const onEasterEgg = () => {
   easterEggCount.value += 1
   if (easterEggCount.value >= 2) {
@@ -335,8 +337,17 @@ const allowDataWrite = computed({
   },
 })
 
+const handleUpdateAdvancedOptionsExpansionPanel = (open: boolean) => {
+  if (open) {
+    advancedOptionsExpansionPanel.value = ['1']
+    handleAutoScroll(true, 'nc-source-advanced-options')
+  } else {
+    advancedOptionsExpansionPanel.value = []
+  }
+}
+
 let timer: any
-const handleAutoScroll = (scroll: boolean, className: string) => {
+function handleAutoScroll(scroll: boolean, className: string) {
   if (scroll) {
     if (timer) {
       clearTimeout(timer)
@@ -369,11 +380,10 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
           class="flex flex-col gap-5.5"
         >
           <div class="nc-form-section">
-            <div class="nc-form-section-title">Source details</div>
             <div class="nc-form-section-body">
               <a-row :gutter="24">
                 <a-col :span="12">
-                  <a-form-item label="Source name" v-bind="validateInfos.title">
+                  <a-form-item label="Data Source Name" v-bind="validateInfos.title">
                     <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
                   </a-form-item>
                 </a-col>
@@ -420,8 +430,6 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
           </div>
 
           <div class="nc-form-section">
-            <div class="nc-form-section-title">Connection details</div>
-
             <div class="nc-form-section-body">
               <!-- SQLite File -->
               <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
@@ -515,14 +523,14 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
           <template
             v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
           >
-            <a-collapse
-              ghost
-              expand-icon-position="right"
-              class="nc-source-advanced-options !mt-4"
-              @change="handleAutoScroll(!!$event?.length, 'nc-source-advanced-options')"
-            >
+            <a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
               <template #expandIcon="{ isActive }">
-                <NcButton type="text" size="xsmall">
+                <NcButton
+                  type="text"
+                  size="small"
+                  class="!-ml-1.5"
+                  @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
+                >
                   <GeneralIcon
                     icon="chevronDown"
                     class="flex-none cursor-pointer transform transition-transform duration-500"
@@ -530,11 +538,9 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
                   />
                 </NcButton>
               </template>
-              <a-collapse-panel key="1">
+              <a-collapse-panel key="1" collapsible="disabled">
                 <template #header>
-                  <div class="flex">
-                    <div class="nc-form-section-title">Advanced options</div>
-                  </div>
+                 <span></span>
                 </template>
 
                 <div class="flex flex-col gap-4">
@@ -631,7 +637,7 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
   @apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
 }
 :deep(.ant-collapse-header) {
-  @apply !-mt-4 !p-0 flex items-center;
+  @apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
 }
 :deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
   @apply !right-0;

From e3593a1fc12cbc5f469b7ac008fd5e2eb4666e29 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 5/8] fix(nc-gui): some merge conflicts

---
 .../dashboard/settings/data-sources/CreateBase.vue    | 11 ++---------
 packages/nc-gui/components/project/AllTables.vue      |  6 +++---
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 812ecbec70..780174a936 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -139,16 +139,10 @@ const validators = computed(() => {
   }
 })
 
-const { validate, validateInfos } = useForm(formState.value, validators)
-
-const populateName = (v: string) => {
-  if (selectedIntegration.value) return
-  formState.value.dataSource.connection.database = `${v.trim()}_noco`
-}
+const { validate, validateInfos, clearValidate } = useForm(formState.value, validators)
 
 const onClientChange = () => {
   formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) }
-  populateName(formState.value.title)
 }
 
 const inflectionTypes = ['camelize', 'none']
@@ -322,7 +316,6 @@ watch(
 onMounted(async () => {
   await loadIntegrations(true, base.value?.id)
   formState.value.title = await generateUniqueName()
-  populateName(formState.value.title)
 
   nextTick(() => {
     // todo: replace setTimeout and follow better approach
@@ -497,7 +490,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
                   <a-row :gutter="24">
                     <a-col :span="12">
                       <a-form-item label="Data Source Name" v-bind="validateInfos.title">
-                        <a-input v-model:value="formState.title" @input="populateName(formState.title)" />
+                        <a-input v-model:value="formState.title" />
                       </a-form-item>
                     </a-col>
                   </a-row>
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 8f0252e8a4..a2a1088f8b 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -125,7 +125,7 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__add-new-table"
         @click="openTableCreateDialog()"
       >
-        <GeneralIcon icon="addOutlineBox" class="!text-brand-500" />
+        <GeneralIcon icon="addOutlineBox" class="!w-8 !h-8 !text-brand-500" />
 
         <div class="flex flex-col gap-1">
           <div class="label">{{ $t('general.create') }} {{ $t('general.new') }} {{ $t('objects.table') }}</div>
@@ -141,7 +141,7 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__import-data"
         @click="isImportModalOpen = true"
       >
-        <GeneralIcon icon="download" class="!text-orange-700" />
+        <GeneralIcon icon="download" class="!w-7.5 !h-7.5 !text-orange-700" />
         <div class="flex flex-col gap-1">
           <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
 
@@ -167,7 +167,7 @@ const onCreateBaseClick = () => {
           }"
           @click="onCreateBaseClick"
         >
-          <GeneralIcon icon="server1" class="!text-green-700" />
+          <GeneralIcon icon="server1" class="!w-7 !h-7 !text-green-700" />
           <div class="flex flex-col gap-1">
             <div class="label">{{ $t('labels.connectDataSource') }}</div>
             <div class="subtext">In realtime to external databases.</div>

From ffe9d743ed9981e27844b3472b82aa190196cfee Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 6/8] fix(nc-gui): add missing section title

---
 .../components/dashboard/settings/data-sources/EditBase.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index 40e529bb38..cb925724b9 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -531,16 +531,18 @@ function handleAutoScroll(scroll: boolean, className: string) {
                   class="!-ml-1.5"
                   @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
                 >
+                  <div class="nc-form-section-title">Advanced options</div>
+
                   <GeneralIcon
                     icon="chevronDown"
-                    class="flex-none cursor-pointer transform transition-transform duration-500"
+                    class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
                     :class="{ '!rotate-180': isActive }"
                   />
                 </NcButton>
               </template>
               <a-collapse-panel key="1" collapsible="disabled">
                 <template #header>
-                 <span></span>
+                  <span></span>
                 </template>
 
                 <div class="flex flex-col gap-4">

From c704726df9bb98e24c1ef920ed0da076ff72b0a4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 7/8] fix(nc-gui): add docs panel in edit source modal

---
 .../settings/data-sources/CreateBase.vue      |   2 +-
 .../settings/data-sources/EditBase.vue        | 404 +++++++++---------
 2 files changed, 206 insertions(+), 200 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
index 780174a936..eea8fc8ad8 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -722,7 +722,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
   @apply p-6 flex-1 flex justify-center;
 }
 .nc-add-source-right-panel {
-  @apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
+  @apply p-4 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
 }
 :deep(.ant-collapse-header) {
   @apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
index cb925724b9..c9cb742673 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -368,218 +368,224 @@ function handleAutoScroll(scroll: boolean, className: string) {
 
 <template>
   <div class="edit-source bg-white relative h-full flex flex-col w-full">
-    <div class="h-full max-h-[calc(100%_-_65px)] nc-scrollbar-thin">
-      <div class="h-full max-w-[992px] p-6 mx-auto">
-        <a-form
-          ref="form"
-          :model="formState"
-          hide-required-mark
-          name="external-base-create-form"
-          layout="vertical"
-          no-style
-          class="flex flex-col gap-5.5"
-        >
-          <div class="nc-form-section">
-            <div class="nc-form-section-body">
-              <a-row :gutter="24">
-                <a-col :span="12">
-                  <a-form-item label="Data Source Name" v-bind="validateInfos.title">
-                    <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-              <a-row :gutter="24">
-                <a-col :span="12">
-                  <a-form-item label="Select connection">
-                    <NcSelect
-                      :value="formState.fk_integration_id"
-                      disabled
-                      class="nc-extdb-db-type nc-select-shadow"
-                      dropdown-class-name="nc-dropdown-ext-db-type"
-                      placeholder="Select connection"
-                      allow-clear
-                      show-search
-                      dropdown-match-select-width
-                    >
-                      <a-select-option v-for="integration in integrations" :key="integration.id" :value="integration.id">
-                        <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
-                          <GeneralBaseLogo
-                            v-if="integration.type"
-                            :source-type="integration.sub_type"
-                            class="flex-none h-4 w-4"
-                          />
-                          <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                            <template #title>
-                              {{ integration.title }}
-                            </template>
-                            {{ integration.title }}
-                          </NcTooltip>
-                          <component
-                            :is="iconMap.check"
-                            v-if="formState.fk_integration_id === integration.id"
-                            id="nc-selected-item-icon"
-                            class="text-primary w-4 h-4"
-                          />
-                        </div>
-                      </a-select-option>
-                    </NcSelect>
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </div>
-          </div>
-
-          <div class="nc-form-section">
-            <div class="nc-form-section-body">
-              <!-- SQLite File -->
-              <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
-              <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
-                <a-row :gutter="24">
-                  <a-col :span="12">
-                    <!-- Database -->
-                    <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-                      <a-input
-                        v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
-                        class="nc-extdb-host-database"
-                      />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <!-- Schema -->
-                    <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
-                      <a-input
-                        v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
-                        class="nc-extdb-host-database"
-                      />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-              </template>
-
-              <template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
+    <div class="h-full max-h-[calc(100%_-_65px)] flex">
+      <div class="nc-edit-source-left-panel nc-scrollbar-thin">
+        <div class="h-full max-w-[768px] mx-auto">
+          <a-form
+            ref="form"
+            :model="formState"
+            hide-required-mark
+            name="external-base-create-form"
+            layout="vertical"
+            no-style
+            class="flex flex-col gap-5.5"
+          >
+            <div class="nc-form-section">
+              <div class="nc-form-section-body">
                 <a-row :gutter="24">
                   <a-col :span="12">
-                    <a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
-                      <a-input
-                        v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
-                        class="nc-extdb-host-database"
-                      />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
-                      <a-input
-                        v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
-                        class="nc-extdb-host-schema"
-                      />
+                    <a-form-item label="Data Source Name" v-bind="validateInfos.title">
+                      <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
                     </a-form-item>
                   </a-col>
                 </a-row>
-              </template>
-              <template v-else>
                 <a-row :gutter="24">
                   <a-col :span="12">
-                    <!-- Database -->
-                    <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
-                      <!-- Database : create if not exists -->
-                      <a-input
-                        v-model:value="formState.dataSource.connection.database"
-                        :placeholder="$t('labels.dbCreateIfNotExists')"
-                        class="nc-extdb-host-database"
-                      />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <!-- Schema name -->
-                    <a-form-item
-                      v-if="
-                        ([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
-                          [ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
-                        formState.dataSource.searchPath
-                      "
-                      :label="$t('labels.schemaName')"
-                      v-bind="validateInfos['dataSource.searchPath.0']"
-                    >
-                      <a-input
-                        v-model:value="formState.dataSource.searchPath[0]"
-                        :placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
-                      />
+                    <a-form-item label="Select connection">
+                      <NcSelect
+                        :value="formState.fk_integration_id"
+                        disabled
+                        class="nc-extdb-db-type nc-select-shadow"
+                        dropdown-class-name="nc-dropdown-ext-db-type"
+                        placeholder="Select connection"
+                        allow-clear
+                        show-search
+                        dropdown-match-select-width
+                      >
+                        <a-select-option v-for="integration in integrations" :key="integration.id" :value="integration.id">
+                          <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
+                            <GeneralBaseLogo
+                              v-if="integration.type"
+                              :source-type="integration.sub_type"
+                              class="flex-none h-4 w-4"
+                            />
+                            <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                              <template #title>
+                                {{ integration.title }}
+                              </template>
+                              {{ integration.title }}
+                            </NcTooltip>
+                            <component
+                              :is="iconMap.check"
+                              v-if="formState.fk_integration_id === integration.id"
+                              id="nc-selected-item-icon"
+                              class="text-primary w-4 h-4"
+                            />
+                          </div>
+                        </a-select-option>
+                      </NcSelect>
                     </a-form-item>
                   </a-col>
                 </a-row>
-              </template>
+              </div>
             </div>
-          </div>
-
-          <div class="nc-form-section">
-            <div class="nc-form-section-title">Permissions</div>
-            <div class="nc-form-section-body">
-              <DashboardSettingsDataSourcesSourceRestrictions
-                v-model:allowMetaWrite="allowMetaWrite"
-                v-model:allowDataWrite="allowDataWrite"
-              />
+
+            <div class="nc-form-section">
+              <div class="nc-form-section-body">
+                <!-- SQLite File -->
+                <template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
+                <template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
+                  <a-row :gutter="24">
+                    <a-col :span="12">
+                      <!-- Database -->
+                      <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+                        <a-input
+                          v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
+                          class="nc-extdb-host-database"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                      <!-- Schema -->
+                      <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
+                        <a-input
+                          v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
+                          class="nc-extdb-host-database"
+                        />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </template>
+
+                <template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
+                  <a-row :gutter="24">
+                    <a-col :span="12">
+                      <a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
+                        <a-input
+                          v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
+                          class="nc-extdb-host-database"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
+                        <a-input
+                          v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
+                          class="nc-extdb-host-schema"
+                        />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </template>
+                <template v-else>
+                  <a-row :gutter="24">
+                    <a-col :span="12">
+                      <!-- Database -->
+                      <a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
+                        <!-- Database : create if not exists -->
+                        <a-input
+                          v-model:value="formState.dataSource.connection.database"
+                          :placeholder="$t('labels.dbCreateIfNotExists')"
+                          class="nc-extdb-host-database"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                      <!-- Schema name -->
+                      <a-form-item
+                        v-if="
+                          ([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
+                            [ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
+                          formState.dataSource.searchPath
+                        "
+                        :label="$t('labels.schemaName')"
+                        v-bind="validateInfos['dataSource.searchPath.0']"
+                      >
+                        <a-input
+                          v-model:value="formState.dataSource.searchPath[0]"
+                          :placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
+                        />
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </template>
+              </div>
             </div>
-          </div>
-          <template
-            v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
-          >
-            <a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
-              <template #expandIcon="{ isActive }">
-                <NcButton
-                  type="text"
-                  size="small"
-                  class="!-ml-1.5"
-                  @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
-                >
-                  <div class="nc-form-section-title">Advanced options</div>
-
-                  <GeneralIcon
-                    icon="chevronDown"
-                    class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
-                    :class="{ '!rotate-180': isActive }"
-                  />
-                </NcButton>
-              </template>
-              <a-collapse-panel key="1" collapsible="disabled">
-                <template #header>
-                  <span></span>
+
+            <div class="nc-form-section">
+              <div class="nc-form-section-title">Permissions</div>
+              <div class="nc-form-section-body">
+                <DashboardSettingsDataSourcesSourceRestrictions
+                  v-model:allowMetaWrite="allowMetaWrite"
+                  v-model:allowDataWrite="allowDataWrite"
+                />
+              </div>
+            </div>
+            <template
+              v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
+            >
+              <a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
+                <template #expandIcon="{ isActive }">
+                  <NcButton
+                    type="text"
+                    size="small"
+                    class="!-ml-1.5"
+                    @click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
+                  >
+                    <div class="nc-form-section-title">Advanced options</div>
+
+                    <GeneralIcon
+                      icon="chevronDown"
+                      class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
+                      :class="{ '!rotate-180': isActive }"
+                    />
+                  </NcButton>
                 </template>
+                <a-collapse-panel key="1" collapsible="disabled">
+                  <template #header>
+                    <span></span>
+                  </template>
 
-                <div class="flex flex-col gap-4">
                   <div class="flex flex-col gap-4">
-                    <a-row :gutter="24">
-                      <a-col :span="12">
-                        <a-form-item :label="$t('labels.inflection.tableName')">
-                          <NcSelect
-                            v-model:value="formState.inflection.inflectionTable"
-                            class="nc-select-shadow"
-                            dropdown-class-name="nc-dropdown-inflection-table-name"
-                          >
-                            <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
-                          </NcSelect>
-                        </a-form-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-item :label="$t('labels.inflection.columnName')">
-                          <NcSelect
-                            v-model:value="formState.inflection.inflectionColumn"
-                            class="nc-select-shadow"
-                            dropdown-class-name="nc-dropdown-inflection-column-name"
-                          >
-                            <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
-                          </NcSelect>
-                        </a-form-item>
-                      </a-col>
-                    </a-row>
+                    <div class="flex flex-col gap-4">
+                      <a-row :gutter="24">
+                        <a-col :span="12">
+                          <a-form-item :label="$t('labels.inflection.tableName')">
+                            <NcSelect
+                              v-model:value="formState.inflection.inflectionTable"
+                              class="nc-select-shadow"
+                              dropdown-class-name="nc-dropdown-inflection-table-name"
+                            >
+                              <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
+                            </NcSelect>
+                          </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                          <a-form-item :label="$t('labels.inflection.columnName')">
+                            <NcSelect
+                              v-model:value="formState.inflection.inflectionColumn"
+                              class="nc-select-shadow"
+                              dropdown-class-name="nc-dropdown-inflection-column-name"
+                            >
+                              <a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
+                            </NcSelect>
+                          </a-form-item>
+                        </a-col>
+                      </a-row>
+                    </div>
                   </div>
-                </div>
-              </a-collapse-panel>
-            </a-collapse>
-          </template>
-          <div>
-            <!-- For spacing -->
-          </div>
-        </a-form>
+                </a-collapse-panel>
+              </a-collapse>
+            </template>
+            <div>
+              <!-- For spacing -->
+            </div>
+          </a-form>
+        </div>
+      </div>
+      <div class="nc-edit-source-right-panel">
+        <DashboardSettingsDataSourcesSupportedDocs />
+        <NcDivider />
       </div>
     </div>
     <div class="p-4 w-full flex items-center justify-between gap-3 border-t-1 border-gray-200">
@@ -632,11 +638,11 @@ function handleAutoScroll(scroll: boolean, className: string) {
 </template>
 
 <style lang="scss" scoped>
-.nc-add-source-left-panel {
+.nc-edit-source-left-panel {
   @apply p-6 flex-1 flex justify-center;
 }
-.nc-add-source-right-panel {
-  @apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
+.nc-edit-source-right-panel {
+  @apply p-4 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
 }
 :deep(.ant-collapse-header) {
   @apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;

From beb2ca8953996446c102c5f372c61d34b2c3720d Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 6 Aug 2024 06:57:03 +0000
Subject: [PATCH 8/8] misc: remove comments

---
 .../nc-gui/components/project/AllTables.vue   | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index a2a1088f8b..b10cc1f543 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -125,8 +125,7 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__add-new-table"
         @click="openTableCreateDialog()"
       >
-        <GeneralIcon icon="addOutlineBox" class="!w-8 !h-8 !text-brand-500" />
-
+        <GeneralIcon icon="addOutlineBox" class="!h-8 !w-8 !text-brand-500" />
         <div class="flex flex-col gap-1">
           <div class="label">{{ $t('general.create') }} {{ $t('general.new') }} {{ $t('objects.table') }}</div>
           <div class="subtext">Start from scratch.</div>
@@ -141,7 +140,7 @@ const onCreateBaseClick = () => {
         data-testid="proj-view-btn__import-data"
         @click="isImportModalOpen = true"
       >
-        <GeneralIcon icon="download" class="!w-7.5 !h-7.5 !text-orange-700" />
+        <GeneralIcon icon="download" class="!h-7.5 !w-7.5 !text-orange-700" />
         <div class="flex flex-col gap-1">
           <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
 
@@ -167,30 +166,14 @@ const onCreateBaseClick = () => {
           }"
           @click="onCreateBaseClick"
         >
-          <GeneralIcon icon="server1" class="!w-7 !h-7 !text-green-700" />
+          <GeneralIcon icon="server1" class="!h-7 !w-7 !text-green-700" />
           <div class="flex flex-col gap-1">
             <div class="label">{{ $t('labels.connectDataSource') }}</div>
             <div class="subtext">In realtime to external databases.</div>
           </div>
         </div>
       </NcTooltip>
-
-      <!--
-        <div
-        v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
-        v-e="['c:table:create-source']"
-        role="button"
-        class="nc-base-view-all-table-btn"
-        data-testid="proj-view-btn__create-source"
-        @click="syncDataModalOpen = true"
-      >
-        <div class="flex items-center gap-3">
-          <GeneralIcon icon="refresh" class="!text-blue-700 !h-5 !w-5" />
-          <div class="label capitalize">{{ $t('labels.syncData') }}</div>
-        </div>
-        <div class="subtext">Keep your data updated and in sync across multiple sources.</div>
-      </div>
-    --></div>
+    </div>
     <div
       v-if="base?.isLoading"
       class="flex items-center justify-center text-center mt-4"