From b1b362366ee7f6f549d84d7a64e55fb6eb85697c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 2 Dec 2022 14:55:02 +0800
Subject: [PATCH 01/71] fix(nc-gui): type issues

---
 packages/nc-gui/components/cell/Json.vue      |  4 +-
 packages/nc-gui/components/cell/TextArea.vue  |  2 +-
 .../components/cell/attachment/Carousel.vue   |  4 +-
 .../nc-gui/components/general/Tooltip.vue     | 11 +++++-
 .../components/smartsheet/ApiSnippet.vue      |  9 +----
 .../nc-gui/components/smartsheet/Grid.vue     | 13 ++++---
 .../components/smartsheet/VirtualCell.vue     |  2 +-
 .../smartsheet/column/EditOrAddProvider.vue   |  2 +-
 .../column/LinkedToAnotherRecordOptions.vue   | 10 +++--
 .../smartsheet/column/LookupOptions.vue       | 39 ++++++++-----------
 .../smartsheet/column/RollupOptions.vue       | 32 +++++++--------
 .../components/smartsheet/column/utils.ts     |  9 +++++
 .../components/smartsheet/header/Cell.vue     |  7 +++-
 .../smartsheet/header/VirtualCell.vue         |  2 +-
 .../toolbar/KanbanStackEditOrAdd.vue          | 12 +++++-
 .../smartsheet/toolbar/MoreActions.vue        |  4 +-
 .../smartsheet/toolbar/SearchData.vue         |  7 ++--
 .../smartsheet/toolbar/SortListMenu.vue       |  9 ++++-
 .../smartsheet/toolbar/ViewActions.vue        | 24 ++++++------
 .../components/tabs/auth/UserManagement.vue   |  2 +-
 .../tabs/auth/user-management/UsersModal.vue  |  2 +-
 .../nc-gui/components/template/Editor.vue     | 11 +-----
 .../components/ListChildItems.vue             | 26 +++++++------
 packages/nc-gui/components/webhook/List.vue   |  2 +-
 .../composables/useColumnCreateStore.ts       | 11 ++++--
 .../useExpandedFormDetached/index.ts          |  2 +-
 packages/nc-gui/composables/useLTARStore.ts   |  2 +-
 packages/nc-gui/composables/useSharedView.ts  |  5 +--
 .../nc-gui/composables/useSmartsheetStore.ts  |  2 +-
 packages/nc-gui/package-lock.json             | 11 ++++++
 packages/nc-gui/package.json                  |  1 +
 .../form/[viewId]/index/index.vue             |  5 ++-
 packages/nc-gui/pages/forgot-password.vue     |  5 ++-
 .../nc-gui/pages/index/index/[projectId].vue  |  3 +-
 packages/nc-gui/pages/index/index/create.vue  |  3 +-
 packages/nc-gui/pages/projects/index.vue      |  3 +-
 .../nc-gui/pages/projects/index/index.vue     |  5 +--
 packages/nc-gui/pages/signup/[[token]].vue    |  9 +++--
 packages/nc-gui/utils/sortUtils.ts            |  2 +-
 packages/nc-gui/utils/viewUtils.ts            |  8 +++-
 packages/nc-gui/web-types.json                |  4 ++
 41 files changed, 190 insertions(+), 136 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/column/utils.ts

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index f89ddf87aa..8d8d6b9831 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -135,13 +135,13 @@ useSelectedCellKeyupListener(active, (e) => {
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
 
           <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">
-            <div class="text-xs" :onclick="onSave">Save</div>
+            <div class="text-xs" @click="onSave">Save</div>
           </a-button>
         </div>
       </div>
 
       <LazyMonacoEditor
-        :model-value="localValue"
+        :model-value="localValue || ''"
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
         :hide-minimap="true"
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index f0280bf12e..e19aee883e 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
-  modelValue?: string | null
+  modelValue?: string | number | string[]
 }>()
 
 const emits = defineEmits(['update:modelValue'])
diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4933e7d396..63a7c1bb0f 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -47,7 +47,7 @@ onClickOutside(carouselRef, () => {
 </script>
 
 <template>
-  <general-overlay v-model="selectedImage" :z-index="1001">
+  <GeneralOverlay v-model="selectedImage" :z-index="1001">
     <template v-if="selectedImage">
       <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
@@ -101,7 +101,7 @@ onClickOutside(carouselRef, () => {
         </a-carousel>
       </div>
     </template>
-  </general-overlay>
+  </GeneralOverlay>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui/components/general/Tooltip.vue b/packages/nc-gui/components/general/Tooltip.vue
index ea5b8a963b..ab9800aa03 100644
--- a/packages/nc-gui/components/general/Tooltip.vue
+++ b/packages/nc-gui/components/general/Tooltip.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onKeyStroke } from '@vueuse/core'
 import type { CSSProperties } from '@vue/runtime-dom'
-import { controlledRef, ref, useElementHover, watch } from '#imports'
+import { controlledRef, ref, useAttrs, useElementHover, watch } from '#imports'
 
 interface Props {
   // Key to be pressed on hover to trigger the tooltip
@@ -23,6 +23,8 @@ const showTooltip = controlledRef(false, {
 
 const isHovering = useElementHover(() => el.value)
 
+const attrs = useAttrs()
+
 const isKeyPressed = ref(false)
 
 onKeyStroke(
@@ -73,6 +75,11 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
     showTooltip.value = true
   }
 })
+
+const divStyles = $computed(() => ({
+  style: attrs.style as CSSProperties,
+  class: attrs.class as string,
+}))
 </script>
 
 <template>
@@ -81,7 +88,7 @@ watch([isHovering, () => modifierKey, () => disabled], ([hovering, key, isDisabl
       <slot name="title" />
     </template>
 
-    <div ref="el" class="w-full" :class="$attrs.class" :style="$attrs.style">
+    <div ref="el" class="w-full" v-bind="divStyles">
       <slot />
     </div>
   </a-tooltip>
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 8699e22300..43fc44653e 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -172,13 +172,8 @@ watch($$(activeLang), (newLang) => {
             hide-minimap
           />
 
-          <div v-if="activeLang.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
-            <a-select
-              v-if="activeLang"
-              v-model:value="selectedClient"
-              style="width: 6rem"
-              dropdown-class-name="nc-dropdown-snippet-active-lang"
-            >
+          <div v-if="activeLang?.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
+            <a-select v-model:value="selectedClient" style="width: 6rem" dropdown-class-name="nc-dropdown-snippet-active-lang">
               <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
                 {{ client }}
               </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e83e2ab88d..74a2c8bc5c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -92,6 +92,7 @@ const contextMenu = computed({
   },
 })
 
+const routeQuery = $computed(() => route.query as Record<string, string>)
 const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
@@ -297,7 +298,7 @@ function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? selectedCell.row
   col = col ?? selectedCell.col
 
-  if (row !== undefined && col !== undefined && row !== null && col !== null) {
+  if (row && col) {
     // get active cell
     const rows = tbodyEl.value?.querySelectorAll('tr')
     const cols = rows?.[row].querySelectorAll('td')
@@ -365,7 +366,7 @@ function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false)
   if (rowId) {
     router.push({
       query: {
-        ...route.query,
+        ...routeQuery,
         rowId,
       },
     })
@@ -569,13 +570,13 @@ onBeforeUnmount(() => {
 
 const expandedFormOnRowIdDlg = computed({
   get() {
-    return !!route.query.rowId
+    return !!routeQuery.rowId
   },
   set(val) {
     if (!val)
       router.push({
         query: {
-          ...route.query,
+          ...routeQuery,
           rowId: undefined,
         },
       })
@@ -903,11 +904,11 @@ const closeAddColumnDropdown = () => {
     <Suspense>
       <LazySmartsheetExpandedForm
         v-if="expandedFormOnRowIdDlg"
-        :key="route.query.rowId"
+        :key="routeQuery.rowId"
         v-model="expandedFormOnRowIdDlg"
         :row="{ row: {}, oldRow: {}, rowMeta: {} }"
         :meta="meta"
-        :row-id="route.query.rowId"
+        :row-id="routeQuery.rowId"
         :view="view"
       />
     </Suspense>
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index dcf44f2c06..dad0b33311 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -24,7 +24,7 @@ import { NavigateDir } from '~/lib'
 const props = defineProps<{
   column: ColumnType
   modelValue: any
-  row: Row
+  row?: Row
   active?: boolean
 }>()
 
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
index bc8bb78b1c..188de23c98 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
@@ -4,7 +4,7 @@ import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { MetaInj, inject, ref, toRef, useProvideColumnCreateStore } from '#imports'
 
 interface Props {
-  column?: ColumnType & { meta: any }
+  column?: ColumnType
   columnPosition?: Pick<ColumnReqType, 'column_order'>
 }
 
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 9596c76b0f..df1b50bc6e 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -46,6 +46,8 @@ const refTables = $computed(() => {
 
   return tables.filter((t) => t.type === ModelTypes.TABLE)
 })
+
+const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
 </script>
 
 <template>
@@ -66,11 +68,11 @@ const refTables = $computed(() => {
         <a-select
           v-model:value="vModel.childId"
           show-search
-          :filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
+          :filter-option="filterOption"
           dropdown-class-name="nc-dropdown-ltar-child-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="table in refTables" :key="table.title" :value="table.id">
+          <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
             {{ table.title }}
           </a-select-option>
         </a-select>
@@ -96,7 +98,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-update"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
@@ -110,7 +112,7 @@ const refTables = $computed(() => {
             dropdown-class-name="nc-dropdown-on-delete"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
+            <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 1bb039bc7d..77279ae9f1 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -27,36 +28,28 @@ setAdditionalValidations({
 if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
 if (!vModel.value.fk_lookup_column_id) vModel.value.fk_lookup_column_id = null
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-  bt: 'Belongs To',
-}
-
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return meta?.columns
-    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map((c: ColumnType) => ({
-      col: c.colOptions,
-      column: c,
-      ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
+  const _refTables = meta.columns
+    .filter((column) => column.uidt === UITypes.LinkToAnotherRecord && !column.system)
+    .map((column) => ({
+      col: column.colOptions,
+      column,
+      ...tables.find((table) => table.id === (column.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
+    .filter((table) => (table.col as LinkToAnotherRecordType)?.fk_related_model_id === table.id && !table.mm)
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
-const columns = $computed(() => {
-  const selectedTable = refTables?.find((t) => t.column.id === vModel.value.fk_relation_column_id)
+const columns = $computed<ColumnType[]>(() => {
+  const selectedTable = refTables.find((t) => t.column.id === vModel.value.fk_relation_column_id)
   if (!selectedTable?.id) {
     return []
   }
-
-  return metas[selectedTable.id].columns.filter((c: any) => {
-    return !(isSystemColumn(c) || c.uidt === UITypes.QrCode)
-  })
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isSystemColumn(c))
 })
 </script>
 
@@ -69,11 +62,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                {{ relationNames[table.col.type] }} {{ table.title || table.table_name }}
+                {{ getRelationName(table.col.type) }} {{ table.title || table.table_name }}
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 362008f9ff..960cbb7507 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { getRelationName } from './utils'
 import { MetaInj, inject, ref, useColumnCreateStoreOrThrow, useMetas, useProject, useVModel } from '#imports'
 
 const props = defineProps<{
@@ -24,11 +26,6 @@ setAdditionalValidations({
   rollup_function: [{ required: true, message: 'Required' }],
 })
 
-const relationNames = {
-  mm: 'Many To Many',
-  hm: 'Has Many',
-}
-
 const aggrFunctionsList = [
   { text: 'count', value: 'count' },
   { text: 'min', value: 'min' },
@@ -45,19 +42,18 @@ if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
 if (!vModel.value.rollup_function) vModel.value.rollup_function = null
 
 const refTables = $computed(() => {
-  if (!tables || !tables.length) {
+  if (!tables || !tables.length || !meta || !meta.columns) {
     return []
   }
 
-  return (
-    meta?.columns
-      ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
-      .map((c) => ({
-        col: c.colOptions,
-        column: c,
-        ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
-      })) ?? []
-  )
+  const _refTables = meta.columns
+    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== 'bt' && !c.system)
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
+    }))
+  return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
 })
 
 const columns = $computed(() => {
@@ -67,7 +63,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: any) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && !isSystemColumn(c))
 })
 </script>
 
@@ -80,11 +76,11 @@ const columns = $computed(() => {
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
           @change="onDataTypeChange"
         >
-          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+          <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
               <div class="text-[0.65rem] text-gray-600">
-                ({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})
+                ({{ getRelationName(table.col.type) }} {{ table.title || table.table_name }})
               </div>
             </div>
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet/column/utils.ts b/packages/nc-gui/components/smartsheet/column/utils.ts
new file mode 100644
index 0000000000..6a6a253c8b
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/utils.ts
@@ -0,0 +1,9 @@
+const relationNames = {
+  mm: 'Many To Many',
+  hm: 'Has Many',
+  bt: 'Belongs To',
+} as const
+
+export function getRelationName(type: string) {
+  return relationNames[type as keyof typeof relationNames]
+}
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 08d4757a48..6cb89e6438 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -2,7 +2,12 @@
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean | number; hideMenu?: boolean }>()
+interface Props {
+  column: ColumnType
+  required?: boolean | number
+  hideMenu?: boolean
+}
+const props = defineProps<Props>()
 
 const hideMenu = toRef(props, 'hideMenu')
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index da12c52f3b..7283d420ab 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -124,7 +124,7 @@ const closeAddColumnDropdown = () => {
       <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
 
-    <span v-if="isVirtualColRequired(column, meta.columns) || required" class="text-red-500">&nbsp;*</span>
+    <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index bde75f2511..7a3f3a35a4 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
+import {
+  IsKanbanInj,
+  IsLockedInj,
+  IsPublicInj,
+  inject,
+  provide,
+  ref,
+  useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
+  useUIPermission,
+} from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index 7c2826673a..ba0f44136d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -14,6 +14,7 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
+  useSharedView,
   useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
@@ -38,6 +39,8 @@ const selectedView = inject(ActiveViewInj, ref())
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
+const { exportFile: sharedViewExportFile } = useSharedView()
+
 const isLocked = inject(IsLockedInj)
 
 const showWebhookDrawer = ref(false)
@@ -58,7 +61,6 @@ const exportFile = async (exportType: ExportTypes) => {
     while (!isNaN(offset) && offset > -1) {
       let res
       if (isPublicView.value) {
-        const { exportFile: sharedViewExportFile } = useSharedView()
         res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 7d0440a3e5..6e56d64f81 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -25,9 +26,9 @@ const searchDropdown = ref(null)
 onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
-  meta.value?.columns?.map((c) => ({
-    value: c.id,
-    label: c.title,
+  (meta.value as TableType)?.columns?.map((column) => ({
+    value: column.id,
+    label: column.title,
   })),
 )
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index c49310ea12..6b018c32fd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -40,6 +40,11 @@ const columnByID = computed(() =>
   }, {} as Record<string, ColumnType>),
 )
 
+const getColumnByID = (key?: string) => {
+  if (!key) return ''
+  return columnByID.value[key]?.uidt || ''
+}
+
 watch(
   () => view.value?.id,
   (viewId) => {
@@ -74,7 +79,7 @@ useMenuCloseOnEsc(open)
         data-testid="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
-          <template v-for="(sort, i) in sorts || []" :key="i">
+          <template v-for="(sort, i) of sorts" :key="i">
             <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
@@ -95,7 +100,7 @@ useMenuCloseOnEsc(open)
               @select="saveOrUpdate(sort, i)"
             >
               <a-select-option
-                v-for="(option, j) in getSortDirectionOptions(columnByID[sort.fk_column_id]?.uidt)"
+                v-for="(option, j) of getSortDirectionOptions(getColumnByID(sort.fk_column_id))"
                 :key="j"
                 :value="option.value"
               >
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 999ab2efc5..004a257873 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -4,6 +4,7 @@ import {
   IsLockedInj,
   IsPublicInj,
   extractSdkResponseErrorMsg,
+  getViewIcon,
   inject,
   message,
   ref,
@@ -13,7 +14,6 @@ import {
   useProject,
   useSmartsheetStoreOrThrow,
   useUIPermission,
-  viewIcons,
 } from '#imports'
 import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
@@ -30,9 +30,11 @@ const isView = false
 
 const { $api, $e } = useNuxtApp()
 
-const selectedView = inject(ActiveViewInj)
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const selectedView = inject(ActiveViewInj, ref())
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 const showWebhookDrawer = ref(false)
 
@@ -46,8 +48,8 @@ const { isUIAllowed } = useUIPermission()
 
 const { isSharedBase } = useProject()
 
-const Icon = computed(() => {
-  switch (selectedView?.value.lock_type) {
+const Icon = $computed(() => {
+  switch (selectedView.value?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -58,10 +60,12 @@ const Icon = computed(() => {
   }
 })
 
+const lockType = $computed(() => (selectedView.value?.lock_type as LockType) || LockType.Collaborative)
+
 async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
-  if (!selectedView?.value) return
+  if (!selectedView.value) return
 
   if (type === 'personal') {
     // Coming soon
@@ -79,8 +83,6 @@ async function changeLockType(type: LockType) {
   }
 }
 
-const { isSqlView } = useSmartsheetStoreOrThrow()
-
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
@@ -92,9 +94,9 @@ useMenuCloseOnEsc(open)
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
-            :is="viewIcons[selectedView?.type].icon"
+            :is="getViewIcon(selectedView?.type)?.icon"
             class="nc-view-icon group-hover:hidden"
-            :style="{ color: viewIcons[selectedView?.type].color }"
+            :style="{ color: getViewIcon(selectedView?.type)?.color }"
           />
 
           <span class="!text-sm font-weight-normal">
@@ -117,7 +119,7 @@ useMenuCloseOnEsc(open)
             >
               <template #title>
                 <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
-                  <LazySmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
+                  <LazySmartsheetToolbarLockType hide-tick :type="lockType" />
 
                   <MaterialSymbolsChevronRightRounded
                     class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index de04d7e274..21eae314ae 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -174,7 +174,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
   <div v-else class="flex flex-col w-full px-6">
     <LazyTabsAuthUserManagementUsersModal
-      :key="showUserModal"
+      :key="`${showUserModal}`"
       :show="showUserModal"
       :selected-user="selectedUser"
       @closed="showUserModal = false"
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 24976c0bd8..0fa1d2fc81 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -21,7 +21,7 @@ import { ProjectRole } from '~/lib'
 
 interface Props {
   show: boolean
-  selectedUser?: User
+  selectedUser?: User | null
 }
 
 interface Users {
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index ca5943a4fb..bf421c3d32 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -693,7 +693,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   size="large"
                   hide-details
                   :bordered="false"
-                  @click="$event.stopPropagation()"
+                  @click.stop
                   @blur="handleEditableTnChange(tableIdx)"
                   @keydown.enter="handleEditableTnChange(tableIdx)"
                 />
@@ -749,14 +749,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="(el: HTMLInputElement) => (inputRefs[record.key] = el)" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 24e73d3dfc..f451d6b99c 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
+import type { Row } from '~/lib'
 import {
   ColumnInj,
   Empty,
@@ -27,7 +28,7 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj, ref())
 
 const readonly = inject(ReadonlyInj, ref(false))
 
@@ -81,6 +82,8 @@ const expandedFormDlg = ref(false)
 
 const expandedFormRow = ref()
 
+const colTitle = $computed(() => column.value?.title || '')
+
 /** reload children list whenever cell value changes and list is visible */
 watch(
   () => props.cellValue,
@@ -88,6 +91,12 @@ watch(
     if (!isNew.value && vModel.value) loadChildrenList()
   },
 )
+
+const onClick = (row: Row) => {
+  if (readonly.value) return
+  expandedFormRow.value = row
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -119,25 +128,20 @@ watch(
           @click="emit('attachRecord')"
         >
           <div class="flex items-center gap-1">
+            <!-- todo: where is row supposed to come from? this is a bug! -->
             <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
             Link to '{{ relatedTableMeta.title }}'
           </div>
         </a-button>
       </div>
 
-      <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
+      <template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0 scrollbar-thin-dull px-12 cursor-pointer">
           <a-card
-            v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
+            v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
             :key="i"
             class="!my-4 hover:(!bg-gray-200/50 shadow-md)"
-            @click="
-              () => {
-                if (readonly) return
-                expandedFormRow = row
-                expandedFormDlg = true
-              }
-            "
+            @click="onClick(row)"
           >
             <div class="flex items-center">
               <div class="flex-1 overflow-hidden min-w-0">
@@ -169,7 +173,7 @@ watch(
             v-model:page-size="childrenListPagination.size"
             class="mt-2 mx-auto"
             size="small"
-            :total="childrenList.pageInfo.totalRows"
+            :total="childrenList?.pageInfo.totalRows"
             show-less-items
           />
         </div>
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index 8c9900c035..a07507f15c 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 <template>
   <div class="">
     <div class="mb-2">
-      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta?.title }} : Webhooks</div>
 
       <a-button
         v-e="['c:webhook:add']"
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index c86fe2aa4f..db7c7aef9a 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -2,6 +2,7 @@ import clone from 'just-clone'
 import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   Form,
   computed,
@@ -20,6 +21,10 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
+interface ValidationsObj {
+  [key: string]: RuleObject[]
+}
+
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
     const { sqlUi } = useProject()
@@ -36,10 +41,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const idType = null
 
-    const additionalValidations = ref<Record<string, any>>({})
+    const additionalValidations = ref<ValidationsObj>({})
 
-    const setAdditionalValidations = (validations: Record<string, any>) => {
-      additionalValidations.value = validations
+    const setAdditionalValidations = (validations: ValidationsObj) => {
+      additionalValidations.value = { ...additionalValidations.value, ...validations }
     }
 
     const formState = ref<Record<string, any>>({
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index 2aef11da08..2e75a723da 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -4,7 +4,7 @@ import type { Row } from '~/lib'
 
 interface UseExpandedFormDetachedProps {
   'isOpen'?: boolean
-  'row': Row | null
+  'row': Row
   'state'?: Record<string, any> | null
   'meta': TableType
   'loadRow'?: boolean
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 3e7ad5a304..902718719e 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -94,7 +94,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     }
 
     const relatedTablePrimaryValueProp = computed(() => {
-      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index c28df9ac7e..eba45ac353 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -103,7 +103,7 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || appInfoDefaultLimit
 
-    const data = await $api.public.groupedDataList(
+    return await $api.public.groupedDataList(
       sharedView.value.uuid!,
       columnId,
       {
@@ -118,7 +118,6 @@ export function useSharedView() {
         },
       },
     )
-    return data
   }
 
   const exportFile = async (
@@ -126,7 +125,7 @@ export function useSharedView() {
     offset: number,
     type: ExportTypes.EXCEL | ExportTypes.CSV,
     responseType: 'base64' | 'blob',
-    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] },
+    { sortsArr, filtersArr }: { sortsArr: SortType[]; filtersArr: FilterType[] } = { sortsArr: [], filtersArr: [] },
   ) => {
     return await $api.public.csvExport(sharedView.value!.uuid!, type, {
       format: responseType,
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index b4de1ce736..354f025afc 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -47,7 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     })
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
-    const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
+    const sorts = ref<Required<SortType>[]>((unref(initialSorts) as Required<SortType>[]) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 676878a194..acc6d41b21 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,6 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
@@ -3021,6 +3022,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -19714,6 +19720,11 @@
       "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index ab0ed240b7..2f1fe47c37 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -41,6 +41,7 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
+    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e931dbbc37..3902c279a5 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -84,9 +84,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   <div>
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(field)"
+                      :model-value="null"
                       class="mt-0 nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                     />
 
@@ -95,7 +96,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                       v-model="formState[field.title]"
                       class="nc-input"
                       :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                       :column="field"
                       :edit-enabled="true"
                     />
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index ac73a718d1..b2a419980b 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RuleObject } from 'ant-design-vue/es/form'
 import { definePageMeta, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
 
 definePageMeta({
@@ -25,13 +26,13 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (validateEmail(v)) return resolve(true)
+          if (validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function resetPassword() {
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 76ea91250b..a90fb781d7 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -2,6 +2,7 @@
 import type { Form } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import type { VNodeRef } from '@vue/runtime-core'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   extractSdkResponseErrorMsg,
   message,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index ace4e213fc..c7af4dc174 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import type { VNodeRef } from '@vue/runtime-core'
 import {
   extractSdkResponseErrorMsg,
@@ -25,7 +26,7 @@ const nameValidationRules = [
     message: 'Project name is required',
   },
   projectTitleValidator,
-]
+] as RuleObject[]
 
 const form = ref<typeof Form>()
 
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index c7d2c924b6..d17df47054 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -2,8 +2,7 @@
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useI18n } from 'vue-i18n'
-import { navigateTo } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractSdkResponseErrorMsg, navigateTo, useNuxtApp, useRoute } from '#imports'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index a8f531c96e..f48927a4d1 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { useColors } from '#imports'
+import { navigateTo, useColors, useNuxtApp } from '#imports'
 import MdiMenuDown from '~icons/mdi/menu-down'
 import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiPlus from '~icons/mdi/plus'
@@ -25,7 +24,7 @@ const openProject = async (project: ProjectType) => {
   $e('a:project:open', { count: projects.length })
 }
 
-const formatTitle = (title: string) =>
+const formatTitle = (title: '') =>
   title
     .split(' ')
     .map((w) => w[0])
diff --git a/packages/nc-gui/pages/signup/[[token]].vue b/packages/nc-gui/pages/signup/[[token]].vue
index 8cb723f895..8a92da1ccd 100644
--- a/packages/nc-gui/pages/signup/[[token]].vue
+++ b/packages/nc-gui/pages/signup/[[token]].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { validatePassword } from 'nocodb-sdk'
+import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   definePageMeta,
   navigateTo,
@@ -44,24 +45,24 @@ const formRules = {
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
-          if (!v?.length || validateEmail(v)) return resolve(true)
+          if (!v?.length || validateEmail(v)) return resolve()
           reject(new Error(t('msg.error.signUpRules.emailInvalid')))
         })
       },
       message: t('msg.error.signUpRules.emailInvalid'),
     },
-  ],
+  ] as RuleObject[],
   password: [
     {
       validator: (_: unknown, v: string) => {
         return new Promise((resolve, reject) => {
           const { error, valid } = validatePassword(v)
-          if (valid) return resolve(true)
+          if (valid) return resolve()
           reject(new Error(error))
         })
       },
     },
-  ],
+  ] as RuleObject[],
 }
 
 async function signUp() {
diff --git a/packages/nc-gui/utils/sortUtils.ts b/packages/nc-gui/utils/sortUtils.ts
index 234cf98a17..7d2ccca8c6 100644
--- a/packages/nc-gui/utils/sortUtils.ts
+++ b/packages/nc-gui/utils/sortUtils.ts
@@ -1,6 +1,6 @@
 import { UITypes } from 'nocodb-sdk'
 
-export const getSortDirectionOptions = (uidt: UITypes) => {
+export const getSortDirectionOptions = (uidt: UITypes | string) => {
   switch (uidt) {
     case UITypes.Year:
     case UITypes.Number:
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index e197e766ed..d373f8378d 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -1,5 +1,5 @@
 import { ViewTypes } from 'nocodb-sdk'
-import { themeV2Colors } from '~/utils'
+import { themeV2Colors } from '#imports'
 
 import MdiGridIcon from '~icons/mdi/grid-large'
 import MdiFormIcon from '~icons/mdi/form-select'
@@ -41,3 +41,9 @@ export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
 export function applyNonSelectable() {
   document.body.classList.add('non-selectable')
 }
+
+export const getViewIcon = (key?: string | number) => {
+  if (!key) return
+
+  return viewIcons[key]
+}
diff --git a/packages/nc-gui/web-types.json b/packages/nc-gui/web-types.json
index 701777a464..1c688f9ad4 100644
--- a/packages/nc-gui/web-types.json
+++ b/packages/nc-gui/web-types.json
@@ -13,6 +13,10 @@
         {
           "name": "t",
           "description": "I18n directive"
+        },
+        {
+          "name": "xc-ver-resize",
+          "description": "Resize directive"
         }
       ]
     }

From ba37d4fe5e39be221e43718feb80ac00ad271a21 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 2 Dec 2022 16:13:11 +0800
Subject: [PATCH 02/71] fix(nc-gui): remove incorrect click event and update
 icon

---
 .../components/virtual-cell/components/ListChildItems.vue      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index f451d6b99c..8dabf9d4cb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -128,8 +128,7 @@ const onClick = (row: Row) => {
           @click="emit('attachRecord')"
         >
           <div class="flex items-center gap-1">
-            <!-- todo: where is row supposed to come from? this is a bug! -->
-            <MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
+            <MdiLinkVariant class="text-xs" type="primary" />
             Link to '{{ relatedTableMeta.title }}'
           </div>
         </a-button>

From 893dcf50482e83bd6fdd8724f091019fe95281a4 Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Fri, 2 Dec 2022 14:26:59 +0300
Subject: [PATCH 03/71] QrCode: also allow decimals and numbers as referenced
 values

---
 .../smartsheet/column/QrCodeOptions.vue       |  1 -
 packages/nc-gui/package-lock.json             | 69 ++++++++-----------
 .../src/lib/columnRules/QrCodeRules.ts        |  2 +
 packages/nocodb/package-lock.json             | 47 +++----------
 4 files changed, 39 insertions(+), 80 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
index be08672d7a..b699866817 100644
--- a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
@@ -27,7 +27,6 @@ const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
     ?.filter(
       (el) =>
         el.fk_column_id &&
-        // AllowedColumnTypesForQrCode.map((el) => el.toString()).includes(metaColumnById.value[el.fk_column_id].uidt),
         AllowedColumnTypesForQrCode.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
     )
     .map((field) => {
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 4274614d42..472317e3d6 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -87,28 +87,6 @@
         "windicss": "^3.5.6"
       }
     },
-    "../nocodb-sdk": {
-      "version": "0.100.2",
-      "license": "AGPL-3.0-or-later",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "jsep": "^1.3.6"
-      },
-      "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.0.1",
-        "@typescript-eslint/parser": "^4.0.1",
-        "cspell": "^4.1.0",
-        "eslint": "^7.8.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-functional": "^3.0.2",
-        "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "npm-run-all": "^4.1.5",
-        "prettier": "^2.1.1",
-        "typescript": "^4.0.2"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -8413,7 +8391,6 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "devOptional": true,
       "funding": [
         {
           "type": "individual",
@@ -11769,8 +11746,21 @@
       }
     },
     "node_modules/nocodb-sdk": {
-      "resolved": "../nocodb-sdk",
-      "link": true
+      "version": "0.100.2",
+      "resolved": "file:../nocodb-sdk",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "jsep": "^1.3.6"
+      }
+    },
+    "node_modules/nocodb-sdk/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
     },
     "node_modules/node-abi": {
       "version": "3.23.0",
@@ -23593,8 +23583,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "devOptional": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "form-data": {
       "version": "4.0.0",
@@ -26062,22 +26051,20 @@
       }
     },
     "nocodb-sdk": {
-      "version": "file:../nocodb-sdk",
+      "version": "0.100.2",
       "requires": {
-        "@typescript-eslint/eslint-plugin": "^4.0.1",
-        "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.21.1",
-        "cspell": "^4.1.0",
-        "eslint": "^7.8.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-functional": "^3.0.2",
-        "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "jsep": "^1.3.6",
-        "npm-run-all": "^4.1.5",
-        "prettier": "^2.1.1",
-        "typescript": "^4.0.2"
+        "jsep": "^1.3.6"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.21.4",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+          "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+          "requires": {
+            "follow-redirects": "^1.14.0"
+          }
+        }
       }
     },
     "node-abi": {
diff --git a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts b/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
index 1d02ae702f..bf2e1f77e1 100644
--- a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
+++ b/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
@@ -7,4 +7,6 @@ export const AllowedColumnTypesForQrCode = [
   UITypes.PhoneNumber,
   UITypes.URL,
   UITypes.Email,
+  UITypes.Decimal,
+  UITypes.Number,
 ];
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index 4d65271a41..a3e2075d27 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -151,28 +151,6 @@
         "vuedraggable": "^2.24.3"
       }
     },
-    "../nocodb-sdk": {
-      "version": "0.100.2",
-      "license": "AGPL-3.0-or-later",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "jsep": "^1.3.6"
-      },
-      "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.0.1",
-        "@typescript-eslint/parser": "^4.0.1",
-        "cspell": "^4.1.0",
-        "eslint": "^7.8.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-functional": "^3.0.2",
-        "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "npm-run-all": "^4.1.5",
-        "prettier": "^2.1.1",
-        "typescript": "^4.0.2"
-      }
-    },
     "node_modules/@azure/abort-controller": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.1.0.tgz",
@@ -10656,8 +10634,13 @@
       "dev": true
     },
     "node_modules/nocodb-sdk": {
-      "resolved": "../nocodb-sdk",
-      "link": true
+      "version": "0.100.2",
+      "resolved": "file:../nocodb-sdk",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "jsep": "^1.3.6"
+      }
     },
     "node_modules/node-abort-controller": {
       "version": "3.0.1",
@@ -26059,22 +26042,10 @@
       "dev": true
     },
     "nocodb-sdk": {
-      "version": "file:../nocodb-sdk",
+      "version": "0.100.2",
       "requires": {
-        "@typescript-eslint/eslint-plugin": "^4.0.1",
-        "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.21.1",
-        "cspell": "^4.1.0",
-        "eslint": "^7.8.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-functional": "^3.0.2",
-        "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "jsep": "^1.3.6",
-        "npm-run-all": "^4.1.5",
-        "prettier": "^2.1.1",
-        "typescript": "^4.0.2"
+        "jsep": "^1.3.6"
       }
     },
     "node-abort-controller": {

From 6e522fda5f00ab0e1592abdc94aa8ae51f82b243 Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Fri, 2 Dec 2022 15:55:55 +0300
Subject: [PATCH 04/71] QrCode: fix playwright test (make text based selector
 unambiguous)

---
 tests/playwright/package-lock.json                    | 2 +-
 tests/playwright/package.json                         | 2 +-
 tests/playwright/pages/Dashboard/Grid/Column/index.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/package-lock.json b/tests/playwright/package-lock.json
index 18132ac04f..6ee489570a 100644
--- a/tests/playwright/package-lock.json
+++ b/tests/playwright/package-lock.json
@@ -14,7 +14,7 @@
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
-        "@playwright/test": "1.27.1",
+        "@playwright/test": "^1.27.1",
         "@typescript-eslint/eslint-plugin": "^4.0.1",
         "@typescript-eslint/parser": "^4.0.1",
         "axios": "^0.24.0",
diff --git a/tests/playwright/package.json b/tests/playwright/package.json
index d685046cce..9908421167 100644
--- a/tests/playwright/package.json
+++ b/tests/playwright/package.json
@@ -23,7 +23,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "1.27.1",
+    "@playwright/test": "^1.27.1",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "axios": "^0.24.0",
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 48107c7800..91e0e3f674 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -95,7 +95,7 @@ export class ColumnPageObject extends BasePage {
         await this.get().locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
-            hasText: qrCodeValueColumnTitle,
+            hasText: new RegExp(`^${qrCodeValueColumnTitle}$`),
           })
           .click();
         break;

From 424d23f2cbc516fd9802c506af5617e377a90102 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 13:45:44 +0800
Subject: [PATCH 05/71] chore(nc-gui): resolve PR comments

---
 packages/nc-gui/components/cell/TextArea.vue                  | 2 +-
 packages/nc-gui/components/smartsheet/Grid.vue                | 2 +-
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue     | 4 ++--
 packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index e19aee883e..d5bd1c4479 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -3,7 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
-  modelValue?: string | number | string[]
+  modelValue?: string | number
 }>()
 
 const emits = defineEmits(['update:modelValue'])
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 74a2c8bc5c..0243f4613e 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -298,7 +298,7 @@ function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? selectedCell.row
   col = col ?? selectedCell.col
 
-  if (row && col) {
+  if (row !== undefined && col !== undefined && row !== null && col !== null) {
     // get active cell
     const rows = tbodyEl.value?.querySelectorAll('tr')
     const cols = rows?.[row].querySelectorAll('td')
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 6b018c32fd..ce48d10fd0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -40,7 +40,7 @@ const columnByID = computed(() =>
   }, {} as Record<string, ColumnType>),
 )
 
-const getColumnByID = (key?: string) => {
+const getColumnUidtByID = (key?: string) => {
   if (!key) return ''
   return columnByID.value[key]?.uidt || ''
 }
@@ -100,7 +100,7 @@ useMenuCloseOnEsc(open)
               @select="saveOrUpdate(sort, i)"
             >
               <a-select-option
-                v-for="(option, j) of getSortDirectionOptions(getColumnByID(sort.fk_column_id))"
+                v-for="(option, j) of getSortDirectionOptions(getColumnUidtByID(sort.fk_column_id))"
                 :key="j"
                 :value="option.value"
               >
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 004a257873..d182980b12 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -48,7 +48,7 @@ const { isUIAllowed } = useUIPermission()
 
 const { isSharedBase } = useProject()
 
-const Icon = $computed(() => {
+const Icon = computed(() => {
   switch (selectedView.value?.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon

From ac3e876a999a160e656ad3875f6ce17b50ebbedb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 13:52:35 +0800
Subject: [PATCH 06/71] fix(nc-gui): formatTitle type

---
 packages/nc-gui/pages/projects/index/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index f48927a4d1..22870ff48d 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -24,9 +24,9 @@ const openProject = async (project: ProjectType) => {
   $e('a:project:open', { count: projects.length })
 }
 
-const formatTitle = (title: '') =>
+const formatTitle = (title?: string) =>
   title
-    .split(' ')
+    ?.split(' ')
     .map((w) => w[0])
     .slice(0, 2)
     .join('')

From 3897351e0d1a70334351434993cda4af68c03cbf Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 3 Dec 2022 11:14:22 +0300
Subject: [PATCH 07/71] fix: add missing runtime config for appInfo

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/composables/useGlobal/state.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 9aecfb5c24..abd75a133f 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -84,8 +84,10 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
+  const config = useRuntimeConfig()
+
   const appInfo = ref<AppInfo>({
-    ncSiteUrl: BASE_FALLBACK_URL,
+    ncSiteUrl: config.public.ncBackendUrl || BASE_FALLBACK_URL,
     authType: 'jwt',
     connectToExternalDB: false,
     defaultLimit: 0,

From 3c2c7ef3ff77c59e20717bb664ca9ddb96531524 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 10 Sep 2022 11:33:52 +0300
Subject: [PATCH 08/71] feat(wip): back-end support for multiple base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../src/lib/meta/api/dataApis/helpers.ts      |   1 -
 .../src/lib/meta/api/dataApis/oldDataApis.ts  |   1 -
 .../nocodb/src/lib/meta/api/metaDiffApis.ts   | 364 +++++++++---------
 .../src/lib/meta/api/modelVisibilityApis.ts   |   6 +-
 .../nocodb/src/lib/meta/api/projectApis.ts    |  40 +-
 packages/nocodb/src/lib/models/Model.ts       |  62 ++-
 6 files changed, 247 insertions(+), 227 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts b/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
index b68a10f1d3..0a8b5c5a15 100644
--- a/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
+++ b/packages/nocodb/src/lib/meta/api/dataApis/helpers.ts
@@ -24,7 +24,6 @@ export async function getViewAndModelFromRequestByAliasOrId(
 
   const model = await Model.getByAliasOrId({
     project_id: project.id,
-    base_id: project.bases?.[0]?.id,
     aliasOrId: req.params.tableName,
   });
   const view =
diff --git a/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts b/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
index cff7dc0534..5df008eb8a 100644
--- a/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
+++ b/packages/nocodb/src/lib/meta/api/dataApis/oldDataApis.ts
@@ -108,7 +108,6 @@ async function getViewAndModelFromRequest(req) {
   const project = await Project.getWithInfo(req.params.projectId);
   const model = await Model.getByAliasOrId({
     project_id: project.id,
-    base_id: project.bases?.[0]?.id,
     aliasOrId: req.params.tableName,
   });
   const view =
diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 3257881ae4..97b432a23c 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -532,203 +532,205 @@ async function getMetaDiff(
 
 export async function metaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
-
-  // @ts-ignore
-  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-  const changes = await getMetaDiff(sqlClient, project, base);
+  const changes = []
+  for (const base of project.bases) {
+    // @ts-ignore
+    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+    changes.push(await getMetaDiff(sqlClient, project, base));
+  }
 
   res.json(changes);
 }
 
 export async function metaDiffSync(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
-  const virtualColumnInsert: Array<() => Promise<void>> = [];
-
-  // @ts-ignore
-  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-  const changes = await getMetaDiff(sqlClient, project, base);
-
-  /* Get all relations */
-  // const relations = (await sqlClient.relationListAll())?.data?.list;
-
-  for (const { table_name, detectedChanges } of changes) {
-    // reorder changes to apply relation remove changes
-    // before column remove to avoid foreign key constraint error
-    detectedChanges.sort((a, b) => {
-      return (
-        applyChangesPriorityOrder.indexOf(b.type) -
-        applyChangesPriorityOrder.indexOf(a.type)
-      );
-    });
-
-    for (const change of detectedChanges) {
-      switch (change.type) {
-        case MetaDiffType.TABLE_NEW:
-          {
-            const columns = (
-              await sqlClient.columnList({ tn: table_name })
-            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-
-            mapDefaultPrimaryValue(columns);
-
-            const model = await Model.insert(project.id, base.id, {
-              table_name: table_name,
-              title: getTableNameAlias(table_name, project.prefix, base),
-              type: ModelTypes.TABLE,
-            });
-
-            for (const column of columns) {
-              await Column.insert({
-                uidt: getColumnUiType(base, column),
-                fk_model_id: model.id,
-                ...column,
-                title: getColumnNameAlias(column.column_name, base),
+  for (const base of project.bases) {
+    const virtualColumnInsert: Array<() => Promise<void>> = [];
+
+    // @ts-ignore
+    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+    const changes = await getMetaDiff(sqlClient, project, base);
+  
+    /* Get all relations */
+    // const relations = (await sqlClient.relationListAll())?.data?.list;
+  
+    for (const { table_name, detectedChanges } of changes) {
+      // reorder changes to apply relation remove changes
+      // before column remove to avoid foreign key constraint error
+      detectedChanges.sort((a, b) => {
+        return (
+          applyChangesPriorityOrder.indexOf(b.type) -
+          applyChangesPriorityOrder.indexOf(a.type)
+        );
+      });
+      
+      for (const change of detectedChanges) {
+        switch (change.type) {
+          case MetaDiffType.TABLE_NEW:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+  
+              mapDefaultPrimaryValue(columns);
+  
+              const model = await Model.insert(project.id, base.id, {
+                table_name: table_name,
+                title: getTableNameAlias(table_name, project.prefix, base),
+                type: ModelTypes.TABLE,
               });
+  
+              for (const column of columns) {
+                await Column.insert({
+                  uidt: getColumnUiType(base, column),
+                  fk_model_id: model.id,
+                  ...column,
+                  title: getColumnNameAlias(column.column_name, base),
+                });
+              }
             }
-          }
-          break;
-        case MetaDiffType.VIEW_NEW:
-          {
-            const columns = (
-              await sqlClient.columnList({ tn: table_name })
-            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-
-            mapDefaultPrimaryValue(columns);
-
-            const model = await Model.insert(project.id, base.id, {
-              table_name: table_name,
-              title: getTableNameAlias(table_name, project.prefix, base),
-              type: ModelTypes.VIEW,
-            });
-
-            for (const column of columns) {
-              await Column.insert({
-                uidt: getColumnUiType(base, column),
-                fk_model_id: model.id,
-                ...column,
-                title: getColumnNameAlias(column.column_name, base),
+            break;
+          case MetaDiffType.VIEW_NEW:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+  
+              mapDefaultPrimaryValue(columns);
+  
+              const model = await Model.insert(project.id, base.id, {
+                table_name: table_name,
+                title: getTableNameAlias(table_name, project.prefix, base),
+                type: ModelTypes.VIEW,
               });
+  
+              for (const column of columns) {
+                await Column.insert({
+                  uidt: getColumnUiType(base, column),
+                  fk_model_id: model.id,
+                  ...column,
+                  title: getColumnNameAlias(column.column_name, base),
+                });
+              }
             }
-          }
-          break;
-        case MetaDiffType.TABLE_REMOVE:
-        case MetaDiffType.VIEW_REMOVE:
-          {
-            await change.model.delete();
-          }
-          break;
-        case MetaDiffType.TABLE_COLUMN_ADD:
-        case MetaDiffType.VIEW_COLUMN_ADD:
-          {
-            const columns = (
-              await sqlClient.columnList({ tn: table_name })
-            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-            const column = columns.find((c) => c.cn === change.cn);
-            column.uidt = getColumnUiType(base, column);
-            //todo: inflection
-            column.title = getColumnNameAlias(column.cn, base);
-            await Column.insert({ fk_model_id: change.id, ...column });
-          }
-          // update old
-          // populateParams.tableNames.push({ tn });
-          // populateParams.oldMetas[tn] = oldMetas.find(m => m.tn === tn);
-
-          break;
-        case MetaDiffType.TABLE_COLUMN_TYPE_CHANGE:
-        case MetaDiffType.VIEW_COLUMN_TYPE_CHANGE:
-          {
-            const columns = (
-              await sqlClient.columnList({ tn: table_name })
-            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-            const column = columns.find((c) => c.cn === change.cn);
-            const metaFact = ModelXcMetaFactory.create(
-              { client: base.type },
-              {}
-            );
-            column.uidt = metaFact.getUIDataType(column);
-            column.title = change.column.title;
-            await Column.update(change.column.id, column);
-          }
-          break;
-        case MetaDiffType.TABLE_COLUMN_REMOVE:
-        case MetaDiffType.VIEW_COLUMN_REMOVE:
-          await change.column.delete();
-          break;
-        case MetaDiffType.TABLE_RELATION_REMOVE:
-        case MetaDiffType.TABLE_VIRTUAL_M2M_REMOVE:
-          await change.column.delete();
-          break;
-        case MetaDiffType.TABLE_RELATION_ADD:
-          {
-            virtualColumnInsert.push(async () => {
-              const parentModel = await Model.getByIdOrName({
-                project_id: base.project_id,
-                base_id: base.id,
-                table_name: change.rtn,
-              });
-              const childModel = await Model.getByIdOrName({
-                project_id: base.project_id,
-                base_id: base.id,
-                table_name: change.tn,
-              });
-              const parentCol = await parentModel
-                .getColumns()
-                .then((cols) => cols.find((c) => c.column_name === change.rcn));
-              const childCol = await childModel
-                .getColumns()
-                .then((cols) => cols.find((c) => c.column_name === change.cn));
-
-              await Column.update(childCol.id, {
-                ...childCol,
-                uidt: UITypes.ForeignKey,
-                system: true,
-              });
-
-              if (change.relationType === RelationTypes.BELONGS_TO) {
-                const title = getUniqueColumnAliasName(
-                  childModel.columns,
-                  `${parentModel.title || parentModel.table_name}`
-                );
-                await Column.insert<LinkToAnotherRecordColumn>({
-                  uidt: UITypes.LinkToAnotherRecord,
-                  title,
-                  fk_model_id: childModel.id,
-                  fk_related_model_id: parentModel.id,
-                  type: RelationTypes.BELONGS_TO,
-                  fk_parent_column_id: parentCol.id,
-                  fk_child_column_id: childCol.id,
-                  virtual: false,
+            break;
+          case MetaDiffType.TABLE_REMOVE:
+          case MetaDiffType.VIEW_REMOVE:
+            {
+              await change.model.delete();
+            }
+            break;
+          case MetaDiffType.TABLE_COLUMN_ADD:
+          case MetaDiffType.VIEW_COLUMN_ADD:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+              const column = columns.find((c) => c.cn === change.cn);
+              column.uidt = getColumnUiType(base, column);
+              //todo: inflection
+              column.title = getColumnNameAlias(column.cn, base);
+              await Column.insert({ fk_model_id: change.id, ...column });
+            }
+            // update old
+            // populateParams.tableNames.push({ tn });
+            // populateParams.oldMetas[tn] = oldMetas.find(m => m.tn === tn);
+  
+            break;
+          case MetaDiffType.TABLE_COLUMN_TYPE_CHANGE:
+          case MetaDiffType.VIEW_COLUMN_TYPE_CHANGE:
+            {
+              const columns = (
+                await sqlClient.columnList({ tn: table_name })
+              )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+              const column = columns.find((c) => c.cn === change.cn);
+              const metaFact = ModelXcMetaFactory.create(
+                { client: base.type },
+                {}
+              );
+              column.uidt = metaFact.getUIDataType(column);
+              column.title = change.column.title;
+              await Column.update(change.column.id, column);
+            }
+            break;
+          case MetaDiffType.TABLE_COLUMN_REMOVE:
+          case MetaDiffType.VIEW_COLUMN_REMOVE:
+            await change.column.delete();
+            break;
+          case MetaDiffType.TABLE_RELATION_REMOVE:
+          case MetaDiffType.TABLE_VIRTUAL_M2M_REMOVE:
+            await change.column.delete();
+            break;
+          case MetaDiffType.TABLE_RELATION_ADD:
+            {
+              virtualColumnInsert.push(async () => {
+                const parentModel = await Model.getByIdOrName({
+                  project_id: base.project_id,
+                  base_id: base.id,
+                  table_name: change.rtn,
                 });
-              } else if (change.relationType === RelationTypes.HAS_MANY) {
-                const title = getUniqueColumnAliasName(
-                  childModel.columns,
-                  `${childModel.title || childModel.table_name} List`
-                );
-                await Column.insert<LinkToAnotherRecordColumn>({
-                  uidt: UITypes.LinkToAnotherRecord,
-                  title,
-                  fk_model_id: parentModel.id,
-                  fk_related_model_id: childModel.id,
-                  type: RelationTypes.HAS_MANY,
-                  fk_parent_column_id: parentCol.id,
-                  fk_child_column_id: childCol.id,
-                  virtual: false,
+                const childModel = await Model.getByIdOrName({
+                  project_id: base.project_id,
+                  base_id: base.id,
+                  table_name: change.tn,
                 });
-              }
-            });
-          }
-          break;
+                const parentCol = await parentModel
+                  .getColumns()
+                  .then((cols) => cols.find((c) => c.column_name === change.rcn));
+                const childCol = await childModel
+                  .getColumns()
+                  .then((cols) => cols.find((c) => c.column_name === change.cn));
+  
+                await Column.update(childCol.id, {
+                  ...childCol,
+                  uidt: UITypes.ForeignKey,
+                  system: true,
+                });
+  
+                if (change.relationType === RelationTypes.BELONGS_TO) {
+                  const title = getUniqueColumnAliasName(
+                    childModel.columns,
+                    `${parentModel.title || parentModel.table_name}`
+                  );
+                  await Column.insert<LinkToAnotherRecordColumn>({
+                    uidt: UITypes.LinkToAnotherRecord,
+                    title,
+                    fk_model_id: childModel.id,
+                    fk_related_model_id: parentModel.id,
+                    type: RelationTypes.BELONGS_TO,
+                    fk_parent_column_id: parentCol.id,
+                    fk_child_column_id: childCol.id,
+                    virtual: false,
+                  });
+                } else if (change.relationType === RelationTypes.HAS_MANY) {
+                  const title = getUniqueColumnAliasName(
+                    childModel.columns,
+                    `${childModel.title || childModel.table_name} List`
+                  );
+                  await Column.insert<LinkToAnotherRecordColumn>({
+                    uidt: UITypes.LinkToAnotherRecord,
+                    title,
+                    fk_model_id: parentModel.id,
+                    fk_related_model_id: childModel.id,
+                    type: RelationTypes.HAS_MANY,
+                    fk_parent_column_id: parentCol.id,
+                    fk_child_column_id: childCol.id,
+                    virtual: false,
+                  });
+                }
+              });
+            }
+            break;
+        }
       }
     }
+  
+    await NcHelp.executeOperations(virtualColumnInsert, base.type);
+  
+    // populate m2m relations
+    await extractAndGenerateManyToManyRelations(await base.getModels());
   }
 
-  await NcHelp.executeOperations(virtualColumnInsert, base.type);
-
-  // populate m2m relations
-  await extractAndGenerateManyToManyRelations(await base.getModels());
-
   Tele.emit('evt', { evt_type: 'metaDiff:synced' });
 
   res.json({ msg: 'success' });
diff --git a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
index 68f95e928b..59b7006f71 100644
--- a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
+++ b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
@@ -3,7 +3,6 @@ import ModelRoleVisibility from '../../models/ModelRoleVisibility';
 import { Router } from 'express';
 import { Tele } from 'nc-help';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
-import Project from '../../models/Project';
 import { metaApiMetrics } from '../helpers/apiMetrics';
 async function xcVisibilityMetaSetAll(req, res) {
   Tele.emit('evt', { evt_type: 'uiAcl:updated' });
@@ -49,13 +48,12 @@ export async function xcVisibilityMetaGet(
   const roles = ['owner', 'creator', 'viewer', 'editor', 'commenter', 'guest'];
 
   const defaultDisabled = roles.reduce((o, r) => ({ ...o, [r]: false }), {});
-  const project = await Project.getWithInfo(projectId);
-
+  
   let models =
     _models ||
     (await Model.list({
       project_id: projectId,
-      base_id: project?.bases?.[0]?.id,
+      base_id: undefined,
     }));
 
   models = includeM2M ? models : (models.filter((t) => !t.mm) as Model[]);
diff --git a/packages/nocodb/src/lib/meta/api/projectApis.ts b/packages/nocodb/src/lib/meta/api/projectApis.ts
index c710b468fa..cafc073080 100644
--- a/packages/nocodb/src/lib/meta/api/projectApis.ts
+++ b/packages/nocodb/src/lib/meta/api/projectApis.ts
@@ -452,15 +452,12 @@ async function populateMeta(base: Base, project: Project): Promise<any> {
   return info;
 }
 
-export async function projectInfoGet(req, res) {
-  const project = await Project.getWithInfo(req.params.projectId);
+export async function projectInfoGet(_req, res) {
   res.json({
     Node: process.version,
     Arch: process.arch,
     Platform: process.platform,
     Docker: isDocker(),
-    Database: project.bases?.[0]?.type,
-    ProjectOnRootDB: !!project?.is_meta,
     RootDB: Noco.getConfig()?.meta?.db?.client,
     PackageVersion: packageVersion,
   });
@@ -469,22 +466,25 @@ export async function projectInfoGet(req, res) {
 export async function projectCost(req, res) {
   let cost = 0;
   const project = await Project.getWithInfo(req.params.projectId);
-  const sqlClient = NcConnectionMgrv2.getSqlClient(project.bases[0]);
-  const userCount = await ProjectUser.getUsersCount(req.query);
-  const recordCount = (await sqlClient.totalRecords())?.data.TotalRecords;
-
-  if (recordCount > 100000) {
-    // 36,000 or $79/user/month
-    cost = Math.max(36000, 948 * userCount);
-  } else if (recordCount > 50000) {
-    // $36,000 or $50/user/month
-    cost = Math.max(36000, 600 * userCount);
-  } else if (recordCount > 10000) {
-    // $240/user/yr
-    cost = Math.min(240 * userCount, 36000);
-  } else if (recordCount > 1000) {
-    // $120/user/yr
-    cost = Math.min(120 * userCount, 36000);
+  
+  for (const base of project.bases) {
+    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+    const userCount = await ProjectUser.getUsersCount(req.query);
+    const recordCount = (await sqlClient.totalRecords())?.data.TotalRecords;
+
+    if (recordCount > 100000) {
+      // 36,000 or $79/user/month
+      cost = Math.max(36000, 948 * userCount);
+    } else if (recordCount > 50000) {
+      // $36,000 or $50/user/month
+      cost = Math.max(36000, 600 * userCount);
+    } else if (recordCount > 10000) {
+      // $240/user/yr
+      cost = Math.min(240 * userCount, 36000);
+    } else if (recordCount > 1000) {
+      // $120/user/yr
+      cost = Math.min(120 * userCount, 36000);
+    }
   }
 
   Tele.event({
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 2cb7f2e14f..01d1bf0545 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -597,7 +597,7 @@ export default class Model implements TableType {
       aliasOrId,
     }: {
       project_id: string;
-      base_id: string | undefined;
+      base_id?: string;
       aliasOrId: string;
     },
     ncMeta = Noco.ncMeta
@@ -610,27 +610,49 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelId) {
-      const model = await ncMeta.metaGet2(
-        null,
-        null,
-        MetaTable.MODELS,
-        { project_id, base_id },
-        null,
-        {
-          _or: [
+      const model = base_id
+        ? await ncMeta.metaGet2(
+            null,
+            null,
+            MetaTable.MODELS,
+            { project_id, base_id },
+            null,
             {
-              id: {
-                eq: aliasOrId,
-              },
-            },
+              _or: [
+                {
+                  id: {
+                    eq: aliasOrId,
+                  },
+                },
+                {
+                  title: {
+                    eq: aliasOrId,
+                  },
+                },
+              ],
+            }
+          )
+        : await ncMeta.metaGet2(
+            null,
+            null,
+            MetaTable.MODELS,
+            { project_id },
+            null,
             {
-              title: {
-                eq: aliasOrId,
-              },
-            },
-          ],
-        }
-      );
+              _or: [
+                {
+                  id: {
+                    eq: aliasOrId,
+                  },
+                },
+                {
+                  title: {
+                    eq: aliasOrId,
+                  },
+                },
+              ],
+            }
+          );
       if (model) {
         await NocoCache.set(
           `${CacheScope.MODEL}:${project_id}:${aliasOrId}`,

From b795694c1b713547df76ddba3ef031fbe1e7b334 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 11 Sep 2022 18:25:29 +0300
Subject: [PATCH 09/71] feat: baseApis

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts            | 125 +++++-
 packages/nocodb/src/lib/meta/api/baseApis.ts  | 367 ++++++++++++++++++
 packages/nocodb/src/lib/meta/api/index.ts     |   2 +
 packages/nocodb/src/lib/meta/api/tableApis.ts |  12 +-
 packages/nocodb/src/lib/models/Base.ts        |   2 +
 scripts/sdk/swagger.json                      | 225 ++++++++++-
 6 files changed, 721 insertions(+), 12 deletions(-)
 create mode 100644 packages/nocodb/src/lib/meta/api/baseApis.ts

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 56e72d2705..b1486b3930 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -106,8 +106,8 @@ export interface BaseListType {
 
 export interface TableType {
   id?: string;
-  fk_project_id?: string;
-  fk_base_id?: string;
+  project_id?: string;
+  base_id?: string;
   table_name: string;
   title: string;
   type?: string;
@@ -121,7 +121,6 @@ export interface TableType {
   columns?: ColumnType[];
   columnsById?: object;
   slug?: string;
-  project_id?: string;
   mm?: boolean | number;
 }
 
@@ -1892,6 +1891,126 @@ export class Api<
         ...params,
       }),
   };
+  base = {
+    /**
+     * @description Read project base details
+     *
+     * @tags Base
+     * @name Read
+     * @summary Base read
+     * @request GET:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `object` OK
+     */
+    read: (projectId: string, baseId: string, params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Delete
+     * @summary Base delete
+     * @request DELETE:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `void` OK
+     */
+    delete: (projectId: string, baseId: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'DELETE',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Update
+     * @summary Base update
+     * @request PATCH:/api/v1/db/meta/projects/{projectId}/bases/{baseId}
+     * @response `200` `void` OK
+     */
+    update: (
+      projectId: string,
+      baseId: string,
+      data: any,
+      params: RequestParams = {}
+    ) =>
+      this.request<void, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/${baseId}`,
+        method: 'PATCH',
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+
+    /**
+     * @description Get project base list
+     *
+     * @tags Base
+     * @name List
+     * @summary Base list
+     * @request GET:/api/v1/db/meta/projects/{projectId}/bases/
+     * @response `200` `object` OK
+     */
+    list: (projectId: string, params: RequestParams = {}) =>
+      this.request<object, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name Create
+     * @summary Base create
+     * @request POST:/api/v1/db/meta/projects/{projectId}/bases/
+     * @response `200` `BaseType` OK
+     */
+    create: (
+      projectId: string,
+      data: BaseType & { external?: boolean },
+      params: RequestParams = {}
+    ) =>
+      this.request<BaseType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/bases/`,
+        method: 'POST',
+        body: data,
+        type: ContentType.Json,
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name TableCreate
+     * @request POST:/api/v1/db/meta/projects/{projectId}/{baseId}/tables
+     * @response `200` `TableType` OK
+     */
+    tableCreate: (
+      projectId: string,
+      baseId: string,
+      data: TableReqType,
+      params: RequestParams = {}
+    ) =>
+      this.request<TableType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/${baseId}/tables`,
+        method: 'POST',
+        body: data,
+        type: ContentType.Json,
+        format: 'json',
+        ...params,
+      }),
+  };
   dbTable = {
     /**
      * No description
diff --git a/packages/nocodb/src/lib/meta/api/baseApis.ts b/packages/nocodb/src/lib/meta/api/baseApis.ts
new file mode 100644
index 0000000000..b173f98402
--- /dev/null
+++ b/packages/nocodb/src/lib/meta/api/baseApis.ts
@@ -0,0 +1,367 @@
+import { Request, Response } from 'express';
+import Project from '../../models/Project';
+import { ModelTypes, ProjectListType, UITypes } from 'nocodb-sdk';
+import { PagedResponseImpl } from '../helpers/PagedResponse';
+import syncMigration from '../helpers/syncMigration';
+import { IGNORE_TABLES } from '../../utils/common/BaseApiBuilder';
+import Column from '../../models/Column';
+import Model from '../../models/Model';
+import NcHelp from '../../utils/NcHelp';
+import Base from '../../models/Base';
+import NcConnectionMgrv2 from '../../utils/common/NcConnectionMgrv2';
+import getTableNameAlias, { getColumnNameAlias } from '../helpers/getTableName';
+import LinkToAnotherRecordColumn from '../../models/LinkToAnotherRecordColumn';
+import ncMetaAclMw from '../helpers/ncMetaAclMw';
+import { Tele } from 'nc-help';
+import { NcError } from '../helpers/catchError';
+import getColumnUiType from '../helpers/getColumnUiType';
+import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
+import { extractAndGenerateManyToManyRelations } from './metaDiffApis';
+import { metaApiMetrics } from '../helpers/apiMetrics';
+
+export async function baseGet(
+  req: Request<any, any, any>,
+  res: Response<Base>
+) {
+  const base = await Base.get(req.params.baseId);
+
+  delete base.config;
+
+  res.json(base);
+}
+
+export async function baseUpdate(
+  _req: Request<any, any, any>,
+  _res: Response<ProjectListType>
+) {
+  NcError.badRequest('Base update not yet supported');
+}
+
+export async function baseList(
+  req: Request<any, any, any>,
+  res: Response<ProjectListType>,
+  next
+) {
+  try {
+    const projects = await Project.list(req.query);
+
+    res // todo: pagination
+      .json(
+        new PagedResponseImpl(projects, {
+          count: projects.length,
+          limit: projects.length,
+        })
+      );
+  } catch (e) {
+    console.log(e);
+    next(e);
+  }
+}
+
+export async function baseDelete(
+  req: Request<any, any, any>,
+  res: Response<any>
+) {
+  const base = await Base.get(req.params.baseId);
+  const result = await base.delete();
+  Tele.emit('evt', { evt_type: 'base:deleted' });
+  res.json(result);
+}
+
+async function baseCreate(req: Request<any, any>, res) {
+  // type | base | projectId
+  const baseBody = req.body;
+  const base = await Base.createBase(baseBody);
+  const project = await base.getProject();
+  await syncMigration(project);
+
+  const info = await populateMeta(base, project);
+  
+  Tele.emit('evt_api_created', info);
+
+  delete base.config;
+
+  Tele.emit('evt', {
+    evt_type: 'base:created'
+  });
+
+  res.json(base);
+}
+
+async function populateMeta(base: Base, project: Project): Promise<any> {
+  const info = {
+    type: 'rest',
+    apiCount: 0,
+    tablesCount: 0,
+    relationsCount: 0,
+    viewsCount: 0,
+    client: base?.getConnectionConfig()?.client,
+    timeTaken: 0,
+  };
+
+  const t = process.hrtime();
+  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+  let order = 1;
+  const models2: { [tableName: string]: Model } = {};
+
+  const virtualColumnsInsert = [];
+
+  /* Get all relations */
+  const relations = (await sqlClient.relationListAll())?.data?.list;
+
+  info.relationsCount = relations.length;
+
+  let tables = (await sqlClient.tableList())?.data?.list
+    ?.filter(({ tn }) => !IGNORE_TABLES.includes(tn))
+    ?.map((t) => {
+      t.order = ++order;
+      t.title = getTableNameAlias(t.tn, project.prefix, base);
+      t.table_name = t.tn;
+      return t;
+    });
+
+  /* filter based on prefix */
+  if (project?.prefix) {
+    tables = tables.filter((t) => {
+      return t?.tn?.startsWith(project?.prefix);
+    });
+  }
+
+  info.tablesCount = tables.length;
+
+  tables.forEach((t) => {
+    t.title = getTableNameAlias(t.tn, project.prefix, base);
+  });
+
+  relations.forEach((r) => {
+    r.title = getTableNameAlias(r.tn, project.prefix, base);
+    r.rtitle = getTableNameAlias(r.rtn, project.prefix, base);
+  });
+
+  // await this.syncRelations();
+
+  const tableMetasInsert = tables.map((table) => {
+    return async () => {
+      /* filter relation where this table is present */
+      const tableRelations = relations.filter(
+        (r) => r.tn === table.tn || r.rtn === table.tn
+      );
+
+      const columns: Array<
+        Omit<Column, 'column_name' | 'title'> & {
+          cn: string;
+          system?: boolean;
+        }
+      > = (await sqlClient.columnList({ tn: table.tn }))?.data?.list;
+
+      const hasMany =
+        table.type === 'view'
+          ? []
+          : tableRelations.filter((r) => r.rtn === table.tn);
+      const belongsTo =
+        table.type === 'view'
+          ? []
+          : tableRelations.filter((r) => r.tn === table.tn);
+
+      mapDefaultPrimaryValue(columns);
+
+      // add vitual columns
+      const virtualColumns = [
+        ...hasMany.map((hm) => {
+          return {
+            uidt: UITypes.LinkToAnotherRecord,
+            type: 'hm',
+            hm,
+            title: `${hm.title} List`,
+          };
+        }),
+        ...belongsTo.map((bt) => {
+          // find and mark foreign key column
+          const fkColumn = columns.find((c) => c.cn === bt.cn);
+          if (fkColumn) {
+            fkColumn.uidt = UITypes.ForeignKey;
+            fkColumn.system = true;
+          }
+
+          return {
+            uidt: UITypes.LinkToAnotherRecord,
+            type: 'bt',
+            bt,
+            title: `${bt.rtitle}`,
+          };
+        }),
+      ];
+
+      // await Model.insert(project.id, base.id, meta);
+
+      /* create nc_models and its rows if it doesn't exists  */
+      models2[table.table_name] = await Model.insert(project.id, base.id, {
+        table_name: table.tn || table.table_name,
+        title: table.title,
+        type: table.type || 'table',
+        order: table.order,
+      });
+
+      // table crud apis
+      info.apiCount += 5;
+
+      let colOrder = 1;
+
+      for (const column of columns) {
+        await Column.insert({
+          uidt: column.uidt || getColumnUiType(base, column),
+          fk_model_id: models2[table.tn].id,
+          ...column,
+          title: getColumnNameAlias(column.cn, base),
+          column_name: column.cn,
+          order: colOrder++,
+        });
+      }
+      virtualColumnsInsert.push(async () => {
+        const columnNames = {};
+        for (const column of virtualColumns) {
+          // generate unique name if there is any duplicate column name
+          let c = 0;
+          while (`${column.title}${c || ''}` in columnNames) {
+            c++;
+          }
+          column.title = `${column.title}${c || ''}`;
+          columnNames[column.title] = true;
+
+          const rel = column.hm || column.bt;
+
+          const rel_column_id = (await models2?.[rel.tn]?.getColumns())?.find(
+            (c) => c.column_name === rel.cn
+          )?.id;
+
+          const tnId = models2?.[rel.tn]?.id;
+
+          const ref_rel_column_id = (
+            await models2?.[rel.rtn]?.getColumns()
+          )?.find((c) => c.column_name === rel.rcn)?.id;
+
+          const rtnId = models2?.[rel.rtn]?.id;
+
+          try {
+            await Column.insert<LinkToAnotherRecordColumn>({
+              project_id: project.id,
+              db_alias: base.id,
+              fk_model_id: models2[table.tn].id,
+              cn: column.cn,
+              title: column.title,
+              uidt: column.uidt,
+              type: column.hm ? 'hm' : column.mm ? 'mm' : 'bt',
+              // column_id,
+              fk_child_column_id: rel_column_id,
+              fk_parent_column_id: ref_rel_column_id,
+              fk_index_name: rel.fkn,
+              ur: rel.ur,
+              dr: rel.dr,
+              order: colOrder++,
+              fk_related_model_id: column.hm ? tnId : rtnId,
+              system: column.system,
+            });
+
+            // nested relations data apis
+            info.apiCount += 5;
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      });
+    };
+  });
+
+  /* handle xc_tables update in parallel */
+  await NcHelp.executeOperations(tableMetasInsert, base.type);
+  await NcHelp.executeOperations(virtualColumnsInsert, base.type);
+  await extractAndGenerateManyToManyRelations(Object.values(models2));
+
+  let views: Array<{ order: number; table_name: string; title: string }> = (
+    await sqlClient.viewList()
+  )?.data?.list
+    // ?.filter(({ tn }) => !IGNORE_TABLES.includes(tn))
+    ?.map((v) => {
+      v.order = ++order;
+      v.table_name = v.view_name;
+      v.title = getTableNameAlias(v.view_name, project.prefix, base);
+      return v;
+    });
+
+  /* filter based on prefix */
+  if (project?.prefix) {
+    views = tables.filter((t) => {
+      return t?.tn?.startsWith(project?.prefix);
+    });
+  }
+
+  info.viewsCount = views.length;
+
+  const viewMetasInsert = views.map((table) => {
+    return async () => {
+      const columns = (await sqlClient.columnList({ tn: table.table_name }))
+        ?.data?.list;
+
+      /* create nc_models and its rows if it doesn't exists  */
+      models2[table.table_name] = await Model.insert(project.id, base.id, {
+        table_name: table.table_name,
+        title: getTableNameAlias(table.table_name, project.prefix, base),
+        // todo: sanitize
+        type: ModelTypes.VIEW,
+        order: table.order,
+      });
+
+      let colOrder = 1;
+
+      // view apis
+      info.apiCount += 2;
+
+      for (const column of columns) {
+        await Column.insert({
+          fk_model_id: models2[table.table_name].id,
+          ...column,
+          title: getColumnNameAlias(column.cn, base),
+          order: colOrder++,
+          uidt: getColumnUiType(base, column),
+        });
+      }
+    };
+  });
+
+  await NcHelp.executeOperations(viewMetasInsert, base.type);
+
+  const t1 = process.hrtime(t);
+  const t2 = t1[0] + t1[1] / 1000000000;
+
+  (info as any).timeTaken = t2.toFixed(1);
+
+  return info;
+}
+
+export default (router) => {
+  router.get(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseGet, 'baseGet')
+  );
+  router.patch(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseUpdate, 'baseUpdate')
+  );
+  router.delete(
+    '/api/v1/db/meta/projects/:projectId/bases/:baseId',
+    metaApiMetrics,
+    ncMetaAclMw(baseDelete, 'baseDelete')
+  );
+  router.post(
+    '/api/v1/db/meta/projects/:projectId/bases',
+    metaApiMetrics,
+    ncMetaAclMw(baseCreate, 'baseCreate')
+  );
+  router.get(
+    '/api/v1/db/meta/projects/:projectId/bases',
+    metaApiMetrics,
+    ncMetaAclMw(baseList, 'baseList')
+  );
+};
diff --git a/packages/nocodb/src/lib/meta/api/index.ts b/packages/nocodb/src/lib/meta/api/index.ts
index 39085584db..ba154978d8 100644
--- a/packages/nocodb/src/lib/meta/api/index.ts
+++ b/packages/nocodb/src/lib/meta/api/index.ts
@@ -3,6 +3,7 @@ import orgLicenseApis from './orgLicenseApis';
 import orgTokenApis from './orgTokenApis';
 import orgUserApis from './orgUserApis';
 import projectApis from './projectApis';
+import baseApis from './baseApis';
 import tableApis from './tableApis';
 import columnApis from './columnApis';
 import { Router } from 'express';
@@ -60,6 +61,7 @@ const jobs: { [id: string]: { last_message: any } } = {};
 export default function (router: Router, server) {
   initStrategies(router);
   projectApis(router);
+  baseApis(router);
   utilApis(router);
 
   if (process.env['PLAYWRIGHT_TEST'] === 'true') {
diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index 8074ed3976..778a553b3b 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -89,7 +89,10 @@ export async function tableList(req: Request, res: Response<TableListType>) {
 
 export async function tableCreate(req: Request<any, any, TableReqType>, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const base = project.bases[0];
+  let base = project.bases[0];
+  if (req.params.baseId) {
+    base = project.bases.find((b) => b.id === req.params.baseId);
+  }
 
   if (
     !req.body.table_name ||
@@ -224,7 +227,7 @@ export async function tableUpdate(req: Request<any, any>, res) {
   const model = await Model.get(req.params.tableId);
 
   const project = await Project.getWithInfo(req.body.project_id);
-  const base = project.bases[0];
+  const base = project.bases.find((b) => b.id === model.base_id);
 
   if (!req.body.table_name) {
     NcError.badRequest(
@@ -376,6 +379,11 @@ router.post(
   metaApiMetrics,
   ncMetaAclMw(tableCreate, 'tableCreate')
 );
+router.post(
+  '/api/v1/db/meta/projects/:projectId/:baseId/tables',
+  metaApiMetrics,
+  ncMetaAclMw(tableCreate, 'tableCreate')
+);
 router.get(
   '/api/v1/db/meta/tables/:tableId',
   metaApiMetrics,
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index c84395959b..bf0e77e2e7 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -83,6 +83,7 @@ export default class Base implements BaseType {
       return new Base(baseData);
     });
   }
+  
   static async get(id: string, ncMeta = Noco.ncMeta): Promise<Base> {
     let baseData =
       id &&
@@ -123,6 +124,7 @@ export default class Base implements BaseType {
 
     return config;
   }
+
   getProject(ncMeta = Noco.ncMeta): Promise<Project> {
     return Project.get(this.project_id, ncMeta);
   }
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 1a05f3cbd1..2f65863e6b 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1266,6 +1266,172 @@
         }
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/bases/{baseId}": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "get": {
+        "summary": "Base read",
+        "operationId": "base-read",
+        "description": "Read project base details",
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth",
+            "description": "Auth token"
+          }
+        ],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {}
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "summary": "Base delete",
+        "operationId": "base-delete",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      },
+      "patch": {
+        "summary": "Base update",
+        "operationId": "base-update",
+        "responses": {
+          "200": {
+            "description": "OK"
+          }
+        },
+        "tags": [
+          "Base"
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {}
+            }
+          }
+        }
+      }
+    },
+    "/api/v1/db/meta/projects/{projectId}/bases/": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "get": {
+        "summary": "Base list",
+        "operationId": "base-list",
+        "description": "Get project base list",
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth",
+            "description": "Auth token"
+          }
+        ],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {}
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "summary": "Base create",
+        "operationId": "base-create",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Base"
+                }
+              }
+            }
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "allOf": [
+                  {
+                    "$ref": "#/components/schemas/Base"
+                  },
+                  {
+                    "type": "object",
+                    "properties": {
+                      "external": {
+                        "type": "boolean",
+                        "default": false
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      }
+    },
     "/api/v1/db/meta/projects/{projectId}/shared": {
       "parameters": [
         {
@@ -1558,6 +1724,54 @@
         ]
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/{baseId}/tables": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "post": {
+        "summary": "",
+        "operationId": "table-create",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Table"
+                }
+              }
+            }
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/TableReq"
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      }
+    },
     "/api/v1/db/meta/tables/{tableId}": {
       "parameters": [
         {
@@ -7040,8 +7254,8 @@
         "examples": [
           {
             "id": "string",
-            "fk_project_id": "string",
-            "fk_base_id": "string",
+            "project_id": "string",
+            "base_id": "string",
             "title": "string",
             "alias": "string",
             "type": "string",
@@ -7107,10 +7321,10 @@
           "id": {
             "type": "string"
           },
-          "fk_project_id": {
+          "project_id": {
             "type": "string"
           },
-          "fk_base_id": {
+          "base_id": {
             "type": "string"
           },
           "table_name": {
@@ -7155,9 +7369,6 @@
           "slug": {
             "type": "string"
           },
-          "project_id": {
-            "type": "string"
-          },
           "mm": {
             "type": [
               "boolean",

From 1b369417d3e30ee83a2254a5c5ff2dbd9a1ff5b3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 12 Sep 2022 22:42:18 +0300
Subject: [PATCH 10/71] feat: meta-diff apis for multiple base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/metaDiffApis.ts | 10 +++++-----
 packages/nocodb/src/lib/models/Model.ts          | 13 +++++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 97b432a23c..06cd266d31 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -120,7 +120,7 @@ async function getMetaDiff(
   const tableList: Array<{ tn: string }> = (
     await sqlClient.tableList()
   )?.data?.list?.filter((t) => {
-    if (project?.prefix) {
+    if (project?.prefix && base.is_meta) {
       return t.tn?.startsWith(project?.prefix);
     }
     return true;
@@ -417,7 +417,7 @@ async function getMetaDiff(
       return v;
     })
     .filter((t) => {
-      if (project?.prefix) {
+      if (project?.prefix && base.is_meta) {
         return t.tn?.startsWith(project?.prefix);
       }
       return true;
@@ -532,11 +532,11 @@ async function getMetaDiff(
 
 export async function metaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  const changes = []
+  let changes = []
   for (const base of project.bases) {
     // @ts-ignore
     const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-    changes.push(await getMetaDiff(sqlClient, project, base));
+    changes = changes.concat(await getMetaDiff(sqlClient, project, base));
   }
 
   res.json(changes);
@@ -576,7 +576,7 @@ export async function metaDiffSync(req, res) {
   
               const model = await Model.insert(project.id, base.id, {
                 table_name: table_name,
-                title: getTableNameAlias(table_name, project.prefix, base),
+                title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
                 type: ModelTypes.TABLE,
               });
   
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 01d1bf0545..d7fabd25ac 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -157,7 +157,12 @@ export default class Model implements TableType {
     },
     ncMeta = Noco.ncMeta
   ): Promise<Model[]> {
-    let modelList = await NocoCache.getList(CacheScope.MODEL, [project_id]);
+    let modelList = [];
+    if (base_id) {
+      await NocoCache.getList(CacheScope.MODEL, [project_id, base_id]);
+    } else {
+      await NocoCache.getList(CacheScope.MODEL, [project_id]);
+    }
     if (!modelList.length) {
       modelList = await ncMeta.metaList2(
         project_id,
@@ -170,7 +175,11 @@ export default class Model implements TableType {
         }
       );
 
-      await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
+      if (base_id) {
+        await NocoCache.setList(CacheScope.MODEL, [project_id, base_id], modelList);
+      } else {
+        await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
+      }
     }
     modelList.sort(
       (a, b) =>

From 8edb4e4b2cb9b64611b8d308a4e2ec86c6c64986 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 12 Sep 2022 22:42:37 +0300
Subject: [PATCH 11/71] feat: front-end allow multiple base per project

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet/column/AdvancedOptions.vue     |  6 +--
 .../column/LinkedToAnotherRecordOptions.vue   |  4 +-
 .../nc-gui/components/template/Editor.vue     |  4 +-
 .../composables/useColumnCreateStore.ts       |  7 ++--
 packages/nc-gui/composables/useProject.ts     | 41 ++++++++++++++-----
 .../nc-gui/composables/useSmartsheetStore.ts  |  3 +-
 packages/nc-gui/composables/useTable.ts       |  3 +-
 7 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
index c08f496f7a..31a04ba1cd 100644
--- a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
-import { computed, useColumnCreateStoreOrThrow, useProject, useVModel } from '#imports'
+import { computed, useColumnCreateStoreOrThrow, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -10,9 +10,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { sqlUi } = useProject()
-
-const { onAlter, onDataTypeChange, validateInfos } = useColumnCreateStoreOrThrow()
+const { onAlter, onDataTypeChange, validateInfos, sqlUi } = useColumnCreateStoreOrThrow()
 
 // todo: 2nd argument of `getDataTypeListForUiType` is missing!
 const dataTypes = computed(() => sqlUi.value.getDataTypeListForUiType(vModel.value as { uidt: UITypes }, '' as any))
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index df1b50bc6e..e5840621e9 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -14,9 +14,9 @@ const vModel = useVModel(props, 'value', emit)
 
 const meta = $(inject(MetaInj, ref()))
 
-const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, onDataTypeChange, sqlUi } = useColumnCreateStoreOrThrow()
 
-const { tables, sqlUi } = $(useProject())
+const { tables } = $(useProject())
 
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index bf421c3d32..2f99813c49 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -64,7 +64,9 @@ const { $api } = useNuxtApp()
 
 const { addTab } = useTabs()
 
-const { sqlUi, project, loadTables } = useProject()
+const { sqlUis, project, loadTables } = useProject()
+
+const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index db7c7aef9a..a8d8d0c68a 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -27,8 +27,7 @@ interface ValidationsObj {
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
-    const { sqlUi } = useProject()
-
+    const { sqlUis } = useProject()
     const { $api } = useNuxtApp()
 
     const { getMeta } = useMetas()
@@ -37,7 +36,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { $e } = useNuxtApp()
 
-    const isEdit = computed(() => !!column.value?.id)
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+
+    const isEdit = computed(() => !!column?.value?.id)
 
     const idType = null
 
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 478aa51b17..18e3cfee4e 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -1,4 +1,4 @@
-import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
+import type { BaseType, OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
@@ -35,7 +35,7 @@ const [setup, use] = useInjectionState(() => {
   const projectLoadedHook = createEventHook<ProjectType>()
 
   const project = ref<ProjectType>({})
-
+  const bases = computed<BaseType[]>(() => project.value?.bases || [])
   const tables = ref<TableType[]>([])
 
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
@@ -55,15 +55,35 @@ const [setup, use] = useInjectionState(() => {
     }
   })
 
-  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || ClientType.MYSQL)
+  const sqlUis = computed(() => {
+    const temp: Record<string, any> = {}
+    for (const base of bases.value) {
+      if (base.id) {
+        temp[base.id] = SqlUiFactory.create({ client: base.type }) as Exclude<
+          ReturnType<typeof SqlUiFactory['create']>,
+          typeof OracleUi
+        >
+      }
+    }
+    return temp
+  })
+
+  function getBaseType(baseId: string) {
+    return bases.value.find((base) => base.id === baseId)?.type || ClientType.MYSQL
+  }
 
-  const sqlUi = computed(
-    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
-  )
+  function isMysql(baseId: string) {
+    return ['mysql', ClientType.MYSQL].includes(getBaseType(baseId))
+  }
+
+  function isMssql(baseId: string) {
+    return getBaseType(baseId) === 'mssql'
+  }
+
+  function isPg(baseId: string) {
+    return getBaseType(baseId) === 'pg'
+  }
 
-  const isMysql = computed(() => ['mysql', ClientType.MYSQL].includes(projectBaseType))
-  const isMssql = computed(() => projectBaseType === 'mssql')
-  const isPg = computed(() => projectBaseType === 'pg')
   const isSharedBase = computed(() => projectType === 'base')
 
   async function loadProjectMetaInfo(force?: boolean) {
@@ -151,6 +171,7 @@ const [setup, use] = useInjectionState(() => {
 
   return {
     project,
+    bases,
     tables,
     loadProjectRoles,
     loadProject,
@@ -159,7 +180,7 @@ const [setup, use] = useInjectionState(() => {
     isMysql,
     isMssql,
     isPg,
-    sqlUi,
+    sqlUis,
     isSharedBase,
     loadProjectMetaInfo,
     projectMetaInfo,
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 354f025afc..934924154d 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -13,8 +13,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
+    const { sqlUis } = useProject()
 
-    const { sqlUi } = useProject()
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index dbe2a05bad..b95a3c880b 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -32,8 +32,9 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const { loadTables } = useProject()
 
   const { closeTab } = useTabs()
+  const { sqlUis, project, tables } = useProject()
 
-  const { sqlUi, project, tables } = useProject()
+  const sqlUi = ref(sqlUis.value[0])
 
   const createTable = async () => {
     if (!sqlUi?.value) return

From 4b09930e9d9851a3b97eabcebc3ea65ac6529a77 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 16 Sep 2022 23:13:27 +0300
Subject: [PATCH 12/71] feat: meta-diff apis for single base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/metaDiffApis.ts   | 206 ++++++++++++++++++
 scripts/sdk/swagger.json                      |  55 +++++
 2 files changed, 261 insertions(+)

diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 06cd266d31..25afaeab59 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -542,6 +542,17 @@ export async function metaDiff(req, res) {
   res.json(changes);
 }
 
+export async function baseMetaDiff(req, res) {
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.get(req.params.baseId);
+  let changes = []
+
+  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+  changes = changes.concat(await getMetaDiff(sqlClient, project, base));
+
+  res.json(changes);
+}
+
 export async function metaDiffSync(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
   for (const base of project.bases) {
@@ -736,6 +747,191 @@ export async function metaDiffSync(req, res) {
   res.json({ msg: 'success' });
 }
 
+export async function baseMetaDiffSync(req, res) {
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.get(req.params.baseId);
+
+  const virtualColumnInsert: Array<() => Promise<void>> = [];
+
+  // @ts-ignore
+  const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+  const changes = await getMetaDiff(sqlClient, project, base);
+
+  /* Get all relations */
+  // const relations = (await sqlClient.relationListAll())?.data?.list;
+
+  for (const { table_name, detectedChanges } of changes) {
+    for (const change of detectedChanges) {
+      switch (change.type) {
+        case MetaDiffType.TABLE_NEW:
+          {
+            const columns = (
+              await sqlClient.columnList({ tn: table_name })
+            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+
+            mapDefaultPrimaryValue(columns);
+
+            const model = await Model.insert(project.id, base.id, {
+              table_name: table_name,
+              title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
+              type: ModelTypes.TABLE,
+            });
+
+            for (const column of columns) {
+              await Column.insert({
+                uidt: getColumnUiType(base, column),
+                fk_model_id: model.id,
+                ...column,
+                title: getColumnNameAlias(column.column_name, base),
+              });
+            }
+          }
+          break;
+        case MetaDiffType.VIEW_NEW:
+          {
+            const columns = (
+              await sqlClient.columnList({ tn: table_name })
+            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+
+            mapDefaultPrimaryValue(columns);
+
+            const model = await Model.insert(project.id, base.id, {
+              table_name: table_name,
+              title: getTableNameAlias(table_name, project.prefix, base),
+              type: ModelTypes.VIEW,
+            });
+
+            for (const column of columns) {
+              await Column.insert({
+                uidt: getColumnUiType(base, column),
+                fk_model_id: model.id,
+                ...column,
+                title: getColumnNameAlias(column.column_name, base),
+              });
+            }
+          }
+          break;
+        case MetaDiffType.TABLE_REMOVE:
+        case MetaDiffType.VIEW_REMOVE:
+          {
+            await change.model.delete();
+          }
+          break;
+        case MetaDiffType.TABLE_COLUMN_ADD:
+        case MetaDiffType.VIEW_COLUMN_ADD:
+          {
+            const columns = (
+              await sqlClient.columnList({ tn: table_name })
+            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+            const column = columns.find((c) => c.cn === change.cn);
+            column.uidt = getColumnUiType(base, column);
+            //todo: inflection
+            column.title = getColumnNameAlias(column.cn, base);
+            await Column.insert({ fk_model_id: change.id, ...column });
+          }
+          // update old
+          // populateParams.tableNames.push({ tn });
+          // populateParams.oldMetas[tn] = oldMetas.find(m => m.tn === tn);
+
+          break;
+        case MetaDiffType.TABLE_COLUMN_TYPE_CHANGE:
+        case MetaDiffType.VIEW_COLUMN_TYPE_CHANGE:
+          {
+            const columns = (
+              await sqlClient.columnList({ tn: table_name })
+            )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
+            const column = columns.find((c) => c.cn === change.cn);
+            const metaFact = ModelXcMetaFactory.create(
+              { client: base.type },
+              {}
+            );
+            column.uidt = metaFact.getUIDataType(column);
+            column.title = change.column.title;
+            await Column.update(change.column.id, column);
+          }
+          break;
+        case MetaDiffType.TABLE_COLUMN_REMOVE:
+        case MetaDiffType.VIEW_COLUMN_REMOVE:
+          await change.column.delete();
+          break;
+        case MetaDiffType.TABLE_RELATION_REMOVE:
+        case MetaDiffType.TABLE_VIRTUAL_M2M_REMOVE:
+          await change.column.delete();
+          break;
+        case MetaDiffType.TABLE_RELATION_ADD:
+          {
+            virtualColumnInsert.push(async () => {
+              const parentModel = await Model.getByIdOrName({
+                project_id: base.project_id,
+                base_id: base.id,
+                table_name: change.rtn,
+              });
+              const childModel = await Model.getByIdOrName({
+                project_id: base.project_id,
+                base_id: base.id,
+                table_name: change.tn,
+              });
+              const parentCol = await parentModel
+                .getColumns()
+                .then((cols) => cols.find((c) => c.column_name === change.rcn));
+              const childCol = await childModel
+                .getColumns()
+                .then((cols) => cols.find((c) => c.column_name === change.cn));
+
+              await Column.update(childCol.id, {
+                ...childCol,
+                uidt: UITypes.ForeignKey,
+                system: true,
+              });
+
+              if (change.relationType === RelationTypes.BELONGS_TO) {
+                const title = getUniqueColumnAliasName(
+                  childModel.columns,
+                  `${parentModel.title || parentModel.table_name}`
+                );
+                await Column.insert<LinkToAnotherRecordColumn>({
+                  uidt: UITypes.LinkToAnotherRecord,
+                  title,
+                  fk_model_id: childModel.id,
+                  fk_related_model_id: parentModel.id,
+                  type: RelationTypes.BELONGS_TO,
+                  fk_parent_column_id: parentCol.id,
+                  fk_child_column_id: childCol.id,
+                  virtual: false,
+                });
+              } else if (change.relationType === RelationTypes.HAS_MANY) {
+                const title = getUniqueColumnAliasName(
+                  childModel.columns,
+                  `${childModel.title || childModel.table_name} List`
+                );
+                await Column.insert<LinkToAnotherRecordColumn>({
+                  uidt: UITypes.LinkToAnotherRecord,
+                  title,
+                  fk_model_id: parentModel.id,
+                  fk_related_model_id: childModel.id,
+                  type: RelationTypes.HAS_MANY,
+                  fk_parent_column_id: parentCol.id,
+                  fk_child_column_id: childCol.id,
+                  virtual: false,
+                });
+              }
+            });
+          }
+          break;
+      }
+    }
+  }
+
+  await NcHelp.executeOperations(virtualColumnInsert, base.type);
+
+  // populate m2m relations
+  await extractAndGenerateManyToManyRelations(await base.getModels());
+
+  Tele.emit('evt', { evt_type: 'baseMetaDiff:synced' });
+
+  res.json({ msg: 'success' });
+}
+
 async function isMMRelationExist(
   model: Model,
   assocModel: Model,
@@ -877,4 +1073,14 @@ router.post(
   metaApiMetrics,
   ncMetaAclMw(metaDiffSync, 'metaDiffSync')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/meta-diff/:baseId',
+  metaApiMetrics,
+  ncMetaAclMw(baseMetaDiff, 'baseMetaDiff')
+);
+router.post(
+  '/api/v1/db/meta/projects/:projectId/meta-diff/:baseId',
+  metaApiMetrics,
+  ncMetaAclMw(baseMetaDiffSync, 'baseMetaDiffSync')
+);
 export default router;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 2f65863e6b..8f3842cc35 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -3266,6 +3266,61 @@
         }
       }
     },
+    "/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}": {
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "projectId",
+          "in": "path",
+          "required": true
+        },
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "baseId",
+          "in": "path",
+          "required": true
+        }
+      ],
+      "post": {
+        "summary": "",
+        "operationId": "base-meta-diff-sync",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        },
+        "tags": [
+          "Base"
+        ]
+      },
+      "get": {
+        "summary": "",
+        "operationId": "base-meta-diff-get",
+        "parameters": [],
+        "tags": [
+          "Base"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/v1/db/data/{orgs}/{projectName}/{tableName}": {
       "parameters": [
         {

From 2d462de4128414affddb7d7efff2ed1b5577ca70 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Sep 2022 17:14:56 +0300
Subject: [PATCH 13/71] feat: multiple source back-end

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts            | 40 +++++++++++++++++++
 packages/nocodb/src/lib/meta/api/baseApis.ts  | 34 ++++++++++------
 .../src/lib/meta/helpers/syncMigration.ts     | 18 +++++++++
 3 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index b1486b3930..9086fd0ea2 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -2010,6 +2010,46 @@ export class Api<
         format: 'json',
         ...params,
       }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name MetaDiffSync
+     * @request POST:/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}
+     * @response `200` `any` OK
+     */
+    metaDiffSync: (
+      projectId: string,
+      baseId: string,
+      params: RequestParams = {}
+    ) =>
+      this.request<any, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/meta-diff/${baseId}`,
+        method: 'POST',
+        format: 'json',
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name MetaDiffGet
+     * @request GET:/api/v1/db/meta/projects/{projectId}/meta-diff/{baseId}
+     * @response `200` `any` OK
+     */
+    metaDiffGet: (
+      projectId: string,
+      baseId: string,
+      params: RequestParams = {}
+    ) =>
+      this.request<any, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/meta-diff/${baseId}`,
+        method: 'GET',
+        format: 'json',
+        ...params,
+      }),
   };
   dbTable = {
     /**
diff --git a/packages/nocodb/src/lib/meta/api/baseApis.ts b/packages/nocodb/src/lib/meta/api/baseApis.ts
index b173f98402..7b015135b7 100644
--- a/packages/nocodb/src/lib/meta/api/baseApis.ts
+++ b/packages/nocodb/src/lib/meta/api/baseApis.ts
@@ -1,8 +1,8 @@
 import { Request, Response } from 'express';
 import Project from '../../models/Project';
-import { ModelTypes, ProjectListType, UITypes } from 'nocodb-sdk';
+import { BaseListType, ModelTypes, ProjectListType, UITypes } from 'nocodb-sdk';
 import { PagedResponseImpl } from '../helpers/PagedResponse';
-import syncMigration from '../helpers/syncMigration';
+import { syncBaseMigration } from '../helpers/syncMigration';
 import { IGNORE_TABLES } from '../../utils/common/BaseApiBuilder';
 import Column from '../../models/Column';
 import Model from '../../models/Model';
@@ -39,18 +39,19 @@ export async function baseUpdate(
 
 export async function baseList(
   req: Request<any, any, any>,
-  res: Response<ProjectListType>,
+  res: Response<BaseListType>,
   next
 ) {
   try {
-    const projects = await Project.list(req.query);
+    const bases = await Base.list({ projectId: req.params.projectId });
 
     res // todo: pagination
-      .json(
-        new PagedResponseImpl(projects, {
-          count: projects.length,
-          limit: projects.length,
-        })
+      .json({
+          bases: new PagedResponseImpl(bases, {
+            count: bases.length,
+            limit: bases.length,
+          })
+        }
       );
   } catch (e) {
     console.log(e);
@@ -71,9 +72,14 @@ export async function baseDelete(
 async function baseCreate(req: Request<any, any>, res) {
   // type | base | projectId
   const baseBody = req.body;
-  const base = await Base.createBase(baseBody);
-  const project = await base.getProject();
-  await syncMigration(project);
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.createBase({
+    ...baseBody,
+    type: baseBody.config?.client,
+    projectId: project.id,
+  });
+
+  await syncBaseMigration(project, base);
 
   const info = await populateMeta(base, project);
   
@@ -120,12 +126,14 @@ async function populateMeta(base: Base, project: Project): Promise<any> {
       return t;
     });
 
-  /* filter based on prefix */
+  // TODO add base prefix
+  /* filter based on prefix 
   if (project?.prefix) {
     tables = tables.filter((t) => {
       return t?.tn?.startsWith(project?.prefix);
     });
   }
+  */
 
   info.tablesCount = tables.length;
 
diff --git a/packages/nocodb/src/lib/meta/helpers/syncMigration.ts b/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
index 3e106c009c..50dff87b29 100644
--- a/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
+++ b/packages/nocodb/src/lib/meta/helpers/syncMigration.ts
@@ -1,5 +1,6 @@
 import Migrator from '../../db/sql-migrator/lib/KnexMigratorv2';
 import Project from '../../models/Project';
+import Base from '../../models/Base';
 
 export default async function syncMigration(project: Project): Promise<void> {
   for (const base of await project.getBases()) {
@@ -19,3 +20,20 @@ export default async function syncMigration(project: Project): Promise<void> {
     }
   }
 }
+
+export async function syncBaseMigration(project: Project, base: Base): Promise<void> {
+  try {
+    /* create sql-migrator */
+    const migrator = new Migrator(project);
+
+    await migrator.init(base);
+
+    /* sql-migrator : sync & up */
+    await migrator.sync(base);
+
+    await migrator.migrationsUp({ base });
+  } catch (e) {
+    console.log(e);
+    // throw e;
+  }
+}

From c5f95d8248f6a45aba80d99fa85d6380bd1856b7 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Sep 2022 17:15:22 +0300
Subject: [PATCH 14/71] feat: multiple source front-end

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 312 +++++++--
 .../dashboard/settings/DataSources.vue        | 101 +++
 .../components/dashboard/settings/Modal.vue   |   5 +
 .../settings/data-sources/CreateBase.vue      | 598 ++++++++++++++++++
 .../nc-gui/components/dlg/TableCreate.vue     |   9 +-
 .../nc-gui/components/template/Editor.vue     |   2 +-
 .../composables/useColumnCreateStore.ts       |   2 +-
 .../nc-gui/composables/useSmartsheetStore.ts  |   2 +-
 packages/nc-gui/composables/useTable.ts       |   6 +-
 9 files changed, 961 insertions(+), 76 deletions(-)
 create mode 100644 packages/nc-gui/components/dashboard/settings/DataSources.vue
 create mode 100644 packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8a4f6a4523..cfad2943f3 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -30,7 +30,7 @@ const { addTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const { tables, loadTables, isSharedBase } = useProject()
+const { bases, tables, loadTables, isSharedBase } = useProject()
 
 const { activeTab } = useTabs()
 
@@ -198,7 +198,8 @@ function openAirtableImportDialog() {
   }
 }
 
-function openTableCreateDialog() {
+function openTableCreateDialog(baseId?: string) {
+  if (!baseId) return
   $e('c:table:create:navdraw')
 
   const isOpen = ref(true)
@@ -206,6 +207,7 @@ function openTableCreateDialog() {
   const { close } = useDialog(resolveComponent('DlgTableCreate'), {
     'modelValue': isOpen,
     'onUpdate:modelValue': closeDialog,
+    'baseId': baseId,
   })
 
   function closeDialog() {
@@ -282,7 +284,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           <div
             v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-            @click="openTableCreateDialog"
+            @click="openTableCreateDialog(bases[0].id)"
           >
             <MdiPlus />
 
@@ -353,72 +355,242 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div
-                v-for="table of tables"
-                :key="table.id"
-                v-e="['a:table:open']"
-                :class="[
-                  { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
-                  `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                ]"
-                class="nc-tree-item text-sm cursor-pointer group"
-                :data-order="table.order"
-                :data-id="table.id"
-                :data-testid="`tree-view-table-${table.title}`"
-                @click="addTableTab(table)"
-              >
-                <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
-                  <template #title>{{ table.table_name }}</template>
-
-                  <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                    <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                      <MdiDragVertical
-                        v-if="isUIAllowed('treeview-drag-n-drop')"
-                        :class="`nc-child-draggable-icon-${table.title}`"
-                        class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                        @click.stop.prevent
-                      />
-
-                      <component
-                        :is="icon(table)"
-                        class="nc-view-icon text-xs"
-                        :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                      />
-                    </div>
-
-                    <div class="nc-tbl-title flex-1">
-                      <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+                <div v-if="index === '0'">
+                  <div
+                    v-for="table of tables.filter((table) => table.base_id === base.id)"
+                    :key="table.id"
+                    v-e="['a:table:open']"
+                    :class="[
+                      { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                    ]"
+                    class="nc-tree-item text-sm cursor-pointer group"
+                    :data-order="table.order"
+                    :data-id="table.id"
+                    :data-testid="`tree-view-table-${table.title}`"
+                    @click="addTableTab(table)"
+                  >
+                    <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
+                      <template #title>{{ table.table_name }}</template>
+                      <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                          <MdiDragVertical
+                            v-if="isUIAllowed('treeview-drag-n-drop')"
+                            :class="`nc-child-draggable-icon-${table.title}`"
+                            class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                            @click.stop.prevent
+                          />
+
+                          <component
+                            :is="icon(table)"
+                            class="nc-view-icon text-xs"
+                            :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                          />
+                        </div>
+
+                        <div class="nc-tbl-title flex-1">
+                          <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                        </div>
+
+                        <a-dropdown
+                          v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                          :trigger="['click']"
+                          @click.stop
+                        >
+                          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+
+                          <template #overlay>
+                            <a-menu class="!py-0 rounded text-sm">
+                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
+                                <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
+                                  {{ $t('general.rename') }}
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('table-delete')"
+                                :data-testid="`sidebar-table-delete-${table.title}`"
+                                @click="deleteTable(table)"
+                              >
+                                <div class="nc-project-menu-item">
+                                  {{ $t('general.delete') }}
+                                </div>
+                              </a-menu-item>
+                            </a-menu>
+                          </template>
+                        </a-dropdown>
+                      </div>
+                    </GeneralTooltip>
+                  </div>
+                </div>
+                <a-collapse v-else expand-icon-position="right" :bordered="false" ghost>
+                  <a-collapse-panel :key="index">
+                    <template #header>
+                      <div v-if="index !== '0'" class="flex items-center gap-2">
+                        <MdiDatabaseOutline />
+                        {{ base.alias || '' }}
+                        ({{ base.type || '' }})
+                      </div>
+                    </template>
+                    <div
+                      v-if="isUIAllowed('table-create')"
+                      class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                      @click="openTableCreateDialog(base.id)"
+                    >
+                      <MdiPlus />
+
+                      <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
+                        $t('tooltip.addTable')
+                      }}</span>
+
+                      <a-dropdown
+                        v-if="!isSharedBase"
+                        :trigger="['click']"
+                        overlay-class-name="nc-dropdown-import-menu"
+                        @click.stop
+                      >
+                        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
+
+                        <template #overlay>
+                          <a-menu class="!py-0 rounded text-sm">
+                            <!--                  Quick Import From -->
+                            <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
+                              <a-menu-item
+                                v-if="isUIAllowed('airtableImport')"
+                                key="quick-import-airtable"
+                                @click="openAirtableImportDialog"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiTableLarge class="group-hover:text-accent" />
+                                  Airtable
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('csvImport')"
+                                key="quick-import-csv"
+                                @click="openQuickImportDialog('csv')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiFileDocumentOutline class="group-hover:text-accent" />
+                                  CSV file
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('jsonImport')"
+                                key="quick-import-json"
+                                @click="openQuickImportDialog('json')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiCodeJson class="group-hover:text-accent" />
+                                  JSON file
+                                </div>
+                              </a-menu-item>
+
+                              <a-menu-item
+                                v-if="isUIAllowed('excelImport')"
+                                key="quick-import-excel"
+                                @click="openQuickImportDialog('excel')"
+                              >
+                                <div class="color-transition nc-project-menu-item group">
+                                  <MdiFileExcel class="group-hover:text-accent" />
+                                  Microsoft Excel
+                                </div>
+                              </a-menu-item>
+                            </a-menu-item-group>
+
+                            <a-menu-divider class="my-0" />
+
+                            <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                              <a
+                                v-e="['e:datasource:import-request']"
+                                href="https://github.com/nocodb/nocodb/issues/2052"
+                                target="_blank"
+                                class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                              >
+                                <MdiOpenInNew class="group-hover:text-accent" />
+                                <!-- Request a data source you need? -->
+                                {{ $t('labels.requestDataSource') }}
+                              </a>
+                            </a-menu-item>
+                          </a-menu>
+                        </template>
+                      </a-dropdown>
                     </div>
-
-                    <a-dropdown
-                      v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                      :trigger="['click']"
-                      @click.stop
+                    <div
+                      v-for="table of tables.filter((table) => table.base_id === base.id)"
+                      :key="table.id"
+                      v-e="['a:table:open']"
+                      :class="[
+                        { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                        `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                      ]"
+                      class="nc-tree-item text-sm cursor-pointer group"
+                      :data-order="table.order"
+                      :data-id="table.id"
+                      :data-testid="`tree-view-table-${table.title}`"
+                      @click="addTableTab(table)"
                     >
-                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
-
-                      <template #overlay>
-                        <a-menu class="!py-0 rounded text-sm">
-                          <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
-                            <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
-                              {{ $t('general.rename') }}
-                            </div>
-                          </a-menu-item>
-
-                          <a-menu-item
-                            v-if="isUIAllowed('table-delete')"
-                            :data-testid="`sidebar-table-delete-${table.title}`"
-                            @click="deleteTable(table)"
+                      <GeneralTooltip wrapper-class="pl-5 pr-3 py-2" modifier-key="Alt">
+                        <template #title>{{ table.table_name }}</template>
+                        <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                            <MdiDragVertical
+                              v-if="isUIAllowed('treeview-drag-n-drop')"
+                              :class="`nc-child-draggable-icon-${table.title}`"
+                              class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                              @click.stop.prevent
+                            />
+
+                            <component
+                              :is="icon(table)"
+                              class="nc-view-icon text-xs"
+                              :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                            />
+                          </div>
+
+                          <div class="nc-tbl-title flex-1">
+                            <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                          </div>
+
+                          <a-dropdown
+                            v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                            :trigger="['click']"
+                            @click.stop
                           >
-                            <div class="nc-project-menu-item">
-                              {{ $t('general.delete') }}
-                            </div>
-                          </a-menu-item>
-                        </a-menu>
-                      </template>
-                    </a-dropdown>
-                  </div>
-                </GeneralTooltip>
+                            <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+
+                            <template #overlay>
+                              <a-menu class="!py-0 rounded text-sm">
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-rename')"
+                                  :data-testid="`sidebar-table-rename-${table.title}`"
+                                  @click="openRenameTableDialog(table)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.rename') }}
+                                  </div>
+                                </a-menu-item>
+
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-delete')"
+                                  :data-testid="`sidebar-table-delete-${table.title}`"
+                                  @click="deleteTable(table)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.delete') }}
+                                  </div>
+                                </a-menu-item>
+                              </a-menu>
+                            </template>
+                          </a-dropdown>
+                        </div>
+                      </GeneralTooltip>
+                    </div>
+                  </a-collapse-panel>
+                </a-collapse>
               </div>
             </div>
           </div>
@@ -576,4 +748,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 :deep(.ant-dropdown-menu-title-content) {
   @apply !p-0;
 }
+
+:deep(.ant-collapse-content-box) {
+  @apply !p-0;
+}
+
+:deep(.ant-collapse-header) {
+  @apply !border-0 !border-y-1;
+}
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
new file mode 100644
index 0000000000..8f4d227157
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Empty } from 'ant-design-vue'
+import type { BaseType } from 'nocodb-sdk'
+import CreateBase from './data-sources/CreateBase.vue'
+import { useNuxtApp, useProject } from '#imports'
+
+const { $api } = useNuxtApp()
+const { project } = useProject()
+
+let isLoading = $ref(false)
+let sources = $ref<BaseType[]>([])
+const newSourceTab = $ref(false)
+
+async function loadBases() {
+  try {
+    if (!project.value?.id) return
+
+    isLoading = true
+    const baseList = await $api.base.list(project.value?.id)
+    if (baseList.bases.list && baseList.bases.list.length) {
+      sources = baseList.bases.list
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading = false
+  }
+}
+
+onMounted(async () => {
+  if (sources.length === 0) {
+    await loadBases()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-end items-center w-full mb-4">
+        <a-button class="self-start nc-btn-new-datasource" @click="newSourceTab = !newSourceTab">
+          <div v-if="newSourceTab" class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiClose class="text-lg group-hover:text-accent" />
+            Cancel
+          </div>
+          <div v-else class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+            New
+          </div>
+        </a-button>
+        <!--        Reload -->
+        <a-button
+          v-if="!newSourceTab"
+          v-e="['a:proj-meta:meta-data:reload']"
+          class="self-start nc-btn-metasync-reload"
+          @click="loadBases"
+        >
+          <div class="flex items-center gap-2 text-gray-600 font-light">
+            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+            {{ $t('general.reload') }}
+          </div>
+        </a-button>
+      </div>
+      <div v-if="newSourceTab" class="max-h-600px overflow-y-auto">
+        <CreateBase />
+      </div>
+      <div v-else class="max-h-600px overflow-y-auto">
+        <a-table
+          class="w-full"
+          size="small"
+          :custom-row="
+            (record) => ({
+              class: `nc-datasource-row nc-datasource-row-${record.table_name}`,
+            })
+          "
+          :data-source="sources ?? []"
+          :pagination="false"
+          :loading="isLoading"
+          bordered
+        >
+          <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
+          <a-table-column key="type" title="Type" data-index="type" :width="180">
+            <template #default="{ text }">{{ text }}</template>
+          </a-table-column>
+          <a-table-column key="alias" title="Name" data-index="alias">
+            <template #default="{ text, record }">{{ record.is_meta ? 'BASE' : text }}</template>
+          </a-table-column>
+          <a-table-column key="action" :title="$t('labels.actions')" :width="180">
+            <template #default="{ record }">
+              <div class="flex items-center gap-2">
+                <MdiEditOutline v-e="['c:base:edit:rename']" class="nc-action-btn" />
+
+                <MdiDeleteOutline class="nc-action-btn" />
+              </div>
+            </template>
+          </a-table-column>
+        </a-table>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index db7a2bd156..c0c9f0310c 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
+import DataSources from './DataSources.vue'
 import { resolveComponent, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
@@ -91,6 +92,10 @@ const tabsInfo: TabGroup = {
     title: t('title.projMeta'),
     icon: MultipleTableIcon,
     subTabs: {
+      dataSources: {
+        title: 'Data Sources',
+        body: DataSources,
+      },
       metaData: {
         // Metadata
         title: t('title.metadata'),
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
new file mode 100644
index 0000000000..5cbf911edb
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -0,0 +1,598 @@
+<script lang="ts" setup>
+import { Form, Modal, message } from 'ant-design-vue'
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import {
+  CertTypes,
+  SSLUsage,
+  clientTypes,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  generateUniqueName,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  nextTick,
+  onMounted,
+  projectTitleValidator,
+  readFile,
+  ref,
+  useApi,
+  useI18n,
+  useNuxtApp,
+  watch,
+} from '#imports'
+import { ClientType } from '~/lib'
+import { DefaultConnection, SQLiteConnection } from '~/utils'
+import type { ProjectCreateForm } from '~/utils'
+
+const { project, loadProject } = useProject()
+
+const useForm = Form.useForm
+
+const testSuccess = ref(false)
+
+const form = ref<typeof Form>()
+
+const { api } = useApi()
+
+const { $e } = useNuxtApp()
+
+const { t } = useI18n()
+
+let formState = $ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const customFormState = ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const validators = computed(() => {
+  return {
+    'title': [
+      {
+        required: true,
+        message: 'Base name is required',
+      },
+      projectTitleValidator,
+    ],
+    'extraParameters': [extraParameterValidator],
+    'dataSource.client': [fieldRequiredValidator()],
+    ...(formState.dataSource.client === ClientType.SQLITE
+      ? {
+          'dataSource.connection.connection.filename': [fieldRequiredValidator()],
+        }
+      : {
+          'dataSource.connection.host': [fieldRequiredValidator()],
+          'dataSource.connection.port': [fieldRequiredValidator()],
+          'dataSource.connection.user': [fieldRequiredValidator()],
+          'dataSource.connection.password': [fieldRequiredValidator()],
+          'dataSource.connection.database': [fieldRequiredValidator()],
+          ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
+            ? {
+                'dataSource.searchPath.0': [fieldRequiredValidator()],
+              }
+            : {}),
+        }),
+  }
+})
+
+const { validate, validateInfos } = useForm(formState, validators)
+
+const populateName = (v: string) => {
+  formState.dataSource.connection.database = `${v.trim()}_noco`
+}
+
+const onClientChange = () => {
+  formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
+  populateName(formState.title)
+}
+
+const onSSLModeChange = ((mode: SSLUsage) => {
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
+    switch (mode) {
+      case SSLUsage.No:
+        delete connection.ssl
+        break
+      case SSLUsage.Allowed:
+        connection.ssl = 'true'
+        break
+      default:
+        connection.ssl = {
+          ca: '',
+          cert: '',
+          key: '',
+        }
+        break
+    }
+  }
+}) as SelectHandler
+
+const updateSSLUse = () => {
+  if (formState.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.dataSource.connection as DefaultConnection
+    if (connection.ssl) {
+      if (typeof connection.ssl === 'string') {
+        formState.sslUse = SSLUsage.Allowed
+      } else {
+        formState.sslUse = SSLUsage.Preferred
+      }
+    } else {
+      formState.sslUse = SSLUsage.No
+    }
+  }
+}
+
+const addNewParam = () => {
+  formState.extraParameters.push({ key: '', value: '' })
+}
+
+const removeParam = (index: number) => {
+  formState.extraParameters.splice(index, 1)
+}
+
+const inflectionTypes = ['camelize', 'none']
+const importURL = ref('')
+const configEditDlg = ref(false)
+const importURLDlg = ref(false)
+
+const caFileInput = ref<HTMLInputElement>()
+const keyFileInput = ref<HTMLInputElement>()
+const certFileInput = ref<HTMLInputElement>()
+
+const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
+  if (!el) return
+
+  readFile(el, (content) => {
+    if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object')
+      formState.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
+
+const sslFilesRequired = computed(
+  () => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed,
+)
+
+function getConnectionConfig() {
+  const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value])))
+
+  const connection = {
+    ...formState.dataSource.connection,
+    ...extraParameters,
+  }
+
+  if ('ssl' in connection && connection.ssl) {
+    if (
+      formState.sslUse === SSLUsage.No ||
+      (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
+    ) {
+      delete connection.ssl
+    }
+  }
+  return connection
+}
+
+const focusInvalidInput = () => {
+  form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
+}
+
+const createBase = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  try {
+    if (!project.value?.id) return
+
+    const connection = getConnectionConfig()
+
+    const config = { ...formState.dataSource, connection }
+
+    await api.base.create(project.value?.id, {
+      alias: formState.title,
+      type: formState.dataSource.client,
+      config,
+      inflection_column: formState.inflection.inflectionColumn,
+      inflection_table: formState.inflection.inflectionTable,
+    })
+
+    $e('a:base:create:extdb')
+
+    await loadProject()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const testConnection = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  $e('a:base:create:extdb:test-connection', [])
+
+  try {
+    if (formState.dataSource.client === ClientType.SQLITE) {
+      testSuccess.value = true
+    } else {
+      const connection = getConnectionConfig()
+
+      connection.database = getTestDatabaseName(formState.dataSource)!
+
+      const testConnectionConfig = {
+        ...formState.dataSource,
+        connection,
+      }
+
+      const result = await api.utils.testConnection(testConnectionConfig)
+
+      if (result.code === 0) {
+        testSuccess.value = true
+
+        Modal.confirm({
+          title: t('msg.info.dbConnected'),
+          icon: null,
+          type: 'success',
+
+          okText: 'Ok & Add Base',
+          okType: 'primary',
+          cancelText: t('general.cancel'),
+          onOk: createBase,
+        })
+      } else {
+        testSuccess.value = false
+
+        message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+      }
+    }
+  } catch (e: any) {
+    testSuccess.value = false
+
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const handleImportURL = async () => {
+  if (!importURL.value || importURL.value === '') return
+
+  const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })
+
+  if (connectionConfig) {
+    formState.dataSource.client = connectionConfig.client
+    formState.dataSource.connection = { ...connectionConfig.connection }
+  } else {
+    message.error(t('msg.error.invalidURL'))
+  }
+  importURLDlg.value = false
+  updateSSLUse()
+}
+
+const handleEditJSON = () => {
+  customFormState.value = { ...formState }
+  configEditDlg.value = true
+}
+
+const handleOk = () => {
+  formState = { ...customFormState.value }
+  configEditDlg.value = false
+  updateSSLUse()
+}
+
+// reset test status on config change
+watch(
+  () => formState.dataSource,
+  () => (testSuccess.value = false),
+  { deep: true },
+)
+
+// populate database name based on title
+watch(
+  () => formState.title,
+  (v) => populateName(v),
+)
+
+// select and focus title field on load
+onMounted(() => {
+  formState.title = generateUniqueName()
+  nextTick(() => {
+    // todo: replace setTimeout and follow better approach
+    setTimeout(() => {
+      const input = form.value?.$el?.querySelector('input[type=text]')
+      input.setSelectionRange(0, formState.title.length)
+      input.focus()
+    }, 500)
+  })
+})
+</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)"
+  >
+    <h1 class="prose-2xl font-bold self-center my-4">New Base</h1>
+
+    <a-form
+      ref="form"
+      :model="formState"
+      name="external-project-create-form"
+      layout="horizontal"
+      no-style
+      :label-col="{ span: 8 }"
+    >
+      <a-form-item label="Base Name" v-bind="validateInfos.title">
+        <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
+      </a-form-item>
+
+      <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+        <a-select
+          v-model:value="formState.dataSource.client"
+          class="nc-extdb-db-type"
+          dropdown-class-name="nc-dropdown-ext-db-type"
+          @change="onClientChange"
+        >
+          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+            >{{ client.text }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <!-- SQLite File -->
+      <a-form-item
+        v-if="formState.dataSource.client === ClientType.SQLITE"
+        :label="$t('labels.sqliteFile')"
+        v-bind="validateInfos['dataSource.connection.connection.filename']"
+      >
+        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
+      </a-form-item>
+
+      <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-form-item>
+
+        <!-- Port Number -->
+        <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
+          <a-input-number
+            v-model:value="(formState.dataSource.connection as DefaultConnection).port"
+            class="!w-full nc-extdb-host-port"
+          />
+        </a-form-item>
+
+        <!-- Username -->
+        <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
+        </a-form-item>
+
+        <!-- Password -->
+        <a-form-item :label="$t('labels.password')">
+          <a-input-password
+            v-model:value="(formState.dataSource.connection as DefaultConnection).password"
+            class="nc-extdb-host-password"
+          />
+        </a-form-item>
+
+        <!-- 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>
+
+        <!-- Schema name -->
+        <a-form-item
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
+          :label="$t('labels.schemaName')"
+          v-bind="validateInfos['dataSource.searchPath.0']"
+        >
+          <a-input v-model:value="formState.dataSource.searchPath[0]" />
+        </a-form-item>
+
+        <a-collapse ghost expand-icon-position="right" class="!mt-6">
+          <a-collapse-panel key="1">
+            <template #header>
+              <div class="flex items-center gap-2">
+                <!--                Use Connection URL -->
+                <a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true">
+                  {{ $t('activity.useConnectionUrl') }}
+                </a-button>
+                <span>{{ $t('title.advancedParameters') }}</span>
+              </div>
+            </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-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item label="SSL keys">
+              <div class="flex gap-2">
+                <a-tooltip placement="top">
+                  <!-- Select .cert file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCert') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
+                    {{ $t('labels.clientCert') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select .key file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientKey') }}</span>
+                  </template>
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
+                    {{ $t('labels.clientKey') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select CA file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCA') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
+                    {{ $t('labels.serverCA') }}
+                  </a-button>
+                </a-tooltip>
+              </div>
+            </a-form-item>
+
+            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
+
+            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
+
+            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
+
+            <a-divider />
+
+            <!--            Extra connection parameters -->
+            <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">
+                    <a-input v-model:value="item.key" />
+
+                    <span>:</span>
+
+                    <a-input v-model:value="item.value" />
+
+                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                  </div>
+                </div>
+                <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
+                  <div class="flex items-center justify-center"><MdiPlus /></div>
+                </a-button>
+              </a-card>
+            </a-form-item>
+
+            <a-divider />
+
+            <a-form-item :label="$t('labels.inflection.tableName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionTable"
+                dropdown-class-name="nc-dropdown-inflection-table-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item :label="$t('labels.inflection.columnName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionColumn"
+                dropdown-class-name="nc-dropdown-inflection-column-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <div class="flex justify-end">
+              <a-button class="!shadow-md" @click="handleEditJSON()">
+                <!-- Edit connection JSON -->
+                {{ $t('activity.editConnJson') }}
+              </a-button>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
+      </template>
+
+      <a-form-item class="flex justify-center !mt-5">
+        <div class="flex justify-center gap-2">
+          <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
+            {{ $t('activity.testDbConn') }}
+          </a-button>
+
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createBase">
+            {{ $t('general.submit') }}
+          </a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+
+    <a-modal
+      v-model:visible="configEditDlg"
+      :title="$t('activity.editConnJson')"
+      width="600px"
+      wrap-class-name="nc-modal-edit-connection-json"
+      @ok="handleOk"
+    >
+      <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
+    </a-modal>
+
+    <!--    Use Connection URL -->
+    <a-modal
+      v-model:visible="importURLDlg"
+      :title="$t('activity.useConnectionUrl')"
+      width="600px"
+      :ok-text="$t('general.ok')"
+      :cancel-text="$t('general.cancel')"
+      wrap-class-name="nc-modal-connection-url"
+      @ok="handleImportURL"
+    >
+      <a-input v-model:value="importURL" />
+    </a-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-collapse-header) {
+  @apply !pr-10 !-mt-4 text-right justify-end;
+}
+
+:deep(.ant-collapse-content-box) {
+  @apply !px-0;
+}
+
+:deep(.ant-form-item-explain-error) {
+  @apply !text-xs;
+}
+
+:deep(.ant-form-item) {
+  @apply mb-2;
+}
+
+:deep(.ant-form-item-with-help .ant-form-item-explain) {
+  @apply !min-h-0;
+}
+
+.create-external {
+  :deep(.ant-input-affix-wrapper),
+  :deep(.ant-input),
+  :deep(.ant-select) {
+    @apply !appearance-none border-1 border-solid rounded;
+  }
+
+  :deep(.ant-input-password) {
+    input {
+      @apply !border-none my-0;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index e950102b36..96cb6cec16 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -4,6 +4,7 @@ import { TabType } from '~/lib'
 
 const props = defineProps<{
   modelValue: boolean
+  baseId: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -28,7 +29,7 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
   })
 
   dialogShow.value = false
-})
+}, props.baseId)
 
 const useForm = Form.useForm
 
@@ -51,11 +52,11 @@ const validators = computed(() => {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
             let tableNameLengthLimit = 255
-            if (isMysql) {
+            if (isMysql(props.baseId)) {
               tableNameLengthLimit = 64
-            } else if (isPg) {
+            } else if (isPg(props.baseId)) {
               tableNameLengthLimit = 63
-            } else if (isMssql) {
+            } else if (isMssql(props.baseId)) {
               tableNameLengthLimit = 128
             }
             const projectPrefix = project?.value?.prefix || ''
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 2f99813c49..24fb40b834 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -66,7 +66,7 @@ const { addTab } = useTabs()
 
 const { sqlUis, project, loadTables } = useProject()
 
-const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index a8d8d0c68a..d31ac88e16 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -36,7 +36,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { $e } = useNuxtApp()
 
-    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const isEdit = computed(() => !!column?.value?.id)
 
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 934924154d..a0982e4b66 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -15,7 +15,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const { $api } = useNuxtApp()
     const { sqlUis } = useProject()
 
-    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index b95a3c880b..3de4ddde10 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -16,7 +16,7 @@ import {
 } from '#imports'
 import { TabType } from '~/lib'
 
-export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
+export function useTable(onTableCreate?: (tableMeta: TableType) => void, baseId?: string) {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
     title: '',
     table_name: '',
@@ -34,7 +34,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const { closeTab } = useTabs()
   const { sqlUis, project, tables } = useProject()
 
-  const sqlUi = ref(sqlUis.value[0])
+  const sqlUi = computed(() => (baseId && sqlUis.value[baseId] ? sqlUis.value[baseId] : Object.values(sqlUis.value)[0]))
 
   const createTable = async () => {
     if (!sqlUi?.value) return
@@ -49,7 +49,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
     })
 
     try {
-      const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+      const tableMeta = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
         ...table,
         columns,
       })

From 743c160eef57b081207bf3fa34f86395e52a600e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Sep 2022 17:34:21 +0300
Subject: [PATCH 15/71] fix: multiple source project prefix

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/composables/useTable.ts              | 2 +-
 packages/nocodb/src/lib/meta/api/tableApis.ts        | 7 ++++---
 packages/nocodb/src/lib/meta/helpers/getTableName.ts | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index 3de4ddde10..6b9368c0c3 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -63,7 +63,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void, baseId?
   watch(
     () => table.title,
     (title) => {
-      table.table_name = `${project?.value?.prefix || ''}${title}`
+      table.table_name = `${title}`
     },
   )
 
diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index 778a553b3b..89df8a5072 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -90,6 +90,7 @@ export async function tableList(req: Request, res: Response<TableListType>) {
 export async function tableCreate(req: Request<any, any, TableReqType>, res) {
   const project = await Project.getWithInfo(req.params.projectId);
   let base = project.bases[0];
+
   if (req.params.baseId) {
     base = project.bases.find((b) => b.id === req.params.baseId);
   }
@@ -103,7 +104,7 @@ export async function tableCreate(req: Request<any, any, TableReqType>, res) {
     );
   }
 
-  if (project.prefix) {
+  if (base.is_meta && project.prefix) {
     if (!req.body.table_name.startsWith(project.prefix)) {
       req.body.table_name = `${project.prefix}_${req.body.table_name}`;
     }
@@ -228,14 +229,14 @@ export async function tableUpdate(req: Request<any, any>, res) {
 
   const project = await Project.getWithInfo(req.body.project_id);
   const base = project.bases.find((b) => b.id === model.base_id);
-
+  
   if (!req.body.table_name) {
     NcError.badRequest(
       'Missing table name `table_name` property in request body'
     );
   }
 
-  if (project.prefix) {
+  if (base.is_meta && project.prefix) {
     if (!req.body.table_name.startsWith(project.prefix)) {
       req.body.table_name = `${project.prefix}${req.body.table_name}`;
     }
diff --git a/packages/nocodb/src/lib/meta/helpers/getTableName.ts b/packages/nocodb/src/lib/meta/helpers/getTableName.ts
index cff2d54cbd..4dc49ba652 100644
--- a/packages/nocodb/src/lib/meta/helpers/getTableName.ts
+++ b/packages/nocodb/src/lib/meta/helpers/getTableName.ts
@@ -7,7 +7,7 @@ export default function getTableNameAlias(
   base: Base
 ): string {
   let tn = tableName;
-  if (prefix) {
+  if (base.is_meta && prefix) {
     tn = tn.replace(prefix, '');
   }
 

From 1cf10e8fd91bf3c01c0be32f0c775a9259dc5cf1 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Sep 2022 17:58:15 +0300
Subject: [PATCH 16/71] fix: multiple source sync views

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/baseApis.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/baseApis.ts b/packages/nocodb/src/lib/meta/api/baseApis.ts
index 7b015135b7..b21985a000 100644
--- a/packages/nocodb/src/lib/meta/api/baseApis.ts
+++ b/packages/nocodb/src/lib/meta/api/baseApis.ts
@@ -126,14 +126,14 @@ async function populateMeta(base: Base, project: Project): Promise<any> {
       return t;
     });
 
-  // TODO add base prefix
-  /* filter based on prefix 
-  if (project?.prefix) {
+
+  /* filter based on prefix */
+  if (base.is_meta && project?.prefix) {
     tables = tables.filter((t) => {
       return t?.tn?.startsWith(project?.prefix);
     });
   }
-  */
+  
 
   info.tablesCount = tables.length;
 
@@ -297,7 +297,7 @@ async function populateMeta(base: Base, project: Project): Promise<any> {
     });
 
   /* filter based on prefix */
-  if (project?.prefix) {
+  if (base.is_meta && project?.prefix) {
     views = tables.filter((t) => {
       return t?.tn?.startsWith(project?.prefix);
     });

From 121c4ed71c327ce863c1db49ac02480992426fc9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Sep 2022 18:33:42 +0300
Subject: [PATCH 17/71] fix: show only tables within same base as child table
 for LTAR

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet/column/LinkedToAnotherRecordOptions.vue    | 2 +-
 .../nc-gui/components/smartsheet/column/LookupOptions.vue | 2 +-
 .../nc-gui/components/smartsheet/column/RollupOptions.vue | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index e5840621e9..f137ed3edd 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -44,7 +44,7 @@ const refTables = $computed(() => {
     return []
   }
 
-  return tables.filter((t) => t.type === ModelTypes.TABLE)
+  return tables.filter((t) => t.type === ModelTypes.TABLE && t.base_id === meta?.base_id)
 })
 
 const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 77279ae9f1..0667cc7b9f 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -34,7 +34,7 @@ const refTables = $computed(() => {
   }
 
   const _refTables = meta.columns
-    .filter((column) => column.uidt === UITypes.LinkToAnotherRecord && !column.system)
+    .filter((column) => column.uidt === UITypes.LinkToAnotherRecord && !column.system && column.base_id === meta?.base_id)
     .map((column) => ({
       col: column.colOptions,
       column,
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 960cbb7507..20e1a54333 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -47,7 +47,13 @@ const refTables = $computed(() => {
   }
 
   const _refTables = meta.columns
-    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && (c.colOptions as LinkToAnotherRecordType).type !== 'bt' && !c.system)
+    .filter(
+      (c) =>
+        c.uidt === UITypes.LinkToAnotherRecord &&
+        (c.colOptions as LinkToAnotherRecordType).type !== 'bt' &&
+        !c.system &&
+        c.base_id === meta?.base_id,
+    )
     .map((c) => ({
       col: c.colOptions,
       column: c,

From 5c433e3086283f35ff4e4da6aecb4133e8d5563b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 25 Sep 2022 16:43:16 +0300
Subject: [PATCH 18/71] feat: team & settings modal data sources tab revised

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts               |   7 +-
 .../nc-gui/components/cell/DateTimePicker.vue |   4 +-
 .../nc-gui/components/cell/MultiSelect.vue    |   2 +-
 .../nc-gui/components/cell/TimePicker.vue     |   6 +-
 .../nc-gui/components/dashboard/TreeView.vue  |  16 +-
 .../dashboard/settings/AppStore.vue           | 169 +++++++++---------
 .../dashboard/settings/DataSources.vue        | 142 ++++++++++-----
 .../components/dashboard/settings/Erd.vue     |  10 +-
 .../dashboard/settings/Metadata.vue           |  10 +-
 .../components/dashboard/settings/Modal.vue   | 153 +++++++++++-----
 .../components/dashboard/settings/UIAcl.vue   |  11 +-
 .../nc-gui/components/dlg/TableRename.vue     |   9 +-
 packages/nc-gui/components/erd/View.vue       |  19 +-
 .../components/general/AddBaseButton.vue      |  21 +++
 .../smartsheet/column/CurrencyOptions.vue     |   4 +-
 .../components/virtual-cell/Formula.vue       |   2 +-
 .../composables/useColumnCreateStore.ts       |  11 +-
 packages/nc-gui/composables/useProject.ts     |   8 +-
 packages/nc-gui/context/index.ts              |   1 +
 packages/nc-gui/lib/enums.ts                  |   9 +
 .../pages/[projectType]/[projectId]/index.vue |  13 +-
 .../nocodb/src/lib/meta/api/metaDiffApis.ts   |   7 +
 22 files changed, 421 insertions(+), 213 deletions(-)
 create mode 100644 packages/nc-gui/components/general/AddBaseButton.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 1664e337f5..3af2f902d4 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -10,6 +10,8 @@ declare module '@vue/runtime-core' {
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
+    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
+    ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
@@ -65,7 +67,6 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
-    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
@@ -144,7 +145,9 @@ declare module '@vue/runtime-core' {
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiContentSaveEdit: typeof import('~icons/mdi/content-save-edit')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
+    MdiDatabaseLockOutline: typeof import('~icons/mdi/database-lock-outline')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDatabasePlusOutline: typeof import('~icons/mdi/database-plus-outline')['default']
     MdiDatabaseSync: typeof import('~icons/mdi/database-sync')['default']
     MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
@@ -176,6 +179,7 @@ declare module '@vue/runtime-core' {
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']
+    MdiGraphOutline: typeof import('~icons/mdi/graph-outline')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -193,6 +197,7 @@ declare module '@vue/runtime-core' {
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenu: typeof import('~icons/mdi/menu')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMenuIcon: typeof import('~icons/mdi/menu-icon')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 8819d23ce7..8ad758b8b8 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -28,9 +28,11 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const column = inject(ColumnInj)!
+
 let isDateInvalid = $ref(false)
 
-const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateFormat = isMysql(column.value.base_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 let localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0e8ac91571..3815933e49 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -105,7 +105,7 @@ const vModel = computed({
 const selectedTitles = computed(() =>
   modelValue
     ? typeof modelValue === 'string'
-      ? isMysql
+      ? isMysql(column.value.base_id)
         ? modelValue.split(',').sort((a, b) => {
             const opa = options.value.find((el) => el.title === a)
             const opb = options.value.find((el) => el.title === b)
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 6402de2bed..1d9f8fe7c6 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -19,9 +19,11 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const column = inject(ColumnInj)!
+
 let isTimeInvalid = $ref(false)
 
-const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateFormat = isMysql(column.value.base_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
 const localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index cfad2943f3..8ab86f299c 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -145,7 +145,7 @@ const addTableTab = (table: TableType) => {
   addTab({ title: table.title, id: table.id, type: table.type as TabType })
 }
 
-function openRenameTableDialog(table: TableType, rightClick = false) {
+function openRenameTableDialog(table: TableType, baseId: string, rightClick = false) {
   $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
 
   const isOpen = ref(true)
@@ -153,6 +153,7 @@ function openRenameTableDialog(table: TableType, rightClick = false) {
   const { close } = useDialog(resolveComponent('DlgTableRename'), {
     'modelValue': isOpen,
     'tableMeta': table,
+    'baseId': baseId,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -402,7 +403,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                           <template #overlay>
                             <a-menu class="!py-0 rounded text-sm">
-                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table)">
+                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, base.id)">
                                 <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
                                   {{ $t('general.rename') }}
                                 </div>
@@ -567,7 +568,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                                 <a-menu-item
                                   v-if="isUIAllowed('table-rename')"
                                   :data-testid="`sidebar-table-rename-${table.title}`"
-                                  @click="openRenameTableDialog(table)"
+                                  @click="openRenameTableDialog(table, base.id)"
                                 >
                                   <div class="nc-project-menu-item">
                                     {{ $t('general.rename') }}
@@ -604,7 +605,10 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       <template v-if="!isSharedBase" #overlay>
         <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
-            <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
+            <a-menu-item
+              v-if="isUIAllowed('table-rename')"
+              @click="openRenameTableDialog(contextMenuTarget.value, base.id, true)"
+            >
               <div class="nc-project-menu-item">
                 {{ $t('general.rename') }}
               </div>
@@ -631,6 +635,10 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     <a-divider class="!my-0" />
 
     <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
+      <LazyGeneralAddBaseButton
+        class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
+      />
+
       <LazyGeneralShareBaseButton
         class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
       />
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index f0d9e1ebb4..a957604c2b 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -70,96 +70,97 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="showPluginInstallModal"
-    :class="{ active: showPluginInstallModal }"
-    :closable="false"
-    centered
-    min-height="300"
-    :footer="null"
-    wrap-class-name="nc-modal-plugin-install"
-    v-bind="$attrs"
-  >
-    <LazyDashboardSettingsAppInstall
-      v-if="pluginApp && showPluginInstallModal"
-      :id="pluginApp.id"
-      @close="showPluginInstallModal = false"
-      @saved="saved()"
-    />
-  </a-modal>
-
-  <a-modal
-    v-model:visible="showPluginUninstallModal"
-    :class="{ active: showPluginUninstallModal }"
-    :closable="false"
-    width="24rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-plugin-uninstall"
-  >
-    <div class="flex flex-col h-full">
-      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
-        {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
-      </div>
-      <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showPluginUninstallModal = false"> {{ $t('general.cancel') }} </a-button>
-        <a-button type="primary" danger @click="resetPlugin"> {{ $t('general.confirm') }} </a-button>
-      </div>
-    </div>
-  </a-modal>
-
-  <div class="grid grid-cols-2 gap-x-2 gap-y-4 mt-4">
-    <a-card
-      v-for="(app, i) in apps"
-      :key="i"
-      :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
-      :body-style="{ width: '100%' }"
+  <div>
+    <a-modal
+      v-model:visible="showPluginInstallModal"
+      :class="{ active: showPluginInstallModal }"
+      :closable="false"
+      centered
+      min-height="300"
+      :footer="null"
+      wrap-class-name="nc-modal-plugin-install"
+      v-bind="$attrs"
     >
-      <div class="install-btn flex flex-row justify-end space-x-1">
-        <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
-            <IcRoundEdit class="pr-0.5" :height="12" />
-            Edit
-          </div>
-        </a-button>
-
-        <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
-            <MdiCloseCircleOutline />
-            <div class="flex ml-0.5">Reset</div>
-          </div>
-        </a-button>
-
-        <a-button v-else size="small" type="primary" @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
-            <MdiPlus />
-            Install
-          </div>
-        </a-button>
+      <LazyDashboardSettingsAppInstall
+        v-if="pluginApp && showPluginInstallModal"
+        :id="pluginApp.id"
+        @close="showPluginInstallModal = false"
+        @saved="saved()"
+      />
+    </a-modal>
+
+    <a-modal
+      v-model:visible="showPluginUninstallModal"
+      :closable="false"
+      width="24rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-plugin-uninstall"
+    >
+      <div class="flex flex-col h-full">
+        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
+          {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
+        </div>
+        <div class="flex mt-6 justify-center space-x-2">
+          <a-button @click="showPluginUninstallModal = false"> {{ $t('general.cancel') }} </a-button>
+          <a-button type="primary" danger @click="resetPlugin"> {{ $t('general.confirm') }} </a-button>
+        </div>
       </div>
-
-      <div class="flex flex-row space-x-2 items-center justify-start w-full">
-        <div class="flex w-20 pl-3">
-          <img
-            v-if="app.title !== 'SMTP'"
-            class="avatar"
-            alt="logo"
-            :style="{
-              backgroundColor: app.title === 'SES' ? '#242f3e' : '',
-            }"
-            :src="app.logo"
-          />
-
-          <div v-else />
+    </a-modal>
+
+    <div class="grid grid-cols-2 gap-x-2 gap-y-4 mt-4">
+      <a-card
+        v-for="(app, i) in apps"
+        :key="i"
+        :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
+        :body-style="{ width: '100%' }"
+      >
+        <div class="install-btn flex flex-row justify-end space-x-1">
+          <a-button v-if="app.parsedInput" size="small" type="primary" @click="showInstallPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
+              <IcRoundEdit class="pr-0.5" :height="12" />
+              Edit
+            </div>
+          </a-button>
+
+          <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
+              <MdiCloseCircleOutline />
+              <div class="flex ml-0.5">Reset</div>
+            </div>
+          </a-button>
+
+          <a-button v-else size="small" type="primary" @click="showInstallPluginModal(app)">
+            <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
+              <MdiPlus />
+              Install
+            </div>
+          </a-button>
         </div>
 
-        <div class="flex flex-col flex-1 w-3/5 pl-3">
-          <a-typography-title :level="5">{{ app.title }}</a-typography-title>
+        <div class="flex flex-row space-x-2 items-center justify-start w-full">
+          <div class="flex w-20 pl-3">
+            <img
+              v-if="app.title !== 'SMTP'"
+              class="avatar"
+              alt="logo"
+              :style="{
+                backgroundColor: app.title === 'SES' ? '#242f3e' : '',
+              }"
+              :src="app.logo"
+            />
+
+            <div v-else />
+          </div>
+
+          <div class="flex flex-col flex-1 w-3/5 pl-3">
+            <a-typography-title :level="5">{{ app.title }}</a-typography-title>
 
-          {{ app.description }}
+            {{ app.description }}
+          </div>
         </div>
-      </div>
-    </a-card>
+      </a-card>
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8f4d227157..af8395cb3b 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -2,69 +2,90 @@
 import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
 import CreateBase from './data-sources/CreateBase.vue'
+import Metadata from './Metadata.vue'
+import UIAcl from './UIAcl.vue'
+import Erd from './Erd.vue'
+import { DataSourcesSubTab } from '~/lib'
 import { useNuxtApp, useProject } from '#imports'
 
+interface Props {
+  state: string
+  reload: boolean
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:state', 'update:reload'])
+
+const vModel = useVModel(props, 'state', emits)
+const vReload = useVModel(props, 'reload', emits)
+
 const { $api } = useNuxtApp()
 const { project } = useProject()
 
-let isLoading = $ref(false)
 let sources = $ref<BaseType[]>([])
-const newSourceTab = $ref(false)
+let activeBaseId = $ref('')
+let metadiffbases = $ref<string[]>([])
 
 async function loadBases() {
   try {
     if (!project.value?.id) return
 
-    isLoading = true
+    vReload.value = true
     const baseList = await $api.base.list(project.value?.id)
     if (baseList.bases.list && baseList.bases.list.length) {
       sources = baseList.bases.list
     }
+    loadMetaDiff()
   } catch (e) {
     console.error(e)
   } finally {
-    isLoading = false
+    vReload.value = false
+  }
+}
+
+async function loadMetaDiff() {
+  try {
+    if (!project.value?.id) return
+
+    metadiffbases = []
+
+    const metadiff = await $api.project.metaDiffGet(project.value?.id)
+    for (const model of metadiff) {
+      if (model.detectedChanges?.length > 0) {
+        metadiffbases.push(model.base_id)
+      }
+    }
+  } catch (e) {
+    console.error(e)
   }
 }
 
+const baseAction = (baseId: string, action: string) => {
+  activeBaseId = baseId
+  vModel.value = action
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
   }
 })
+
+watch(
+  () => props.reload,
+  async (reload) => {
+    if (reload) {
+      await loadBases()
+    }
+  },
+)
 </script>
 
 <template>
   <div class="flex flex-row w-full">
     <div class="flex flex-col w-full">
-      <div class="flex flex-row justify-end items-center w-full mb-4">
-        <a-button class="self-start nc-btn-new-datasource" @click="newSourceTab = !newSourceTab">
-          <div v-if="newSourceTab" class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiClose class="text-lg group-hover:text-accent" />
-            Cancel
-          </div>
-          <div v-else class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
-            New
-          </div>
-        </a-button>
-        <!--        Reload -->
-        <a-button
-          v-if="!newSourceTab"
-          v-e="['a:proj-meta:meta-data:reload']"
-          class="self-start nc-btn-metasync-reload"
-          @click="loadBases"
-        >
-          <div class="flex items-center gap-2 text-gray-600 font-light">
-            <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-            {{ $t('general.reload') }}
-          </div>
-        </a-button>
-      </div>
-      <div v-if="newSourceTab" class="max-h-600px overflow-y-auto">
-        <CreateBase />
-      </div>
-      <div v-else class="max-h-600px overflow-y-auto">
+      <div v-if="props.state === ''" class="max-h-600px overflow-y-auto">
         <a-table
           class="w-full"
           size="small"
@@ -75,27 +96,68 @@ onMounted(async () => {
           "
           :data-source="sources ?? []"
           :pagination="false"
-          :loading="isLoading"
+          :loading="vReload"
           bordered
         >
           <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
-          <a-table-column key="type" title="Type" data-index="type" :width="180">
-            <template #default="{ text }">{{ text }}</template>
-          </a-table-column>
           <a-table-column key="alias" title="Name" data-index="alias">
-            <template #default="{ text, record }">{{ record.is_meta ? 'BASE' : text }}</template>
+            <template #default="{ text, record }">
+              {{ record.is_meta ? 'BASE' : text }} <span class="text-gray-400 text-xs">({{ record.type }})</span>
+            </template>
           </a-table-column>
           <a-table-column key="action" :title="$t('labels.actions')" :width="180">
             <template #default="{ record }">
               <div class="flex items-center gap-2">
-                <MdiEditOutline v-e="['c:base:edit:rename']" class="nc-action-btn" />
-
-                <MdiDeleteOutline class="nc-action-btn" />
+                <a-tooltip>
+                  <template #title>Sync Metadata {{ metadiffbases.includes(record.id) ? '(Out of sync)' : '' }}</template>
+                  <MdiDatabaseSync
+                    class="nc-action-btn cursor-pointer outline-0"
+                    :class="metadiffbases.includes(record.id) ? 'text-primary' : ''"
+                    @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
+                  />
+                </a-tooltip>
+                <a-tooltip>
+                  <template #title>UI ACL</template>
+                  <MdiDatabaseLockOutline
+                    class="nc-action-btn cursor-pointer outline-0"
+                    @click="baseAction(record.id, DataSourcesSubTab.UIAcl)"
+                  />
+                </a-tooltip>
+                <a-tooltip>
+                  <template #title>ERD</template>
+                  <MdiGraphOutline
+                    class="nc-action-btn cursor-pointer outline-0"
+                    @click="baseAction(record.id, DataSourcesSubTab.ERD)"
+                  />
+                </a-tooltip>
+                <a-tooltip>
+                  <template #title>Edit</template>
+                  <MdiEditOutline
+                    class="nc-action-btn cursor-pointer outline-0"
+                    @click="baseAction(record.id, DataSourcesSubTab.Edit)"
+                  />
+                </a-tooltip>
+                <a-tooltip>
+                  <template #title>Delete</template>
+                  <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" />
+                </a-tooltip>
               </div>
             </template>
           </a-table-column>
         </a-table>
       </div>
+      <div v-else-if="props.state === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
+        <CreateBase />
+      </div>
+      <div v-else-if="props.state === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
+        <Metadata :base-id="activeBaseId" />
+      </div>
+      <div v-else-if="props.state === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
+        <UIAcl :base-id="activeBaseId" />
+      </div>
+      <div v-else-if="props.state === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
+        <Erd :base-id="activeBaseId" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index e8ca1d8bd8..d89b7e8d1e 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,5 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  baseId: string
+}
+
+const props = defineProps<Props>()
+</script>
+
 <template>
   <div class="w-full h-full !p-0 h-70vh">
-    <ErdView />
+    <ErdView :base-id="props.baseId" />
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index e515eb9fb2..5d69142a4e 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
+interface Props {
+  baseId: string
+}
+
+const props = defineProps<Props>()
+
 const { $api } = useNuxtApp()
 
 const { project, loadTables } = useProject()
@@ -19,7 +25,7 @@ async function loadMetaDiff() {
 
     isLoading = true
     isDifferent = false
-    metadiff = await $api.project.metaDiffGet(project.value?.id)
+    metadiff = await $api.base.metaDiffGet(project.value?.id, props.baseId)
     for (const model of metadiff) {
       if (model.detectedChanges?.length > 0) {
         model.syncState = model.detectedChanges.map((el: any) => el?.msg).join(', ')
@@ -38,7 +44,7 @@ async function syncMetaDiff() {
     if (!project.value?.id || !isDifferent) return
 
     isLoading = true
-    await $api.project.metaDiffSync(project.value.id)
+    await $api.base.metaDiffSync(project.value.id, props.baseId)
     // Table metadata recreated successfully
     message.info(t('msg.info.metaDataRecreated'))
     await loadTables()
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index c0c9f0310c..7c6c30ce6d 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
+import AppStore from './AppStore.vue'
 import DataSources from './DataSources.vue'
-import { resolveComponent, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
+import Misc from './Misc.vue'
+import { useNuxtApp } from '#app'
+import { useI18n, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NotebookOutline from '~icons/mdi/notebook-outline'
+import FolderCog from '~icons/mdi/folder-cog'
+import { DataSourcesSubTab } from '~~/lib'
 
 interface Props {
   modelValue: boolean
   openKey?: string
+  dataSourcesState?: string
 }
 
 interface SubTabGroup {
@@ -41,6 +47,9 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
+const dataSourcesState = ref(props.dataSourcesState)
+const dataSourcesReload = ref(false)
+
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: t('title.teamAndAuth'),
@@ -69,60 +78,33 @@ const tabsInfo: TabGroup = {
       $e('c:settings:team-auth')
     },
   },
-  ...(isUIAllowed('appStore')
-    ? {
-        appStore: {
-          // App Store
-          title: t('title.appStore'),
-          icon: StoreFrontOutline,
-          subTabs: {
-            new: {
-              title: 'Apps',
-              body: resolveComponent('DashboardSettingsAppStore'),
-            },
-          },
-          onClick: () => {
-            $e('c:settings:appstore')
-          },
-        },
-      }
-    : {}),
-  projMetaData: {
-    // Project Metadata
-    title: t('title.projMeta'),
+  appStore: {
+    // App Store
+    title: t('title.appStore'),
+    icon: StoreFrontOutline,
+    subTabs: {
+      new: {
+        title: 'Apps',
+        body: AppStore,
+      },
+    },
+    onClick: () => {
+      $e('c:settings:appstore')
+    },
+  },
+  dataSources: {
+    // Data Sources
+    title: 'Data Sources',
     icon: MultipleTableIcon,
     subTabs: {
       dataSources: {
         title: 'Data Sources',
         body: DataSources,
       },
-      metaData: {
-        // Metadata
-        title: t('title.metadata'),
-        body: resolveComponent('DashboardSettingsMetadata'),
-      },
-      acl: {
-        // UI Access Control
-        title: t('title.uiACL'),
-        body: resolveComponent('DashboardSettingsUIAcl'),
-        onClick: () => {
-          $e('c:table:ui-acl')
-        },
-      },
-      erd: {
-        title: t('title.erdView'),
-        body: resolveComponent('DashboardSettingsErd'),
-        onClick: () => {
-          $e('c:settings:erd')
-        },
-      },
-      misc: {
-        title: t('general.misc'),
-        body: resolveComponent('DashboardSettingsMisc'),
-      },
     },
     onClick: () => {
-      $e('c:settings:proj-metadata')
+      dataSourcesState.value = ''
+      $e('c:settings:data-sources')
     },
   },
   audit: {
@@ -140,6 +122,21 @@ const tabsInfo: TabGroup = {
       $e('c:settings:audit')
     },
   },
+  projectSettings: {
+    // Project Settings
+    title: 'Project Settings',
+    icon: FolderCog,
+    subTabs: {
+      misc: {
+        // Misc
+        title: 'Misc',
+        body: Misc,
+      },
+    },
+    onClick: () => {
+      $e('c:settings:project-settings')
+    },
+  },
 }
 const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
 
@@ -163,6 +160,15 @@ watch(
     selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === nextOpenKey) || firstKeyOfObject(tabsInfo)]
   },
 )
+
+watch(
+  () => props.modelValue,
+  () => {
+    dataSourcesState.value = props.dataSourcesState || ''
+    selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === props.openKey) || firstKeyOfObject(tabsInfo)]
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -215,7 +221,12 @@ watch(
 
       <!-- Sub Tabs -->
       <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
-        <a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal">
+        <a-menu
+          v-if="selectedTabKeys[0] !== 'dataSources'"
+          v-model:selectedKeys="selectedSubTabKeys"
+          :open-keys="[]"
+          mode="horizontal"
+        >
           <a-menu-item
             v-for="(tab, key) of selectedTab.subTabs"
             :key="key"
@@ -225,8 +236,52 @@ watch(
             {{ tab.title }}
           </a-menu-item>
         </a-menu>
+        <div v-else>
+          <div class="flex items-center">
+            <a-breadcrumb class="w-full cursor-pointer">
+              <a-breadcrumb-item v-if="dataSourcesState !== ''" @click="dataSourcesState = ''">
+                <a class="!no-underline">Data Sources</a>
+              </a-breadcrumb-item>
+              <a-breadcrumb-item v-else @click="dataSourcesState = ''">Data Sources</a-breadcrumb-item>
+              <a-breadcrumb-item v-if="dataSourcesState !== ''">{{ dataSourcesState }}</a-breadcrumb-item>
+            </a-breadcrumb>
+            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full">
+              <a-button class="self-start nc-btn-new-datasource" @click="dataSourcesState = DataSourcesSubTab.New">
+                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-gray-600 font-light">
+                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+                  New
+                </div>
+              </a-button>
+              <!--        Reload -->
+              <a-button
+                v-e="['a:proj-meta:data-sources:reload']"
+                class="self-start nc-btn-metasync-reload"
+                @click="dataSourcesReload = true"
+              >
+                <div class="flex items-center gap-2 text-gray-600 font-light">
+                  <MdiReload :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
+                  {{ $t('general.reload') }}
+                </div>
+              </a-button>
+            </div>
+          </div>
+          <a-divider style="margin: 10px 0" />
+        </div>
 
-        <component :is="selectedSubTab?.body" class="px-2 py-6" :data-testid="`nc-settings-subtab-${selectedSubTab.title}`" />
+        <component
+          :is="selectedSubTab?.body"
+          v-if="selectedSubTabKeys[0] === 'dataSources'"
+          v-model:state="dataSourcesState"
+          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}`"
+        />
       </a-layout-content>
     </a-layout>
   </a-modal>
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 4b27998175..9ebc57b6d2 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -13,6 +13,12 @@ import {
   viewIcons,
 } from '#imports'
 
+interface Props {
+  baseId: string
+}
+
+const props = defineProps<Props>()
+
 const { t } = useI18n()
 
 const { $api, $e } = useNuxtApp()
@@ -32,8 +38,9 @@ const searchInput = $ref('')
 const filteredTables = computed(() =>
   tables.filter(
     (el) =>
-      (typeof el?._ptn === 'string' && el._ptn.toLowerCase().includes(searchInput.toLowerCase())) ||
-      (typeof el?.title === 'string' && el.title.toLowerCase().includes(searchInput.toLowerCase())),
+      el?.base_id === props.baseId &&
+      ((typeof el?._ptn === 'string' && el._ptn.toLowerCase().includes(searchInput.toLowerCase())) ||
+        (typeof el?.title === 'string' && el.title.toLowerCase().includes(searchInput.toLowerCase()))),
   ),
 )
 
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index f395295e2b..212f02e3cb 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -21,9 +21,10 @@ import {
 interface Props {
   modelValue?: boolean
   tableMeta: TableType
+  baseId: string
 }
 
-const { tableMeta, ...props } = defineProps<Props>()
+const { tableMeta, baseId, ...props } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue', 'updated'])
 
@@ -57,11 +58,11 @@ const validators = computed(() => {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
             let tableNameLengthLimit = 255
-            if (isMysql) {
+            if (isMysql(baseId)) {
               tableNameLengthLimit = 64
-            } else if (isPg) {
+            } else if (isPg(baseId)) {
               tableNameLengthLimit = 63
-            } else if (isMssql) {
+            } else if (isMssql(baseId)) {
               tableNameLengthLimit = 128
             }
             const projectPrefix = project?.value?.prefix || ''
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 16fff82885..6d5be40fdb 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
 import { reactive, ref, useMetas, useProject, watch } from '#imports'
 
-const { table } = defineProps<{ table?: TableType }>()
+const props = defineProps<{ table?: TableType; baseId?: string }>()
 
 const { tables: projectTables } = useProject()
 
@@ -18,7 +18,7 @@ const config = reactive<ERDConfig>({
   showPkAndFk: true,
   showViews: false,
   showAllColumns: true,
-  singleTableMode: !!table,
+  singleTableMode: !!props.table,
   showMMTables: false,
   showJunctionTableNames: false,
 })
@@ -34,14 +34,13 @@ const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
 }
 
 const populateTables = async () => {
-  let localTables: TableType[]
-
-  if (table) {
+  let localTables: TableType[] = []
+  if (props.table) {
     // if table is provided only get the table and its related tables
     localTables = projectTables.value.filter(
       (t) =>
-        t.id === table.id ||
-        table.columns?.find(
+        t.id === props.table.id ||
+        props.table.columns?.find(
           (column) =>
             column.uidt === UITypes.LinkToAnotherRecord &&
             (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
@@ -59,7 +58,7 @@ const populateTables = async () => {
         config.showMMTables ||
         (!config.showMMTables && !t.mm) ||
         // Show mm table if it's the selected table
-        t.id === table?.id,
+        t.id === props.table?.id,
     )
     .filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews)
 
@@ -76,6 +75,8 @@ watch(config, populateTables, {
   deep: true,
 })
 
+const filteredTables = computed(() => tables.value.filter((t) => !props.baseId || t.base_id === props.baseId))
+
 watch(
   () => config.showAllColumns,
   () => {
@@ -87,7 +88,7 @@ watch(
 <template>
   <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
     <div class="relative h-full">
-      <LazyErdFlow :tables="tables" :config="config">
+      <LazyErdFlow :tables="filteredTables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
           <div class="h-full w-full flex flex-col justify-center items-center">
             <a-spin size="large" />
diff --git a/packages/nc-gui/components/general/AddBaseButton.vue b/packages/nc-gui/components/general/AddBaseButton.vue
new file mode 100644
index 0000000000..567690180f
--- /dev/null
+++ b/packages/nc-gui/components/general/AddBaseButton.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useUIPermission } from '#imports'
+
+const { isUIAllowed } = useUIPermission()
+
+const toggleDialog = inject(ToggleDialogInj, () => {})
+</script>
+
+<template>
+  <div
+    class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)"
+    @click="toggleDialog(true, 'dataSources', 'New')"
+  >
+    <div v-if="isUIAllowed('newBase')">
+      <div class="flex items-center space-x-1">
+        <MdiDatabasePlusOutline class="mr-1 nc-new-base" />
+        <div>Data Sources</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index 7af7079e32..c352de39f7 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -49,14 +49,12 @@ const validators = {
   ],
 }
 
-const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, isPg } = useColumnCreateStoreOrThrow()
 
 setAdditionalValidations({
   ...validators,
 })
 
-const { isPg } = useProject()
-
 const currencyList = currencyCodes || []
 
 const currencyLocaleList = currencyLocales() || []
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index f0afb25e59..87e39e2458 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -10,7 +10,7 @@ const cellValue = inject(CellValueInj)
 
 const { isPg } = useProject()
 
-const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
+const result = computed(() => (isPg(column.value.base_id) ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index d31ac88e16..4a23f1e013 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -27,7 +27,7 @@ interface ValidationsObj {
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
-    const { sqlUis } = useProject()
+    const { sqlUis, isMysql: isMysqlFunc, isPg: isPgFunc, isMssql: isMssqlFunc } = useProject()
     const { $api } = useNuxtApp()
 
     const { getMeta } = useMetas()
@@ -40,6 +40,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const isEdit = computed(() => !!column?.value?.id)
 
+    const isMysql = computed(() => isMysqlFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
+
+    const isPg = computed(() => isPgFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
+
+    const isMssql = computed(() => isMssqlFunc(meta.value?.base_id ? meta.value?.base_id : Object.keys(sqlUis.value)[0]))
+
     const idType = null
 
     const additionalValidations = ref<ValidationsObj>({})
@@ -273,6 +279,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       isEdit,
       column,
       sqlUi,
+      isMssql,
+      isPg,
+      isMysql,
     }
   },
 )
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 18e3cfee4e..0230ab9607 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -68,19 +68,19 @@ const [setup, use] = useInjectionState(() => {
     return temp
   })
 
-  function getBaseType(baseId: string) {
+  function getBaseType(baseId?: string) {
     return bases.value.find((base) => base.id === baseId)?.type || ClientType.MYSQL
   }
 
-  function isMysql(baseId: string) {
+  function isMysql(baseId?: string) {
     return ['mysql', ClientType.MYSQL].includes(getBaseType(baseId))
   }
 
-  function isMssql(baseId: string) {
+  function isMssql(baseId?: string) {
     return getBaseType(baseId) === 'mssql'
   }
 
-  function isPg(baseId: string) {
+  function isPg(baseId?: string) {
     return getBaseType(baseId) === 'pg'
   }
 
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 5cbff053fa..83bd827ecd 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -31,3 +31,4 @@ export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injecti
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
 export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
+export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 163b0e66a1..776aadbcee 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -85,3 +85,12 @@ export enum SmartsheetStoreEvents {
   FIELD_RELOAD = 'field-reload',
   FIELD_ADD = 'field-add',
 }
+
+export enum DataSourcesSubTab {
+  New = 'New',
+  Metadata = 'Metadata',
+  ERD = 'ERD',
+  UIAcl = 'UI ACL',
+  Misc = 'Misc',
+  Edit = 'Edit',
+}
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 983090343d..e242c83108 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -61,6 +61,8 @@ const dialogOpen = ref(false)
 
 const openDialogKey = ref<string>()
 
+const dataSourcesState = ref<string>()
+
 const dropdownOpen = ref(false)
 
 /** Sidebar ref */
@@ -73,11 +75,14 @@ const logout = () => {
   navigateTo('/signin')
 }
 
-function toggleDialog(value?: boolean, key?: string) {
+function toggleDialog(value?: boolean, key?: string, dsState?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
+  dataSourcesState.value = dsState
 }
 
+provide(ToggleDialogInj, toggleDialog)
+
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color?: string) => {
   switch (mode) {
     case 'swatch': {
@@ -559,12 +564,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </div>
         </div>
 
-        <LazyDashboardTreeView />
+        <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
       </a-layout-sider>
     </template>
 
-    <div>
-      <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" />
+    <div :key="$route.fullPath.split('?')[0]">
+      <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" :data-sources-state="dataSourcesState" />
 
       <NuxtPage :page-key="$route.params.projectId" />
 
diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 25afaeab59..4a0d8f4d5a 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -42,6 +42,7 @@ const applyChangesPriorityOrder = [
 type MetaDiff = {
   title?: string;
   table_name: string;
+  base_id: string;
   type: ModelTypes;
   detectedChanges: Array<MetaDiffChange>;
 };
@@ -157,6 +158,7 @@ async function getMetaDiff(
     if (oldMetaIdx === -1) {
       changes.push({
         table_name: table.tn,
+        base_id: base.id,
         type: ModelTypes.TABLE,
         detectedChanges: [
           {
@@ -175,6 +177,7 @@ async function getMetaDiff(
     const tableProp: MetaDiff = {
       title: oldMeta.title,
       table_name: table.tn,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [],
     };
@@ -245,6 +248,7 @@ async function getMetaDiff(
   for (const model of oldTableMetas) {
     changes.push({
       table_name: model.table_name,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
         {
@@ -430,6 +434,7 @@ async function getMetaDiff(
     if (oldMetaIdx === -1) {
       changes.push({
         table_name: view.tn,
+        base_id: base.id,
         type: ModelTypes.VIEW,
         detectedChanges: [
           {
@@ -448,6 +453,7 @@ async function getMetaDiff(
     const tableProp: MetaDiff = {
       title: oldMeta.title,
       table_name: view.tn,
+      base_id: base.id,
       type: ModelTypes.VIEW,
       detectedChanges: [],
     };
@@ -514,6 +520,7 @@ async function getMetaDiff(
   for (const model of oldViewMetas) {
     changes.push({
       table_name: model.table_name,
+      base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
         {

From 98d0f7cdfbec30acb798b21c7c15f6f275305c33 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 28 Sep 2022 21:10:03 +0300
Subject: [PATCH 19/71] fix: missing icon

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8ab86f299c..c21c60e146 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -292,7 +292,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
 
             <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
-              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
+              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
 
               <template #overlay>
                 <a-menu class="!py-0 rounded text-sm">
@@ -399,7 +399,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                           :trigger="['click']"
                           @click.stop
                         >
-                          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+                          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
 
                           <template #overlay>
                             <a-menu class="!py-0 rounded text-sm">
@@ -451,7 +451,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         overlay-class-name="nc-dropdown-import-menu"
                         @click.stop
                       >
-                        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
+                        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
 
                         <template #overlay>
                           <a-menu class="!py-0 rounded text-sm">
@@ -561,7 +561,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                             :trigger="['click']"
                             @click.stop
                           >
-                            <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
+                            <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
 
                             <template #overlay>
                               <a-menu class="!py-0 rounded text-sm">

From 5d4a3ab271618e36a28cd7807e8c017e24e70623 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 1 Oct 2022 10:31:39 +0300
Subject: [PATCH 20/71] feat: edit base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        |   6 +-
 .../components/dashboard/settings/Erd.vue     |   6 +-
 .../dashboard/settings/Metadata.vue           |   6 +-
 .../components/dashboard/settings/Modal.vue   |   7 +
 .../components/dashboard/settings/UIAcl.vue   |   6 +-
 .../settings/data-sources/CreateBase.vue      |  11 +-
 .../settings/data-sources/EditBase.vue        | 609 ++++++++++++++++++
 packages/nocodb/src/lib/meta/api/baseApis.ts  |  28 +-
 packages/nocodb/src/lib/models/Base.ts        |  62 ++
 9 files changed, 720 insertions(+), 21 deletions(-)
 create mode 100644 packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index af8395cb3b..36ac7185dd 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -2,6 +2,7 @@
 import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
 import CreateBase from './data-sources/CreateBase.vue'
+import EditBase from './data-sources/EditBase.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Erd from './Erd.vue'
@@ -147,7 +148,7 @@ watch(
         </a-table>
       </div>
       <div v-else-if="props.state === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
-        <CreateBase />
+        <CreateBase @base-created="loadBases" />
       </div>
       <div v-else-if="props.state === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
         <Metadata :base-id="activeBaseId" />
@@ -158,6 +159,9 @@ watch(
       <div v-else-if="props.state === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
         <Erd :base-id="activeBaseId" />
       </div>
+      <div v-else-if="props.state === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">
+        <EditBase :base-id="activeBaseId" @base-updated="loadBases" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index d89b7e8d1e..73025e8eef 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-interface Props {
+const props = defineProps<{
   baseId: string
-}
-
-const props = defineProps<Props>()
+}>()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 5d69142a4e..092d0c02b9 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { Empty, extractSdkResponseErrorMsg, h, message, useI18n, useNuxtApp, useProject } from '#imports'
 
-interface Props {
+const props = defineProps<{
   baseId: string
-}
-
-const props = defineProps<Props>()
+}>()
 
 const { $api } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 7c6c30ce6d..1f37f5397f 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -161,6 +161,13 @@ watch(
   },
 )
 
+watch(
+  () => props.dataSourcesState,
+  (nextState) => {
+    dataSourcesState.value = nextState || ''
+  },
+)
+
 watch(
   () => props.modelValue,
   () => {
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 9ebc57b6d2..3aafc67104 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -13,11 +13,9 @@ import {
   viewIcons,
 } from '#imports'
 
-interface Props {
+const props = defineProps<{
   baseId: string
-}
-
-const props = defineProps<Props>()
+}>()
 
 const { t } = useI18n()
 
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 5cbf911edb..f1a8ba4a29 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -25,6 +25,8 @@ import { ClientType } from '~/lib'
 import { DefaultConnection, SQLiteConnection } from '~/utils'
 import type { ProjectCreateForm } from '~/utils'
 
+const emit = defineEmits(['baseCreated'])
+
 const { project, loadProject } = useProject()
 
 const useForm = Form.useForm
@@ -39,6 +41,8 @@ const { $e } = useNuxtApp()
 
 const { t } = useI18n()
 
+const toggleDialog = inject(ToggleDialogInj, () => {})
+
 let formState = $ref<ProjectCreateForm>({
   title: '',
   dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
@@ -217,6 +221,9 @@ const createBase = async () => {
     $e('a:base:create:extdb')
 
     await loadProject()
+    emit('baseCreated')
+    message.success('Base created!')
+    toggleDialog(true, 'dataSources', '')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -313,8 +320,8 @@ watch(
 )
 
 // select and focus title field on load
-onMounted(() => {
-  formState.title = generateUniqueName()
+onMounted(async () => {
+  formState.title = await generateUniqueName()
   nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
diff --git a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
new file mode 100644
index 0000000000..140753a625
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -0,0 +1,609 @@
+<script lang="ts" setup>
+import type { BaseType } from 'nocodb-sdk'
+import { Form, Modal, message } from 'ant-design-vue'
+import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import {
+  CertTypes,
+  SSLUsage,
+  clientTypes,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  getDefaultConnectionConfig,
+  getTestDatabaseName,
+  onMounted,
+  projectTitleValidator,
+  readFile,
+  ref,
+  useApi,
+  useI18n,
+  useNuxtApp,
+  watch,
+} from '#imports'
+import { ClientType } from '~/lib'
+import { DefaultConnection, SQLiteConnection } from '~/utils'
+import type { ProjectCreateForm } from '~/utils'
+
+const props = defineProps<{
+  baseId: string
+}>()
+
+const emit = defineEmits(['baseUpdated'])
+
+const { project, loadProject } = useProject()
+
+const useForm = Form.useForm
+
+const testSuccess = ref(false)
+
+const form = ref<typeof Form>()
+
+const { api } = useApi()
+
+const { $e } = useNuxtApp()
+
+const { t } = useI18n()
+
+const toggleDialog = inject(ToggleDialogInj, () => {})
+
+const formState = ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const customFormState = ref<ProjectCreateForm>({
+  title: '',
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
+  inflection: {
+    inflectionColumn: 'camelize',
+    inflectionTable: 'camelize',
+  },
+  sslUse: SSLUsage.No,
+  extraParameters: [],
+})
+
+const validators = computed(() => {
+  return {
+    'title': [
+      {
+        required: true,
+        message: 'Base name is required',
+      },
+      projectTitleValidator,
+    ],
+    'extraParameters': [extraParameterValidator],
+    'dataSource.client': [fieldRequiredValidator()],
+    ...(formState.value.dataSource.client === ClientType.SQLITE
+      ? {
+          'dataSource.connection.connection.filename': [fieldRequiredValidator()],
+        }
+      : {
+          'dataSource.connection.host': [fieldRequiredValidator()],
+          'dataSource.connection.port': [fieldRequiredValidator()],
+          'dataSource.connection.user': [fieldRequiredValidator()],
+          'dataSource.connection.password': [fieldRequiredValidator()],
+          'dataSource.connection.database': [fieldRequiredValidator()],
+          ...([ClientType.PG, ClientType.MSSQL].includes(formState.value.dataSource.client)
+            ? {
+                'dataSource.searchPath.0': [fieldRequiredValidator()],
+              }
+            : {}),
+        }),
+  }
+})
+
+const { validate, validateInfos } = useForm(formState, validators)
+
+const onClientChange = () => {
+  formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) }
+}
+
+const onSSLModeChange = ((mode: SSLUsage) => {
+  if (formState.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.dataSource.connection as DefaultConnection
+    switch (mode) {
+      case SSLUsage.No:
+        delete connection.ssl
+        break
+      case SSLUsage.Allowed:
+        connection.ssl = 'true'
+        break
+      default:
+        connection.ssl = {
+          ca: '',
+          cert: '',
+          key: '',
+        }
+        break
+    }
+  }
+}) as SelectHandler
+
+const updateSSLUse = () => {
+  if (formState.value.dataSource.client !== ClientType.SQLITE) {
+    const connection = formState.value.dataSource.connection as DefaultConnection
+    if (connection.ssl) {
+      if (typeof connection.ssl === 'string') {
+        formState.value.sslUse = SSLUsage.Allowed
+      } else {
+        formState.value.sslUse = SSLUsage.Preferred
+      }
+    } else {
+      formState.value.sslUse = SSLUsage.No
+    }
+  }
+}
+
+const addNewParam = () => {
+  formState.value.extraParameters.push({ key: '', value: '' })
+}
+
+const removeParam = (index: number) => {
+  formState.value.extraParameters.splice(index, 1)
+}
+
+const inflectionTypes = ['camelize', 'none']
+const importURL = ref('')
+const configEditDlg = ref(false)
+const importURLDlg = ref(false)
+
+const caFileInput = ref<HTMLInputElement>()
+const keyFileInput = ref<HTMLInputElement>()
+const certFileInput = ref<HTMLInputElement>()
+
+const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
+  if (!el) return
+
+  readFile(el, (content) => {
+    if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object')
+      formState.value.dataSource.connection.ssl[key] = content ?? ''
+  })
+}
+
+const sslFilesRequired = computed(
+  () => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed,
+)
+
+function getConnectionConfig() {
+  const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value])))
+
+  const connection = {
+    ...formState.value.dataSource.connection,
+    ...extraParameters,
+  }
+
+  if ('ssl' in connection && connection.ssl) {
+    if (
+      formState.value.sslUse === SSLUsage.No ||
+      (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined))
+    ) {
+      delete connection.ssl
+    }
+  }
+  return connection
+}
+
+const focusInvalidInput = () => {
+  form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
+}
+
+const editBase = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  try {
+    if (!project.value?.id) return
+
+    const connection = getConnectionConfig()
+
+    const config = { ...formState.value.dataSource, connection }
+
+    await api.base.update(project.value?.id, props.baseId, {
+      alias: formState.value.title,
+      type: formState.value.dataSource.client,
+      config,
+      inflection_column: formState.value.inflection.inflectionColumn,
+      inflection_table: formState.value.inflection.inflectionTable,
+    })
+
+    $e('a:base:edit:extdb')
+
+    await loadProject()
+    emit('baseUpdated')
+    message.success('Base updated!')
+    toggleDialog(true, 'dataSources', '')
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const testConnection = async () => {
+  try {
+    await validate()
+  } catch (e) {
+    focusInvalidInput()
+    return
+  }
+
+  $e('a:base:edit:extdb:test-connection', [])
+
+  try {
+    if (formState.value.dataSource.client === ClientType.SQLITE) {
+      testSuccess.value = true
+    } else {
+      const connection = getConnectionConfig()
+
+      connection.database = getTestDatabaseName(formState.value.dataSource)!
+
+      const testConnectionConfig = {
+        ...formState.value.dataSource,
+        connection,
+      }
+
+      const result = await api.utils.testConnection(testConnectionConfig)
+
+      if (result.code === 0) {
+        testSuccess.value = true
+
+        Modal.confirm({
+          title: t('msg.info.dbConnected'),
+          icon: null,
+          type: 'success',
+
+          okText: 'Ok & Edit Base',
+          okType: 'primary',
+          cancelText: t('general.cancel'),
+          onOk: editBase,
+        })
+      } else {
+        testSuccess.value = false
+
+        message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
+      }
+    }
+  } catch (e: any) {
+    testSuccess.value = false
+
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const handleImportURL = async () => {
+  if (!importURL.value || importURL.value === '') return
+
+  const connectionConfig = await api.utils.urlToConfig({ url: importURL.value })
+
+  if (connectionConfig) {
+    formState.value.dataSource.client = connectionConfig.client
+    formState.value.dataSource.connection = { ...connectionConfig.connection }
+  } else {
+    message.error(t('msg.error.invalidURL'))
+  }
+  importURLDlg.value = false
+  updateSSLUse()
+}
+
+const handleEditJSON = () => {
+  customFormState.value = formState.value
+  configEditDlg.value = true
+}
+
+const handleOk = () => {
+  formState.value = customFormState.value
+  configEditDlg.value = false
+  updateSSLUse()
+}
+
+// reset test status on config change
+watch(
+  () => formState.value.dataSource,
+  () => (testSuccess.value = false),
+  { deep: true },
+)
+
+// load base config
+onMounted(async () => {
+  if (project.value?.id) {
+    const definedParameters = ['host', 'port', 'user', 'password', 'database']
+
+    const activeBase = (await api.base.read(project.value?.id, props.baseId)) as BaseType
+
+    const tempParameters = Object.entries(activeBase.config.connection)
+      .filter(([key]) => !definedParameters.includes(key))
+      .map(([key, value]) => ({ key: key as string, value: value as string }))
+
+    formState.value = {
+      title: activeBase.alias || '',
+      dataSource: activeBase.config,
+      inflection: {
+        inflectionColumn: activeBase.inflection_column,
+        inflectionTable: activeBase.inflection_table,
+      },
+      extraParameters: tempParameters,
+      sslUse: SSLUsage.No,
+    }
+    updateSSLUse()
+  }
+})
+</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)"
+  >
+    <h1 class="prose-2xl font-bold self-center my-4">Edit Base</h1>
+
+    <a-form
+      ref="form"
+      :model="formState"
+      name="external-project-create-form"
+      layout="horizontal"
+      no-style
+      :label-col="{ span: 8 }"
+    >
+      <a-form-item label="Base Name" v-bind="validateInfos.title">
+        <a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
+      </a-form-item>
+
+      <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
+        <a-select
+          v-model:value="formState.dataSource.client"
+          class="nc-extdb-db-type"
+          dropdown-class-name="nc-dropdown-ext-db-type"
+          @change="onClientChange"
+        >
+          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
+            >{{ client.text }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <!-- SQLite File -->
+      <a-form-item
+        v-if="formState.dataSource.client === ClientType.SQLITE"
+        :label="$t('labels.sqliteFile')"
+        v-bind="validateInfos['dataSource.connection.connection.filename']"
+      >
+        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
+      </a-form-item>
+
+      <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-form-item>
+
+        <!-- Port Number -->
+        <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
+          <a-input-number
+            v-model:value="(formState.dataSource.connection as DefaultConnection).port"
+            class="!w-full nc-extdb-host-port"
+          />
+        </a-form-item>
+
+        <!-- Username -->
+        <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
+          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
+        </a-form-item>
+
+        <!-- Password -->
+        <a-form-item :label="$t('labels.password')">
+          <a-input-password
+            v-model:value="(formState.dataSource.connection as DefaultConnection).password"
+            class="nc-extdb-host-password"
+          />
+        </a-form-item>
+
+        <!-- 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>
+
+        <!-- Schema name -->
+        <a-form-item
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath"
+          :label="$t('labels.schemaName')"
+          v-bind="validateInfos['dataSource.searchPath.0']"
+        >
+          <a-input v-model:value="formState.dataSource.searchPath[0]" />
+        </a-form-item>
+
+        <a-collapse ghost expand-icon-position="right" class="!mt-6">
+          <a-collapse-panel key="1">
+            <template #header>
+              <div class="flex items-center gap-2">
+                <!--                Use Connection URL -->
+                <a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true">
+                  {{ $t('activity.useConnectionUrl') }}
+                </a-button>
+                <span>{{ $t('title.advancedParameters') }}</span>
+              </div>
+            </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-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item label="SSL keys">
+              <div class="flex gap-2">
+                <a-tooltip placement="top">
+                  <!-- Select .cert file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCert') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
+                    {{ $t('labels.clientCert') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select .key file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientKey') }}</span>
+                  </template>
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
+                    {{ $t('labels.clientKey') }}
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip placement="top">
+                  <!-- Select CA file -->
+                  <template #title>
+                    <span>{{ $t('tooltip.clientCA') }}</span>
+                  </template>
+
+                  <a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
+                    {{ $t('labels.serverCA') }}
+                  </a-button>
+                </a-tooltip>
+              </div>
+            </a-form-item>
+
+            <input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
+
+            <input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
+
+            <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
+
+            <a-divider />
+
+            <!--            Extra connection parameters -->
+            <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">
+                    <a-input v-model:value="item.key" />
+
+                    <span>:</span>
+
+                    <a-input v-model:value="item.value" />
+
+                    <MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
+                  </div>
+                </div>
+                <a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
+                  <div class="flex items-center justify-center"><MdiPlus /></div>
+                </a-button>
+              </a-card>
+            </a-form-item>
+
+            <a-divider />
+
+            <a-form-item :label="$t('labels.inflection.tableName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionTable"
+                dropdown-class-name="nc-dropdown-inflection-table-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item :label="$t('labels.inflection.columnName')">
+              <a-select
+                v-model:value="formState.inflection.inflectionColumn"
+                dropdown-class-name="nc-dropdown-inflection-column-name"
+              >
+                <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <div class="flex justify-end">
+              <a-button class="!shadow-md" @click="handleEditJSON()">
+                <!-- Edit connection JSON -->
+                {{ $t('activity.editConnJson') }}
+              </a-button>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
+      </template>
+
+      <a-form-item class="flex justify-center !mt-5">
+        <div class="flex justify-center gap-2">
+          <a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection">
+            {{ $t('activity.testDbConn') }}
+          </a-button>
+
+          <a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="editBase">
+            {{ $t('general.submit') }}
+          </a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+
+    <a-modal
+      v-model:visible="configEditDlg"
+      :title="$t('activity.editConnJson')"
+      width="600px"
+      wrap-class-name="nc-modal-edit-connection-json"
+      @ok="handleOk"
+    >
+      <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
+    </a-modal>
+
+    <!--    Use Connection URL -->
+    <a-modal
+      v-model:visible="importURLDlg"
+      :title="$t('activity.useConnectionUrl')"
+      width="600px"
+      :ok-text="$t('general.ok')"
+      :cancel-text="$t('general.cancel')"
+      wrap-class-name="nc-modal-connection-url"
+      @ok="handleImportURL"
+    >
+      <a-input v-model:value="importURL" />
+    </a-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-collapse-header) {
+  @apply !pr-10 !-mt-4 text-right justify-end;
+}
+
+:deep(.ant-collapse-content-box) {
+  @apply !px-0;
+}
+
+:deep(.ant-form-item-explain-error) {
+  @apply !text-xs;
+}
+
+:deep(.ant-form-item) {
+  @apply mb-2;
+}
+
+:deep(.ant-form-item-with-help .ant-form-item-explain) {
+  @apply !min-h-0;
+}
+
+.create-external {
+  :deep(.ant-input-affix-wrapper),
+  :deep(.ant-input),
+  :deep(.ant-select) {
+    @apply !appearance-none border-1 border-solid rounded;
+  }
+
+  :deep(.ant-input-password) {
+    input {
+      @apply !border-none my-0;
+    }
+  }
+}
+</style>
diff --git a/packages/nocodb/src/lib/meta/api/baseApis.ts b/packages/nocodb/src/lib/meta/api/baseApis.ts
index b21985a000..3dce021dc8 100644
--- a/packages/nocodb/src/lib/meta/api/baseApis.ts
+++ b/packages/nocodb/src/lib/meta/api/baseApis.ts
@@ -1,6 +1,6 @@
 import { Request, Response } from 'express';
 import Project from '../../models/Project';
-import { BaseListType, ModelTypes, ProjectListType, UITypes } from 'nocodb-sdk';
+import { BaseListType, ModelTypes, UITypes } from 'nocodb-sdk';
 import { PagedResponseImpl } from '../helpers/PagedResponse';
 import { syncBaseMigration } from '../helpers/syncMigration';
 import { IGNORE_TABLES } from '../../utils/common/BaseApiBuilder';
@@ -13,7 +13,6 @@ import getTableNameAlias, { getColumnNameAlias } from '../helpers/getTableName';
 import LinkToAnotherRecordColumn from '../../models/LinkToAnotherRecordColumn';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
-import { NcError } from '../helpers/catchError';
 import getColumnUiType from '../helpers/getColumnUiType';
 import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
 import { extractAndGenerateManyToManyRelations } from './metaDiffApis';
@@ -25,16 +24,33 @@ export async function baseGet(
 ) {
   const base = await Base.get(req.params.baseId);
 
-  delete base.config;
+  base.config = base.getConnectionConfig();
 
   res.json(base);
 }
 
 export async function baseUpdate(
-  _req: Request<any, any, any>,
-  _res: Response<ProjectListType>
+  req: Request<any, any, any>,
+  res: Response<any>
 ) {
-  NcError.badRequest('Base update not yet supported');
+  const baseBody = req.body;
+  const project = await Project.getWithInfo(req.params.projectId);
+  const base = await Base.updateBase(req.params.baseId,
+    {
+      ...baseBody,
+      type: baseBody.config?.client,
+      projectId: project.id,
+      id: req.params.baseId,
+    }
+  );
+
+  delete base.config;
+
+  Tele.emit('evt', {
+    evt_type: 'base:updated'
+  });
+
+  res.json(base);
 }
 
 export async function baseList(
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index bf0e77e2e7..9009d790ea 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -11,6 +11,7 @@ import { BaseType } from 'nocodb-sdk';
 import NocoCache from '../cache/NocoCache';
 import CryptoJS from 'crypto-js';
 import { extractProps } from '../meta/helpers/extractProps';
+import { NcError } from '../meta/helpers/catchError';
 
 // todo: hide credentials
 export default class Base implements BaseType {
@@ -64,6 +65,67 @@ export default class Base implements BaseType {
     return this.get(id, ncMeta);
   }
 
+  public static async updateBase(
+    baseId: string,
+    base: BaseType & { id: string; projectId: string; created_at?; updated_at? },
+    ncMeta = Noco.ncMeta
+  ) {
+    const oldBase = await Base.get(baseId, ncMeta);
+
+    if (!oldBase) NcError.badRequest('Wrong base id!');
+
+    await ncMeta.metaDelete(null, null, MetaTable.BASES, {
+      id: baseId,
+    });
+
+    await NocoCache.deepDel(
+      CacheScope.BASE,
+      `${CacheScope.BASE}:${baseId}`,
+      CacheDelDirection.PARENT_TO_CHILD
+    );
+
+    const insertObj = extractProps(base, [
+      'id',
+      'alias',
+      'config',
+      'type',
+      'is_meta',
+      'created_at',
+      'updated_at',
+      'inflection_column',
+      'inflection_table',
+    ]);
+    insertObj.config = CryptoJS.AES.encrypt(
+      JSON.stringify(base.config),
+      Noco.getConfig()?.auth?.jwt?.secret
+    ).toString();
+
+    const { id } = await ncMeta.metaInsert2(
+      base.projectId,
+      null,
+      MetaTable.BASES,
+      insertObj
+    );
+    await NocoCache.appendToList(
+      CacheScope.BASE,
+      [base.projectId],
+      `${CacheScope.BASE}:${id}`
+    );
+
+    return this.get(id, ncMeta);
+  }
+
+  /*
+  await ncMeta.metaDelete(null, null, MetaTable.COL_LOOKUP, {
+          fk_column_id: colId,
+        });
+        await NocoCache.deepDel(
+          CacheScope.COL_LOOKUP,
+          `${CacheScope.COL_LOOKUP}:${colId}`,
+          CacheDelDirection.CHILD_TO_PARENT
+        );
+  */
+
   static async list(
     args: { projectId: string },
     ncMeta = Noco.ncMeta

From e3a89ffec96d3cee1cc41372d592f1c5b4b8ad28 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 1 Oct 2022 10:34:47 +0300
Subject: [PATCH 21/71] fix: disable base edit/delete if meta base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/settings/DataSources.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 36ac7185dd..128c502cf0 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -131,14 +131,14 @@ watch(
                     @click="baseAction(record.id, DataSourcesSubTab.ERD)"
                   />
                 </a-tooltip>
-                <a-tooltip>
+                <a-tooltip v-if="!record.is_meta">
                   <template #title>Edit</template>
                   <MdiEditOutline
                     class="nc-action-btn cursor-pointer outline-0"
                     @click="baseAction(record.id, DataSourcesSubTab.Edit)"
                   />
                 </a-tooltip>
-                <a-tooltip>
+                <a-tooltip v-if="!record.is_meta">
                   <template #title>Delete</template>
                   <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" />
                 </a-tooltip>

From 0e96388d548f3253af798618415bb2b4d7fdd8c0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 2 Oct 2022 20:58:24 +0300
Subject: [PATCH 22/71] fix: base type checks

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/column/CurrencyOptions.vue   | 2 +-
 .../nc-gui/components/smartsheet/column/SelectOptions.vue     | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index c352de39f7..07a7d606f3 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -62,7 +62,7 @@ const currencyLocaleList = currencyLocales() || []
 const isMoney = computed(() => vModel.value.dt === 'money')
 
 const message = computed(() => {
-  if (isMoney.value && isPg) return "PostgreSQL 'money' type has own currency settings"
+  if (isMoney.value && isPg.value) return "PostgreSQL 'money' type has own currency settings"
   return ''
 })
 
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index 8ddefd56a2..c7169640dc 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -11,9 +11,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { isPg, isMysql } = useProject()
-
-const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, isPg, isMysql } = useColumnCreateStoreOrThrow()
 
 let options = $ref<any[]>([])
 

From eff5e3f19440e909f8626f6d1e6fcf3f093bfa4a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 2 Oct 2022 21:10:32 +0300
Subject: [PATCH 23/71] feat: delete base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 128c502cf0..924dc5f2be 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -21,8 +21,8 @@ const emits = defineEmits(['update:state', 'update:reload'])
 const vModel = useVModel(props, 'state', emits)
 const vReload = useVModel(props, 'reload', emits)
 
-const { $api } = useNuxtApp()
-const { project } = useProject()
+const { $api, $e } = useNuxtApp()
+const { project, loadProject } = useProject()
 
 let sources = $ref<BaseType[]>([])
 let activeBaseId = $ref('')
@@ -67,6 +67,30 @@ const baseAction = (baseId: string, action: string) => {
   vModel.value = action
 }
 
+const deleteBase = (base: BaseType) => {
+  $e('c:base:delete')
+
+  Modal.confirm({
+    title: `Do you want to delete '${base.alias}' project?`,
+    wrapClassName: 'nc-modal-base-delete',
+    okText: 'Yes',
+    okType: 'danger',
+    cancelText: 'No',
+    async onOk() {
+      try {
+        await $api.base.delete(base.project_id as string, base.id as string)
+
+        $e('a:base:delete')
+
+        sources.splice(sources.indexOf(base), 1)
+        await loadProject()
+      } catch (e: any) {
+        message.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+  })
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
@@ -140,7 +164,7 @@ watch(
                 </a-tooltip>
                 <a-tooltip v-if="!record.is_meta">
                   <template #title>Delete</template>
-                  <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" />
+                  <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)" />
                 </a-tooltip>
               </div>
             </template>

From 6f9dac3060fd1785d08759184487872d9461cceb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 3 Oct 2022 11:13:45 +0300
Subject: [PATCH 24/71] feat: multiple base handle import & sync

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 37 ++++++++------
 .../nc-gui/components/dlg/AirtableImport.vue  |  7 +--
 .../nc-gui/components/dlg/QuickImport.vue     |  2 +
 .../nc-gui/components/template/Editor.vue     | 15 +++---
 packages/nocodb-sdk/src/lib/Api.ts            | 26 ++++++++++
 .../src/lib/meta/api/sync/helpers/job.ts      | 15 +++---
 .../src/lib/meta/api/sync/importApis.ts       |  1 +
 .../src/lib/meta/api/sync/syncSourceApis.ts   | 14 +++++-
 packages/nocodb/src/lib/meta/api/tableApis.ts |  7 +++
 .../src/lib/migrations/XcMigrationSourcev2.ts |  4 ++
 .../v2/nc_023_add_base_id_in_sync_source.ts   | 39 +++++++++++++++
 packages/nocodb/src/lib/models/SyncSource.ts  | 10 ++--
 scripts/sdk/swagger.json                      | 49 +++++++++++++++++++
 13 files changed, 191 insertions(+), 35 deletions(-)
 create mode 100644 packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index c21c60e146..7e29aad957 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -145,7 +145,7 @@ const addTableTab = (table: TableType) => {
   addTab({ title: table.title, id: table.id, type: table.type as TabType })
 }
 
-function openRenameTableDialog(table: TableType, baseId: string, rightClick = false) {
+function openRenameTableDialog(table: TableType, baseId?: string, rightClick = false) {
   $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
 
   const isOpen = ref(true)
@@ -153,7 +153,7 @@ function openRenameTableDialog(table: TableType, baseId: string, rightClick = fa
   const { close } = useDialog(resolveComponent('DlgTableRename'), {
     'modelValue': isOpen,
     'tableMeta': table,
-    'baseId': baseId,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -164,7 +164,7 @@ function openRenameTableDialog(table: TableType, baseId: string, rightClick = fa
   }
 }
 
-function openQuickImportDialog(type: string) {
+function openQuickImportDialog(type: string, baseId?: string) {
   $e(`a:actions:import-${type}`)
 
   const isOpen = ref(true)
@@ -172,6 +172,7 @@ function openQuickImportDialog(type: string) {
   const { close } = useDialog(resolveComponent('DlgQuickImport'), {
     'modelValue': isOpen,
     'importType': type,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -182,13 +183,14 @@ function openQuickImportDialog(type: string) {
   }
 }
 
-function openAirtableImportDialog() {
+function openAirtableImportDialog(baseId?: string) {
   $e('a:actions:import-airtable')
 
   const isOpen = ref(true)
 
   const { close } = useDialog(resolveComponent('DlgAirtableImport'), {
     'modelValue': isOpen,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
   })
 
@@ -200,15 +202,14 @@ function openAirtableImportDialog() {
 }
 
 function openTableCreateDialog(baseId?: string) {
-  if (!baseId) return
   $e('c:table:create:navdraw')
 
   const isOpen = ref(true)
 
   const { close } = useDialog(resolveComponent('DlgTableCreate'), {
     'modelValue': isOpen,
+    'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
-    'baseId': baseId,
   })
 
   function closeDialog() {
@@ -301,7 +302,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-menu-item
                       v-if="isUIAllowed('airtableImport')"
                       key="quick-import-airtable"
-                      @click="openAirtableImportDialog"
+                      @click="openAirtableImportDialog(bases[0].id)"
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiTableLarge class="group-hover:text-accent" />
@@ -309,14 +310,22 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       </div>
                     </a-menu-item>
 
-                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+                    <a-menu-item
+                      v-if="isUIAllowed('csvImport')"
+                      key="quick-import-csv"
+                      @click="openQuickImportDialog('csv', bases[0].id)"
+                    >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiFileDocumentOutline class="group-hover:text-accent" />
                         CSV file
                       </div>
                     </a-menu-item>
 
-                    <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
+                    <a-menu-item
+                      v-if="isUIAllowed('jsonImport')"
+                      key="quick-import-json"
+                      @click="openQuickImportDialog('json', bases[0].id)"
+                    >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiCodeJson class="group-hover:text-accent" />
                         JSON file
@@ -326,7 +335,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-menu-item
                       v-if="isUIAllowed('excelImport')"
                       key="quick-import-excel"
-                      @click="openQuickImportDialog('excel')"
+                      @click="openQuickImportDialog('excel', bases[0].id)"
                     >
                       <div class="color-transition nc-project-menu-item group">
                         <MdiFileExcel class="group-hover:text-accent" />
@@ -460,7 +469,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                               <a-menu-item
                                 v-if="isUIAllowed('airtableImport')"
                                 key="quick-import-airtable"
-                                @click="openAirtableImportDialog"
+                                @click="openAirtableImportDialog(base.id)"
                               >
                                 <div class="color-transition nc-project-menu-item group">
                                   <MdiTableLarge class="group-hover:text-accent" />
@@ -471,7 +480,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                               <a-menu-item
                                 v-if="isUIAllowed('csvImport')"
                                 key="quick-import-csv"
-                                @click="openQuickImportDialog('csv')"
+                                @click="openQuickImportDialog('csv', base.id)"
                               >
                                 <div class="color-transition nc-project-menu-item group">
                                   <MdiFileDocumentOutline class="group-hover:text-accent" />
@@ -482,7 +491,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                               <a-menu-item
                                 v-if="isUIAllowed('jsonImport')"
                                 key="quick-import-json"
-                                @click="openQuickImportDialog('json')"
+                                @click="openQuickImportDialog('json', base.id)"
                               >
                                 <div class="color-transition nc-project-menu-item group">
                                   <MdiCodeJson class="group-hover:text-accent" />
@@ -493,7 +502,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                               <a-menu-item
                                 v-if="isUIAllowed('excelImport')"
                                 key="quick-import-excel"
-                                @click="openQuickImportDialog('excel')"
+                                @click="openQuickImportDialog('excel', base.id)"
                               >
                                 <div class="color-transition nc-project-menu-item group">
                                   <MdiFileExcel class="group-hover:text-accent" />
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index a91f37d1ce..12cd859e98 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -18,8 +18,9 @@ import {
   watch,
 } from '#imports'
 
-const { modelValue } = defineProps<{
+const { modelValue, baseId } = defineProps<{
   modelValue: boolean
+  baseId: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -100,7 +101,7 @@ async function createOrUpdate() {
         body: payload,
       })
     } else {
-      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
+      syncSource.value = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs/${baseId}`, {
         baseURL,
         method: 'POST',
         headers: { 'xc-auth': $state.token.value as string },
@@ -113,7 +114,7 @@ async function createOrUpdate() {
 }
 
 async function loadSyncSrc() {
-  const data: any = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs`, {
+  const data: any = await $fetch(`/api/v1/db/meta/projects/${project.value.id}/syncs/${baseId}`, {
     baseURL,
     method: 'GET',
     headers: { 'xc-auth': $state.token.value as string },
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index fd8bdd188b..8f3f1bad79 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -27,6 +27,7 @@ import type { importFileList, streamImportFileList } from '~/lib'
 interface Props {
   modelValue: boolean
   importType: 'csv' | 'json' | 'excel'
+  baseId: string
   importDataOnly?: boolean
 }
 
@@ -364,6 +365,7 @@ const beforeUpload = (file: UploadFile) => {
             :import-data-only="importDataOnly"
             :quick-import-type="importType"
             :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+            :base-id="baseId"
             class="nc-quick-import-template-editor"
             @import="handleImport"
           />
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 24fb40b834..2d35badca5 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -30,7 +30,8 @@ import {
 } from '#imports'
 import { TabType } from '~/lib'
 
-const { quickImportType, projectTemplate, importData, importColumns, importDataOnly, maxRowsToParse } = defineProps<Props>()
+const { quickImportType, projectTemplate, importData, importColumns, importDataOnly, maxRowsToParse, baseId } =
+  defineProps<Props>()
 
 const emit = defineEmits(['import'])
 
@@ -45,6 +46,7 @@ interface Props {
   importColumns: any[]
   importDataOnly: boolean
   maxRowsToParse: number
+  baseId: string
 }
 
 interface Option {
@@ -397,7 +399,7 @@ async function importTemplate() {
     try {
       isImporting.value = true
 
-      const tableName = meta.value?.title
+      const tableId = meta.value?.id
       const projectName = project.value.title!
 
       await Promise.all(
@@ -436,8 +438,8 @@ async function importTemplate() {
                   return res
                 }, {}),
               )
-              await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
-              updateImportTips(projectName, tableName!, progress, total)
+              await $api.dbTableRow.bulkCreate('noco', projectName, tableId!, batchData)
+              updateImportTips(projectName, tableId!, progress, total)
               progress += batchData.length
             }
           })(key),
@@ -497,8 +499,7 @@ async function importTemplate() {
             }
           }
         }
-
-        const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+        const tableMeta = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
           table_name: table.table_name,
           // leave title empty to get a generated one based on table_name
           title: '',
@@ -534,7 +535,7 @@ async function importTemplate() {
                 for (let i = 0; i < data.length; i += offset) {
                   updateImportTips(projectName, tableMeta.title, progress, total)
                   const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns)
-                  await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.title, batchData)
+                  await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.id, batchData)
                   progress += batchData.length
                 }
                 updateImportTips(projectName, tableMeta.title, total, total)
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 9086fd0ea2..682d3e4da6 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -1988,6 +1988,32 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags Base
+     * @name TableList
+     * @request GET:/api/v1/db/meta/projects/{projectId}/{baseId}/tables
+     * @response `200` `TableListType`
+     */
+    tableList: (
+      projectId: string,
+      baseId: string,
+      query?: {
+        page?: number;
+        pageSize?: number;
+        sort?: string;
+        includeM2M?: boolean;
+      },
+      params: RequestParams = {}
+    ) =>
+      this.request<TableListType, any>({
+        path: `/api/v1/db/meta/projects/${projectId}/${baseId}/tables`,
+        method: 'GET',
+        query: query,
+        ...params,
+      }),
+
     /**
      * No description
      *
diff --git a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
index 58eacc7495..8f607b3bf6 100644
--- a/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/helpers/job.ts
@@ -214,7 +214,7 @@ export default async (
   }
 
   function getRootDbType() {
-    return ncCreatedProjectSchema?.bases[0]?.type;
+    return ncCreatedProjectSchema?.bases.find((el) => el.id === syncDB.baseId)?.type;
   }
 
   // base mapping table
@@ -312,7 +312,7 @@ export default async (
   // @ts-ignore
   async function nc_DumpTableSchema() {
     console.log('[');
-    const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
+    const ncTblList = await api.base.tableList(ncCreatedProjectSchema.id, syncDB.baseId);
     for (let i = 0; i < ncTblList.list.length; i++) {
       const ncTbl = await api.dbTable.read(ncTblList.list[i].id);
       console.log(JSON.stringify(ncTbl, null, 2));
@@ -611,11 +611,12 @@ export default async (
     for (let idx = 0; idx < tables.length; idx++) {
       logBasic(`:: [${idx + 1}/${tables.length}] ${tables[idx].title}`);
 
-      logDetailed(`NC API: dbTable.create ${tables[idx].title}`);
+      logDetailed(`NC API: base.tableCreate ${tables[idx].title}`);
 
       let _perfStart = recordPerfStart();
-      const table: any = await api.dbTable.create(
+      const table: any = await api.base.tableCreate(
         ncCreatedProjectSchema.id,
+        syncDB.baseId,
         tables[idx]
       );
       recordPerfStats(_perfStart, 'dbTable.create');
@@ -2171,6 +2172,7 @@ export default async (
     } else {
       await nocoGetProject(syncDB.projectId);
       syncDB.projectName = ncCreatedProjectSchema?.title;
+      syncDB.baseId = syncDB.baseId || ncCreatedProjectSchema.bases[0].id;
       logDetailed('Getting existing project meta');
     }
 
@@ -2228,8 +2230,8 @@ export default async (
       try {
         // await nc_DumpTableSchema();
         const _perfStart = recordPerfStart();
-        const ncTblList = await api.dbTable.list(ncCreatedProjectSchema.id);
-        recordPerfStats(_perfStart, 'dbTable.list');
+        const ncTblList = await api.base.tableList(ncCreatedProjectSchema.id, syncDB.baseId);
+        recordPerfStats(_perfStart, 'base.tableList');
 
         logBasic('Reading Records...');
 
@@ -2385,6 +2387,7 @@ export interface AirtableSyncConfig {
   authToken: string;
   projectName?: string;
   projectId?: string;
+  baseId?: string;
   apiKey: string;
   shareId: string;
   options: {
diff --git a/packages/nocodb/src/lib/meta/api/sync/importApis.ts b/packages/nocodb/src/lib/meta/api/sync/importApis.ts
index e1a56cf3a1..5b3d05bcb9 100644
--- a/packages/nocodb/src/lib/meta/api/sync/importApis.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/importApis.ts
@@ -111,6 +111,7 @@ export default (
         id: req.params.syncId,
         ...(syncSource?.details || {}),
         projectId: syncSource.project_id,
+        baseId: syncSource.base_id,
         authToken: token,
         baseURL,
       });
diff --git a/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts b/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
index 48549044f1..f261c0cebd 100644
--- a/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
+++ b/packages/nocodb/src/lib/meta/api/sync/syncSourceApis.ts
@@ -4,17 +4,21 @@ import SyncSource from '../../../models/SyncSource';
 import { Tele } from 'nc-help';
 import { PagedResponseImpl } from '../../helpers/PagedResponse';
 import ncMetaAclMw from '../../helpers/ncMetaAclMw';
+import Project from '../../../models/Project';
 
 export async function syncSourceList(req: Request, res: Response) {
   // todo: pagination
-  res.json(new PagedResponseImpl(await SyncSource.list(req.params.projectId)));
+  res.json(new PagedResponseImpl(await SyncSource.list(req.params.projectId, req.params.baseId)));
 }
 
 export async function syncCreate(req: Request, res: Response) {
   Tele.emit('evt', { evt_type: 'webhooks:created' });
+  const project = await Project.getWithInfo(req.params.projectId);
+  
   const sync = await SyncSource.insert({
     ...req.body,
     fk_user_id: (req as any).user.id,
+    base_id: req.params.baseId ? req.params.baseId : project.bases[0].id,
     project_id: req.params.projectId,
   });
   res.json(sync);
@@ -41,6 +45,14 @@ router.post(
   '/api/v1/db/meta/projects/:projectId/syncs',
   ncMetaAclMw(syncCreate, 'syncSourceCreate')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/syncs/:baseId',
+  ncMetaAclMw(syncSourceList, 'syncSourceList')
+);
+router.post(
+  '/api/v1/db/meta/projects/:projectId/syncs/:baseId',
+  ncMetaAclMw(syncCreate, 'syncSourceCreate')
+);
 router.delete(
   '/api/v1/db/meta/syncs/:syncId',
   ncMetaAclMw(syncDelete, 'syncSourceDelete')
diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index 89df8a5072..e9aa9442d3 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -187,6 +187,7 @@ export async function tableCreate(req: Request<any, any, TableReqType>, res) {
 
   await Audit.insert({
     project_id: project.id,
+    base_id: base.id,
     op_type: AuditOperationTypes.TABLE,
     op_sub_type: AuditOperationSubTypes.CREATED,
     user: (req as any)?.user?.email,
@@ -357,6 +358,7 @@ export async function tableDelete(req: Request, res: Response) {
 
   await Audit.insert({
     project_id: project.id,
+    base_id: base.id,
     op_type: AuditOperationTypes.TABLE,
     op_sub_type: AuditOperationSubTypes.DELETED,
     user: (req as any)?.user?.email,
@@ -375,6 +377,11 @@ router.get(
   metaApiMetrics,
   ncMetaAclMw(tableList, 'tableList')
 );
+router.get(
+  '/api/v1/db/meta/projects/:projectId/:baseId/tables',
+  metaApiMetrics,
+  ncMetaAclMw(tableList, 'tableList')
+);
 router.post(
   '/api/v1/db/meta/projects/:projectId/tables',
   metaApiMetrics,
diff --git a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
index 280825dddc..e3ee86760f 100644
--- a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
@@ -10,6 +10,7 @@ import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_ta
 import * as nc_020_kanban_view from './v2/nc_020_kanban_view';
 import * as nc_021_add_fields_in_token from './v2/nc_021_add_fields_in_token';
 import * as nc_022_qr_code_column_type from './v2/nc_022_qr_code_column_type';
+import * as nc_023_add_base_id_in_sync_source from './v2/nc_023_add_base_id_in_sync_source';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -31,6 +32,7 @@ export default class XcMigrationSourcev2 {
       'nc_020_kanban_view',
       'nc_021_add_fields_in_token',
       'nc_022_qr_code_column_type',
+      'nc_023_add_base_id_in_sync_source'
     ]);
   }
 
@@ -64,6 +66,8 @@ export default class XcMigrationSourcev2 {
         return nc_021_add_fields_in_token;
       case 'nc_022_qr_code_column_type':
         return nc_022_qr_code_column_type;
+      case 'nc_023_add_base_id_in_sync_source':
+        return nc_023_add_base_id_in_sync_source;
     }
   }
 }
diff --git a/packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts b/packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts
new file mode 100644
index 0000000000..b29dd2814d
--- /dev/null
+++ b/packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts
@@ -0,0 +1,39 @@
+import Knex from 'knex';
+import { MetaTable } from '../../utils/globals';
+
+const up = async (knex: Knex) => {
+  await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
+    table.string('base_id', 20);
+    table.foreign('base_id').references(`${MetaTable.BASES}.id`);
+  });
+};
+
+const down = async (knex) => {
+  await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
+    table.dropColumn('base_id');
+  });
+};
+
+export { up, down };
+
+/**
+ * @copyright Copyright (c) 2022, Xgene Cloud Ltd
+ *
+ * @author Mert Ersoy <mert@nocodb.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
diff --git a/packages/nocodb/src/lib/models/SyncSource.ts b/packages/nocodb/src/lib/models/SyncSource.ts
index 39f7bf7489..9a5bf685f0 100644
--- a/packages/nocodb/src/lib/models/SyncSource.ts
+++ b/packages/nocodb/src/lib/models/SyncSource.ts
@@ -12,6 +12,7 @@ export default class SyncSource {
   deleted?: boolean;
   order?: number;
   project_id?: string;
+  base_id?: string;
   fk_user_id?: string;
 
   constructor(syncSource: Partial<SyncSource>) {
@@ -37,15 +38,14 @@ export default class SyncSource {
     return syncSource && new SyncSource(syncSource);
   }
 
-  static async list(projectId: string, ncMeta = Noco.ncMeta) {
+  static async list(projectId: string, baseId?: string, ncMeta = Noco.ncMeta) {
+    const condition = baseId ? { project_id: projectId, base_id: baseId } : { project_id: projectId };
     const syncSources = await ncMeta.metaList(
       null,
       null,
       MetaTable.SYNC_SOURCE,
       {
-        condition: {
-          project_id: projectId,
-        },
+        condition,
         orderBy: {
           created_at: 'asc',
         },
@@ -77,6 +77,7 @@ export default class SyncSource {
       type: syncSource?.type,
       details: syncSource?.details,
       project_id: syncSource?.project_id,
+      base_id: syncSource?.base_id,
       fk_user_id: syncSource?.fk_user_id,
     };
 
@@ -107,6 +108,7 @@ export default class SyncSource {
       'deleted',
       'order',
       'project_id',
+      'base_id',
     ]);
 
     if (updateObj.details && typeof updateObj.details === 'object') {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 8f3842cc35..79828584c2 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1743,6 +1743,55 @@
           "required": true
         }
       ],
+      "get": {
+        "summary": "",
+        "operationId": "table-list",
+        "responses": {
+          "200": {
+            "$ref": "#/components/responses/TableList"
+          }
+        },
+        "parameters": [
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "header",
+            "name": "xc-auth"
+          },
+          {
+            "schema": {
+              "type": "number"
+            },
+            "in": "query",
+            "name": "page"
+          },
+          {
+            "schema": {
+              "type": "number"
+            },
+            "in": "query",
+            "name": "pageSize"
+          },
+          {
+            "schema": {
+              "type": "string"
+            },
+            "in": "query",
+            "name": "sort"
+          },
+          {
+            "schema": {
+              "type": "boolean"
+            },
+            "in": "query",
+            "name": "includeM2M"
+          }
+        ],
+        "tags": [
+          "Base"
+        ]
+      },
       "post": {
         "summary": "",
         "operationId": "table-create",

From 445841ec08b043781b130f6c0c116bc0c88435fb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 3 Oct 2022 11:25:21 +0300
Subject: [PATCH 25/71] feat: use model id instead of title for ui navigation

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue     |  6 +++---
 packages/nc-gui/composables/useTabs.ts           | 16 +++++++---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 7e29aad957..a440280f77 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -48,7 +48,7 @@ const menuRef = $ref<HTMLLIElement>()
 
 let filterQuery = $ref('')
 
-const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
+const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
 
 const tablesById = $computed(() =>
   tables.value?.reduce<Record<string, TableType>>((acc, table) => {
@@ -372,7 +372,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
-                      { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
                     class="nc-tree-item text-sm cursor-pointer group"
@@ -534,7 +534,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       :key="table.id"
                       v-e="['a:table:open']"
                       :class="[
-                        { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                        { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                         `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                       ]"
                       class="nc-tree-item text-sm cursor-pointer group"
diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts
index cf7c3492d4..28982dc529 100644
--- a/packages/nc-gui/composables/useTabs.ts
+++ b/packages/nc-gui/composables/useTabs.ts
@@ -29,7 +29,7 @@ const [setup, use] = useInjectionState(() => {
       if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value.length) {
         const tab: TabItem = { type: route.params.type as TabType, title: route.params.title as string }
 
-        const currentTable = tables.value.find((t) => t.title === tab.title)
+        const currentTable = tables.value.find((t) => t.id === tab.title || t.title === tab.title)
 
         if (!currentTable) return -1
 
@@ -37,6 +37,8 @@ const [setup, use] = useInjectionState(() => {
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
 
+        tab.title = currentTable.title
+
         if (index === -1) {
           tab.sortsState = tab.sortsState || new Map()
           tab.filterState = tab.filterState || new Map()
@@ -111,13 +113,9 @@ const [setup, use] = useInjectionState(() => {
   function navigateToTab(tab: TabItem) {
     switch (tab.type) {
       case TabType.TABLE:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/table/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.VIEW:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/view/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.AUTH:
         return navigateTo(`/${projectType}/${route.params.projectId}/auth`)
     }
@@ -131,10 +129,10 @@ const [setup, use] = useInjectionState(() => {
 
       Object.assign(tab, newTabItemProps)
 
-      if (isActive && tab.title)
+      if (isActive && tab.id)
         router.replace({
           params: {
-            title: tab.title,
+            title: tab.id,
           },
         })
     }

From 423da33780636fa25e1d714e73a2219fba067951 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 3 Oct 2022 20:35:47 +0300
Subject: [PATCH 26/71] fix: import template editor

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/template/Editor.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 2d35badca5..21d92a40a4 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -68,7 +68,7 @@ const { addTab } = useTabs()
 
 const { sqlUis, project, loadTables } = useProject()
 
-const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : Object.values(sqlUis.value)[0])
+const sqlUi = ref(sqlUis.value[baseId] || Object.values(sqlUis.value)[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 
@@ -499,23 +499,24 @@ async function importTemplate() {
             }
           }
         }
-        const tableMeta = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
+        const createdTable = await $api.base.tableCreate(project?.value?.id as string, baseId as string, {
           table_name: table.table_name,
           // leave title empty to get a generated one based on table_name
           title: '',
           columns: table.columns || [],
         })
-        table.title = tableMeta.title
+        table.id = createdTable.id
+        table.title = createdTable.title
 
         // open the first table after import
         if (tab.id === '' && tab.title === '') {
-          tab.id = tableMeta.id as string
-          tab.title = tableMeta.title as string
+          tab.id = createdTable.id as string
+          tab.title = createdTable.title as string
         }
 
         // set primary value
-        if (tableMeta?.columns?.[0]?.id) {
-          await $api.dbTableColumn.primaryColumnSet(tableMeta.columns[0].id as string)
+        if (createdTable?.columns?.[0]?.id) {
+          await $api.dbTableColumn.primaryColumnSet(createdTable.columns[0].id as string)
         }
       }
       // bulk insert data

From 531debb691a43deaa9db9cb3063a9fe3a5e71890 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 3 Oct 2022 22:14:13 +0300
Subject: [PATCH 27/71] fix: rename table

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index a440280f77..25893ee253 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -616,7 +616,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           <template v-if="contextMenuTarget.type === 'table'">
             <a-menu-item
               v-if="isUIAllowed('table-rename')"
-              @click="openRenameTableDialog(contextMenuTarget.value, base.id, true)"
+              @click="openRenameTableDialog(contextMenuTarget.value, bases[0].id, true)"
             >
               <div class="nc-project-menu-item">
                 {{ $t('general.rename') }}

From dec67fc75537638b94aa6d779f14134bdda2818d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 5 Oct 2022 03:51:42 +0300
Subject: [PATCH 28/71] fix: ui improvements for multiple source interfaces

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  |  6 +-
 .../dashboard/settings/DataSources.vue        | 74 ++++++++++---------
 .../components/dashboard/settings/Modal.vue   |  6 +-
 3 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 25893ee253..252b94864c 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -44,6 +44,8 @@ const [searchActive, toggleSearchActive] = useToggle()
 
 let key = $ref(0)
 
+const activeKey = ref([])
+
 const menuRef = $ref<HTMLLIElement>()
 
 let filterQuery = $ref('')
@@ -434,7 +436,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     </GeneralTooltip>
                   </div>
                 </div>
-                <a-collapse v-else expand-icon-position="right" :bordered="false" ghost>
+                <a-collapse v-else v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" accordion ghost>
                   <a-collapse-panel :key="index">
                     <template #header>
                       <div v-if="index !== '0'" class="flex items-center gap-2">
@@ -771,6 +773,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 }
 
 :deep(.ant-collapse-header) {
-  @apply !border-0 !border-y-1;
+  @apply !border-0;
 }
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 924dc5f2be..9dfea5efef 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -133,39 +133,47 @@ watch(
           <a-table-column key="action" :title="$t('labels.actions')" :width="180">
             <template #default="{ record }">
               <div class="flex items-center gap-2">
-                <a-tooltip>
-                  <template #title>Sync Metadata {{ metadiffbases.includes(record.id) ? '(Out of sync)' : '' }}</template>
-                  <MdiDatabaseSync
-                    class="nc-action-btn cursor-pointer outline-0"
-                    :class="metadiffbases.includes(record.id) ? 'text-primary' : ''"
-                    @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
-                  />
-                </a-tooltip>
-                <a-tooltip>
-                  <template #title>UI ACL</template>
-                  <MdiDatabaseLockOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.UIAcl)"
-                  />
-                </a-tooltip>
-                <a-tooltip>
-                  <template #title>ERD</template>
-                  <MdiGraphOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.ERD)"
-                  />
-                </a-tooltip>
-                <a-tooltip v-if="!record.is_meta">
-                  <template #title>Edit</template>
-                  <MdiEditOutline
-                    class="nc-action-btn cursor-pointer outline-0"
-                    @click="baseAction(record.id, DataSourcesSubTab.Edit)"
-                  />
-                </a-tooltip>
-                <a-tooltip v-if="!record.is_meta">
-                  <template #title>Delete</template>
-                  <MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)" />
-                </a-tooltip>
+                <a-button
+                  class="nc-action-btn cursor-pointer outline-0"
+                  @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
+                >
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <a-tooltip v-if="metadiffbases.includes(record.id)">
+                      <template #title>Out of sync</template>
+                      <MdiDatabaseSync class="text-lg group-hover:text-accent text-primary" />
+                    </a-tooltip>
+                    <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                    Sync Metadata
+                  </div>
+                </a-button>
+                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.UIAcl)">
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                    UI ACL
+                  </div>
+                </a-button>
+                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.ERD)">
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                    ERD
+                  </div>
+                </a-button>
+                <a-button
+                  v-if="!record.is_meta"
+                  class="nc-action-btn cursor-pointer outline-0"
+                  @click="baseAction(record.id, DataSourcesSubTab.Edit)"
+                >
+                  <div class="flex items-center gap-2 text-gray-600 font-light">
+                    <MdiEditOutline class="text-lg group-hover:text-accent" />
+                    Edit
+                  </div>
+                </a-button>
+                <a-button v-if="!record.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)">
+                  <div class="flex items-center gap-2 text-red-500 font-light">
+                    <MdiDeleteOutline class="text-lg group-hover:text-accent" />
+                    Delete
+                  </div>
+                </a-button>
               </div>
             </template>
           </a-table-column>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 1f37f5397f..61c0a175a3 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -252,10 +252,10 @@ watch(
               <a-breadcrumb-item v-else @click="dataSourcesState = ''">Data Sources</a-breadcrumb-item>
               <a-breadcrumb-item v-if="dataSourcesState !== ''">{{ dataSourcesState }}</a-breadcrumb-item>
             </a-breadcrumb>
-            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full">
+            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full gap-1">
               <a-button class="self-start nc-btn-new-datasource" @click="dataSourcesState = DataSourcesSubTab.New">
-                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-gray-600 font-light">
-                  <MdiDatabaseOutline class="text-lg group-hover:text-accent" />
+                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-primary font-light">
+                  <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
                   New
                 </div>
               </a-button>

From d61a0874a9001db473ce3a7bdadcad790b56a389 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 6 Oct 2022 13:24:48 +0300
Subject: [PATCH 29/71] feat: ui improvements for multiple source

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts               |  6 ++
 .../nc-gui/components/dashboard/TreeView.vue  | 43 +++++++++++---
 .../dashboard/settings/DataSources.vue        | 53 +++++++++++++----
 .../components/dashboard/settings/Modal.vue   | 58 +++++++------------
 .../settings/data-sources/CreateBase.vue      | 11 ++++
 .../components/general/AddBaseButton.vue      | 13 +++--
 .../nc-gui/components/general/BaseLogo.vue    | 28 +++++++++
 packages/nc-gui/nuxt.config.ts                |  2 +
 packages/nc-gui/package-lock.json             | 38 ++++++++++++
 packages/nc-gui/package.json                  |  2 +
 .../pages/[projectType]/[projectId]/index.vue | 14 +++--
 11 files changed, 201 insertions(+), 67 deletions(-)
 create mode 100644 packages/nc-gui/components/general/BaseLogo.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 3af2f902d4..35919a3bb9 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -86,6 +86,8 @@ declare module '@vue/runtime-core' {
     IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default']
     IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
+    LogosMysql: typeof import('~icons/logos/mysql')['default']
+    LogosPostgresql: typeof import('~icons/logos/postgresql')['default']
     LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
     LogosSwagger: typeof import('~icons/logos/swagger')['default']
     MaterialSymbolsAccountTreeRounded: typeof import('~icons/material-symbols/account-tree-rounded')['default']
@@ -145,6 +147,7 @@ declare module '@vue/runtime-core' {
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiContentSaveEdit: typeof import('~icons/mdi/content-save-edit')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
+    MdiDatabaseAlert: typeof import('~icons/mdi/database-alert')['default']
     MdiDatabaseLockOutline: typeof import('~icons/mdi/database-lock-outline')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDatabasePlusOutline: typeof import('~icons/mdi/database-plus-outline')['default']
@@ -240,7 +243,10 @@ declare module '@vue/runtime-core' {
     MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
+    RiTeamFill: typeof import('~icons/ri/team-fill')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SimpleIconsMicrosoftsqlserver: typeof import('~icons/simple-icons/microsoftsqlserver')['default']
+    VscodeIconsFileTypeSqlite: typeof import('~icons/vscode-icons/file-type-sqlite')['default']
   }
 }
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 252b94864c..978fc7aefa 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -5,6 +5,7 @@ import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
 import type { VNodeRef } from '#imports'
 import {
+  ClientType,
   Empty,
   TabType,
   computed,
@@ -21,7 +22,7 @@ import {
   useTabs,
   useToggle,
   useUIPermission,
-  watchEffect,
+  watchEffect
 } from '#imports'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
@@ -42,6 +43,8 @@ const route = useRoute()
 
 const [searchActive, toggleSearchActive] = useToggle()
 
+const toggleDialog = inject(ToggleDialogInj, () => {})
+
 let key = $ref(0)
 
 const activeKey = ref([])
@@ -360,6 +363,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       {{ $t('labels.requestDataSource') }}
                     </a>
                   </a-menu-item>
+
+                  <a-menu-divider class="my-0" />
+
+                  <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <LogosMysql class="group-hover:text-accent" />
+                        MySQL
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <LogosPostgresql class="group-hover:text-accent" />
+                        Postgres
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
+                        SQLite
+                      </div>
+                    </a-menu-item>
+                    <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
+                      <div class="color-transition nc-project-menu-item group">
+                        <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
+                        MSSQL
+                      </div>
+                    </a-menu-item>
+                  </a-menu-item-group>
                 </a-menu>
               </template>
             </a-dropdown>
@@ -439,10 +471,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                 <a-collapse v-else v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" accordion ghost>
                   <a-collapse-panel :key="index">
                     <template #header>
-                      <div v-if="index !== '0'" class="flex items-center gap-2">
-                        <MdiDatabaseOutline />
+                      <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-weightd">
+                        <GeneralBaseLogo :base-type="base.type" />
                         {{ base.alias || '' }}
-                        ({{ base.type || '' }})
                       </div>
                     </template>
                     <div
@@ -650,10 +681,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
       />
 
-      <LazyGeneralShareBaseButton
-        class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
-      />
-
       <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
       <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 9dfea5efef..82218baf9b 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -6,7 +6,7 @@ import EditBase from './data-sources/EditBase.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Erd from './Erd.vue'
-import { DataSourcesSubTab } from '~/lib'
+import { ClientType, DataSourcesSubTab } from '~/lib'
 import { useNuxtApp, useProject } from '#imports'
 
 interface Props {
@@ -18,7 +18,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:state', 'update:reload'])
 
-const vModel = useVModel(props, 'state', emits)
+const vState = useVModel(props, 'state', emits)
 const vReload = useVModel(props, 'reload', emits)
 
 const { $api, $e } = useNuxtApp()
@@ -27,6 +27,7 @@ const { project, loadProject } = useProject()
 let sources = $ref<BaseType[]>([])
 let activeBaseId = $ref('')
 let metadiffbases = $ref<string[]>([])
+let clientType = $ref<ClientType>(ClientType.MYSQL)
 
 async function loadBases() {
   try {
@@ -64,7 +65,7 @@ async function loadMetaDiff() {
 
 const baseAction = (baseId: string, action: string) => {
   activeBaseId = baseId
-  vModel.value = action
+  vState.value = action
 }
 
 const deleteBase = (base: BaseType) => {
@@ -105,12 +106,37 @@ watch(
     }
   },
 )
+
+watch(
+  vState,
+  (newState) => {
+    switch (newState) {
+      case ClientType.MYSQL:
+        clientType = ClientType.MYSQL
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.PG:
+        clientType = ClientType.PG
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.SQLITE:
+        clientType = ClientType.SQLITE
+        vState.value = DataSourcesSubTab.New
+        break
+      case ClientType.MSSQL:
+        clientType = ClientType.MSSQL
+        vState.value = DataSourcesSubTab.New
+        break
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="flex flex-row w-full">
     <div class="flex flex-col w-full">
-      <div v-if="props.state === ''" class="max-h-600px overflow-y-auto">
+      <div v-if="vState === ''" class="max-h-600px overflow-y-auto">
         <a-table
           class="w-full"
           size="small"
@@ -127,7 +153,10 @@ watch(
           <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
           <a-table-column key="alias" title="Name" data-index="alias">
             <template #default="{ text, record }">
-              {{ record.is_meta ? 'BASE' : text }} <span class="text-gray-400 text-xs">({{ record.type }})</span>
+              <div class="flex items-center gap-1">
+                <GeneralBaseLogo :base-type="record.type" />
+                {{ record.is_meta ? 'BASE' : text }} <span class="text-gray-400 text-xs">({{ record.type }})</span>
+              </div>
             </template>
           </a-table-column>
           <a-table-column key="action" :title="$t('labels.actions')" :width="180">
@@ -140,7 +169,7 @@ watch(
                   <div class="flex items-center gap-2 text-gray-600 font-light">
                     <a-tooltip v-if="metadiffbases.includes(record.id)">
                       <template #title>Out of sync</template>
-                      <MdiDatabaseSync class="text-lg group-hover:text-accent text-primary" />
+                      <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
                     </a-tooltip>
                     <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
                     Sync Metadata
@@ -179,19 +208,19 @@ watch(
           </a-table-column>
         </a-table>
       </div>
-      <div v-else-if="props.state === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
-        <CreateBase @base-created="loadBases" />
+      <div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
+        <CreateBase :connection-type="clientType" @base-created="loadBases" />
       </div>
-      <div v-else-if="props.state === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
         <Metadata :base-id="activeBaseId" />
       </div>
-      <div v-else-if="props.state === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
         <UIAcl :base-id="activeBaseId" />
       </div>
-      <div v-else-if="props.state === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
         <Erd :base-id="activeBaseId" />
       </div>
-      <div v-else-if="props.state === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">
         <EditBase :base-id="activeBaseId" @base-updated="loadBases" />
       </div>
     </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 61c0a175a3..9a8aabc5f4 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -14,8 +14,8 @@ import { DataSourcesSubTab } from '~~/lib'
 
 interface Props {
   modelValue: boolean
-  openKey?: string
-  dataSourcesState?: string
+  openKey: string
+  dataSourcesState: string
 }
 
 interface SubTabGroup {
@@ -37,17 +37,20 @@ interface TabGroup {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'update:openKey', 'update:dataSourcesState'])
 
 const vModel = useVModel(props, 'modelValue', emits)
 
+const vOpenKey = useVModel(props, 'openKey', emits)
+
+const vDataState = useVModel(props, 'dataSourcesState', emits)
+
 const { isUIAllowed } = useUIPermission()
 
 const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
-const dataSourcesState = ref(props.dataSourcesState)
 const dataSourcesReload = ref(false)
 
 const tabsInfo: TabGroup = {
@@ -103,7 +106,7 @@ const tabsInfo: TabGroup = {
       },
     },
     onClick: () => {
-      dataSourcesState.value = ''
+      vDataState.value = ''
       $e('c:settings:data-sources')
     },
   },
@@ -141,7 +144,13 @@ const tabsInfo: TabGroup = {
 const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
 
 // Array of keys of tabs which are selected. In our case will be only one.
-let selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
+const selectedTabKeys = $computed<string[]>({
+  get: () => [Object.keys(tabsInfo).find((key) => key === vOpenKey.value) || firstKeyOfObject(tabsInfo)],
+  set: (value) => {
+    vOpenKey.value = value[0]
+  },
+})
+
 const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
@@ -153,29 +162,6 @@ watch(
     selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)]
   },
 )
-
-watch(
-  () => props.openKey,
-  (nextOpenKey) => {
-    selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === nextOpenKey) || firstKeyOfObject(tabsInfo)]
-  },
-)
-
-watch(
-  () => props.dataSourcesState,
-  (nextState) => {
-    dataSourcesState.value = nextState || ''
-  },
-)
-
-watch(
-  () => props.modelValue,
-  () => {
-    dataSourcesState.value = props.dataSourcesState || ''
-    selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === props.openKey) || firstKeyOfObject(tabsInfo)]
-  },
-  { immediate: true },
-)
 </script>
 
 <template>
@@ -246,15 +232,15 @@ watch(
         <div v-else>
           <div class="flex items-center">
             <a-breadcrumb class="w-full cursor-pointer">
-              <a-breadcrumb-item v-if="dataSourcesState !== ''" @click="dataSourcesState = ''">
+              <a-breadcrumb-item v-if="vDataState !== ''" @click="vDataState = ''">
                 <a class="!no-underline">Data Sources</a>
               </a-breadcrumb-item>
-              <a-breadcrumb-item v-else @click="dataSourcesState = ''">Data Sources</a-breadcrumb-item>
-              <a-breadcrumb-item v-if="dataSourcesState !== ''">{{ dataSourcesState }}</a-breadcrumb-item>
+              <a-breadcrumb-item v-else @click="vDataState = ''">Data Sources</a-breadcrumb-item>
+              <a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
             </a-breadcrumb>
-            <div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full gap-1">
-              <a-button class="self-start nc-btn-new-datasource" @click="dataSourcesState = DataSourcesSubTab.New">
-                <div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-primary font-light">
+            <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
+              <a-button class="self-start nc-btn-new-datasource" @click="vDataState = DataSourcesSubTab.New">
+                <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
                   <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
                   New
                 </div>
@@ -278,7 +264,7 @@ watch(
         <component
           :is="selectedSubTab?.body"
           v-if="selectedSubTabKeys[0] === 'dataSources'"
-          v-model:state="dataSourcesState"
+          v-model:state="vDataState"
           v-model:reload="dataSourcesReload"
           class="px-2 pb-2"
           :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
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 f1a8ba4a29..019844cea6 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -25,6 +25,8 @@ import { ClientType } from '~/lib'
 import { DefaultConnection, SQLiteConnection } from '~/utils'
 import type { ProjectCreateForm } from '~/utils'
 
+const { connectionType } = defineProps<{ connectionType: ClientType }>()
+
 const emit = defineEmits(['baseCreated'])
 
 const { project, loadProject } = useProject()
@@ -331,6 +333,15 @@ onMounted(async () => {
     }, 500)
   })
 })
+
+watch(
+  () => connectionType,
+  (v) => {
+    formState.dataSource.client = v
+    onClientChange()
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/general/AddBaseButton.vue b/packages/nc-gui/components/general/AddBaseButton.vue
index 567690180f..4f43a7be1b 100644
--- a/packages/nc-gui/components/general/AddBaseButton.vue
+++ b/packages/nc-gui/components/general/AddBaseButton.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { useUIPermission } from '#imports'
-
 const { isUIAllowed } = useUIPermission()
 
+const { t } = useI18n()
+
 const toggleDialog = inject(ToggleDialogInj, () => {})
 </script>
 
 <template>
   <div
+    v-if="isUIAllowed('settings')"
     class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)"
-    @click="toggleDialog(true, 'dataSources', 'New')"
+    @click="toggleDialog(true)"
   >
-    <div v-if="isUIAllowed('newBase')">
+    <div>
       <div class="flex items-center space-x-1">
-        <MdiDatabasePlusOutline class="mr-1 nc-new-base" />
-        <div>Data Sources</div>
+        <RiTeamFill class="mr-1 nc-new-base" />
+        <div>{{ t('title.teamAndSettings') }}</div>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/general/BaseLogo.vue b/packages/nc-gui/components/general/BaseLogo.vue
new file mode 100644
index 0000000000..2c3e3fcbe2
--- /dev/null
+++ b/packages/nc-gui/components/general/BaseLogo.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import LogosMysql from '~icons/logos/mysql'
+import LogosPostgresql from '~icons/logos/postgresql'
+import VscodeIconsFileTypeSqlite from '~icons/vscode-icons/file-type-sqlite'
+import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserver'
+import MdiDatabaseOutline from '~icons/mdi/database-outline'
+
+const { baseType } = defineProps<{ baseType?: string }>()
+
+const baseIcon = computed(() => {
+  switch (baseType) {
+    case ClientType.MYSQL:
+      return LogosMysql
+    case ClientType.PG:
+      return LogosPostgresql
+    case ClientType.SQLITE:
+      return VscodeIconsFileTypeSqlite
+    case ClientType.MSSQL:
+      return SimpleIconsMicrosoftsqlserver
+    default:
+      return MdiDatabaseOutline
+  }
+})
+</script>
+
+<template>
+  <component :is="baseIcon" />
+</template>
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index afba37c6ba..0778081d12 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -129,6 +129,8 @@ export default defineNuxtConfig({
               'ph',
               'ri',
               'system-uicons',
+              'vscode-icons',
+              'simple-icons',
             ],
           }),
         ],
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index fc9cf60598..c4a1c9ac9a 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -57,7 +57,9 @@
         "@iconify-json/mi": "^1.1.2",
         "@iconify-json/ph": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
+        "@iconify-json/simple-icons": "^1.1.29",
         "@iconify-json/system-uicons": "^1.1.4",
+        "@iconify-json/vscode-icons": "^1.1.14",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
@@ -1175,6 +1177,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/simple-icons": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.29.tgz",
+      "integrity": "sha512-uP4fKlNoh9IuVTf1e1bl0TWZs+IDE19zCpKLNy+bKmJL5F9zOPwiIMqSsg4KRPXSdoZ2x7lTtt9BrO/O/3Phyg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/system-uicons": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
@@ -1184,6 +1195,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/vscode-icons": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/vscode-icons/-/vscode-icons-1.1.14.tgz",
+      "integrity": "sha512-we1er6h6WNDuV/dNSey/f4RDea5DILfDPCM7QN32EkjINr3ggAh7JhfTuQPP9A5lUQkjq5Xu2BpLyiz+E0Yd8w==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -18414,6 +18434,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/simple-icons": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.1.29.tgz",
+      "integrity": "sha512-uP4fKlNoh9IuVTf1e1bl0TWZs+IDE19zCpKLNy+bKmJL5F9zOPwiIMqSsg4KRPXSdoZ2x7lTtt9BrO/O/3Phyg==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/system-uicons": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/system-uicons/-/system-uicons-1.1.4.tgz",
@@ -18423,6 +18452,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/vscode-icons": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/vscode-icons/-/vscode-icons-1.1.14.tgz",
+      "integrity": "sha512-we1er6h6WNDuV/dNSey/f4RDea5DILfDPCM7QN32EkjINr3ggAh7JhfTuQPP9A5lUQkjq5Xu2BpLyiz+E0Yd8w==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 2f1fe47c37..5046a80816 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -80,7 +80,9 @@
     "@iconify-json/mi": "^1.1.2",
     "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
+    "@iconify-json/simple-icons": "^1.1.29",
     "@iconify-json/system-uicons": "^1.1.4",
+    "@iconify-json/vscode-icons": "^1.1.14",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index e242c83108..63142b14f2 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -59,9 +59,9 @@ const { isOpen, toggle, toggleHasSidebar } = useSidebar('nc-left-sidebar', { has
 
 const dialogOpen = ref(false)
 
-const openDialogKey = ref<string>()
+const openDialogKey = ref<string>('')
 
-const dataSourcesState = ref<string>()
+const dataSourcesState = ref<string>('')
 
 const dropdownOpen = ref(false)
 
@@ -77,8 +77,8 @@ const logout = () => {
 
 function toggleDialog(value?: boolean, key?: string, dsState?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
-  openDialogKey.value = key
-  dataSourcesState.value = dsState
+  openDialogKey.value = key || ''
+  dataSourcesState.value = dsState || ''
 }
 
 provide(ToggleDialogInj, toggleDialog)
@@ -569,7 +569,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     </template>
 
     <div :key="$route.fullPath.split('?')[0]">
-      <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" :data-sources-state="dataSourcesState" />
+      <LazyDashboardSettingsModal
+        v-model:model-value="dialogOpen"
+        v-model:open-key="openDialogKey"
+        v-model:data-sources-state="dataSourcesState"
+      />
 
       <NuxtPage :page-key="$route.params.projectId" />
 

From 600d18de2244a2a3af6a04393b1d6530abef13b8 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 7 Oct 2022 04:12:29 +0300
Subject: [PATCH 30/71] feat: order and ui control for bases

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts               |   2 +
 .../nc-gui/components/dashboard/TreeView.vue  |   4 +-
 .../dashboard/settings/DataSources.vue        |  65 +++++++++
 packages/nc-gui/composables/useProject.ts     |   4 +-
 packages/nocodb-sdk/src/lib/Api.ts            |   2 +
 .../src/lib/migrations/XcMigrationSourcev2.ts |   8 +-
 ...nc_source.ts => nc_023_multiple_source.ts} |  10 ++
 packages/nocodb/src/lib/models/Base.ts        | 137 +++++++++++++++---
 scripts/sdk/swagger.json                      |   6 +
 9 files changed, 212 insertions(+), 26 deletions(-)
 rename packages/nocodb/src/lib/migrations/v2/{nc_023_add_base_id_in_sync_source.ts => nc_023_multiple_source.ts} (82%)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 35919a3bb9..31adcb4637 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -118,10 +118,12 @@ declare module '@vue/runtime-core' {
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiAppleKeyboardShift: typeof import('~icons/mdi/apple-keyboard-shift')['default']
     MdiArrowCollapse: typeof import('~icons/mdi/arrow-collapse')['default']
+    MdiArrowDownBox: typeof import('~icons/mdi/arrow-down-box')['default']
     MdiArrowDownDropCircle: typeof import('~icons/mdi/arrow-down-drop-circle')['default']
     MdiArrowDownDropCircleOutline: typeof import('~icons/mdi/arrow-down-drop-circle-outline')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
+    MdiArrowUpBox: typeof import('~icons/mdi/arrow-up-box')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
     MdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline')['default']
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 978fc7aefa..e9fd01985a 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -67,6 +67,8 @@ const filteredTables = $computed(() =>
   tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
 )
 
+const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
+
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -399,7 +401,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+              <div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
                 <div v-if="index === '0'">
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 82218baf9b..f0428acf74 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
+import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
 import CreateBase from './data-sources/CreateBase.vue'
 import EditBase from './data-sources/EditBase.vue'
 import Metadata from './Metadata.vue'
@@ -92,6 +93,44 @@ const deleteBase = (base: BaseType) => {
   })
 }
 
+const toggleBase = async (base: BaseType, e: CheckboxChangeEvent) => {
+  try {
+    base.enabled = e.target.checked
+    await $api.base.update(base.project_id as string, base.id as string, {
+      id: base.id,
+      project_id: base.project_id,
+      enabled: base.enabled,
+    })
+    await loadProject()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const moveBase = async (base: BaseType, direction: 'up' | 'down') => {
+  try {
+    if (!base.order) {
+      // empty update call to reorder bases (migration)
+      await $api.base.update(base.project_id as string, base.id as string, {
+        id: base.id,
+        project_id: base.project_id,
+      })
+      message.info('Bases are migrated. Please try again.')
+    } else {
+      direction === 'up' ? base.order-- : base.order++
+      await $api.base.update(base.project_id as string, base.id as string, {
+        id: base.id,
+        project_id: base.project_id,
+        order: base.order,
+      })
+    }
+    await loadProject()
+    await loadBases()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
@@ -151,6 +190,32 @@ watch(
           bordered
         >
           <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
+          <a-table-column key="enabled" data-index="enabled" :width="30">
+            <template #default="{ record }">
+              <div v-if="!record.is_meta" class="flex items-center gap-1">
+                <a-tooltip>
+                  <template #title>Show in UI</template>
+                  <a-checkbox :checked="record.enabled ? true : false" @change="toggleBase(record, $event)"></a-checkbox>
+                </a-tooltip>
+              </div>
+            </template>
+          </a-table-column>
+          <a-table-column key="order" width="60px">
+            <template #default="{ record, index }">
+              <div class="flex items-center gap-1 text-gray-600 font-light">
+                <MdiArrowUpBox
+                  v-if="!record.is_meta && index !== 1"
+                  class="text-lg group-hover:text-accent"
+                  @click="moveBase(record, 'up')"
+                />
+                <MdiArrowDownBox
+                  v-if="!record.is_meta && index !== sources.length - 1"
+                  class="text-lg group-hover:text-accent"
+                  @click="moveBase(record, 'down')"
+                />
+              </div>
+            </template>
+          </a-table-column>
           <a-table-column key="alias" title="Name" data-index="alias">
             <template #default="{ text, record }">
               <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 0230ab9607..3b318bc7a8 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -98,7 +98,9 @@ const [setup, use] = useInjectionState(() => {
         includeM2M: includeM2M.value,
       })
 
-      if (tablesResponse.list) tables.value = tablesResponse.list
+      if (tablesResponse.list) {
+        tables.value = tablesResponse.list.filter((table) => bases.value.find((base) => base.id === table.base_id)?.enabled)
+      }
     }
   }
 
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 682d3e4da6..34a9ce8385 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -84,6 +84,8 @@ export interface BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 }
 
 export interface BaseReqType {
diff --git a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
index e3ee86760f..0dc39df339 100644
--- a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
@@ -10,7 +10,7 @@ import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_ta
 import * as nc_020_kanban_view from './v2/nc_020_kanban_view';
 import * as nc_021_add_fields_in_token from './v2/nc_021_add_fields_in_token';
 import * as nc_022_qr_code_column_type from './v2/nc_022_qr_code_column_type';
-import * as nc_023_add_base_id_in_sync_source from './v2/nc_023_add_base_id_in_sync_source';
+import * as nc_023_multiple_source from './v2/nc_023_multiple_source';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -32,7 +32,7 @@ export default class XcMigrationSourcev2 {
       'nc_020_kanban_view',
       'nc_021_add_fields_in_token',
       'nc_022_qr_code_column_type',
-      'nc_023_add_base_id_in_sync_source'
+      'nc_023_multiple_source'
     ]);
   }
 
@@ -66,8 +66,8 @@ export default class XcMigrationSourcev2 {
         return nc_021_add_fields_in_token;
       case 'nc_022_qr_code_column_type':
         return nc_022_qr_code_column_type;
-      case 'nc_023_add_base_id_in_sync_source':
-        return nc_023_add_base_id_in_sync_source;
+      case 'nc_023_multiple_source':
+        return nc_023_multiple_source;
     }
   }
 }
diff --git a/packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
similarity index 82%
rename from packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts
rename to packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
index b29dd2814d..25b6d84f3a 100644
--- a/packages/nocodb/src/lib/migrations/v2/nc_023_add_base_id_in_sync_source.ts
+++ b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
@@ -6,12 +6,22 @@ const up = async (knex: Knex) => {
     table.string('base_id', 20);
     table.foreign('base_id').references(`${MetaTable.BASES}.id`);
   });
+
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.boolean('enabled').defaultTo(true);
+    table.float('order');
+  });
 };
 
 const down = async (knex) => {
   await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
     table.dropColumn('base_id');
   });
+  
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.dropColumn('enabled');
+    table.dropColumn('order');
+  });
 };
 
 export { up, down };
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index 9009d790ea..c41ef98473 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -25,6 +25,8 @@ export default class Base implements BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 
   constructor(base: Partial<Base>) {
     Object.assign(this, base);
@@ -44,6 +46,8 @@ export default class Base implements BaseType {
       'updated_at',
       'inflection_column',
       'inflection_table',
+      'order',
+      'enabled',
     ]);
     insertObj.config = CryptoJS.AES.encrypt(
       JSON.stringify(base.config),
@@ -56,13 +60,19 @@ export default class Base implements BaseType {
       MetaTable.BASES,
       insertObj
     );
+
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
+    
+    // call before reorder to update cache
+    const returnBase = await this.get(id, ncMeta);
+
+    await this.reorderBases(base.projectId);
 
-    return this.get(id, ncMeta);
+    return returnBase;
   }
 
   public static async updateBase(
@@ -81,7 +91,7 @@ export default class Base implements BaseType {
     await NocoCache.deepDel(
       CacheScope.BASE,
       `${CacheScope.BASE}:${baseId}`,
-      CacheDelDirection.PARENT_TO_CHILD
+      CacheDelDirection.CHILD_TO_PARENT
     );
 
     const insertObj = extractProps(base, [
@@ -94,37 +104,48 @@ export default class Base implements BaseType {
       'updated_at',
       'inflection_column',
       'inflection_table',
+      'order',
+      'enabled',
     ]);
-    insertObj.config = CryptoJS.AES.encrypt(
-      JSON.stringify(base.config),
-      Noco.getConfig()?.auth?.jwt?.secret
-    ).toString();
+    
+    if (insertObj.config) {
+      insertObj.config = CryptoJS.AES.encrypt(
+        JSON.stringify(base.config),
+        Noco.getConfig()?.auth?.jwt?.secret
+      ).toString();
+    }
+
+    // type property is undefined even if not provided
+    if (!insertObj.type) {
+      insertObj.type = oldBase.type;
+    }
+
+    // add missing (not updated) fields
+    const finalInsertObj = {
+      ...oldBase,
+      ...insertObj,
+    };
 
     const { id } = await ncMeta.metaInsert2(
       base.projectId,
       null,
       MetaTable.BASES,
-      insertObj
+      finalInsertObj
     );
+
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
 
-    return this.get(id, ncMeta);
-  }
+    // call before reorder to update cache
+    const returnBase = await this.get(id, ncMeta);
 
-  /*
-  await ncMeta.metaDelete(null, null, MetaTable.COL_LOOKUP, {
-          fk_column_id: colId,
-        });
-        await NocoCache.deepDel(
-          CacheScope.COL_LOOKUP,
-          `${CacheScope.COL_LOOKUP}:${colId}`,
-          CacheDelDirection.CHILD_TO_PARENT
-        );
-  */
+    await this.reorderBases(base.projectId, id, ncMeta);
+
+    return returnBase;
+  }
 
   static async list(
     args: { projectId: string },
@@ -137,10 +158,22 @@ export default class Base implements BaseType {
       baseDataList = await ncMeta.metaList2(
         args.projectId,
         null,
-        MetaTable.BASES
+        MetaTable.BASES,
+        {
+          orderBy: {
+            order: 'asc',
+          },
+        }
       );
       await NocoCache.setList(CacheScope.BASE, [args.projectId], baseDataList);
     }
+
+    baseDataList.sort(
+      (a, b) =>
+        (a.order != null ? a.order : Infinity) -
+        (b.order != null ? b.order : Infinity)
+    );
+
     return baseDataList?.map((baseData) => {
       return new Base(baseData);
     });
@@ -160,6 +193,70 @@ export default class Base implements BaseType {
     return baseData && new Base(baseData);
   }
 
+  static async reorderBases(projectId: string, keepBase?: string, ncMeta = Noco.ncMeta) {
+    const bases = await this.list({ projectId: projectId }, ncMeta);
+
+    // order list for bases
+    const orders = [];
+    const takenOrders = bases.map((base) => base.order);
+    
+    if (keepBase) {
+      bases.find((base) => {
+        if (base.id === keepBase) {
+          orders.push({ id: base.id, order: base.order });
+        }
+      });
+    }
+
+    for (const b of bases) {
+      if (b.id === keepBase) continue;
+      let tempIndex = b.order;
+      if (!b.order || orders.find((o) => o.order === tempIndex)) {
+        tempIndex = 1;
+        while (takenOrders.includes(tempIndex)) {
+          tempIndex++;
+        }
+      }
+      // use index as order if order is not set
+      orders.push({ id: b.id, order: tempIndex });
+    }
+
+    orders.sort((a, b) => a.order - b.order);
+    
+    // update order for bases
+    for (const [i, o] of Object.entries(orders)) {
+      const fnd = bases.find((b) => b.id === o.id);
+      if (fnd && (!fnd.order || fnd.order != parseInt(i) + 1)) {
+        await ncMeta.metaDelete(null, null, MetaTable.BASES, {
+          id: fnd.id,
+        });
+    
+        await NocoCache.deepDel(
+          CacheScope.BASE,
+          `${CacheScope.BASE}:${fnd.id}`,
+          CacheDelDirection.CHILD_TO_PARENT
+        );
+          
+        fnd.order = parseInt(i) + 1;
+    
+        const { id } = await ncMeta.metaInsert2(
+          fnd.project_id,
+          null,
+          MetaTable.BASES,
+          fnd
+        );
+
+        await NocoCache.appendToList(
+          CacheScope.BASE,
+          [fnd.project_id],
+          `${CacheScope.BASE}:${id}`
+        );
+
+        await NocoCache.set(`${CacheScope.BASE}:${id}`, fnd);
+      }
+    }
+  }
+
   public getConnectionConfig(): any {
     if (this.is_meta) {
       const metaConfig = Noco.getConfig()?.meta?.db;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 79828584c2..c007114e09 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -7262,6 +7262,12 @@
           },
           "inflection_table": {
             "type": "string"
+          },
+          "order": {
+            "type": "number"
+          },
+          "enabled": {
+            "type": "boolean"
           }
         }
       },

From b0695f5e0ed0d377a7821474f677bd5b8405994a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 8 Oct 2022 21:37:55 +0300
Subject: [PATCH 31/71] feat: draggable data sources

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        | 311 ++++++++++++------
 1 file changed, 204 insertions(+), 107 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index f0428acf74..7e335aab6d 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Draggable from 'vuedraggable'
 import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
 import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
@@ -64,9 +65,10 @@ async function loadMetaDiff() {
   }
 }
 
-const baseAction = (baseId: string, action: string) => {
+const baseAction = (baseId?: string, action?: string) => {
+  if (!baseId) return
   activeBaseId = baseId
-  vState.value = action
+  vState.value = action || ''
 }
 
 const deleteBase = (base: BaseType) => {
@@ -107,22 +109,26 @@ const toggleBase = async (base: BaseType, e: CheckboxChangeEvent) => {
   }
 }
 
-const moveBase = async (base: BaseType, direction: 'up' | 'down') => {
+const moveBase = async (e: any) => {
   try {
-    if (!base.order) {
-      // empty update call to reorder bases (migration)
-      await $api.base.update(base.project_id as string, base.id as string, {
-        id: base.id,
-        project_id: base.project_id,
-      })
-      message.info('Bases are migrated. Please try again.')
-    } else {
-      direction === 'up' ? base.order-- : base.order++
-      await $api.base.update(base.project_id as string, base.id as string, {
-        id: base.id,
-        project_id: base.project_id,
-        order: base.order,
-      })
+    if (e.oldIndex === e.newIndex) return
+    // sources list is mutated so we have to get the new index and mirror it to backend
+    const base = sources[e.newIndex]
+    if (base) {
+      if (!base.order) {
+        // empty update call to reorder bases (migration)
+        await $api.base.update(base.project_id as string, base.id as string, {
+          id: base.id,
+          project_id: base.project_id,
+        })
+        message.info('Bases are migrated. Please try again.')
+      } else {
+        await $api.base.update(base.project_id as string, base.id as string, {
+          id: base.id,
+          project_id: base.project_id,
+          order: e.newIndex + 1,
+        })
+      }
     }
     await loadProject()
     await loadBases()
@@ -174,104 +180,157 @@ watch(
 
 <template>
   <div class="flex flex-row w-full">
-    <div class="flex flex-col w-full">
-      <div v-if="vState === ''" class="max-h-600px overflow-y-auto">
-        <a-table
-          class="w-full"
-          size="small"
-          :custom-row="
-            (record) => ({
-              class: `nc-datasource-row nc-datasource-row-${record.table_name}`,
-            })
-          "
-          :data-source="sources ?? []"
-          :pagination="false"
-          :loading="vReload"
-          bordered
-        >
-          <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
-          <a-table-column key="enabled" data-index="enabled" :width="30">
-            <template #default="{ record }">
-              <div v-if="!record.is_meta" class="flex items-center gap-1">
-                <a-tooltip>
-                  <template #title>Show in UI</template>
-                  <a-checkbox :checked="record.enabled ? true : false" @change="toggleBase(record, $event)"></a-checkbox>
-                </a-tooltip>
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column key="order" width="60px">
-            <template #default="{ record, index }">
-              <div class="flex items-center gap-1 text-gray-600 font-light">
-                <MdiArrowUpBox
-                  v-if="!record.is_meta && index !== 1"
-                  class="text-lg group-hover:text-accent"
-                  @click="moveBase(record, 'up')"
-                />
-                <MdiArrowDownBox
-                  v-if="!record.is_meta && index !== sources.length - 1"
-                  class="text-lg group-hover:text-accent"
-                  @click="moveBase(record, 'down')"
-                />
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column key="alias" title="Name" data-index="alias">
-            <template #default="{ text, record }">
-              <div class="flex items-center gap-1">
-                <GeneralBaseLogo :base-type="record.type" />
-                {{ record.is_meta ? 'BASE' : text }} <span class="text-gray-400 text-xs">({{ record.type }})</span>
+    <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">
+          <div class="ds-table-row">
+            <div class="ds-table-col ds-table-enabled"></div>
+            <div class="ds-table-col ds-table-name">Name</div>
+            <div class="ds-table-col ds-table-actions">Actions</div>
+          </div>
+        </div>
+        <div class="ds-table-body">
+          <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
+            <template #header>
+              <div v-if="sources[0]" class="ds-table-row border-gray-200">
+                <div class="ds-table-col ds-table-enabled"></div>
+
+                <div class="ds-table-col ds-table-name">
+                  <div class="flex items-center gap-1">
+                    <GeneralBaseLogo :base-type="sources[0].type" />
+                    BASE
+                    <span class="text-gray-400 text-xs">({{ sources[0].type }})</span>
+                  </div>
+                </div>
+
+                <div class="ds-table-col ds-table-actions">
+                  <div class="flex items-center gap-2">
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <a-tooltip v-if="metadiffbases.includes(sources[0].id as string)">
+                          <template #title>Out of sync</template>
+                          <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
+                        </a-tooltip>
+                        <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                        Sync Metadata
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                        UI ACL
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                        ERD
+                      </div>
+                    </a-button>
+                    <a-button
+                      v-if="!sources[0].is_meta"
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiEditOutline class="text-lg group-hover:text-accent" />
+                        Edit
+                      </div>
+                    </a-button>
+                    <a-button
+                      v-if="!sources[0].is_meta"
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="deleteBase(sources[0])"
+                    >
+                      <div class="flex items-center gap-2 text-red-500 font-light">
+                        <MdiDeleteOutline class="text-lg group-hover:text-accent" />
+                        Delete
+                      </div>
+                    </a-button>
+                  </div>
+                </div>
               </div>
             </template>
-          </a-table-column>
-          <a-table-column key="action" :title="$t('labels.actions')" :width="180">
-            <template #default="{ record }">
-              <div class="flex items-center gap-2">
-                <a-button
-                  class="nc-action-btn cursor-pointer outline-0"
-                  @click="baseAction(record.id, DataSourcesSubTab.Metadata)"
-                >
-                  <div class="flex items-center gap-2 text-gray-600 font-light">
-                    <a-tooltip v-if="metadiffbases.includes(record.id)">
-                      <template #title>Out of sync</template>
-                      <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
+            <template #item="{ element: base, index }">
+              <div v-if="index !== 0" class="ds-table-row border-gray-200">
+                <div class="ds-table-col ds-table-enabled">
+                  <MdiDragVertical small class="ds-table-handle" />
+                  <div v-if="!base.is_meta" class="flex items-center gap-1">
+                    <a-tooltip>
+                      <template #title>Show in UI</template>
+                      <a-checkbox :checked="base.enabled ? true : false" @change="toggleBase(base, $event)"></a-checkbox>
                     </a-tooltip>
-                    <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
-                    Sync Metadata
-                  </div>
-                </a-button>
-                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.UIAcl)">
-                  <div class="flex items-center gap-2 text-gray-600 font-light">
-                    <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
-                    UI ACL
                   </div>
-                </a-button>
-                <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.ERD)">
-                  <div class="flex items-center gap-2 text-gray-600 font-light">
-                    <MdiGraphOutline class="text-lg group-hover:text-accent" />
-                    ERD
-                  </div>
-                </a-button>
-                <a-button
-                  v-if="!record.is_meta"
-                  class="nc-action-btn cursor-pointer outline-0"
-                  @click="baseAction(record.id, DataSourcesSubTab.Edit)"
-                >
-                  <div class="flex items-center gap-2 text-gray-600 font-light">
-                    <MdiEditOutline class="text-lg group-hover:text-accent" />
-                    Edit
+                </div>
+
+                <div class="ds-table-col ds-table-name">
+                  <div class="flex items-center gap-1">
+                    <GeneralBaseLogo :base-type="base.type" />
+                    {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
                   </div>
-                </a-button>
-                <a-button v-if="!record.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)">
-                  <div class="flex items-center gap-2 text-red-500 font-light">
-                    <MdiDeleteOutline class="text-lg group-hover:text-accent" />
-                    Delete
+                </div>
+
+                <div class="ds-table-col ds-table-actions">
+                  <div class="flex items-center gap-2">
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.Metadata)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <a-tooltip v-if="metadiffbases.includes(base.id as string)">
+                          <template #title>Out of sync</template>
+                          <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
+                        </a-tooltip>
+                        <MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
+                        Sync Metadata
+                      </div>
+                    </a-button>
+                    <a-button
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.UIAcl)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
+                        UI ACL
+                      </div>
+                    </a-button>
+                    <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)">
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiGraphOutline class="text-lg group-hover:text-accent" />
+                        ERD
+                      </div>
+                    </a-button>
+                    <a-button
+                      v-if="!base.is_meta"
+                      class="nc-action-btn cursor-pointer outline-0"
+                      @click="baseAction(base.id, DataSourcesSubTab.Edit)"
+                    >
+                      <div class="flex items-center gap-2 text-gray-600 font-light">
+                        <MdiEditOutline class="text-lg group-hover:text-accent" />
+                        Edit
+                      </div>
+                    </a-button>
+                    <a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)">
+                      <div class="flex items-center gap-2 text-red-500 font-light">
+                        <MdiDeleteOutline class="text-lg group-hover:text-accent" />
+                        Delete
+                      </div>
+                    </a-button>
                   </div>
-                </a-button>
+                </div>
               </div>
             </template>
-          </a-table-column>
-        </a-table>
+          </Draggable>
+        </div>
       </div>
       <div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
         <CreateBase :connection-type="clientType" @base-created="loadBases" />
@@ -291,3 +350,41 @@ watch(
     </div>
   </div>
 </template>
+
+<style>
+.ds-table-head {
+  @apply flex items-center border-t bg-gray-100 font-bold text-gray-500;
+}
+
+.ds-table-body {
+  @apply flex flex-col;
+}
+
+.ds-table-row {
+  @apply grid grid-cols-20 border-b w-full h-full border-l border-r;
+}
+
+.ds-table-col {
+  @apply flex items-center p-3 border-r-1 mr-2 h-50px;
+}
+
+.ds-table-enabled {
+  @apply col-span-1 w-full flex gap-2;
+}
+
+.ds-table-name {
+  @apply col-span-9;
+}
+
+.ds-table-actions {
+  @apply col-span-10;
+}
+
+.ds-table-col:last-child {
+  @apply border-r-0;
+}
+
+.ds-table-handle {
+  @apply cursor-pointer justify-self-start;
+}
+</style>

From 769656d6741f38dc3b74302c35ef6f0c9cb25de0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 10 Oct 2022 03:52:39 +0300
Subject: [PATCH 32/71] fix: show bases even if no tables are present

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index e9fd01985a..4809efa532 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -279,7 +279,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
               {{ $t('objects.tables') }}
 
-              <template v-if="tables?.length"> ({{ tables.length }}) </template>
+              ({{ tables.length || '0' }})
             </span>
           </Transition>
 
@@ -399,7 +399,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             </a-dropdown>
           </div>
 
-          <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
+          <div class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
               <div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
                 <div v-if="index === '0'">
@@ -640,7 +640,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             </div>
           </div>
 
-          <div v-else class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
+          <div v-if="!tables?.length" class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
             <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
           </div>
         </div>

From 3c99a3e79fdee57914f072969eaf5d7a9ebe0882 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 10 Oct 2022 03:53:07 +0300
Subject: [PATCH 33/71] feat: restrict deleting first base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/dashboard/settings/DataSources.vue      | 10 ----------
 packages/nocodb/src/lib/models/Base.ts                 |  4 ++++
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 7e335aab6d..8dc4251e81 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -246,16 +246,6 @@ watch(
                         Edit
                       </div>
                     </a-button>
-                    <a-button
-                      v-if="!sources[0].is_meta"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      @click="deleteBase(sources[0])"
-                    >
-                      <div class="flex items-center gap-2 text-red-500 font-light">
-                        <MdiDeleteOutline class="text-lg group-hover:text-accent" />
-                        Delete
-                      </div>
-                    </a-button>
                   </div>
                 </div>
               </div>
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index c41ef98473..fa32083828 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -289,6 +289,10 @@ export default class Base implements BaseType {
   }
 
   async delete(ncMeta = Noco.ncMeta) {
+    const bases = await Base.list({ projectId: this.project_id }, ncMeta);
+
+    if (bases[0].id === this.id) NcError.badRequest('Cannot delete first base');
+
     const models = await Model.list(
       {
         base_id: this.id,

From 78933be2810b2c6a3e89ee077629ed88fc750578 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 19 Oct 2022 20:22:22 +0300
Subject: [PATCH 34/71] fix: TreeView css

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 4809efa532..f4ab77189f 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -578,7 +578,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       :data-testid="`tree-view-table-${table.title}`"
                       @click="addTableTab(table)"
                     >
-                      <GeneralTooltip wrapper-class="pl-5 pr-3 py-2" modifier-key="Alt">
+                      <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
                         <template #title>{{ table.table_name }}</template>
                         <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">

From 4e5221437fc41cb1ab59bc1457de8aafa42c9e98 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 20 Oct 2022 12:44:10 +0300
Subject: [PATCH 35/71] fix: refresh data sources on sync metadata

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/settings/DataSources.vue | 2 +-
 packages/nc-gui/components/dashboard/settings/Metadata.vue    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8dc4251e81..57eed782eb 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -326,7 +326,7 @@ watch(
         <CreateBase :connection-type="clientType" @base-created="loadBases" />
       </div>
       <div v-else-if="vState === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto">
-        <Metadata :base-id="activeBaseId" />
+        <Metadata :base-id="activeBaseId" @base-synced="loadBases" />
       </div>
       <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
         <UIAcl :base-id="activeBaseId" />
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 092d0c02b9..937559eff7 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -5,6 +5,8 @@ const props = defineProps<{
   baseId: string
 }>()
 
+const emit = defineEmits(['baseSynced'])
+
 const { $api } = useNuxtApp()
 
 const { project, loadTables } = useProject()
@@ -47,6 +49,7 @@ async function syncMetaDiff() {
     message.info(t('msg.info.metaDataRecreated'))
     await loadTables()
     await loadMetaDiff()
+    emit('baseSynced')
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   } finally {

From 564e1f0c9475efdaab1776c9a5c7831cc7a9b1ee Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 20 Oct 2022 17:36:38 +0300
Subject: [PATCH 36/71] fix: hide base if no result for search query

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index f4ab77189f..97c14475fd 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -64,7 +64,9 @@ const tablesById = $computed(() =>
 )
 
 const filteredTables = $computed(() =>
-  tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
+  tables.value?.filter(
+    (table) => !searchActive.value || !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase()),
+  ),
 )
 
 const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
@@ -470,7 +472,15 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     </GeneralTooltip>
                   </div>
                 </div>
-                <a-collapse v-else v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" accordion ghost>
+                <a-collapse
+                  v-else
+                  v-model:activeKey="activeKey"
+                  :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
+                  expand-icon-position="right"
+                  :bordered="false"
+                  accordion
+                  ghost
+                >
                   <a-collapse-panel :key="index">
                     <template #header>
                       <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-weightd">

From aef6cecf3ac4c4f8ccd16d6a1307711d3ef18a13 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 20 Oct 2022 19:37:22 +0300
Subject: [PATCH 37/71] feat: improved show/hide base checkbox

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts               |  4 ++--
 .../dashboard/settings/DataSources.vue        | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 31adcb4637..ebd3191871 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -118,12 +118,10 @@ declare module '@vue/runtime-core' {
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiAppleKeyboardShift: typeof import('~icons/mdi/apple-keyboard-shift')['default']
     MdiArrowCollapse: typeof import('~icons/mdi/arrow-collapse')['default']
-    MdiArrowDownBox: typeof import('~icons/mdi/arrow-down-box')['default']
     MdiArrowDownDropCircle: typeof import('~icons/mdi/arrow-down-drop-circle')['default']
     MdiArrowDownDropCircleOutline: typeof import('~icons/mdi/arrow-down-drop-circle-outline')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
-    MdiArrowUpBox: typeof import('~icons/mdi/arrow-up-box')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
     MdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline')['default']
@@ -171,6 +169,8 @@ declare module '@vue/runtime-core' {
     MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeCircleOutline: typeof import('~icons/mdi/eye-circle-outline')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiEyeSettings: typeof import('~icons/mdi/eye-settings')['default']
+    MdiEyeSettingsOutline: typeof import('~icons/mdi/eye-settings-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 57eed782eb..d3d7a4a1ca 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
-import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
 import CreateBase from './data-sources/CreateBase.vue'
 import EditBase from './data-sources/EditBase.vue'
 import Metadata from './Metadata.vue'
@@ -95,9 +93,9 @@ const deleteBase = (base: BaseType) => {
   })
 }
 
-const toggleBase = async (base: BaseType, e: CheckboxChangeEvent) => {
+const toggleBase = async (base: BaseType, state: boolean) => {
   try {
-    base.enabled = e.target.checked
+    base.enabled = state
     await $api.base.update(base.project_id as string, base.id as string, {
       id: base.id,
       project_id: base.project_id,
@@ -256,8 +254,20 @@ watch(
                   <MdiDragVertical small class="ds-table-handle" />
                   <div v-if="!base.is_meta" class="flex items-center gap-1">
                     <a-tooltip>
-                      <template #title>Show in UI</template>
-                      <a-checkbox :checked="base.enabled ? true : false" @change="toggleBase(base, $event)"></a-checkbox>
+                      <template #title>
+                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-else>Show in UI</template>
+                      </template>
+                      <MdiEyeSettings
+                        v-if="base.enabled"
+                        class="text-lg text-primary outline-0"
+                        @click="toggleBase(base, false)"
+                      ></MdiEyeSettings>
+                      <MdiEyeSettingsOutline
+                        v-else
+                        class="text-lg text-red-500 outline-0"
+                        @click="toggleBase(base, true)"
+                      ></MdiEyeSettingsOutline>
                     </a-tooltip>
                   </div>
                 </div>

From ddd17e9229548b19543b5d82c09946239b2138bf Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 1 Nov 2022 10:33:55 +0300
Subject: [PATCH 38/71] feat: suffix base alias for duplicate tabs

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/composables/useTabs.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts
index 28982dc529..d08b322ec8 100644
--- a/packages/nc-gui/composables/useTabs.ts
+++ b/packages/nc-gui/composables/useTabs.ts
@@ -17,7 +17,7 @@ const [setup, use] = useInjectionState(() => {
 
   const router = useRouter()
 
-  const { tables } = useProject()
+  const { bases, tables } = useProject()
 
   const projectType = $computed(() => route.params.projectType as string)
 
@@ -33,12 +33,18 @@ const [setup, use] = useInjectionState(() => {
 
         if (!currentTable) return -1
 
+        const currentBase = bases.value.find((b) => b.id === currentTable.base_id)
+
         tab.id = currentTable.id
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
 
         tab.title = currentTable.title
 
+        // append base alias to tab title if duplicate titles exist on other bases
+        if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+          tab.title = `${tab.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
+
         if (index === -1) {
           tab.sortsState = tab.sortsState || new Map()
           tab.filterState = tab.filterState || new Map()
@@ -83,6 +89,13 @@ const [setup, use] = useInjectionState(() => {
     }
     // if tab not found add it
     else {
+      const currentTable = tables.value.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
+      const currentBase = bases.value.find((b) => b.id === currentTable?.base_id)
+
+      // append base alias to tab title if duplicate titles exist on other bases
+      if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
+        tabMeta.title = `${tabMeta.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
+
       tabs.value = [...(tabs.value || []), tabMeta]
       activeTabIndex.value = tabs.value.length - 1
     }

From 915c9abf5605d5240452d41f2e013d73794a4aca Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 1 Nov 2022 10:37:01 +0300
Subject: [PATCH 39/71] fix: handle exception for metaDiff api

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/meta/api/metaDiffApis.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 4a0d8f4d5a..4b9c6fc87e 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -541,9 +541,13 @@ export async function metaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
   let changes = []
   for (const base of project.bases) {
-    // @ts-ignore
-    const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-    changes = changes.concat(await getMetaDiff(sqlClient, project, base));
+    try {
+      // @ts-ignore
+      const sqlClient = NcConnectionMgrv2.getSqlClient(base);
+      changes = changes.concat(await getMetaDiff(sqlClient, project, base));
+    } catch (e) {
+      console.log(e);
+    }
   }
 
   res.json(changes);

From 3e1d2ee9ea26400131e46a224e0ab827705c9b5f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 1 Nov 2022 12:45:37 +0300
Subject: [PATCH 40/71] feat: allow hiding base zero

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 10 ++--
 .../dashboard/settings/DataSources.vue        | 53 +++++++++++++------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 97c14475fd..2d71d433ab 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -69,8 +69,6 @@ const filteredTables = $computed(() =>
   ),
 )
 
-const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
-
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -293,7 +291,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
         <div class="flex-1">
           <div
-            v-if="isUIAllowed('table-create')"
+            v-if="bases[0].enabled && isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
@@ -403,8 +401,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
-                <div v-if="index === '0'">
+              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+                <div v-if="index === '0' && base.enabled">
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"
                     :key="table.id"
@@ -473,7 +471,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   </div>
                 </div>
                 <a-collapse
-                  v-else
+                  v-else-if="base.enabled"
                   v-model:activeKey="activeKey"
                   :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
                   expand-icon-position="right"
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index d3d7a4a1ca..8e34878da5 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -182,17 +182,15 @@ watch(
       <div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
         <div class="ds-table-head">
           <div class="ds-table-row">
-            <div class="ds-table-col ds-table-enabled"></div>
             <div class="ds-table-col ds-table-name">Name</div>
             <div class="ds-table-col ds-table-actions">Actions</div>
+            <div class="ds-table-col ds-table-enabled">Show / Hide</div>
           </div>
         </div>
         <div class="ds-table-body">
           <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
             <template #header>
               <div v-if="sources[0]" class="ds-table-row border-gray-200">
-                <div class="ds-table-col ds-table-enabled"></div>
-
                 <div class="ds-table-col ds-table-name">
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="sources[0].type" />
@@ -246,33 +244,33 @@ watch(
                     </a-button>
                   </div>
                 </div>
-              </div>
-            </template>
-            <template #item="{ element: base, index }">
-              <div v-if="index !== 0" class="ds-table-row border-gray-200">
+
                 <div class="ds-table-col ds-table-enabled">
-                  <MdiDragVertical small class="ds-table-handle" />
-                  <div v-if="!base.is_meta" class="flex items-center gap-1">
+                  <div class="flex items-center gap-1 cursor-pointer">
                     <a-tooltip>
                       <template #title>
-                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-if="sources[0].enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
                       <MdiEyeSettings
-                        v-if="base.enabled"
+                        v-if="sources[0].enabled"
                         class="text-lg text-primary outline-0"
-                        @click="toggleBase(base, false)"
+                        @click="toggleBase(sources[0], false)"
                       ></MdiEyeSettings>
                       <MdiEyeSettingsOutline
                         v-else
                         class="text-lg text-red-500 outline-0"
-                        @click="toggleBase(base, true)"
+                        @click="toggleBase(sources[0], true)"
                       ></MdiEyeSettingsOutline>
                     </a-tooltip>
                   </div>
                 </div>
-
+              </div>
+            </template>
+            <template #item="{ element: base, index }">
+              <div v-if="index !== 0" class="ds-table-row border-gray-200">
                 <div class="ds-table-col ds-table-name">
+                  <MdiDragVertical small class="ds-table-handle" />
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="base.type" />
                     {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
@@ -327,6 +325,27 @@ watch(
                     </a-button>
                   </div>
                 </div>
+
+                <div class="ds-table-col ds-table-enabled">
+                  <div class="flex items-center gap-1 cursor-pointer">
+                    <a-tooltip>
+                      <template #title>
+                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-else>Show in UI</template>
+                      </template>
+                      <MdiEyeSettings
+                        v-if="base.enabled"
+                        class="text-lg text-primary outline-0"
+                        @click="toggleBase(base, false)"
+                      ></MdiEyeSettings>
+                      <MdiEyeSettingsOutline
+                        v-else
+                        class="text-lg text-red-500 outline-0"
+                        @click="toggleBase(base, true)"
+                      ></MdiEyeSettingsOutline>
+                    </a-tooltip>
+                  </div>
+                </div>
               </div>
             </template>
           </Draggable>
@@ -369,7 +388,7 @@ watch(
 }
 
 .ds-table-enabled {
-  @apply col-span-1 w-full flex gap-2;
+  @apply col-span-2 flex justify-center;
 }
 
 .ds-table-name {
@@ -377,7 +396,7 @@ watch(
 }
 
 .ds-table-actions {
-  @apply col-span-10;
+  @apply col-span-9;
 }
 
 .ds-table-col:last-child {
@@ -385,6 +404,6 @@ watch(
 }
 
 .ds-table-handle {
-  @apply cursor-pointer justify-self-start;
+  @apply cursor-pointer justify-self-start mr-2;
 }
 </style>

From 5dd76a436524bd1eb369c93a19f1ac8eadd16683 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 1 Nov 2022 12:45:49 +0300
Subject: [PATCH 41/71] fix: base reordering logic

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/models/Base.ts | 83 ++++++++++----------------
 1 file changed, 30 insertions(+), 53 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index fa32083828..9b206261c3 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -195,65 +195,42 @@ export default class Base implements BaseType {
 
   static async reorderBases(projectId: string, keepBase?: string, ncMeta = Noco.ncMeta) {
     const bases = await this.list({ projectId: projectId }, ncMeta);
-
-    // order list for bases
-    const orders = [];
-    const takenOrders = bases.map((base) => base.order);
     
     if (keepBase) {
-      bases.find((base) => {
-        if (base.id === keepBase) {
-          orders.push({ id: base.id, order: base.order });
-        }
-      });
-    }
-
-    for (const b of bases) {
-      if (b.id === keepBase) continue;
-      let tempIndex = b.order;
-      if (!b.order || orders.find((o) => o.order === tempIndex)) {
-        tempIndex = 1;
-        while (takenOrders.includes(tempIndex)) {
-          tempIndex++;
-        }
+      const kpBase = bases.splice(bases.indexOf(bases.find((base) => base.id === keepBase)), 1);
+      if (kpBase.length) {
+        bases.splice(kpBase[0].order - 1, 0, kpBase[0]);
       }
-      // use index as order if order is not set
-      orders.push({ id: b.id, order: tempIndex });
     }
 
-    orders.sort((a, b) => a.order - b.order);
-    
     // update order for bases
-    for (const [i, o] of Object.entries(orders)) {
-      const fnd = bases.find((b) => b.id === o.id);
-      if (fnd && (!fnd.order || fnd.order != parseInt(i) + 1)) {
-        await ncMeta.metaDelete(null, null, MetaTable.BASES, {
-          id: fnd.id,
-        });
-    
-        await NocoCache.deepDel(
-          CacheScope.BASE,
-          `${CacheScope.BASE}:${fnd.id}`,
-          CacheDelDirection.CHILD_TO_PARENT
-        );
-          
-        fnd.order = parseInt(i) + 1;
-    
-        const { id } = await ncMeta.metaInsert2(
-          fnd.project_id,
-          null,
-          MetaTable.BASES,
-          fnd
-        );
-
-        await NocoCache.appendToList(
-          CacheScope.BASE,
-          [fnd.project_id],
-          `${CacheScope.BASE}:${id}`
-        );
-
-        await NocoCache.set(`${CacheScope.BASE}:${id}`, fnd);
-      }
+    for (const [i, b] of Object.entries(bases)) {
+      await ncMeta.metaDelete(null, null, MetaTable.BASES, {
+        id: b.id,
+      });
+  
+      await NocoCache.deepDel(
+        CacheScope.BASE,
+        `${CacheScope.BASE}:${b.id}`,
+        CacheDelDirection.CHILD_TO_PARENT
+      );
+        
+      b.order = parseInt(i) + 1;
+  
+      const { id } = await ncMeta.metaInsert2(
+        b.project_id,
+        null,
+        MetaTable.BASES,
+        b
+      );
+
+      await NocoCache.appendToList(
+        CacheScope.BASE,
+        [b.project_id],
+        `${CacheScope.BASE}:${id}`
+      );
+
+      await NocoCache.set(`${CacheScope.BASE}:${id}`, b);
     }
   }
 

From 7835b7a4fd02f36ff38fecb2d019e12ef0a6fc4f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 09:48:24 +0300
Subject: [PATCH 42/71] fix: drop base_id fk restriction for audit table

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../src/lib/migrations/v2/nc_023_multiple_source.ts    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
index 25b6d84f3a..cc8b7dd713 100644
--- a/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
+++ b/packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts
@@ -1,4 +1,4 @@
-import Knex from 'knex';
+import { Knex } from 'knex';
 import { MetaTable } from '../../utils/globals';
 
 const up = async (knex: Knex) => {
@@ -11,6 +11,10 @@ const up = async (knex: Knex) => {
     table.boolean('enabled').defaultTo(true);
     table.float('order');
   });
+
+  await knex.schema.alterTable(MetaTable.AUDIT, (table) => {
+    table.dropForeign('base_id');
+  });
 };
 
 const down = async (knex) => {
@@ -22,6 +26,10 @@ const down = async (knex) => {
     table.dropColumn('enabled');
     table.dropColumn('order');
   });
+
+  await knex.schema.alterTable(MetaTable.AUDIT, (table) => {
+    table.foreign('base_id').references(`${MetaTable.BASES}.id`);
+  });
 };
 
 export { up, down };

From fbefe104e44f277b2973c092027d2982b62b9eea Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 10 Nov 2022 18:38:35 +0530
Subject: [PATCH 43/71] fix(test): Integrated multiple sources changes with
 playwright

---
 packages/nocodb/src/lib/models/Base.ts        | 38 ++++++---
 .../services/test/TestResetService/index.ts   |  6 +-
 tests/playwright/constants/index.ts           |  4 +-
 .../pages/Dashboard/Settings/Acl.ts           | 13 ++-
 .../pages/Dashboard/Settings/DataSources.ts   | 40 +++++++++
 .../pages/Dashboard/Settings/Erd.ts           | 12 +--
 .../pages/Dashboard/Settings/Metadata.ts      | 12 +--
 .../pages/Dashboard/Settings/Miscellaneous.ts |  8 +-
 .../pages/Dashboard/Settings/index.ts         | 17 ++--
 tests/playwright/pages/Dashboard/TreeView.ts  |  7 +-
 tests/playwright/tests/baseShare.spec.ts      |  9 +-
 tests/playwright/tests/erd.spec.ts            | 34 ++++----
 tests/playwright/tests/metaSync.spec.ts       | 83 ++++++++++---------
 tests/playwright/tests/rolesCreate.spec.ts    | 20 ++---
 tests/playwright/tests/rolesPreview.spec.ts   | 20 ++---
 15 files changed, 194 insertions(+), 129 deletions(-)
 create mode 100644 tests/playwright/pages/Dashboard/Settings/DataSources.ts

diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index 9b206261c3..804bc7eec4 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -66,7 +66,7 @@ export default class Base implements BaseType {
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
-    
+
     // call before reorder to update cache
     const returnBase = await this.get(id, ncMeta);
 
@@ -77,7 +77,12 @@ export default class Base implements BaseType {
 
   public static async updateBase(
     baseId: string,
-    base: BaseType & { id: string; projectId: string; created_at?; updated_at? },
+    base: BaseType & {
+      id: string;
+      projectId: string;
+      created_at?;
+      updated_at?;
+    },
     ncMeta = Noco.ncMeta
   ) {
     const oldBase = await Base.get(baseId, ncMeta);
@@ -107,7 +112,7 @@ export default class Base implements BaseType {
       'order',
       'enabled',
     ]);
-    
+
     if (insertObj.config) {
       insertObj.config = CryptoJS.AES.encrypt(
         JSON.stringify(base.config),
@@ -178,7 +183,7 @@ export default class Base implements BaseType {
       return new Base(baseData);
     });
   }
-  
+
   static async get(id: string, ncMeta = Noco.ncMeta): Promise<Base> {
     let baseData =
       id &&
@@ -193,11 +198,18 @@ export default class Base implements BaseType {
     return baseData && new Base(baseData);
   }
 
-  static async reorderBases(projectId: string, keepBase?: string, ncMeta = Noco.ncMeta) {
+  static async reorderBases(
+    projectId: string,
+    keepBase?: string,
+    ncMeta = Noco.ncMeta
+  ) {
     const bases = await this.list({ projectId: projectId }, ncMeta);
-    
+
     if (keepBase) {
-      const kpBase = bases.splice(bases.indexOf(bases.find((base) => base.id === keepBase)), 1);
+      const kpBase = bases.splice(
+        bases.indexOf(bases.find((base) => base.id === keepBase)),
+        1
+      );
       if (kpBase.length) {
         bases.splice(kpBase[0].order - 1, 0, kpBase[0]);
       }
@@ -208,15 +220,15 @@ export default class Base implements BaseType {
       await ncMeta.metaDelete(null, null, MetaTable.BASES, {
         id: b.id,
       });
-  
+
       await NocoCache.deepDel(
         CacheScope.BASE,
         `${CacheScope.BASE}:${b.id}`,
         CacheDelDirection.CHILD_TO_PARENT
       );
-        
+
       b.order = parseInt(i) + 1;
-  
+
       const { id } = await ncMeta.metaInsert2(
         b.project_id,
         null,
@@ -265,10 +277,12 @@ export default class Base implements BaseType {
     return Project.get(this.project_id, ncMeta);
   }
 
-  async delete(ncMeta = Noco.ncMeta) {
+  async delete(ncMeta = Noco.ncMeta, { force }: { force?: boolean } = {}) {
     const bases = await Base.list({ projectId: this.project_id }, ncMeta);
 
-    if (bases[0].id === this.id) NcError.badRequest('Cannot delete first base');
+    if (bases[0].id === this.id && !force) {
+      NcError.badRequest('Cannot delete first base');
+    }
 
     const models = await Model.list(
       {
diff --git a/packages/nocodb/src/lib/services/test/TestResetService/index.ts b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
index 020069e152..29725622d0 100644
--- a/packages/nocodb/src/lib/services/test/TestResetService/index.ts
+++ b/packages/nocodb/src/lib/services/test/TestResetService/index.ts
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import Project from '../../../models/Project';
 import NcConnectionMgrv2 from '../../../utils/common/NcConnectionMgrv2';
+import Noco from '../../../Noco';
 import resetMetaSakilaSqliteProject from './resetMetaSakilaSqliteProject';
 import resetMysqlSakilaProject from './resetMysqlSakilaProject';
 import resetPgSakilaProject from './resetPgSakilaProject';
@@ -111,8 +112,9 @@ export class TestResetService {
 
       const bases = await project.getBases();
 
-      if (bases.length > 0) {
-        await NcConnectionMgrv2.deleteAwait(bases[0]);
+      for (const base of bases) {
+        await NcConnectionMgrv2.deleteAwait(base);
+        await base.delete(Noco.ncMeta, { force: true });
       }
 
       await Project.delete(project.id);
diff --git a/tests/playwright/constants/index.ts b/tests/playwright/constants/index.ts
index 8f5c7e1f0e..c76cdafb5b 100644
--- a/tests/playwright/constants/index.ts
+++ b/tests/playwright/constants/index.ts
@@ -1,4 +1,6 @@
 const airtableApiKey = 'keyn1MR87qgyUsYg4';
 const airtableApiBase = 'https://airtable.com/shr4z0qmh6dg5s3eB';
 
-export { airtableApiKey, airtableApiBase };
+const defaultBaseName = 'Base';
+
+export { airtableApiKey, airtableApiBase, defaultBaseName };
diff --git a/tests/playwright/pages/Dashboard/Settings/Acl.ts b/tests/playwright/pages/Dashboard/Settings/Acl.ts
index 789cea9a72..0e0c2d0e97 100644
--- a/tests/playwright/pages/Dashboard/Settings/Acl.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Acl.ts
@@ -1,17 +1,16 @@
-import { expect, Locator } from '@playwright/test';
-import { SettingsPage } from '.';
 import BasePage from '../../Base';
+import { DataSourcesPage } from './DataSources';
 
 export class AclPage extends BasePage {
-  private readonly settings: SettingsPage;
+  readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-UI Access Control"]`);
+    return this.dataSources.get();
   }
 
   async toggle({ table, role }: { table: string; role: string }) {
diff --git a/tests/playwright/pages/Dashboard/Settings/DataSources.ts b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
new file mode 100644
index 0000000000..343bc2f132
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
@@ -0,0 +1,40 @@
+import { SettingsPage } from '.';
+import { defaultBaseName } from '../../../constants';
+import BasePage from '../../Base';
+import { AclPage } from './Acl';
+import { SettingsErdPage } from './Erd';
+import { MetaDataPage } from './Metadata';
+
+export class DataSourcesPage extends BasePage {
+  private readonly settings: SettingsPage;
+  readonly erd: SettingsErdPage;
+  readonly acl: AclPage;
+  readonly metaData: MetaDataPage;
+
+  constructor(settings: SettingsPage) {
+    super(settings.rootPage);
+    this.settings = settings;
+    this.erd = new SettingsErdPage(this);
+    this.acl = new AclPage(this);
+    this.metaData = new MetaDataPage(this);
+  }
+
+  get() {
+    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Data Sources"]`);
+  }
+
+  async openErd({ dataSourceName }: { dataSourceName: string }) {
+    await this.get().locator('.ds-table-row', { hasText: dataSourceName }).locator('button:has-text("ERD")').click();
+  }
+
+  async openAcl({ dataSourceName = defaultBaseName }: { dataSourceName?: string } = {}) {
+    await this.get().locator('.ds-table-row', { hasText: dataSourceName }).locator('button:has-text("UI ACL")').click();
+  }
+
+  async openMetaSync({ dataSourceName = defaultBaseName }: { dataSourceName?: string } = {}) {
+    await this.get()
+      .locator('.ds-table-row', { hasText: dataSourceName })
+      .locator('button:has-text("Sync Metadata")')
+      .click();
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Settings/Erd.ts b/tests/playwright/pages/Dashboard/Settings/Erd.ts
index 38f4fc633a..09e83ee154 100644
--- a/tests/playwright/pages/Dashboard/Settings/Erd.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Erd.ts
@@ -1,15 +1,15 @@
-import { SettingsPage } from '.';
 import { ErdBasePage } from '../commonBase/Erd';
+import { DataSourcesPage } from './DataSources';
 
 export class SettingsErdPage extends ErdBasePage {
-  readonly settings: SettingsPage;
+  readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.rootPage.locator(`[data-testid="nc-settings-subtab-ERD View"]`);
+    return this.dataSources.get();
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Settings/Metadata.ts b/tests/playwright/pages/Dashboard/Settings/Metadata.ts
index ee274b759c..803e6dfb65 100644
--- a/tests/playwright/pages/Dashboard/Settings/Metadata.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Metadata.ts
@@ -1,17 +1,17 @@
 import { expect } from '@playwright/test';
-import { SettingsPage } from '.';
 import BasePage from '../../Base';
+import { DataSourcesPage } from './DataSources';
 
 export class MetaDataPage extends BasePage {
-  private readonly settings: SettingsPage;
+  private readonly dataSources: DataSourcesPage;
 
-  constructor(settings: SettingsPage) {
-    super(settings.rootPage);
-    this.settings = settings;
+  constructor(dataSources: DataSourcesPage) {
+    super(dataSources.rootPage);
+    this.dataSources = dataSources;
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Metadata"]`);
+    return this.dataSources.get();
   }
 
   async clickReload() {
diff --git a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
index ad71c2d1b5..f97ffd747d 100644
--- a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
@@ -1,4 +1,3 @@
-import { expect } from '@playwright/test';
 import { SettingsPage } from '.';
 import BasePage from '../../Base';
 
@@ -15,6 +14,11 @@ export class MiscSettingsPage extends BasePage {
   }
 
   async clickShowM2MTables() {
-    await this.get().locator('input[type="checkbox"]').click();
+    const clickAction = this.get().locator('input[type="checkbox"]').click();
+    await this.waitForResponse({
+      uiAction: clickAction,
+      requestUrlPathToMatch: 'tables?includeM2M',
+      httpMethodsToMatch: ['GET'],
+    });
   }
 }
diff --git a/tests/playwright/pages/Dashboard/Settings/index.ts b/tests/playwright/pages/Dashboard/Settings/index.ts
index 9986981170..c46f55396f 100644
--- a/tests/playwright/pages/Dashboard/Settings/index.ts
+++ b/tests/playwright/pages/Dashboard/Settings/index.ts
@@ -1,18 +1,17 @@
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { AuditSettingsPage } from './Audit';
-import { SettingsErdPage } from './Erd';
-import { MetaDataPage } from './Metadata';
 import { AppStoreSettingsPage } from './AppStore';
 import { MiscSettingsPage } from './Miscellaneous';
 import { TeamsPage } from './Teams';
-import { AclPage } from './Acl';
+import { DataSourcesPage } from './DataSources';
 
 export enum SettingTab {
   TeamAuth = 'teamAndAuth',
   AppStore = 'appStore',
-  ProjectMetadata = 'projMetaData',
+  DataSources = 'dataSources',
   Audit = 'audit',
+  ProjectSettings = 'projectSettings',
 }
 
 export enum SettingsSubTab {
@@ -22,25 +21,19 @@ export enum SettingsSubTab {
 }
 
 export class SettingsPage extends BasePage {
-  private readonly dashboard: DashboardPage;
   readonly audit: AuditSettingsPage;
   readonly appStore: AppStoreSettingsPage;
-  readonly metaData: MetaDataPage;
   readonly miscellaneous: MiscSettingsPage;
-  readonly erd: SettingsErdPage;
+  readonly dataSources: DataSourcesPage;
   readonly teams: TeamsPage;
-  readonly acl: AclPage;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
-    this.dashboard = dashboard;
     this.audit = new AuditSettingsPage(this);
     this.appStore = new AppStoreSettingsPage(this);
-    this.metaData = new MetaDataPage(this);
     this.miscellaneous = new MiscSettingsPage(this);
-    this.erd = new SettingsErdPage(this);
+    this.dataSources = new DataSourcesPage(this);
     this.teams = new TeamsPage(this);
-    this.acl = new AclPage(this);
   }
 
   get() {
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 25efc080bc..38d14f725e 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -6,14 +6,12 @@ export class TreeViewPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly project: any;
   readonly quickImportButton: Locator;
-  readonly inviteTeamButton: Locator;
 
   constructor(dashboard: DashboardPage, project: any) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.project = project;
     this.quickImportButton = dashboard.get().locator('.nc-import-menu');
-    this.inviteTeamButton = dashboard.get().locator('.nc-share-base');
   }
 
   get() {
@@ -131,13 +129,14 @@ export class TreeViewPage extends BasePage {
     await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click();
   }
 
+  // todo: Break this into smaller methods
   async validateRoleAccess(param: { role: string }) {
     // Add new table button
     await expect(this.get().locator(`.nc-add-new-table`)).toHaveCount(param.role === 'creator' ? 1 : 0);
     // Import menu
     await expect(this.get().locator(`.nc-import-menu`)).toHaveCount(param.role === 'creator' ? 1 : 0);
-    // Invite Team button
-    await expect(this.get().locator(`.nc-share-base`)).toHaveCount(param.role === 'creator' ? 1 : 0);
+    // Team and Settings button
+    await expect(this.get().locator(`.nc-new-base`)).toHaveCount(param.role === 'creator' ? 1 : 0);
     // Right click context menu
     await this.get().locator(`.nc-project-tree-tbl-Country`).click({
       button: 'right',
diff --git a/tests/playwright/tests/baseShare.spec.ts b/tests/playwright/tests/baseShare.spec.ts
index 720d391ed3..656ef5846e 100644
--- a/tests/playwright/tests/baseShare.spec.ts
+++ b/tests/playwright/tests/baseShare.spec.ts
@@ -58,15 +58,18 @@ test.describe('Shared base', () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
 
-    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.gotoSettings();
+    await dashboard.settings.teams.clickInviteTeamBtn();
     await dashboard.settings.teams.toggleSharedBase({ toggle: true });
     await dashboard.settings.teams.sharedBaseRole({ role: 'editor' });
     let url = await dashboard.settings.teams.getSharedBaseUrl();
     await dashboard.settings.teams.closeInvite();
+    await dashboard.settings.close();
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link
     await dashboard.signOut();
+    await dashboard.rootPage.waitForTimeout(2000);
     // todo: Move this to a page object
     await dashboard.rootPage.goto(url);
 
@@ -81,11 +84,13 @@ test.describe('Shared base', () => {
     await projectPage.openProject({ title: context.project.title, withoutPrefix: true });
     await dashboard.closeTab({ title: 'Team & Auth' });
 
-    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.gotoSettings();
+    await dashboard.settings.teams.clickInviteTeamBtn();
     await dashboard.settings.teams.toggleSharedBase({ toggle: true });
     await dashboard.settings.teams.sharedBaseRole({ role: 'viewer' });
     url = await dashboard.settings.teams.getSharedBaseUrl();
     await dashboard.settings.teams.closeInvite();
+    await dashboard.settings.close();
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link
diff --git a/tests/playwright/tests/erd.spec.ts b/tests/playwright/tests/erd.spec.ts
index ac45036d61..4d4a5af20f 100644
--- a/tests/playwright/tests/erd.spec.ts
+++ b/tests/playwright/tests/erd.spec.ts
@@ -11,6 +11,7 @@ import { SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
 import setup from '../setup';
 import { isMysql, isPg, isSqlite } from '../setup/db';
 import { SettingsErdPage } from '../pages/Dashboard/Settings/Erd';
+import { defaultBaseName } from '../constants';
 
 test.describe('Erd', () => {
   let dashboard: DashboardPage;
@@ -35,15 +36,21 @@ test.describe('Erd', () => {
     }
   });
 
-  const enableMM = async () => {
-    await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.Miscellaneous });
+  const toggleMMAndOpenErd = async () => {
+    await dashboard.settings.selectTab({ tab: SettingTab.ProjectSettings, subTab: SettingsSubTab.Miscellaneous });
     await dashboard.settings.miscellaneous.clickShowM2MTables();
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.ERD });
+    await dashboard.settings.selectTab({ tab: SettingTab.DataSources });
+    await dashboard.settings.dataSources.openErd({
+      dataSourceName: defaultBaseName,
+    });
   };
 
   const openSettingsErd = async () => {
     await dashboard.gotoSettings();
-    await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.ERD });
+    await dashboard.settings.selectTab({ tab: SettingTab.DataSources });
+    await dashboard.settings.dataSources.openErd({
+      dataSourceName: defaultBaseName,
+    });
   };
 
   const openErdOfATable = async (tableName: string) => {
@@ -54,9 +61,9 @@ test.describe('Erd', () => {
 
   test('Verify default config, all columns disabled, only PK and FK disabled, Sql views and MM table option, junction table names', async () => {
     await openSettingsErd();
-    await enableMM();
+    await toggleMMAndOpenErd();
 
-    const erd: SettingsErdPage = dashboard.settings.erd;
+    const erd: SettingsErdPage = dashboard.settings.dataSources.erd;
 
     await erd.dbClickShowColumnNames();
 
@@ -219,7 +226,7 @@ test.describe('Erd', () => {
     await dashboard.grid.column.create({ title: 'test_column' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnName: 'test_column',
     });
@@ -242,7 +249,7 @@ test.describe('Erd', () => {
     });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnName: 'new_test_column',
     });
@@ -261,7 +268,7 @@ test.describe('Erd', () => {
     await dashboard.grid.column.delete({ title: 'new_test_column' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `country`,
       columnNameShouldNotExist: 'new_test_column',
     });
@@ -285,7 +292,7 @@ test.describe('Erd', () => {
     await dashboard.treeView.createTable({ title: 'Test' });
     // Verify in Settings ERD and table ERD
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNode({
+    await dashboard.settings.dataSources.erd.verifyNode({
       tableName: `Test`,
     });
     await dashboard.settings.close();
@@ -293,14 +300,13 @@ test.describe('Erd', () => {
     // Delete table and verify ERD
     await dashboard.treeView.deleteTable({ title: 'Test' });
     await openSettingsErd();
-    await dashboard.settings.erd.verifyNodeDoesNotExist({
+    await dashboard.settings.dataSources.erd.verifyNodeDoesNotExist({
       tableName: `Test`,
     });
 
     // Verify that `show mm table` option disabled will not trigger easter in ERD options
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.Miscellaneous });
-    await dashboard.settings.miscellaneous.clickShowM2MTables(); // disable
-    await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.ERD });
+    await dashboard.settings.dataSources.erd.dbClickShowColumnNames();
+    await dashboard.settings.dataSources.erd.verifyEasterEggNotShown();
     await dashboard.settings.close();
   });
 });
diff --git a/tests/playwright/tests/metaSync.spec.ts b/tests/playwright/tests/metaSync.spec.ts
index 7d2d34e837..2f50fd90bb 100644
--- a/tests/playwright/tests/metaSync.spec.ts
+++ b/tests/playwright/tests/metaSync.spec.ts
@@ -4,7 +4,6 @@ import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 import setup, { NcContext } from '../setup';
 import { isMysql, isPg, isSqlite, mysqlExec, pgExec, sqliteExec } from '../setup/db';
 
-// todo: Enable when view bug is fixed
 test.describe('Meta sync', () => {
   let dashboard: DashboardPage;
   let settings: SettingsPage;
@@ -33,30 +32,31 @@ test.describe('Meta sync', () => {
     test.setTimeout(process.env.CI ? 100000 : 70000);
 
     await dashboard.gotoSettings();
-    await settings.selectTab({ tab: SettingTab.ProjectMetadata });
+    await settings.selectTab({ tab: SettingTab.DataSources });
+    await settings.dataSources.openMetaSync();
 
     await dbExec(`CREATE TABLE table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
     await dbExec(`CREATE TABLE table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `table1`,
       state: 'New table',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: `table2`,
       state: 'New table',
     });
 
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: 'Table2',
       state: 'No change identified',
@@ -72,16 +72,16 @@ test.describe('Meta sync', () => {
           `ALTER TABLE table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`
         );
       }
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'New relation added',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -94,16 +94,16 @@ test.describe('Meta sync', () => {
         await dbExec(`ALTER TABLE table1 DROP FOREIGN KEY fk1`);
         await dbExec(`ALTER TABLE table1 DROP INDEX fk1_idx`);
       }
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'Relation removed',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -119,16 +119,16 @@ test.describe('Meta sync', () => {
       await dbExec(`ALTER TABLE table1 ADD COLUMN newCol INT`);
     }
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `Table1`,
       state: 'New column(newCol)',
     });
 
     //verify after sync
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
@@ -143,16 +143,16 @@ test.describe('Meta sync', () => {
       await dbExec(`ALTER TABLE table1 RENAME COLUMN newCol TO newColName`);
     }
 
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `Table1`,
       state: 'New column(newColName), Column removed(newCol)',
     });
 
     //verify after sync
-    await settings.metaData.sync();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.sync();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: 'Table1',
       state: 'No change identified',
@@ -162,16 +162,16 @@ test.describe('Meta sync', () => {
     // todo: Add for sqlite
     if (!isSqlite(context)) {
       await dbExec(`ALTER TABLE table1 DROP COLUMN newColName`);
-      await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.clickReload();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: `Table1`,
         state: 'Column removed(newColName)',
       });
 
       //verify after sync
-      await settings.metaData.sync();
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.sync();
+      await settings.dataSources.metaData.verifyRow({
         index: isPg(context) ? 21 : 16,
         model: 'Table1',
         state: 'No change identified',
@@ -181,51 +181,51 @@ test.describe('Meta sync', () => {
     // Delete table
     await dbExec(`DROP TABLE table1`);
     await dbExec(`DROP TABLE table2`);
-    await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 21 : 16,
       model: `table1`,
       state: 'Table removed',
     });
-    await settings.metaData.verifyRow({
+    await settings.dataSources.metaData.verifyRow({
       index: isPg(context) ? 22 : 17,
       model: `table2`,
       state: 'Table removed',
     });
 
     //verify after sync
-    await settings.metaData.sync();
+    await settings.dataSources.metaData.sync();
 
     if (isSqlite(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 16,
         model: 'CustomerList',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 17,
         model: 'FilmList',
         state: 'No change identified',
       });
     }
     if (isPg(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 21,
         model: 'ActorInfo',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 22,
         model: 'CustomerList',
         state: 'No change identified',
       });
     } else if (isMysql(context)) {
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 16,
         model: 'ActorInfo',
         state: 'No change identified',
       });
-      await settings.metaData.verifyRow({
+      await settings.dataSources.metaData.verifyRow({
         index: 17,
         model: 'CustomerList',
         state: 'No change identified',
@@ -242,10 +242,11 @@ test.describe('Meta sync', () => {
     );
 
     await dashboard.gotoSettings();
-    await settings.selectTab({ tab: SettingTab.ProjectMetadata });
+    await settings.selectTab({ tab: SettingTab.DataSources });
+    await settings.dataSources.openMetaSync();
 
-    await settings.metaData.clickReload();
-    await settings.metaData.sync();
+    await settings.dataSources.metaData.clickReload();
+    await settings.dataSources.metaData.sync();
     await settings.close();
 
     await dashboard.treeView.openTable({ title: 'Table1' });
diff --git a/tests/playwright/tests/rolesCreate.spec.ts b/tests/playwright/tests/rolesCreate.spec.ts
index 9fd25f7d95..79aa72649e 100644
--- a/tests/playwright/tests/rolesCreate.spec.ts
+++ b/tests/playwright/tests/rolesCreate.spec.ts
@@ -1,7 +1,7 @@
 import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
-import { SettingsPage, SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
+import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 import { SignupPage } from '../pages/SignupPage';
 import { ProjectsPage } from '../pages/ProjectsPage';
 
@@ -46,16 +46,16 @@ test.describe('User roles', () => {
     // configure access control
     await dashboard.gotoSettings();
     await settings.selectTab({
-      tab: SettingTab.ProjectMetadata,
-      subTab: SettingsSubTab.ACL,
+      tab: SettingTab.DataSources,
     });
-    await settings.acl.toggle({ table: 'Language', role: 'editor' });
-    await settings.acl.toggle({ table: 'Language', role: 'commenter' });
-    await settings.acl.toggle({ table: 'Language', role: 'viewer' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'editor' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'commenter' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'viewer' });
-    await settings.acl.save();
+    await settings.dataSources.openAcl();
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'viewer' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'viewer' });
+    await settings.dataSources.acl.save();
     await settings.close();
 
     // Role test
diff --git a/tests/playwright/tests/rolesPreview.spec.ts b/tests/playwright/tests/rolesPreview.spec.ts
index c60ba81dfe..0ecea16c31 100644
--- a/tests/playwright/tests/rolesPreview.spec.ts
+++ b/tests/playwright/tests/rolesPreview.spec.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
 import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
-import { SettingsPage, SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
+import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 
 const roles = ['Editor', 'Commenter', 'Viewer'];
 
@@ -30,16 +30,16 @@ test.describe('Preview Mode', () => {
     // configure access control
     await dashboard.gotoSettings();
     await settings.selectTab({
-      tab: SettingTab.ProjectMetadata,
-      subTab: SettingsSubTab.ACL,
+      tab: SettingTab.DataSources,
     });
-    await settings.acl.toggle({ table: 'Language', role: 'editor' });
-    await settings.acl.toggle({ table: 'Language', role: 'commenter' });
-    await settings.acl.toggle({ table: 'Language', role: 'viewer' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'editor' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'commenter' });
-    await settings.acl.toggle({ table: 'CustomerList', role: 'viewer' });
-    await settings.acl.save();
+    await settings.dataSources.openAcl();
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'Language', role: 'viewer' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'editor' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'commenter' });
+    await settings.dataSources.acl.toggle({ table: 'CustomerList', role: 'viewer' });
+    await settings.dataSources.acl.save();
     await settings.close();
 
     // Role test

From fb8c1b698ac18330143e1c27c670fcc6c404bf96 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 12:20:22 +0300
Subject: [PATCH 44/71] fix: avoid overlapped reload of bases

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/settings/DataSources.vue  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8e34878da5..0967ae6dc9 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -28,21 +28,23 @@ let sources = $ref<BaseType[]>([])
 let activeBaseId = $ref('')
 let metadiffbases = $ref<string[]>([])
 let clientType = $ref<ClientType>(ClientType.MYSQL)
+let isReloading = $ref(false)
 
 async function loadBases() {
   try {
     if (!project.value?.id) return
 
+    isReloading = true
     vReload.value = true
     const baseList = await $api.base.list(project.value?.id)
     if (baseList.bases.list && baseList.bases.list.length) {
       sources = baseList.bases.list
     }
-    loadMetaDiff()
   } catch (e) {
     console.error(e)
   } finally {
     vReload.value = false
+    isReloading = false
   }
 }
 
@@ -138,14 +140,16 @@ const moveBase = async (e: any) => {
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
+    await loadMetaDiff()
   }
 })
 
 watch(
   () => props.reload,
   async (reload) => {
-    if (reload) {
+    if (reload && !isReloading) {
       await loadBases()
+      await loadMetaDiff()
     }
   },
 )

From be63995ff9dbc29c82e05e1e86b273c78b057c2a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 13:11:01 +0300
Subject: [PATCH 45/71] fix: use checkbox instead of icons

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        | 28 ++++++-------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 0967ae6dc9..16c242143e 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -256,16 +256,10 @@ watch(
                         <template v-if="sources[0].enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
-                      <MdiEyeSettings
-                        v-if="sources[0].enabled"
-                        class="text-lg text-primary outline-0"
-                        @click="toggleBase(sources[0], false)"
-                      ></MdiEyeSettings>
-                      <MdiEyeSettingsOutline
-                        v-else
-                        class="text-lg text-red-500 outline-0"
-                        @click="toggleBase(sources[0], true)"
-                      ></MdiEyeSettingsOutline>
+                      <a-checkbox
+                        :checked="sources[0].enabled ? true : false"
+                        @change="toggleBase(sources[0], $event.target?.checked)"
+                      ></a-checkbox>
                     </a-tooltip>
                   </div>
                 </div>
@@ -337,16 +331,10 @@ watch(
                         <template v-if="base.enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
-                      <MdiEyeSettings
-                        v-if="base.enabled"
-                        class="text-lg text-primary outline-0"
-                        @click="toggleBase(base, false)"
-                      ></MdiEyeSettings>
-                      <MdiEyeSettingsOutline
-                        v-else
-                        class="text-lg text-red-500 outline-0"
-                        @click="toggleBase(base, true)"
-                      ></MdiEyeSettingsOutline>
+                      <a-checkbox
+                        :checked="base.enabled ? true : false"
+                        @change="toggleBase(base, $event.target?.checked)"
+                      ></a-checkbox>
                     </a-tooltip>
                   </div>
                 </div>

From c66558c552af84728d3175184404c8846512b0b0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 19:52:32 +0300
Subject: [PATCH 46/71] fix: update/delete base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nocodb/src/lib/models/Base.ts | 57 ++++++++++++--------------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index 804bc7eec4..8fb8f04184 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -12,6 +12,7 @@ import NocoCache from '../cache/NocoCache';
 import CryptoJS from 'crypto-js';
 import { extractProps } from '../meta/helpers/extractProps';
 import { NcError } from '../meta/helpers/catchError';
+import SyncSource from './SyncSource';
 
 // todo: hide credentials
 export default class Base implements BaseType {
@@ -89,18 +90,13 @@ export default class Base implements BaseType {
 
     if (!oldBase) NcError.badRequest('Wrong base id!');
 
-    await ncMeta.metaDelete(null, null, MetaTable.BASES, {
-      id: baseId,
-    });
-
     await NocoCache.deepDel(
       CacheScope.BASE,
       `${CacheScope.BASE}:${baseId}`,
       CacheDelDirection.CHILD_TO_PARENT
     );
 
-    const insertObj = extractProps(base, [
-      'id',
+    const updateObj = extractProps(base, [
       'alias',
       'config',
       'type',
@@ -112,42 +108,37 @@ export default class Base implements BaseType {
       'order',
       'enabled',
     ]);
-
-    if (insertObj.config) {
-      insertObj.config = CryptoJS.AES.encrypt(
+    
+    if (updateObj.config) {
+      updateObj.config = CryptoJS.AES.encrypt(
         JSON.stringify(base.config),
         Noco.getConfig()?.auth?.jwt?.secret
       ).toString();
     }
 
     // type property is undefined even if not provided
-    if (!insertObj.type) {
-      insertObj.type = oldBase.type;
+    if (!updateObj.type) {
+      updateObj.type = oldBase.type;
     }
 
-    // add missing (not updated) fields
-    const finalInsertObj = {
-      ...oldBase,
-      ...insertObj,
-    };
-
-    const { id } = await ncMeta.metaInsert2(
+    await ncMeta.metaUpdate(
       base.projectId,
       null,
       MetaTable.BASES,
-      finalInsertObj
+      updateObj,
+      oldBase.id
     );
 
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
-      `${CacheScope.BASE}:${id}`
+      `${CacheScope.BASE}:${oldBase.id}`
     );
 
     // call before reorder to update cache
-    const returnBase = await this.get(id, ncMeta);
+    const returnBase = await this.get(oldBase.id, ncMeta);
 
-    await this.reorderBases(base.projectId, id, ncMeta);
+    await this.reorderBases(base.projectId, returnBase.id, ncMeta);
 
     return returnBase;
   }
@@ -217,9 +208,6 @@ export default class Base implements BaseType {
 
     // update order for bases
     for (const [i, b] of Object.entries(bases)) {
-      await ncMeta.metaDelete(null, null, MetaTable.BASES, {
-        id: b.id,
-      });
 
       await NocoCache.deepDel(
         CacheScope.BASE,
@@ -229,20 +217,23 @@ export default class Base implements BaseType {
 
       b.order = parseInt(i) + 1;
 
-      const { id } = await ncMeta.metaInsert2(
+      await ncMeta.metaUpdate(
         b.project_id,
         null,
         MetaTable.BASES,
-        b
+        {
+          order: b.order
+        },
+        b.id
       );
-
+  
       await NocoCache.appendToList(
         CacheScope.BASE,
         [b.project_id],
-        `${CacheScope.BASE}:${id}`
+        `${CacheScope.BASE}:${b.id}`
       );
 
-      await NocoCache.set(`${CacheScope.BASE}:${id}`, b);
+      await NocoCache.set(`${CacheScope.BASE}:${b.id}`, b);
     }
   }
 
@@ -299,6 +290,12 @@ export default class Base implements BaseType {
       `${CacheScope.BASE}:${this.id}`,
       CacheDelDirection.CHILD_TO_PARENT
     );
+
+    const syncSources = await SyncSource.list(this.project_id, this.id, ncMeta);
+    for (const syncSource of syncSources) {
+      await SyncSource.delete(syncSource.id, ncMeta);
+    }
+
     return await ncMeta.metaDelete(null, null, MetaTable.BASES, this.id);
   }
 

From d89dd07a0f56610993acd0a8d9db76fba6025859 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 22:15:24 +0300
Subject: [PATCH 47/71] fix: table reordering

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 209 ++++++++++--------
 1 file changed, 113 insertions(+), 96 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 2d71d433ab..881c835e63 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -45,11 +45,11 @@ const [searchActive, toggleSearchActive] = useToggle()
 
 const toggleDialog = inject(ToggleDialogInj, () => {})
 
-let key = $ref(0)
+const keys = $ref<Record<string, number>>({})
 
 const activeKey = ref([])
 
-const menuRef = $ref<HTMLLIElement>()
+const menuRefs = $ref<HTMLLIElement[]>()
 
 let filterQuery = $ref('')
 
@@ -69,14 +69,18 @@ const filteredTables = $computed(() =>
   ),
 )
 
-let sortable: Sortable
+const sortables: Record<string, Sortable> = {}
 
 // todo: replace with vuedraggable
 const initSortable = (el: Element) => {
-  if (sortable) sortable.destroy()
-  sortable = Sortable.create(el as HTMLLIElement, {
+  const base_id = el.getAttribute('nc-base')
+  if (!base_id) return
+  if (sortables[base_id]) sortables[base_id].destroy()
+  Sortable.create(el as HTMLLIElement, {
     handle: '.nc-drag-icon',
     onEnd: async (evt) => {
+      const offset = tables.value.findIndex((table) => table.base_id === base_id)
+
       const { newIndex = 0, oldIndex = 0 } = evt
 
       const itemEl = evt.item as HTMLLIElement
@@ -106,10 +110,14 @@ const initSortable = (el: Element) => {
       }
 
       // update the order of the moved item
-      tables.value?.splice(newIndex, 0, ...tables.value?.splice(oldIndex, 1))
+      tables.value?.splice(newIndex + offset, 0, ...tables.value?.splice(oldIndex + offset, 1))
 
       // force re-render the list
-      key++
+      if (keys[base_id]) {
+        keys[base_id] = keys[base_id] + 1
+      } else {
+        keys[base_id] = 1
+      }
 
       // update the item order
       await $api.dbTable.reorder(item.id as string, {
@@ -121,8 +129,10 @@ const initSortable = (el: Element) => {
 }
 
 watchEffect(() => {
-  if (menuRef) {
-    initSortable(menuRef)
+  if (menuRefs) {
+    for (const menuRef of menuRefs) {
+      initSortable(menuRef)
+    }
   }
 })
 
@@ -353,21 +363,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                   <a-menu-divider class="my-0" />
 
-                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                    <a
-                      v-e="['e:datasource:import-request']"
-                      href="https://github.com/nocodb/nocodb/issues/2052"
-                      target="_blank"
-                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                    >
-                      <MdiOpenInNew class="group-hover:text-accent" />
-                      <!-- Request a data source you need? -->
-                      {{ $t('labels.requestDataSource') }}
-                    </a>
-                  </a-menu-item>
-
-                  <a-menu-divider class="my-0" />
-
                   <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
                     <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
                       <div class="color-transition nc-project-menu-item group">
@@ -394,15 +389,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       </div>
                     </a-menu-item>
                   </a-menu-item-group>
+
+                  <a-menu-divider class="my-0" />
+
+                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                    <a
+                      v-e="['e:datasource:import-request']"
+                      href="https://github.com/nocodb/nocodb/issues/2052"
+                      target="_blank"
+                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                    >
+                      <MdiOpenInNew class="group-hover:text-accent" />
+                      <!-- Request a data source you need? -->
+                      {{ $t('labels.requestDataSource') }}
+                    </a>
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
           </div>
 
           <div class="transition-height duration-200 overflow-hidden">
-            <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
-                <div v-if="index === '0' && base.enabled">
+            <div class="border-none sortable-list">
+              <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
+                <div
+                  v-if="index === '0' && base.enabled"
+                  ref="menuRefs"
+                  :key="`sortable-${base.id}-${keys[base.id || 0]}`"
+                  :nc-base="base.id"
+                >
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"
                     :key="table.id"
@@ -479,7 +494,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   accordion
                   ghost
                 >
-                  <a-collapse-panel :key="index">
+                  <a-collapse-panel :key="`collapse-${base.id}`">
                     <template #header>
                       <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-weightd">
                         <GeneralBaseLogo :base-type="base.type" />
@@ -572,75 +587,77 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         </template>
                       </a-dropdown>
                     </div>
-                    <div
-                      v-for="table of tables.filter((table) => table.base_id === base.id)"
-                      :key="table.id"
-                      v-e="['a:table:open']"
-                      :class="[
-                        { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
-                        `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                      ]"
-                      class="nc-tree-item text-sm cursor-pointer group"
-                      :data-order="table.order"
-                      :data-id="table.id"
-                      :data-testid="`tree-view-table-${table.title}`"
-                      @click="addTableTab(table)"
-                    >
-                      <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
-                        <template #title>{{ table.table_name }}</template>
-                        <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                            <MdiDragVertical
-                              v-if="isUIAllowed('treeview-drag-n-drop')"
-                              :class="`nc-child-draggable-icon-${table.title}`"
-                              class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                              @click.stop.prevent
-                            />
-
-                            <component
-                              :is="icon(table)"
-                              class="nc-view-icon text-xs"
-                              :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                            />
-                          </div>
-
-                          <div class="nc-tbl-title flex-1">
-                            <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                    <div ref="menuRefs" :key="`sortable-${base.id}-${keys[base.id || 0]}`" :nc-base="base.id">
+                      <div
+                        v-for="table of tables.filter((table) => table.base_id === base.id)"
+                        :key="table.id"
+                        v-e="['a:table:open']"
+                        :class="[
+                          { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
+                          `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                        ]"
+                        class="nc-tree-item text-sm cursor-pointer group"
+                        :data-order="table.order"
+                        :data-id="table.id"
+                        :data-testid="`tree-view-table-${table.title}`"
+                        @click="addTableTab(table)"
+                      >
+                        <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
+                          <template #title>{{ table.table_name }}</template>
+                          <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                            <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                              <MdiDragVertical
+                                v-if="isUIAllowed('treeview-drag-n-drop')"
+                                :class="`nc-child-draggable-icon-${table.title}`"
+                                class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                                @click.stop.prevent
+                              />
+
+                              <component
+                                :is="icon(table)"
+                                class="nc-view-icon text-xs"
+                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                              />
+                            </div>
+
+                            <div class="nc-tbl-title flex-1">
+                              <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                            </div>
+
+                            <a-dropdown
+                              v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                              :trigger="['click']"
+                              @click.stop
+                            >
+                              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
+
+                              <template #overlay>
+                                <a-menu class="!py-0 rounded text-sm">
+                                  <a-menu-item
+                                    v-if="isUIAllowed('table-rename')"
+                                    :data-testid="`sidebar-table-rename-${table.title}`"
+                                    @click="openRenameTableDialog(table, base.id)"
+                                  >
+                                    <div class="nc-project-menu-item">
+                                      {{ $t('general.rename') }}
+                                    </div>
+                                  </a-menu-item>
+
+                                  <a-menu-item
+                                    v-if="isUIAllowed('table-delete')"
+                                    :data-testid="`sidebar-table-delete-${table.title}`"
+                                    @click="deleteTable(table)"
+                                  >
+                                    <div class="nc-project-menu-item">
+                                      {{ $t('general.delete') }}
+                                    </div>
+                                  </a-menu-item>
+                                </a-menu>
+                              </template>
+                            </a-dropdown>
                           </div>
-
-                          <a-dropdown
-                            v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                            :trigger="['click']"
-                            @click.stop
-                          >
-                            <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
-
-                            <template #overlay>
-                              <a-menu class="!py-0 rounded text-sm">
-                                <a-menu-item
-                                  v-if="isUIAllowed('table-rename')"
-                                  :data-testid="`sidebar-table-rename-${table.title}`"
-                                  @click="openRenameTableDialog(table, base.id)"
-                                >
-                                  <div class="nc-project-menu-item">
-                                    {{ $t('general.rename') }}
-                                  </div>
-                                </a-menu-item>
-
-                                <a-menu-item
-                                  v-if="isUIAllowed('table-delete')"
-                                  :data-testid="`sidebar-table-delete-${table.title}`"
-                                  @click="deleteTable(table)"
-                                >
-                                  <div class="nc-project-menu-item">
-                                    {{ $t('general.delete') }}
-                                  </div>
-                                </a-menu-item>
-                              </a-menu>
-                            </template>
-                          </a-dropdown>
-                        </div>
-                      </GeneralTooltip>
+                        </GeneralTooltip>
+                      </div>
                     </div>
                   </a-collapse-panel>
                 </a-collapse>

From 453c7f36bccd59a8ce8331133a2fd797a766ccc4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 22:20:22 +0300
Subject: [PATCH 48/71] fix: change mysql icon

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts                   | 3 ++-
 packages/nc-gui/components/dashboard/TreeView.vue | 2 +-
 packages/nc-gui/components/general/BaseLogo.vue   | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index ebd3191871..d48defb626 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -67,6 +67,7 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
@@ -86,7 +87,7 @@ declare module '@vue/runtime-core' {
     IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default']
     IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
-    LogosMysql: typeof import('~icons/logos/mysql')['default']
+    LogosMysqlIcon: typeof import('~icons/logos/mysql-icon')['default']
     LogosPostgresql: typeof import('~icons/logos/postgresql')['default']
     LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
     LogosSwagger: typeof import('~icons/logos/swagger')['default']
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 881c835e63..b9c104c910 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -366,7 +366,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
                     <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
                       <div class="color-transition nc-project-menu-item group">
-                        <LogosMysql class="group-hover:text-accent" />
+                        <LogosMysqlIcon class="group-hover:text-accent" />
                         MySQL
                       </div>
                     </a-menu-item>
diff --git a/packages/nc-gui/components/general/BaseLogo.vue b/packages/nc-gui/components/general/BaseLogo.vue
index 2c3e3fcbe2..aad12fa922 100644
--- a/packages/nc-gui/components/general/BaseLogo.vue
+++ b/packages/nc-gui/components/general/BaseLogo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LogosMysql from '~icons/logos/mysql'
+import LogosMysqlIcon from '~icons/logos/mysql-icon'
 import LogosPostgresql from '~icons/logos/postgresql'
 import VscodeIconsFileTypeSqlite from '~icons/vscode-icons/file-type-sqlite'
 import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserver'
@@ -10,7 +10,7 @@ const { baseType } = defineProps<{ baseType?: string }>()
 const baseIcon = computed(() => {
   switch (baseType) {
     case ClientType.MYSQL:
-      return LogosMysql
+      return LogosMysqlIcon
     case ClientType.PG:
       return LogosPostgresql
     case ClientType.SQLITE:

From 67d57456661205ec7e950b418d36810d992d1a90 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 23:38:33 +0300
Subject: [PATCH 49/71] fix: TreeView base undefined check

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index b9c104c910..d42acb7807 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -301,7 +301,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
         <div class="flex-1">
           <div
-            v-if="bases[0].enabled && isUIAllowed('table-create')"
+            v-if="bases[0] && bases[0].enabled && isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
@@ -413,7 +413,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <div class="border-none sortable-list">
               <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
                 <div
-                  v-if="index === '0' && base.enabled"
+                  v-if="index === '0' && base && base.enabled"
                   ref="menuRefs"
                   :key="`sortable-${base.id}-${keys[base.id || 0]}`"
                   :nc-base="base.id"
@@ -486,7 +486,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   </div>
                 </div>
                 <a-collapse
-                  v-else-if="base.enabled"
+                  v-else-if="base && base.enabled"
                   v-model:activeKey="activeKey"
                   :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
                   expand-icon-position="right"

From 325c58fde72d7131e9d8e6216d0f3726b49a44f6 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 10 Nov 2022 23:39:42 +0300
Subject: [PATCH 50/71] fix: make ApiTokenManagement single root to allow prop
 inheritance

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../tabs/auth/ApiTokenManagement.vue          | 270 +++++++++---------
 1 file changed, 138 insertions(+), 132 deletions(-)

diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 1110093cec..e5333c988a 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -88,152 +88,158 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="showNewTokenModal"
-    :class="{ active: showNewTokenModal }"
-    :closable="false"
-    width="28rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-generate-token"
-  >
-    <div class="relative flex flex-col h-full">
-      <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
-        <template #icon>
-          <MaterialSymbolsCloseRounded class="flex mx-auto" />
-        </template>
-      </a-button>
-
-      <!-- Generate Token -->
-      <div class="flex flex-row justify-center w-full -mt-1 mb-3">
-        <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
-      </div>
+  <div>
+    <a-modal
+      v-model:visible="showNewTokenModal"
+      :class="{ active: showNewTokenModal }"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-generate-token"
+    >
+      <div class="relative flex flex-col h-full">
+        <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
+          <template #icon>
+            <MaterialSymbolsCloseRounded class="flex mx-auto" />
+          </template>
+        </a-button>
 
-      <!-- Description -->
-      <a-form
-        ref="form"
-        :model="selectedTokenData"
-        name="basic"
-        layout="vertical"
-        class="flex flex-col justify-center space-y-6"
-        no-style
-        autocomplete="off"
-        @finish="generateToken"
-      >
-        <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
-
-        <!-- Generate -->
-        <div class="flex flex-row justify-center">
-          <a-button type="primary" html-type="submit">
-            {{ $t('general.generate') }}
-          </a-button>
+        <!-- Generate Token -->
+        <div class="flex flex-row justify-center w-full -mt-1 mb-3">
+          <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
         </div>
-      </a-form>
-    </div>
-  </a-modal>
-
-  <a-modal
-    v-model:visible="showDeleteTokenModal"
-    :class="{ active: showDeleteTokenModal }"
-    :closable="false"
-    width="28rem"
-    centered
-    :footer="null"
-    wrap-class-name="nc-modal-delete-token"
-  >
-    <div class="flex flex-col h-full">
-      <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
-
-      <div class="flex mt-6 justify-center space-x-2">
-        <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
-        <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
-      </div>
-    </div>
-  </a-modal>
-
-  <div class="flex flex-col px-10 mt-6">
-    <div class="flex flex-row justify-end">
-      <div class="flex flex-row space-x-1">
-        <a-button size="middle" type="text" @click="loadApiTokens()">
-          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiReload class="text-gray-500" />
-            <div class="text-gray-500">{{ $t('general.reload') }}</div>
-          </div>
-        </a-button>
 
-        <!--        Add New Token -->
-        <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
-          <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiPlus />
-            <div>{{ $t('activity.newToken') }}</div>
+        <!-- Description -->
+        <a-form
+          ref="form"
+          :model="selectedTokenData"
+          name="basic"
+          layout="vertical"
+          class="flex flex-col justify-center space-y-6"
+          no-style
+          autocomplete="off"
+          @finish="generateToken"
+        >
+          <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+
+          <!-- Generate -->
+          <div class="flex flex-row justify-center">
+            <a-button type="primary" html-type="submit">
+              {{ $t('general.generate') }}
+            </a-button>
           </div>
-        </a-button>
+        </a-form>
       </div>
-    </div>
-
-    <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
-      <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
-        <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
-        <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
-        <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
+    </a-modal>
+
+    <a-modal
+      v-model:visible="showDeleteTokenModal"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-delete-token"
+    >
+      <div class="flex flex-col h-full">
+        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
+
+        <div class="flex mt-6 justify-center space-x-2">
+          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
+          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
+        </div>
       </div>
+    </a-modal>
+
+    <div class="flex flex-col px-10 mt-6">
+      <div class="flex flex-row justify-end">
+        <div class="flex flex-row space-x-1">
+          <a-button size="middle" type="text" @click="loadApiTokens()">
+            <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+              <MdiReload class="text-gray-500" />
+              <div class="text-gray-500">{{ $t('general.reload') }}</div>
+            </div>
+          </a-button>
 
-      <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
-        <div class="flex flex-row border-b-1 items-center px-2 py-2">
-          <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
-            {{ item.description }}
-          </div>
+          <!--        Add New Token -->
+          <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
+            <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+              <MdiPlus />
+              <div>{{ $t('activity.newToken') }}</div>
+            </div>
+          </a-button>
+        </div>
+      </div>
 
-          <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
-            <span v-if="item.show">{{ item.token }}</span>
-            <span v-else>****************************************</span>
-          </div>
+      <div v-if="tokensInfo" class="w-full flex flex-col mt-2 px-1">
+        <div class="flex flex-row border-b-1 text-gray-600 text-xs pb-2 pt-2">
+          <div class="flex w-4/10 pl-2">{{ $t('labels.description') }}</div>
+          <div class="flex w-4/10 justify-center">{{ $t('labels.token') }}</div>
+          <div class="flex w-2/10 justify-end pr-2">{{ $t('labels.action') }}</div>
+        </div>
 
-          <div class="flex flex-row w-2/10 justify-end">
-            <a-tooltip placement="bottom">
-              <template #title>
-                <span v-if="item.show"> {{ $t('general.hide') }} </span>
-                <span v-else> {{ $t('general.show') }} </span>
-              </template>
-
-              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
-                <template #icon>
-                  <MaterialSymbolsVisibilityOff v-if="item.show" class="flex mx-auto h-[1.1rem]" />
-                  <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
+        <div v-for="(item, index) in tokensInfo" :key="index" class="flex flex-col">
+          <div class="flex flex-row border-b-1 items-center px-2 py-2">
+            <div class="flex flex-row w-4/10 flex-wrap overflow-ellipsis">
+              {{ item.description }}
+            </div>
+
+            <div class="flex w-4/10 justify-center flex-wrap overflow-ellipsis">
+              <span v-if="item.show">{{ item.token }}</span>
+              <span v-else>****************************************</span>
+            </div>
+
+            <div class="flex flex-row w-2/10 justify-end">
+              <a-tooltip placement="bottom">
+                <template #title>
+                  <span v-if="item.show"> {{ $t('general.hide') }} </span>
+                  <span v-else> {{ $t('general.show') }} </span>
                 </template>
-              </a-button>
-            </a-tooltip>
 
-            <a-tooltip placement="bottom">
-              <template #title> {{ $t('general.copy') }} </template>
+                <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+                  <template #icon>
+                    <MaterialSymbolsVisibilityOff v-if="item.show" class="flex mx-auto h-[1.1rem]" />
+                    <MaterialSymbolsVisibility v-else class="flex mx-auto h-[1rem]" />
+                  </template>
+                </a-button>
+              </a-tooltip>
 
-              <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
-                <template #icon>
-                  <MdiContentCopy class="flex mx-auto h-[1rem]" />
-                </template>
-              </a-button>
-            </a-tooltip>
-
-            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-api-token-mgmt">
-              <div class="flex flex-row items-center">
-                <a-button type="text" class="!px-0">
-                  <div class="flex flex-row items-center h-[1.2rem]">
-                    <IcBaselineMoreVert />
-                  </div>
+              <a-tooltip placement="bottom">
+                <template #title> {{ $t('general.copy') }} </template>
+
+                <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
+                  <template #icon>
+                    <MdiContentCopy class="flex mx-auto h-[1rem]" />
+                  </template>
                 </a-button>
-              </div>
-
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item>
-                    <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
-                      <MdiDeleteOutline class="flex" />
-                      <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
+              </a-tooltip>
+
+              <a-dropdown
+                :trigger="['click']"
+                class="flex"
+                placement="bottomRight"
+                overlay-class-name="nc-dropdown-api-token-mgmt"
+              >
+                <div class="flex flex-row items-center">
+                  <a-button type="text" class="!px-0">
+                    <div class="flex flex-row items-center h-[1.2rem]">
+                      <IcBaselineMoreVert />
                     </div>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
+                  </a-button>
+                </div>
+
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item>
+                      <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
+                        <MdiDeleteOutline class="flex" />
+                        <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
+                      </div>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
           </div>
         </div>
       </div>

From fe3b87724cc361e46dbb5ba38cb94359b76240ce Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 11 Nov 2022 00:37:29 +0300
Subject: [PATCH 51/71] feat: multiple-source front end improvements

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        |  7 +++--
 .../components/dashboard/settings/Modal.vue   | 30 ++++++++++---------
 .../settings/data-sources/CreateBase.vue      |  8 ++---
 .../settings/data-sources/EditBase.vue        | 12 ++++----
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 16c242143e..6debc07779 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/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 {
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 9a8aabc5f4..018774e0e8 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/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>
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 019844cea6..ffeaf5fcdb 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/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) {
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 140753a625..c249077a11 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/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) {

From 6b38c35087d5d97a3c78f744c3d069f83f814279 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 12 Nov 2022 16:56:06 +0300
Subject: [PATCH 52/71] fix: implement latest playwright changes to
 multiple-source

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../playwright/pages/Dashboard/Settings/DataSources.ts |  2 +-
 .../pages/Dashboard/Settings/Miscellaneous.ts          |  2 +-
 tests/playwright/pages/Dashboard/index.ts              | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Settings/DataSources.ts b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
index 343bc2f132..1da4c02416 100644
--- a/tests/playwright/pages/Dashboard/Settings/DataSources.ts
+++ b/tests/playwright/pages/Dashboard/Settings/DataSources.ts
@@ -20,7 +20,7 @@ export class DataSourcesPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[data-nc="nc-settings-subtab-Data Sources"]`);
+    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Data Sources"]`);
   }
 
   async openErd({ dataSourceName }: { dataSourceName: string }) {
diff --git a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
index f97ffd747d..9e641f5314 100644
--- a/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Miscellaneous.ts
@@ -10,7 +10,7 @@ export class MiscSettingsPage extends BasePage {
   }
 
   get() {
-    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Miscellaneous"]`);
+    return this.settings.get().locator(`[data-testid="nc-settings-subtab-Misc"]`);
   }
 
   async clickShowM2MTables() {
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 6f70b854bf..847fac607f 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -115,9 +115,13 @@ export class DashboardPage extends BasePage {
     await this.get().getByTestId('grid-load-spinner').waitFor({ state: 'hidden' });
 
     if (mode === 'standard') {
-      await expect(this.rootPage).toHaveURL(
-        `/#/nc/${this.project.id}/${title === 'Team & Auth' ? 'auth' : `table/${title}`}`
-      );
+      if (title === 'Team & Auth') {
+        await expect(this.rootPage).toHaveURL(
+          `/#/nc/${this.project.id}/auth`
+        );
+      } else {
+        await expect(this.rootPage).toHaveURL(new RegExp(`#\/nc\/${this.project.id}\/table\/md_.{14}`));
+      }
     }
   }
 

From c5bcc0e32ef2cd7c5c3825175e5ac808c12b69c9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 12 Nov 2022 17:01:49 +0300
Subject: [PATCH 53/71] fix: drop duplicate ids

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue      | 2 +-
 packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue | 2 +-
 packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue  | 2 +-
 packages/nc-gui/pages/[projectType]/view/[viewId].vue          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 63142b14f2..d3032d4bd2 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -239,7 +239,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <NuxtLayout id="content">
+  <NuxtLayout>
     <template #sidebar>
       <a-layout-sider
         ref="sidebar"
diff --git a/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
index d4e4e9852a..d76cb8ac11 100644
--- a/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/gallery/[viewId]/index.vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>
diff --git a/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
index a87164c96b..6271f585e3 100644
--- a/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/kanban/[viewId]/index.vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index 0801ea6c89..c91c203d28 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
@@ -26,7 +26,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex" name="shared-view">
+  <NuxtLayout class="flex" name="shared-view">
     <div v-if="showPassword">
       <LazySharedViewAskPassword v-model="showPassword" />
     </div>

From f6da6113f5531676336160aa1d2bfce26ba52aaf Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 12 Nov 2022 17:17:00 +0300
Subject: [PATCH 54/71] fix: apps.vue disable sidebar

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/pages/index/apps.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/pages/index/apps.vue b/packages/nc-gui/pages/index/apps.vue
index 6780d02668..0e01a34033 100644
--- a/packages/nc-gui/pages/index/apps.vue
+++ b/packages/nc-gui/pages/index/apps.vue
@@ -7,6 +7,8 @@ definePageMeta({
   allowedRoles: [Role.Super],
   title: 'title.appStore',
 })
+
+useSidebar('nc-left-sidebar', { hasSidebar: false })
 </script>
 
 <template>

From 5791105a61d4c3c984899bc21784cd835c1d3604 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 13 Nov 2022 22:00:42 +0300
Subject: [PATCH 55/71] feat: awakened data sources

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../dashboard/settings/DataSources.vue        | 29 +++++++++++++++++--
 .../components/dashboard/settings/Modal.vue   | 13 ++++++++-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 6debc07779..1f0c7fa080 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -16,7 +16,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits(['update:state', 'update:reload'])
+const emits = defineEmits(['update:state', 'update:reload', 'awaken'])
 
 const vState = useVModel(props, 'state', emits)
 const vReload = useVModel(props, 'reload', emits)
@@ -29,6 +29,7 @@ let activeBaseId = $ref('')
 let metadiffbases = $ref<string[]>([])
 let clientType = $ref<ClientType>(ClientType.MYSQL)
 let isReloading = $ref(false)
+let forceAwakened = $ref(false)
 
 async function loadBases() {
   try {
@@ -138,6 +139,11 @@ const moveBase = async (e: any) => {
   }
 }
 
+const forceAwaken = () => {
+  forceAwakened = !forceAwakened
+  emits('awaken', forceAwakened)
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
@@ -155,6 +161,18 @@ watch(
   },
 )
 
+watch(
+  () => sources.length,
+  (l) => {
+    if (l > 1 && !forceAwakened) {
+      emits('awaken', false)
+    } else {
+      emits('awaken', true)
+    }
+  },
+  { immediate: true },
+)
+
 watch(
   vState,
   (newState) => {
@@ -175,6 +193,11 @@ watch(
         clientType = ClientType.MSSQL
         vState.value = DataSourcesSubTab.New
         break
+      case DataSourcesSubTab.New:
+        if (sources.length > 1 && !forceAwakened) {
+          vState.value = ''
+        }
+        break
     }
   },
   { immediate: true },
@@ -189,7 +212,7 @@ watch(
           <div class="ds-table-row">
             <div class="ds-table-col ds-table-name">Name</div>
             <div class="ds-table-col ds-table-actions">Actions</div>
-            <div class="ds-table-col ds-table-enabled">Show / Hide</div>
+            <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Show / Hide</div>
           </div>
         </div>
         <div class="ds-table-body">
@@ -269,7 +292,7 @@ watch(
             <template #item="{ element: base, index }">
               <div v-if="index !== 0" class="ds-table-row border-gray-200">
                 <div class="ds-table-col ds-table-name">
-                  <MdiDragVertical small class="ds-table-handle" />
+                  <MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" />
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="base.type" />
                     {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 018774e0e8..ccbef3b091 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -53,6 +53,8 @@ const { $e } = useNuxtApp()
 
 const dataSourcesReload = ref(false)
 
+const dataSourcesAwakened = ref(false)
+
 const tabsInfo: TabGroup = {
   teamAndAuth: {
     title: t('title.teamAndAuth'),
@@ -156,6 +158,10 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
 let selectedSubTabKeys = $ref<string[]>([firstKeyOfObject(selectedTab.subTabs)])
 const selectedSubTab = $computed(() => selectedTab.subTabs[selectedSubTabKeys[0]])
 
+const handleAwaken = (val: boolean) => {
+  dataSourcesAwakened.value = val
+}
+
 watch(
   () => selectedTabKeys[0],
   (newTabKey) => {
@@ -239,7 +245,11 @@ watch(
               <a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
             </a-breadcrumb>
             <div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
-              <a-button class="self-start nc-btn-new-datasource" @click="vDataState = DataSourcesSubTab.New">
+              <a-button
+                v-if="dataSourcesAwakened"
+                class="self-start nc-btn-new-datasource"
+                @click="vDataState = DataSourcesSubTab.New"
+              >
                 <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
                   <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
                   New
@@ -269,6 +279,7 @@ watch(
             v-model:reload="dataSourcesReload"
             class="px-2 pb-2"
             :data-testid="`nc-settings-subtab-${selectedSubTab.title}`"
+            @awaken="handleAwaken"
           />
           <component
             :is="selectedSubTab?.body"

From 3085d7283b3e1fea50cba73c4f82ecb19e0f7370 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 13 Nov 2022 22:01:39 +0300
Subject: [PATCH 56/71] fix: make base name bold

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index d42acb7807..393cfb4711 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -496,7 +496,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                 >
                   <a-collapse-panel :key="`collapse-${base.id}`">
                     <template #header>
-                      <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-weightd">
+                      <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-bold">
                         <GeneralBaseLogo :base-type="base.type" />
                         {{ base.alias || '' }}
                       </div>

From ceabd5b4c9d824019a81f3b0d5fa89b9a4b26509 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 14 Nov 2022 00:26:03 +0300
Subject: [PATCH 57/71] feat: bases panel

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 75 +++++++++++++------
 1 file changed, 52 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 393cfb4711..33f7bfc814 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -49,7 +49,7 @@ const keys = $ref<Record<string, number>>({})
 
 const activeKey = ref([])
 
-const menuRefs = $ref<HTMLLIElement[]>()
+const menuRefs = $ref<HTMLElement[] | HTMLElement>()
 
 let filterQuery = $ref('')
 
@@ -130,8 +130,10 @@ const initSortable = (el: Element) => {
 
 watchEffect(() => {
   if (menuRefs) {
-    for (const menuRef of menuRefs) {
-      initSortable(menuRef)
+    if (menuRefs instanceof HTMLElement) {
+      initSortable(menuRefs)
+    } else {
+      menuRefs.forEach((el) => initSortable(el))
     }
   }
 })
@@ -289,7 +291,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
               {{ $t('objects.tables') }}
 
-              ({{ tables.length || '0' }})
+              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
+                ({{ tables.filter((table) => table.base_id === bases[0].id).length }})
+              </template>
             </span>
           </Transition>
 
@@ -299,10 +303,10 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </Transition>
         </div>
 
-        <div class="flex-1">
+        <div :class="{ 'flex-1': bases.length < 2 }">
           <div
             v-if="bases[0] && bases[0].enabled && isUIAllowed('table-create')"
-            class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+            class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
             <MdiPlus />
@@ -411,15 +415,15 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div class="transition-height duration-200 overflow-hidden">
             <div class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
+              <div v-if="bases[0]" :key="`base-${bases[0].id}`">
                 <div
-                  v-if="index === '0' && base && base.enabled"
+                  v-if="bases[0] && bases[0].enabled"
                   ref="menuRefs"
-                  :key="`sortable-${base.id}-${keys[base.id || 0]}`"
-                  :nc-base="base.id"
+                  :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
+                  :nc-base="bases[0].id"
                 >
                   <div
-                    v-for="table of tables.filter((table) => table.base_id === base.id)"
+                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
@@ -432,7 +436,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     :data-testid="`tree-view-table-${table.title}`"
                     @click="addTableTab(table)"
                   >
-                    <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
+                    <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
@@ -463,7 +467,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                           <template #overlay>
                             <a-menu class="!py-0 rounded text-sm">
-                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, base.id)">
+                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
                                 <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
                                   {{ $t('general.rename') }}
                                 </div>
@@ -485,8 +489,32 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     </GeneralTooltip>
                   </div>
                 </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="!tables.filter((table) => table.base_id === bases[0].id)?.length"
+            class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50"
+          >
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+          </div>
+        </div>
+
+        <a-divider class="!my-2" style="height: 10px !important"></a-divider>
+
+        <div v-if="bases.length > 1" class="flex-1">
+          <div class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default" @contextmenu="setMenuContext('main')">
+            <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+              BASES ({{ bases.length - 1 }})
+            </span>
+          </div>
+
+          <div class="transition-height duration-200 overflow-hidden">
+            <div class="border-none sortable-list">
+              <div v-for="base of bases.slice(1)" :key="`base-${base.id}`">
                 <a-collapse
-                  v-else-if="base && base.enabled"
+                  v-if="base && base.enabled"
                   v-model:activeKey="activeKey"
                   :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
                   expand-icon-position="right"
@@ -496,14 +524,15 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                 >
                   <a-collapse-panel :key="`collapse-${base.id}`">
                     <template #header>
-                      <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-bold">
+                      <div class="flex items-center gap-2 text-gray-500 font-bold">
                         <GeneralBaseLogo :base-type="base.type" />
                         {{ base.alias || '' }}
+                        ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
                       </div>
                     </template>
                     <div
                       v-if="isUIAllowed('table-create')"
-                      class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                      class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
                       @click="openTableCreateDialog(base.id)"
                     >
                       <MdiPlus />
@@ -587,7 +616,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         </template>
                       </a-dropdown>
                     </div>
-                    <div ref="menuRefs" :key="`sortable-${base.id}-${keys[base.id || 0]}`" :nc-base="base.id">
+                    <div
+                      ref="menuRefs"
+                      :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
+                      :nc-base="base.id"
+                    >
                       <div
                         v-for="table of tables.filter((table) => table.base_id === base.id)"
                         :key="table.id"
@@ -602,7 +635,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         :data-testid="`tree-view-table-${table.title}`"
                         @click="addTableTab(table)"
                       >
-                        <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
+                        <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
                           <template #title>{{ table.table_name }}</template>
                           <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                             <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
@@ -664,10 +697,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
               </div>
             </div>
           </div>
-
-          <div v-if="!tables?.length" class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-          </div>
         </div>
       </div>
 
@@ -772,7 +801,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 }
 
 .nc-tree-item {
-  @apply relative  cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
+  @apply relative cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
 }
 
 .nc-tree-item svg {

From 8f74d5ae3da4f6392c0bbfe31f67673eb5dc7a8f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 14 Nov 2022 01:48:03 +0300
Subject: [PATCH 58/71] feat: change data sources show/hide checkbox to switch

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/dashboard/settings/DataSources.vue      | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 1f0c7fa080..86939b50c0 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -280,10 +280,7 @@ watch(
                         <template v-if="sources[0].enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
-                      <a-checkbox
-                        :checked="sources[0].enabled ? true : false"
-                        @change="toggleBase(sources[0], $event.target?.checked)"
-                      ></a-checkbox>
+                      <a-switch :checked="sources[0].enabled ? true : false" @change="toggleBase(sources[0], $event)" />
                     </a-tooltip>
                   </div>
                 </div>
@@ -355,10 +352,7 @@ watch(
                         <template v-if="base.enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
-                      <a-checkbox
-                        :checked="base.enabled ? true : false"
-                        @change="toggleBase(base, $event.target?.checked)"
-                      ></a-checkbox>
+                      <a-switch :checked="base.enabled ? true : false" @change="toggleBase(base, $event)" />
                     </a-tooltip>
                   </div>
                 </div>

From 35974ad5c68e154f9b5f087904f2d45d25515987 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 14 Nov 2022 02:12:53 +0300
Subject: [PATCH 59/71] feat: base show/hide improved handling

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 56 ++++++++++++++++---
 .../dashboard/settings/DataSources.vue        |  4 ++
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 33f7bfc814..35a7a372b0 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -278,7 +278,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   <div class="nc-treeview-container flex flex-col">
     <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
-        <div class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
+        <div
+          v-if="bases[0] && bases[0].enabled"
+          class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
+          @contextmenu="setMenuContext('main')"
+        >
           <Transition name="slide-left" mode="out-in">
             <a-input
               v-if="searchActive"
@@ -303,9 +307,15 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </Transition>
         </div>
 
-        <div :class="{ 'flex-1': bases.length < 2 }">
+        <div
+          v-if="bases[0] && bases[0].enabled"
+          :class="{
+            'flex-1': bases.length < 2,
+            'max-h-[50%] overflow-y-auto scrollbar-thin-dull': bases.slice(1).filter((el) => el.enabled)?.length,
+          }"
+        >
           <div
-            v-if="bases[0] && bases[0].enabled && isUIAllowed('table-create')"
+            v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
@@ -501,12 +511,44 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </div>
         </div>
 
-        <a-divider class="!my-2" style="height: 10px !important"></a-divider>
+        <a-divider
+          v-if="bases[0].enabled && bases.slice(1).filter((el) => el.enabled)?.length"
+          class="!my-2"
+          style="height: 10px !important"
+        ></a-divider>
 
-        <div v-if="bases.length > 1" class="flex-1">
-          <div class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default" @contextmenu="setMenuContext('main')">
+        <div v-if="bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
+          <div
+            v-if="!bases[0].enabled"
+            class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default"
+            @contextmenu="setMenuContext('main')"
+          >
+            <Transition name="slide-left" mode="out-in">
+              <a-input
+                v-if="searchActive"
+                :ref="searchInputRef"
+                v-model:value="filterQuery"
+                class="flex-1 rounded"
+                :placeholder="$t('placeholder.searchProjectTree')"
+              />
+
+              <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+                BASES ({{ bases.slice(1).filter((el) => el.enabled).length }})
+              </span>
+            </Transition>
+
+            <Transition name="layout" mode="out-in">
+              <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+              <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            </Transition>
+          </div>
+          <div
+            v-else
+            class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default"
+            @contextmenu="setMenuContext('main')"
+          >
             <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-              BASES ({{ bases.length - 1 }})
+              BASES ({{ bases.slice(1).filter((el) => el.enabled).length }})
             </span>
           </div>
 
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 86939b50c0..8852aae7e1 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -99,6 +99,10 @@ const deleteBase = (base: BaseType) => {
 
 const toggleBase = async (base: BaseType, state: boolean) => {
   try {
+    if (!state && sources.filter((src) => src.enabled).length < 2) {
+      message.info('There should be at least one enabled base!')
+      return
+    }
     base.enabled = state
     await $api.base.update(base.project_id as string, base.id as string, {
       id: base.id,

From b0b32dd4a4bf67b2114d133929504d56f4148ea3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 24 Nov 2022 16:15:03 +0300
Subject: [PATCH 60/71] fix: cellIcon for multiple source

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/Cell.vue           | 4 +++-
 packages/nc-gui/components/smartsheet/header/CellIcon.ts | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 753b92c374..a64d08d1b4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -82,7 +82,9 @@ const isLocked = inject(IsLockedInj, ref(false))
 
 const { currentRow } = useSmartsheetRowStoreOrThrow()
 
-const { sqlUi } = useProject()
+const { sqlUis } = useProject()
+
+const sqlUi = ref(column.value?.base_id ? sqlUis.value[column.value?.base_id] : Object.values(sqlUis.value)[0])
 
 const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 
diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index d550bdf77c..8e5b74035b 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -118,7 +118,9 @@ export default defineComponent({
 
     const column = inject(ColumnInj, columnMeta)
 
-    const { sqlUi } = useProject()
+    const { sqlUis } = useProject()
+
+    const sqlUi = ref(columnMeta.value?.base_id ? sqlUis.value[columnMeta.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 

From 0cbfd9f92e0d6b7267b1a7e5914af03f23b6d444 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 24 Nov 2022 16:15:33 +0300
Subject: [PATCH 61/71] feat: change treeview root to bases if more than one
 base

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 546 +++++++++++-------
 1 file changed, 325 insertions(+), 221 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 35a7a372b0..02d0446dc4 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -47,7 +47,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {})
 
 const keys = $ref<Record<string, number>>({})
 
-const activeKey = ref([])
+const activeKey = ref<string[]>([])
 
 const menuRefs = $ref<HTMLElement[] | HTMLElement>()
 
@@ -272,6 +272,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+onMounted(() => {
+  if (bases.value.filter((el) => el.enabled)[0]?.id)
+    activeKey.value.push(`collapse-${bases.value.filter((el) => el.enabled)[0].id}`)
+})
 </script>
 
 <template>
@@ -279,7 +284,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
         <div
-          v-if="bases[0] && bases[0].enabled"
+          v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length"
           class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
           @contextmenu="setMenuContext('main')"
         >
@@ -306,14 +311,36 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
         </div>
-
         <div
-          v-if="bases[0] && bases[0].enabled"
-          :class="{
-            'flex-1': bases.length < 2,
-            'max-h-[50%] overflow-y-auto scrollbar-thin-dull': bases.slice(1).filter((el) => el.enabled)?.length,
-          }"
+          v-else
+          class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
+          @contextmenu="setMenuContext('main')"
         >
+          <Transition name="slide-left" mode="out-in">
+            <a-input
+              v-if="searchActive"
+              :ref="searchInputRef"
+              v-model:value="filterQuery"
+              class="flex-1 rounded"
+              :placeholder="$t('placeholder.searchProjectTree')"
+            />
+
+            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+              BASES
+
+              <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
+                ({{ bases.filter((el) => el.enabled).length }})
+              </template>
+            </span>
+          </Transition>
+
+          <Transition name="layout" mode="out-in">
+            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+          </Transition>
+        </div>
+
+        <div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
           <div
             v-if="isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
@@ -511,232 +538,309 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
           </div>
         </div>
 
-        <a-divider
-          v-if="bases[0].enabled && bases.slice(1).filter((el) => el.enabled)?.length"
-          class="!my-2"
-          style="height: 10px !important"
-        ></a-divider>
+        <div v-else class="transition-height duration-200 overflow-hidden">
+          <div class="border-none sortable-list">
+            <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
+              <a-collapse
+                v-if="base && base.enabled"
+                v-model:activeKey="activeKey"
+                :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
+                expand-icon-position="right"
+                :bordered="false"
+                accordion
+                ghost
+              >
+                <a-collapse-panel :key="`collapse-${base.id}`">
+                  <template #header>
+                    <div v-if="index === '0'" class="flex items-center gap-2 text-gray-500 font-bold">
+                      <GeneralBaseLogo :base-type="base.type" />
+                      Default ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
+                    </div>
+                    <div v-else class="flex items-center gap-2 text-gray-500 font-bold">
+                      <GeneralBaseLogo :base-type="base.type" />
+                      {{ base.alias || '' }}
+                      ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
+                    </div>
+                  </template>
+                  <div
+                    v-if="index === '0' && isUIAllowed('table-create')"
+                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                    @click="openTableCreateDialog(bases[0].id)"
+                  >
+                    <MdiPlus />
 
-        <div v-if="bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
-          <div
-            v-if="!bases[0].enabled"
-            class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default"
-            @contextmenu="setMenuContext('main')"
-          >
-            <Transition name="slide-left" mode="out-in">
-              <a-input
-                v-if="searchActive"
-                :ref="searchInputRef"
-                v-model:value="filterQuery"
-                class="flex-1 rounded"
-                :placeholder="$t('placeholder.searchProjectTree')"
-              />
-
-              <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-                BASES ({{ bases.slice(1).filter((el) => el.enabled).length }})
-              </span>
-            </Transition>
-
-            <Transition name="layout" mode="out-in">
-              <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-              <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
-            </Transition>
-          </div>
-          <div
-            v-else
-            class="min-h-[36px] pb-1 px-3 flex w-full items-center gap-1 cursor-default"
-            @contextmenu="setMenuContext('main')"
-          >
-            <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-              BASES ({{ bases.slice(1).filter((el) => el.enabled).length }})
-            </span>
-          </div>
+                    <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
+                      $t('tooltip.addTable')
+                    }}</span>
 
-          <div class="transition-height duration-200 overflow-hidden">
-            <div class="border-none sortable-list">
-              <div v-for="base of bases.slice(1)" :key="`base-${base.id}`">
-                <a-collapse
-                  v-if="base && base.enabled"
-                  v-model:activeKey="activeKey"
-                  :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
-                  expand-icon-position="right"
-                  :bordered="false"
-                  accordion
-                  ghost
-                >
-                  <a-collapse-panel :key="`collapse-${base.id}`">
-                    <template #header>
-                      <div class="flex items-center gap-2 text-gray-500 font-bold">
-                        <GeneralBaseLogo :base-type="base.type" />
-                        {{ base.alias || '' }}
-                        ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
-                      </div>
-                    </template>
-                    <div
-                      v-if="isUIAllowed('table-create')"
-                      class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-                      @click="openTableCreateDialog(base.id)"
+                    <a-dropdown
+                      v-if="!isSharedBase"
+                      :trigger="['click']"
+                      overlay-class-name="nc-dropdown-import-menu"
+                      @click.stop
                     >
-                      <MdiPlus />
-
-                      <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
-                        $t('tooltip.addTable')
-                      }}</span>
-
-                      <a-dropdown
-                        v-if="!isSharedBase"
-                        :trigger="['click']"
-                        overlay-class-name="nc-dropdown-import-menu"
-                        @click.stop
-                      >
-                        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
-
-                        <template #overlay>
-                          <a-menu class="!py-0 rounded text-sm">
-                            <!--                  Quick Import From -->
-                            <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
-                              <a-menu-item
-                                v-if="isUIAllowed('airtableImport')"
-                                key="quick-import-airtable"
-                                @click="openAirtableImportDialog(base.id)"
-                              >
-                                <div class="color-transition nc-project-menu-item group">
-                                  <MdiTableLarge class="group-hover:text-accent" />
-                                  Airtable
-                                </div>
-                              </a-menu-item>
+                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
+
+                      <template #overlay>
+                        <a-menu class="!py-0 rounded text-sm">
+                          <!--                  Quick Import From -->
+                          <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
+                            <a-menu-item
+                              v-if="isUIAllowed('airtableImport')"
+                              key="quick-import-airtable"
+                              @click="openAirtableImportDialog(bases[0].id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiTableLarge class="group-hover:text-accent" />
+                                Airtable
+                              </div>
+                            </a-menu-item>
 
-                              <a-menu-item
-                                v-if="isUIAllowed('csvImport')"
-                                key="quick-import-csv"
-                                @click="openQuickImportDialog('csv', base.id)"
-                              >
-                                <div class="color-transition nc-project-menu-item group">
-                                  <MdiFileDocumentOutline class="group-hover:text-accent" />
-                                  CSV file
-                                </div>
-                              </a-menu-item>
+                            <a-menu-item
+                              v-if="isUIAllowed('csvImport')"
+                              key="quick-import-csv"
+                              @click="openQuickImportDialog('csv', bases[0].id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiFileDocumentOutline class="group-hover:text-accent" />
+                                CSV file
+                              </div>
+                            </a-menu-item>
 
-                              <a-menu-item
-                                v-if="isUIAllowed('jsonImport')"
-                                key="quick-import-json"
-                                @click="openQuickImportDialog('json', base.id)"
-                              >
-                                <div class="color-transition nc-project-menu-item group">
-                                  <MdiCodeJson class="group-hover:text-accent" />
-                                  JSON file
-                                </div>
-                              </a-menu-item>
+                            <a-menu-item
+                              v-if="isUIAllowed('jsonImport')"
+                              key="quick-import-json"
+                              @click="openQuickImportDialog('json', bases[0].id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiCodeJson class="group-hover:text-accent" />
+                                JSON file
+                              </div>
+                            </a-menu-item>
 
-                              <a-menu-item
-                                v-if="isUIAllowed('excelImport')"
-                                key="quick-import-excel"
-                                @click="openQuickImportDialog('excel', base.id)"
-                              >
-                                <div class="color-transition nc-project-menu-item group">
-                                  <MdiFileExcel class="group-hover:text-accent" />
-                                  Microsoft Excel
-                                </div>
-                              </a-menu-item>
-                            </a-menu-item-group>
+                            <a-menu-item
+                              v-if="isUIAllowed('excelImport')"
+                              key="quick-import-excel"
+                              @click="openQuickImportDialog('excel', bases[0].id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiFileExcel class="group-hover:text-accent" />
+                                Microsoft Excel
+                              </div>
+                            </a-menu-item>
+                          </a-menu-item-group>
 
-                            <a-menu-divider class="my-0" />
+                          <a-menu-divider class="my-0" />
 
-                            <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                              <a
-                                v-e="['e:datasource:import-request']"
-                                href="https://github.com/nocodb/nocodb/issues/2052"
-                                target="_blank"
-                                class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                              >
-                                <MdiOpenInNew class="group-hover:text-accent" />
-                                <!-- Request a data source you need? -->
-                                {{ $t('labels.requestDataSource') }}
-                              </a>
+                          <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
+                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
+                              <div class="color-transition nc-project-menu-item group">
+                                <LogosMysqlIcon class="group-hover:text-accent" />
+                                MySQL
+                              </div>
                             </a-menu-item>
-                          </a-menu>
-                        </template>
-                      </a-dropdown>
-                    </div>
-                    <div
-                      ref="menuRefs"
-                      :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
-                      :nc-base="base.id"
+                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
+                              <div class="color-transition nc-project-menu-item group">
+                                <LogosPostgresql class="group-hover:text-accent" />
+                                Postgres
+                              </div>
+                            </a-menu-item>
+                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
+                              <div class="color-transition nc-project-menu-item group">
+                                <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
+                                SQLite
+                              </div>
+                            </a-menu-item>
+                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
+                              <div class="color-transition nc-project-menu-item group">
+                                <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
+                                MSSQL
+                              </div>
+                            </a-menu-item>
+                          </a-menu-item-group>
+
+                          <a-menu-divider class="my-0" />
+
+                          <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                            <a
+                              v-e="['e:datasource:import-request']"
+                              href="https://github.com/nocodb/nocodb/issues/2052"
+                              target="_blank"
+                              class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                            >
+                              <MdiOpenInNew class="group-hover:text-accent" />
+                              <!-- Request a data source you need? -->
+                              {{ $t('labels.requestDataSource') }}
+                            </a>
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </div>
+                  <div
+                    v-else-if="isUIAllowed('table-create')"
+                    class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+                    @click="openTableCreateDialog(base.id)"
+                  >
+                    <MdiPlus />
+
+                    <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
+                      $t('tooltip.addTable')
+                    }}</span>
+
+                    <a-dropdown
+                      v-if="!isSharedBase"
+                      :trigger="['click']"
+                      overlay-class-name="nc-dropdown-import-menu"
+                      @click.stop
                     >
-                      <div
-                        v-for="table of tables.filter((table) => table.base_id === base.id)"
-                        :key="table.id"
-                        v-e="['a:table:open']"
-                        :class="[
-                          { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
-                          `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-                        ]"
-                        class="nc-tree-item text-sm cursor-pointer group"
-                        :data-order="table.order"
-                        :data-id="table.id"
-                        :data-testid="`tree-view-table-${table.title}`"
-                        @click="addTableTab(table)"
-                      >
-                        <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
-                          <template #title>{{ table.table_name }}</template>
-                          <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                            <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                              <MdiDragVertical
-                                v-if="isUIAllowed('treeview-drag-n-drop')"
-                                :class="`nc-child-draggable-icon-${table.title}`"
-                                class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                                @click.stop.prevent
-                              />
-
-                              <component
-                                :is="icon(table)"
-                                class="nc-view-icon text-xs"
-                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                              />
-                            </div>
-
-                            <div class="nc-tbl-title flex-1">
-                              <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
-                            </div>
-
-                            <a-dropdown
-                              v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                              :trigger="['click']"
-                              @click.stop
+                      <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
+
+                      <template #overlay>
+                        <a-menu class="!py-0 rounded text-sm">
+                          <!--                  Quick Import From -->
+                          <a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
+                            <a-menu-item
+                              v-if="isUIAllowed('airtableImport')"
+                              key="quick-import-airtable"
+                              @click="openAirtableImportDialog(base.id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiTableLarge class="group-hover:text-accent" />
+                                Airtable
+                              </div>
+                            </a-menu-item>
+
+                            <a-menu-item
+                              v-if="isUIAllowed('csvImport')"
+                              key="quick-import-csv"
+                              @click="openQuickImportDialog('csv', base.id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiFileDocumentOutline class="group-hover:text-accent" />
+                                CSV file
+                              </div>
+                            </a-menu-item>
+
+                            <a-menu-item
+                              v-if="isUIAllowed('jsonImport')"
+                              key="quick-import-json"
+                              @click="openQuickImportDialog('json', base.id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiCodeJson class="group-hover:text-accent" />
+                                JSON file
+                              </div>
+                            </a-menu-item>
+
+                            <a-menu-item
+                              v-if="isUIAllowed('excelImport')"
+                              key="quick-import-excel"
+                              @click="openQuickImportDialog('excel', base.id)"
+                            >
+                              <div class="color-transition nc-project-menu-item group">
+                                <MdiFileExcel class="group-hover:text-accent" />
+                                Microsoft Excel
+                              </div>
+                            </a-menu-item>
+                          </a-menu-item-group>
+
+                          <a-menu-divider class="my-0" />
+
+                          <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                            <a
+                              v-e="['e:datasource:import-request']"
+                              href="https://github.com/nocodb/nocodb/issues/2052"
+                              target="_blank"
+                              class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
                             >
-                              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
-
-                              <template #overlay>
-                                <a-menu class="!py-0 rounded text-sm">
-                                  <a-menu-item
-                                    v-if="isUIAllowed('table-rename')"
-                                    :data-testid="`sidebar-table-rename-${table.title}`"
-                                    @click="openRenameTableDialog(table, base.id)"
-                                  >
-                                    <div class="nc-project-menu-item">
-                                      {{ $t('general.rename') }}
-                                    </div>
-                                  </a-menu-item>
-
-                                  <a-menu-item
-                                    v-if="isUIAllowed('table-delete')"
-                                    :data-testid="`sidebar-table-delete-${table.title}`"
-                                    @click="deleteTable(table)"
-                                  >
-                                    <div class="nc-project-menu-item">
-                                      {{ $t('general.delete') }}
-                                    </div>
-                                  </a-menu-item>
-                                </a-menu>
-                              </template>
-                            </a-dropdown>
+                              <MdiOpenInNew class="group-hover:text-accent" />
+                              <!-- Request a data source you need? -->
+                              {{ $t('labels.requestDataSource') }}
+                            </a>
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </div>
+                  <div
+                    ref="menuRefs"
+                    :key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
+                    :nc-base="base.id"
+                  >
+                    <div
+                      v-for="table of tables.filter((table) => table.base_id === base.id)"
+                      :key="table.id"
+                      v-e="['a:table:open']"
+                      :class="[
+                        { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
+                        `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+                      ]"
+                      class="nc-tree-item text-sm cursor-pointer group"
+                      :data-order="table.order"
+                      :data-id="table.id"
+                      :data-testid="`tree-view-table-${table.title}`"
+                      @click="addTableTab(table)"
+                    >
+                      <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
+                        <template #title>{{ table.table_name }}</template>
+                        <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+                          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+                            <MdiDragVertical
+                              v-if="isUIAllowed('treeview-drag-n-drop')"
+                              :class="`nc-child-draggable-icon-${table.title}`"
+                              class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                              @click.stop.prevent
+                            />
+
+                            <component
+                              :is="icon(table)"
+                              class="nc-view-icon text-xs"
+                              :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                            />
                           </div>
-                        </GeneralTooltip>
-                      </div>
+
+                          <div class="nc-tbl-title flex-1">
+                            <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                          </div>
+
+                          <a-dropdown
+                            v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+                            :trigger="['click']"
+                            @click.stop
+                          >
+                            <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
+
+                            <template #overlay>
+                              <a-menu class="!py-0 rounded text-sm">
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-rename')"
+                                  :data-testid="`sidebar-table-rename-${table.title}`"
+                                  @click="openRenameTableDialog(table, base.id)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.rename') }}
+                                  </div>
+                                </a-menu-item>
+
+                                <a-menu-item
+                                  v-if="isUIAllowed('table-delete')"
+                                  :data-testid="`sidebar-table-delete-${table.title}`"
+                                  @click="deleteTable(table)"
+                                >
+                                  <div class="nc-project-menu-item">
+                                    {{ $t('general.delete') }}
+                                  </div>
+                                </a-menu-item>
+                              </a-menu>
+                            </template>
+                          </a-dropdown>
+                        </div>
+                      </GeneralTooltip>
                     </div>
-                  </a-collapse-panel>
-                </a-collapse>
-              </div>
+                  </div>
+                </a-collapse-panel>
+              </a-collapse>
             </div>
           </div>
         </div>

From 879dcee082a605b13ba8ed32843270489d004d97 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 24 Nov 2022 20:16:16 +0300
Subject: [PATCH 62/71] fix: shared view sqlUis

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/header/CellIcon.ts | 3 ++-
 packages/nc-gui/composables/useProject.ts                | 7 +++++--
 packages/nc-gui/composables/useSharedFormViewStore.ts    | 4 ++++
 packages/nc-gui/composables/useSharedView.ts             | 4 ++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
index 8e5b74035b..240689f238 100644
--- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts
@@ -19,6 +19,7 @@ import {
   isJSON,
   isPercent,
   isPhoneNumber,
+  isPrimaryKey,
   isRating,
   isSet,
   isSingleSelect,
@@ -120,7 +121,7 @@ export default defineComponent({
 
     const { sqlUis } = useProject()
 
-    const sqlUi = ref(columnMeta.value?.base_id ? sqlUis.value[columnMeta.value?.base_id] : Object.values(sqlUis.value)[0])
+    const sqlUi = ref(column.value?.base_id ? sqlUis.value[column.value?.base_id] : Object.values(sqlUis.value)[0])
 
     const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 3b318bc7a8..337b2ad5fc 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -42,7 +42,9 @@ const [setup, use] = useInjectionState(() => {
 
   const lastOpenedViewMap = ref<Record<string, string>>({})
 
-  const projectId = computed(() => route.params.projectId as string)
+  let forced_project_id: string | undefined
+
+  const projectId = computed(() => forced_project_id || (route.params.projectId as string))
 
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -104,7 +106,8 @@ const [setup, use] = useInjectionState(() => {
     }
   }
 
-  async function loadProject(withTheme = true) {
+  async function loadProject(withTheme = true, forced_id?: string) {
+    if (forced_id) forced_project_id = forced_id
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 036b2fd02f..e3f371c987 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -43,6 +43,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   const { metas, setMeta } = useMetas()
 
+  const { loadProject } = useProject()
+
   const { t } = useI18n()
 
   const formState = ref<Record<string, any>>({})
@@ -84,6 +86,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       await setMeta(viewMeta.model)
 
+      await loadProject(true, viewMeta.project_id)
+
       const relatedMetas = { ...viewMeta.relatedMetas }
 
       Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index eba45ac353..b0ddc867db 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -17,6 +17,8 @@ export function useSharedView() {
 
   const { appInfo } = $(useGlobal())
 
+  const { loadProject } = useProject()
+
   const appInfoDefaultLimit = appInfo.defaultLimit || 25
 
   const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: appInfoDefaultLimit }))
@@ -71,6 +73,8 @@ export function useSharedView() {
 
     await setMeta(viewMeta.model)
 
+    await loadProject(true, viewMeta.project_id)
+
     const relatedMetas = { ...viewMeta.relatedMetas }
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }

From 91968ba6bef358b22e2ea0f3aa0b90a10b3d9c2e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 29 Nov 2022 19:23:04 +0300
Subject: [PATCH 63/71] fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/TimePicker.vue            | 2 +-
 packages/nc-gui/components/dashboard/settings/Modal.vue   | 4 +---
 .../dashboard/settings/data-sources/CreateBase.vue        | 7 ++++---
 .../dashboard/settings/data-sources/EditBase.vue          | 7 ++++---
 packages/nc-gui/composables/useProject.ts                 | 8 ++++----
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue | 2 +-
 packages/nc-gui/pages/index/index/create-external.vue     | 4 ++--
 packages/nc-gui/utils/projectCreateUtils.ts               | 8 ++++----
 packages/nocodb-sdk/src/lib/Api.ts                        | 4 +++-
 packages/nocodb/src/lib/meta/api/metaDiffApis.ts          | 2 +-
 packages/nocodb/src/lib/models/Base.ts                    | 4 +---
 11 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 1d9f8fe7c6..23f6af1919 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index ccbef3b091..5f563dc0b9 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -3,14 +3,12 @@ import type { FunctionalComponent, SVGAttributes } from 'vue'
 import AppStore from './AppStore.vue'
 import DataSources from './DataSources.vue'
 import Misc from './Misc.vue'
-import { useNuxtApp } from '#app'
-import { useI18n, useUIPermission, useVModel, watch } from '#imports'
+import { DataSourcesSubTab, useI18n, useNuxtApp, useUIPermission, useVModel, watch } from '#imports'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
 import TeamFillIcon from '~icons/ri/team-fill'
 import MultipleTableIcon from '~icons/mdi/table-multiple'
 import NotebookOutline from '~icons/mdi/notebook-outline'
 import FolderCog from '~icons/mdi/folder-cog'
-import { DataSourcesSubTab } from '~~/lib'
 
 interface Props {
   modelValue: boolean
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 ffeaf5fcdb..af1562ebd1 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
 import { Form, Modal, message } from 'ant-design-vue'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { ProjectCreateForm } from '#imports'
 import {
   CertTypes,
+  ClientType,
+  DefaultConnection,
+  SQLiteConnection,
   SSLUsage,
   clientTypes,
   computed,
@@ -21,9 +25,6 @@ import {
   useNuxtApp,
   watch,
 } from '#imports'
-import { ClientType } from '~/lib'
-import { DefaultConnection, SQLiteConnection } from '~/utils'
-import type { ProjectCreateForm } from '~/utils'
 
 const { connectionType } = defineProps<{ connectionType: ClientType }>()
 
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 c249077a11..c22b1eb751 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
@@ -2,8 +2,12 @@
 import type { BaseType } from 'nocodb-sdk'
 import { Form, Modal, message } from 'ant-design-vue'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { ProjectCreateForm } from '#imports'
 import {
   CertTypes,
+  ClientType,
+  DefaultConnection,
+  SQLiteConnection,
   SSLUsage,
   clientTypes,
   computed,
@@ -20,9 +24,6 @@ import {
   useNuxtApp,
   watch,
 } from '#imports'
-import { ClientType } from '~/lib'
-import { DefaultConnection, SQLiteConnection } from '~/utils'
-import type { ProjectCreateForm } from '~/utils'
 
 const props = defineProps<{
   baseId: string
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 337b2ad5fc..5f97cc7434 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -42,9 +42,9 @@ const [setup, use] = useInjectionState(() => {
 
   const lastOpenedViewMap = ref<Record<string, string>>({})
 
-  let forced_project_id: string | undefined
+  let forcedProjectId: string | undefined
 
-  const projectId = computed(() => forced_project_id || (route.params.projectId as string))
+  const projectId = computed(() => forcedProjectId || (route.params.projectId as string))
 
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -106,8 +106,8 @@ const [setup, use] = useInjectionState(() => {
     }
   }
 
-  async function loadProject(withTheme = true, forced_id?: string) {
-    if (forced_id) forced_project_id = forced_id
+  async function loadProject(withTheme = true, forcedId?: string) {
+    if (forcedId) forcedProjectId = forcedId
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index d3032d4bd2..0bb3f2972f 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -568,7 +568,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       </a-layout-sider>
     </template>
 
-    <div :key="$route.fullPath.split('?')[0]">
+    <div>
       <LazyDashboardSettingsModal
         v-model:model-value="dialogOpen"
         v-model:open-key="openDialogKey"
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index f612c417b1..58ae4ea4c1 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
+import type { DefaultConnection, ProjectCreateForm } from '#imports'
 import {
   CertTypes,
+  ClientType,
   Form,
   Modal,
   SSLUsage,
@@ -25,8 +27,6 @@ import {
   useSidebar,
   watch,
 } from '#imports'
-import { ClientType } from '~/lib'
-import type { DefaultConnection, ProjectCreateForm } from '~/utils'
 
 const useForm = Form.useForm
 
diff --git a/packages/nc-gui/utils/projectCreateUtils.ts b/packages/nc-gui/utils/projectCreateUtils.ts
index 94133d5bbd..112ad19ab7 100644
--- a/packages/nc-gui/utils/projectCreateUtils.ts
+++ b/packages/nc-gui/utils/projectCreateUtils.ts
@@ -1,6 +1,6 @@
 import { ClientType } from '~/lib'
 
-export interface ProjectCreateForm {
+interface ProjectCreateForm {
   title: string
   dataSource: {
     client: ClientType
@@ -15,7 +15,7 @@ export interface ProjectCreateForm {
   extraParameters: { key: string; value: string }[]
 }
 
-export interface DefaultConnection {
+interface DefaultConnection {
   host: string
   database: string
   user: string
@@ -24,7 +24,7 @@ export interface DefaultConnection {
   ssl?: Record<CertTypes, string> | 'no-verify' | 'true'
 }
 
-export interface SQLiteConnection {
+interface SQLiteConnection {
   client: ClientType.SQLITE
   database: string
   connection: {
@@ -187,4 +187,4 @@ enum CertTypes {
   key = 'key',
 }
 
-export { SSLUsage, CertTypes }
+export { SSLUsage, CertTypes, ProjectCreateForm, DefaultConnection, SQLiteConnection }
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 34a9ce8385..375375a358 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -1978,7 +1978,9 @@ export class Api<
      */
     create: (
       projectId: string,
-      data: BaseType & { external?: boolean },
+      data: BaseType & {
+        external?: boolean;
+      },
       params: RequestParams = {}
     ) =>
       this.request<BaseType, any>({
diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 4b9c6fc87e..7f31c60534 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -559,7 +559,7 @@ export async function baseMetaDiff(req, res) {
   let changes = []
 
   const sqlClient = NcConnectionMgrv2.getSqlClient(base);
-  changes = changes.concat(await getMetaDiff(sqlClient, project, base));
+  changes = await getMetaDiff(sqlClient, project, base);
 
   res.json(changes);
 }
diff --git a/packages/nocodb/src/lib/models/Base.ts b/packages/nocodb/src/lib/models/Base.ts
index 8fb8f04184..8dc170eeae 100644
--- a/packages/nocodb/src/lib/models/Base.ts
+++ b/packages/nocodb/src/lib/models/Base.ts
@@ -165,9 +165,7 @@ export default class Base implements BaseType {
     }
 
     baseDataList.sort(
-      (a, b) =>
-        (a.order != null ? a.order : Infinity) -
-        (b.order != null ? b.order : Infinity)
+      (a, b) =>  (a.order ?? Infinity) - (b.order ?? Infinity)
     );
 
     return baseDataList?.map((baseData) => {

From e8f19809b7959b447b62823be750a4b68d491a78 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 29 Nov 2022 22:02:44 +0300
Subject: [PATCH 64/71] feat: auto-expand bases in TreeView

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 02d0446dc4..10a5d9fbff 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -273,10 +273,23 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   }
 })
 
-onMounted(() => {
-  if (bases.value.filter((el) => el.enabled)[0]?.id)
-    activeKey.value.push(`collapse-${bases.value.filter((el) => el.enabled)[0].id}`)
-})
+watch(
+  activeTable,
+  (value, oldValue) => {
+    if (value) {
+      if (value !== oldValue) {
+        const fndTable = tables.value.find((el) => el.id === value)
+        if (fndTable) {
+          activeKey.value = [`collapse-${fndTable.base_id}`]
+        }
+      }
+    } else {
+      if (bases.value.filter((el) => el.enabled)[0]?.id)
+        activeKey.value = [`collapse-${bases.value.filter((el) => el.enabled)[0].id}`]
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

From 77aa171451b24c282db1a43ea87a6b89ad5851a6 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 2 Dec 2022 20:12:04 +0300
Subject: [PATCH 65/71] fix: loadBases if not loaded before handling state in
 DataSources

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/settings/DataSources.vue     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8852aae7e1..30d81a867f 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -179,7 +179,10 @@ watch(
 
 watch(
   vState,
-  (newState) => {
+  async (newState) => {
+    if (!sources.length) {
+      await loadBases()
+    }
     switch (newState) {
       case ClientType.MYSQL:
         clientType = ClientType.MYSQL

From 7e0261705d1434ea93aabade49f45fc62e98d7f3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 2 Dec 2022 20:12:38 +0300
Subject: [PATCH 66/71] fix: TreeView scroll

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 10a5d9fbff..ea16fc5b26 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -463,7 +463,7 @@ watch(
             </a-dropdown>
           </div>
 
-          <div class="transition-height duration-200 overflow-hidden">
+          <div class="transition-height duration-200">
             <div class="border-none sortable-list">
               <div v-if="bases[0]" :key="`base-${bases[0].id}`">
                 <div
@@ -551,7 +551,7 @@ watch(
           </div>
         </div>
 
-        <div v-else class="transition-height duration-200 overflow-hidden">
+        <div v-else class="transition-height duration-200">
           <div class="border-none sortable-list">
             <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
               <a-collapse

From f3a054bae6e0835eff40e0b99ec821e876a9b931 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 2 Dec 2022 20:37:27 +0300
Subject: [PATCH 67/71] fix: move base operations dropdown to root level

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 84 ++++++++++++-------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index ea16fc5b26..bd7fbb1ffc 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -340,17 +340,68 @@ watch(
 
             <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
               BASES
-
               <template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
                 ({{ bases.filter((el) => el.enabled).length }})
               </template>
             </span>
           </Transition>
 
-          <Transition name="layout" mode="out-in">
+          <Transition name="slide-right" mode="out-in">
             <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
             <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
           </Transition>
+
+          <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
+            <Transition name="slide-right" mode="out-in">
+              <MdiDotsVertical v-if="!searchActive" class="hover:text-accent outline-0" />
+            </Transition>
+
+            <template #overlay>
+              <a-menu class="!py-0 rounded text-sm">
+                <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <LogosMysqlIcon class="group-hover:text-accent" />
+                      MySQL
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <LogosPostgresql class="group-hover:text-accent" />
+                      Postgres
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
+                      SQLite
+                    </div>
+                  </a-menu-item>
+                  <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
+                    <div class="color-transition nc-project-menu-item group">
+                      <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
+                      MSSQL
+                    </div>
+                  </a-menu-item>
+                </a-menu-item-group>
+
+                <a-menu-divider class="my-0" />
+
+                <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                  <a
+                    v-e="['e:datasource:import-request']"
+                    href="https://github.com/nocodb/nocodb/issues/2052"
+                    target="_blank"
+                    class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                  >
+                    <MdiOpenInNew class="group-hover:text-accent" />
+                    <!-- Request a data source you need? -->
+                    {{ $t('labels.requestDataSource') }}
+                  </a>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
         </div>
 
         <div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
@@ -645,35 +696,6 @@ watch(
 
                           <a-menu-divider class="my-0" />
 
-                          <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
-                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <LogosMysqlIcon class="group-hover:text-accent" />
-                                MySQL
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <LogosPostgresql class="group-hover:text-accent" />
-                                Postgres
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
-                                SQLite
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
-                              <div class="color-transition nc-project-menu-item group">
-                                <SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
-                                MSSQL
-                              </div>
-                            </a-menu-item>
-                          </a-menu-item-group>
-
-                          <a-menu-divider class="my-0" />
-
                           <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
                             <a
                               v-e="['e:datasource:import-request']"

From 38fa085f08ab3614075ad6d618bb4e2310bd3426 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 2 Dec 2022 20:37:46 +0300
Subject: [PATCH 68/71] feat: expand all bases while searching

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index bd7fbb1ffc..45947b5a76 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -240,9 +240,18 @@ function openTableCreateDialog(baseId?: string) {
 
 const searchInputRef: VNodeRef = (vnode: typeof Input) => vnode?.$el?.focus()
 
+const beforeSearch = ref<string[]>([])
+
 const onSearchCloseIconClick = () => {
   filterQuery = ''
   toggleSearchActive(false)
+  activeKey.value = beforeSearch.value
+}
+
+const onSearchIconClick = () => {
+  beforeSearch.value = activeKey.value
+  toggleSearchActive(true)
+  activeKey.value = bases.value.filter((el) => el.enabled).map((el) => `collapse-${el.id}`)
 }
 
 const isCreateTableAllowed = computed(
@@ -348,7 +357,7 @@ watch(
 
           <Transition name="slide-right" mode="out-in">
             <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
           </Transition>
 
           <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
@@ -611,7 +620,7 @@ watch(
                 :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
                 expand-icon-position="right"
                 :bordered="false"
-                accordion
+                :accordion="!searchActive"
                 ghost
               >
                 <a-collapse-panel :key="`collapse-${base.id}`">

From a986984bae36a12e6d7309f7c07a5f517031a7be Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 2 Dec 2022 20:58:25 +0300
Subject: [PATCH 69/71] feat: add share base button to top right

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/general/ShareBaseButton.vue | 15 +++++++++------
 .../[projectType]/[projectId]/index/index.vue     |  1 +
 .../playwright/pages/Dashboard/Settings/Teams.ts  |  4 ++++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index b010809848..3d9088e684 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -37,13 +37,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)" @click="showUserModal = true">
+  <div class="flex items-center h-full" @click="showUserModal = true">
     <div v-if="isShareBaseAllowed">
-      <div class="flex items-center space-x-1">
-        <MdiAccountPlusOutline class="mr-1 nc-share-base" />
-
-        <div>{{ $t('activity.inviteTeam') }}</div>
-      </div>
+      <a-tooltip placement="left">
+        <template #title>
+          <span class="text-xs">{{ $t('activity.inviteTeam') }}</span>
+        </template>
+        <div class="flex items-center space-x-1 cursor-pointer">
+          <MdiAccountPlusOutline class="mr-1 nc-share-base text-gray-300 hover:text-accent" />
+        </div>
+      </a-tooltip>
     </div>
 
     <LazyTabsAuthUserManagementUsersModal :show="showUserModal" @closed="showUserModal = false" />
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index a2f5ab7d0a..8b5d7709d2 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -75,6 +75,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           </div>
         </div>
 
+        <LazyGeneralShareBaseButton />
         <LazyGeneralFullScreen class="nc-fullscreen-icon" />
       </div>
 
diff --git a/tests/playwright/pages/Dashboard/Settings/Teams.ts b/tests/playwright/pages/Dashboard/Settings/Teams.ts
index 581bc5d698..0bc59edaef 100644
--- a/tests/playwright/pages/Dashboard/Settings/Teams.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Teams.ts
@@ -28,6 +28,10 @@ export class TeamsPage extends BasePage {
     return this.rootPage.getByTestId('nc-share-base-sub-modal');
   }
 
+  async clickInviteTeamBtn() {
+    await this.inviteTeamBtn.click();
+  }
+
   async invite({ email, role, skipOpeningModal }: { email: string; role: string; skipOpeningModal?: boolean }) {
     email = this.prefixEmail(email);
 

From afbbdf212586f95b4c559e656dafde1286c2ce8d Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Sat, 3 Dec 2022 10:39:42 +0000
Subject: [PATCH 70/71] New translations en.json (French)

---
 packages/nc-gui/lang/fr.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/lang/fr.json b/packages/nc-gui/lang/fr.json
index 8af806bd15..f9b4a99fa9 100644
--- a/packages/nc-gui/lang/fr.json
+++ b/packages/nc-gui/lang/fr.json
@@ -248,7 +248,7 @@
     "sqlOutput": "Sortie SQL",
     "addOption": "Ajouter une option",
     "qrCodeValueColumn": "Column with QR code value",
-    "qrCodeValueTooLong": "Too many characters for a QR code",
+    "qrCodeValueTooLong": "Trop de caractères pour un code QR",
     "aggregateFunction": "Fonction agrégée",
     "dbCreateIfNotExists": "Base de données : la créer si elle n'existe pas",
     "clientKey": "Clé client",
@@ -276,11 +276,11 @@
     "childColumn": "Colonne enfant",
     "onUpdate": "Mise à jour en cours",
     "onDelete": "Suppression en cours",
-    "account": "Account",
+    "account": "Compte",
     "language": "Language",
     "primaryColor": "Primary Color",
     "accentColor": "Accent Color",
-    "customTheme": "Custom Theme",
+    "customTheme": "Thème personnalisé",
     "requestDataSource": "Request a data source you need?",
     "apiKey": "Clé d'API",
     "sharedBase": "Shared Base",
@@ -304,8 +304,8 @@
     "commentsOnly": "Comments only",
     "documentation": "Documentation",
     "subscribeNewsletter": "Subscribe to our weekly newsletter",
-    "signUpWithGoogle": "Sign up with Google",
-    "signInWithGoogle": "Sign in with Google",
+    "signUpWithGoogle": "S’enregistrer avec Google",
+    "signInWithGoogle": "Se connecter avec Google",
     "agreeToTos": "By signing up, you agree to the Terms of Service",
     "welcomeToNc": "Welcome to NocoDB!",
     "inviteOnlySignup": "Allow signup only using invite url"

From 545e46e5c16b5dcb20f55cd8a62525f990732527 Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Sat, 3 Dec 2022 16:43:18 +0300
Subject: [PATCH 71/71] set playwright version again to fixed one

---
 tests/playwright/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/package.json b/tests/playwright/package.json
index 9908421167..d685046cce 100644
--- a/tests/playwright/package.json
+++ b/tests/playwright/package.json
@@ -23,7 +23,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "1.27.1",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "axios": "^0.24.0",