From 1f2bb6a3d857655d77ea091022f71d22baac3581 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 2 Oct 2023 11:43:00 +0000
Subject: [PATCH] fix: Added Create Data Source btn

---
 .../assets/nc-icons/add-data-source.svg       |  6 +++
 .../dashboard/settings/DataSources.vue        | 18 ++++++---
 .../settings/data-sources/CreateBase.vue      |  6 ++-
 .../nc-gui/components/project/AllTables.vue   | 35 +++++++++++++++-
 packages/nc-gui/components/project/View.vue   | 40 +++++++++++++------
 packages/nc-gui/lang/en.json                  |  3 ++
 packages/nc-gui/store/config.ts               |  3 ++
 packages/nc-gui/utils/iconUtils.ts            |  2 +
 8 files changed, 93 insertions(+), 20 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/add-data-source.svg

diff --git a/packages/nc-gui/assets/nc-icons/add-data-source.svg b/packages/nc-gui/assets/nc-icons/add-data-source.svg
new file mode 100644
index 0000000000..6ea287bc88
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/add-data-source.svg
@@ -0,0 +1,6 @@
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 5.3335C11.3137 5.3335 14 4.43807 14 3.3335C14 2.22893 11.3137 1.3335 8 1.3335C4.68629 1.3335 2 2.22893 2 3.3335C2 4.43807 4.68629 5.3335 8 5.3335Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2 3.3335V12.6668C2 13.7735 5 14.5 7.5 14.5M14 3.3335V7.5M2 8.16683C2 9.2735 5.5 10 8 10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12.3333 10.3334V14.3334" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14.3333 12.3334H10.3333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 1628edb602..c4fb2b08cf 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -25,6 +25,8 @@ const { loadProject } = useProjects()
 const projectStore = useProject()
 const { project } = storeToRefs(projectStore)
 
+const { projectPageTab } = storeToRefs(useConfigStore())
+
 const { refreshCommandPalette } = useCommandPalette()
 
 const sources = ref<BaseType[]>([])
@@ -140,11 +142,17 @@ const forceAwaken = () => {
   emits('awaken', forceAwakened.value)
 }
 
-onMounted(async () => {
-  if (sources.value.length === 0) {
-    loadBases()
-  }
-})
+watch(
+  projectPageTab,
+  () => {
+    if (projectPageTab.value === 'data-source') {
+      loadBases()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 
 watch(
   () => props.reload,
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 7b38e81944..eb7c74868b 100644
--- a/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
+++ b/packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
@@ -27,10 +27,12 @@ import {
   watch,
 } from '#imports'
 
-const { connectionType } = defineProps<{ connectionType: ClientType }>()
+const props = defineProps<{ connectionType?: ClientType }>()
 
 const emit = defineEmits(['baseCreated', 'close'])
 
+const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL)
+
 const projectStore = useProject()
 const { loadProject } = useProjects()
 const { project } = storeToRefs(projectStore)
@@ -391,7 +393,7 @@ onMounted(async () => {
 })
 
 watch(
-  () => connectionType,
+  connectionType,
   (v) => {
     formState.value.dataSource.client = v
     onClientChange()
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 09da149053..29593dc176 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -1,11 +1,16 @@
 <script lang="ts" setup>
 import type { BaseType, TableType } from 'nocodb-sdk'
 import dayjs from 'dayjs'
+import NcTooltip from '~/components/nc/Tooltip.vue'
 
 const { activeTables } = storeToRefs(useTablesStore())
 const { openTable } = useTablesStore()
 const { openedProject } = storeToRefs(useProjects())
 
+const isNewBaseModalOpen = ref(false)
+
+const isDataSourceLimitReached = computed(() => Number(openedProject.value?.bases?.length) > 1)
+
 const { isUIAllowed } = useRoles()
 
 const { $e } = useNuxtApp()
@@ -76,6 +81,25 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
         <GeneralIcon icon="download" />
         <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
       </div>
+      <component :is="isDataSourceLimitReached ? NcTooltip : 'div'">
+        <template #title>
+          <div>
+            {{ $t('tooltip.reachedSourceLimit') }} <br />
+            {{ $t('tooltip.manageInDataSourcesTab') }}
+          </div>
+        </template>
+        <div
+          class="nc-project-view-all-table-btn"
+          data-testid="proj-view-btn__import-data"
+          :class="{
+            disabled: isDataSourceLimitReached,
+          }"
+          @click="isNewBaseModalOpen = true"
+        >
+          <GeneralIcon icon="dataSource" />
+          <div class="label">{{ $t('labels.connectDataSource') }}</div>
+        </div>
+      </component>
     </div>
     <div class="flex flex-row w-full text-gray-400 border-b-1 border-gray-50 py-3 px-2.5">
       <div class="w-2/5">{{ $t('objects.table') }}</div>
@@ -114,12 +138,17 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
       </div>
     </div>
     <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :base="defaultBase" />
+    <GeneralModal v-model:visible="isNewBaseModalOpen" size="medium">
+      <div class="py-6 px-8">
+        <LazyDashboardSettingsDataSourcesCreateBase @close="isNewBaseModalOpen = false" />
+      </div>
+    </GeneralModal>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .nc-project-view-all-table-btn {
-  @apply flex flex-col gap-y-6 p-4 bg-gray-100 rounded-xl w-56 cursor-pointer text-gray-600 hover:(bg-gray-200 !text-black);
+  @apply flex flex-col gap-y-6 p-4 bg-gray-100 rounded-xl w-56 cursor-pointer text-gray-600 hover:(bg-gray-200 text-black);
 
   .nc-icon {
     @apply h-10 w-10;
@@ -129,4 +158,8 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
     @apply text-base font-medium;
   }
 }
+
+.nc-project-view-all-table-btn.disabled {
+  @apply bg-gray-50 text-gray-400 hover:(bg-gray-50 text-gray-400) cursor-not-allowed;
+}
 </style>
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index 04ef519382..28220c16ff 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -16,9 +16,11 @@ const route = router.currentRoute
 
 const { isUIAllowed } = useRoles()
 
-const { isMobileMode } = useGlobal()
+const { project } = storeToRefs(useProject())
+
+const { projectPageTab } = storeToRefs(useConfigStore())
 
-const activeKey = ref<'allTable' | 'collaborator' | 'data-source'>('allTable')
+const { isMobileMode } = useGlobal()
 
 const baseSettingsState = ref('')
 
@@ -27,21 +29,21 @@ watch(
   (newVal, oldVal) => {
     if (newVal && newVal !== oldVal) {
       if (newVal === 'collaborator') {
-        activeKey.value = 'collaborator'
+        projectPageTab.value = 'collaborator'
       } else if (newVal === 'data-source') {
-        activeKey.value = 'data-source'
+        projectPageTab.value = 'data-source'
       } else {
-        activeKey.value = 'allTable'
+        projectPageTab.value = 'allTable'
       }
     }
   },
   { immediate: true },
 )
 
-watch(activeKey, () => {
-  if (activeKey.value) {
+watch(projectPageTab, () => {
+  if (projectPageTab.value) {
     navigateToProjectPage({
-      page: activeKey.value as any,
+      page: projectPageTab.value as any,
     })
   }
 })
@@ -75,17 +77,17 @@ watch(
         height: 'calc(100% - var(--topbar-height))',
       }"
     >
-      <a-tabs v-model:activeKey="activeKey" class="w-full">
+      <a-tabs v-model:activeKey="projectPageTab" class="w-full">
         <a-tab-pane key="allTable">
           <template #tab>
             <div class="tab-title" data-testid="proj-view-tab__all-tables">
               <NcLayout />
               <div>{{ $t('labels.allTables') }}</div>
               <div
-                class="flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs"
+                class="tab-info"
                 :class="{
-                  'bg-primary-selected': activeKey === 'allTable',
-                  'bg-gray-50': activeKey !== 'allTable',
+                  'bg-primary-selected': projectPageTab === 'allTable',
+                  'bg-gray-50': projectPageTab !== 'allTable',
                 }"
               >
                 {{ activeTables.length }}
@@ -111,6 +113,16 @@ watch(
             <div class="tab-title" data-testid="proj-view-tab__data-sources">
               <GeneralIcon icon="database" />
               <div>{{ $t('labels.dataSources') }}</div>
+              <div
+                v-if="project.bases?.length"
+                class="tab-info"
+                :class="{
+                  'bg-primary-selected': projectPageTab === 'data-source',
+                  'bg-gray-50': projectPageTab !== 'data-source',
+                }"
+              >
+                {{ project.bases.length - 1 }}
+              </div>
             </div>
           </template>
           <DashboardSettingsDataSources v-model:state="baseSettingsState" />
@@ -137,4 +149,8 @@ watch(
 :deep(.ant-tabs-tab-active .tab-title) {
   @apply text-primary;
 }
+
+.tab-info {
+  @apply flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs;
+}
 </style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c4839dc477..a3ff0a8869 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -419,6 +419,7 @@
     "allTables": "All Tables",
     "members": "Members",
     "dataSources": "Data Sources",
+    "connectDataSource": "Connect Data Source",
     "searchProjects": "Search Projects",
     "createdBy": "Created By",
     "viewingAttachmentsOf": "Viewing Attachments of",
@@ -771,6 +772,8 @@
     "startCommenting": "Start commenting!"
   },
   "tooltip": {
+    "reachedSourceLimit": "Reached Data Source limit",
+    "manageInDataSourcesTab": "Manage in Data Sources tab",
     "saveChanges": "Save changes",
     "xcDB": "Create a new project",
     "extDB": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
diff --git a/packages/nc-gui/store/config.ts b/packages/nc-gui/store/config.ts
index e62c70f205..0e5fa92867 100644
--- a/packages/nc-gui/store/config.ts
+++ b/packages/nc-gui/store/config.ts
@@ -13,6 +13,8 @@ export const useConfigStore = defineStore('configStore', () => {
 
   const isMobileMode = ref(isViewPortMobile())
 
+  const projectPageTab = ref<'allTable' | 'collaborator' | 'data-source'>('allTable')
+
   const onViewPortResize = () => {
     isMobileMode.value = isViewPortMobile()
   }
@@ -62,6 +64,7 @@ export const useConfigStore = defineStore('configStore', () => {
     isMobileMode,
     isViewPortMobile,
     handleSidebarOpenOnMobileForNonViews,
+    projectPageTab,
   }
 })
 
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 26e165d5b0..18d42e2db2 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -79,6 +79,7 @@ import Down from '~icons/material-symbols/keyboard-arrow-down-rounded'
 import PhTriangleFill from '~icons/ph/triangle-fill'
 import LcSend from '~icons/lucide/send'
 import NcCommentHere from '~icons/nc-icons/comment-here'
+import NcAddDataSource from '~icons/nc-icons/add-data-source'
 
 // Roles
 import MaterialSymbolsManageAccountsOutline from '~icons/material-symbols/manage-accounts-outline'
@@ -347,6 +348,7 @@ export const iconMap = {
   email: h('span', { class: 'material-symbols' }, 'email'),
   sendEmail: h('span', { class: 'material-symbols' }, 'email'),
   send: LcSend,
+  dataSource: NcAddDataSource,
   currency: h('span', { class: 'material-symbols' }, 'attach_money'),
   percent: h('span', { class: 'material-symbols' }, 'percent'),
   decimal: h('span', { class: 'material-symbols' }, 'decimal_increase'),