From d3e3cf5adffc07ebf7393b4dfcbf054407e7b601 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:13 +0000
Subject: [PATCH 1/8] fix(nc-gui): Base count

---
 packages/nc-gui/components/project/View.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index e7d91c927d..bf17c7a210 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -130,7 +130,7 @@ watch(
                   'bg-gray-50': projectPageTab !== 'data-source',
                 }"
               >
-                {{ base.sources.length - 1 }}
+                {{ base.sources.length }}
               </div>
             </div>
           </template>

From a1b12e83cdcf3bf8e555108275298ba6957711d4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:13 +0000
Subject: [PATCH 2/8] fix(nc-gui): Added workspace user count

---
 packages/nc-gui/components/project/View.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index bf17c7a210..00bbdd3079 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/packages/nc-gui/components/project/View.vue
@@ -3,7 +3,7 @@ import { useTitle } from '@vueuse/core'
 import NcLayout from '~icons/nc-icons/layout'
 const { openedProject } = storeToRefs(useBases())
 const { activeTables } = storeToRefs(useTablesStore())
-const { activeWorkspace } = storeToRefs(useWorkspace())
+const { activeWorkspace, workspaceUserCount } = storeToRefs(useWorkspace())
 
 const { navigateToProjectPage } = useBase()
 
@@ -113,6 +113,16 @@ watch(
             <div class="tab-title" data-testid="proj-view-tab__access-settings">
               <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
               <div>{{ $t('labels.members') }}</div>
+              <div
+                v-if="workspaceUserCount"
+                class="tab-info"
+                :class="{
+                  'bg-primary-selected': projectPageTab === 'data-source',
+                  'bg-gray-50': projectPageTab !== 'data-source',
+                }"
+              >
+                {{ workspaceUserCount }}
+              </div>
             </div>
           </template>
           <ProjectAccessSettings />

From 5a991ae994bad5c28044a17d464b6e5988158cb4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:13 +0000
Subject: [PATCH 3/8] fix(nc-gui): Data sources table now makes button icon
 only on small screen and fixed issue with base logo

---
 .../dashboard/TreeView/ProjectNode.vue        |  4 +-
 .../dashboard/settings/DataSources.vue        | 92 ++++++++++++-------
 .../nc-gui/components/general/BaseLogo.vue    |  4 +-
 .../nc-gui/components/project/AllTables.vue   |  4 +-
 4 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index bc2c18e4fc..5ca70d8f5b 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -657,7 +657,7 @@ const projectDelete = () => {
                             class="source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title"
                             @contextmenu="setMenuContext('source', source)"
                           >
-                            <GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
+                            <GeneralBaseLogo class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
                             {{ $t('general.default') }}
                           </div>
                           <div
@@ -665,7 +665,7 @@ const projectDelete = () => {
                             class="source-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full"
                             @contextmenu="setMenuContext('source', source)"
                           >
-                            <GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
+                            <GeneralBaseLogo class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
                             <div
                               :data-testid="`nc-sidebar-base-${source.alias}`"
                               class="nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none"
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 1ba679050d..78caa981d1 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -351,58 +351,71 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <a-button
+                    <NcButton
                       v-if="!sources[0].is_meta && !sources[0].is_local"
                       class="nc-action-btn cursor-pointer outline-0"
                       type="text"
+                      size="small"
                       @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        {{ $t('tooltip.metaSync') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('tooltip.metaSync') }}
+                        </div>
                       </div>
-                    </a-button>
-                    <a-button
+                    </NcButton>
+                    <NcButton
+                      size="small"
                       class="nc-action-btn cursor-pointer outline-0"
                       type="text"
                       @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        {{ $t('title.relations') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('title.relations') }}
+                        </div>
                       </div>
-                    </a-button>
-                    <a-button
+                    </NcButton>
+                    <NcButton
+                      size="small"
                       class="nc-action-btn cursor-pointer outline-0"
                       type="text"
                       @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        {{ $t('labels.uiAcl') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('labels.uiAcl') }}
+                        </div>
                       </div>
-                    </a-button>
-                    <a-button
+                    </NcButton>
+                    <NcButton
+                      size="small"
                       class="nc-action-btn cursor-pointer outline-0"
                       type="text"
                       @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="book" class="group-hover:text-accent" />
-                        {{ $t('title.audit') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('title.audit') }}
+                        </div>
                       </div>
-                    </a-button>
+                    </NcButton>
                   </div>
                 </div>
                 <div class="ds-table-col ds-table-crud">
-                  <a-button
+                  <NcButton
                     v-if="!sources[0].is_meta && !sources[0].is_local"
+                    size="small"
                     class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
                     type="text"
                     @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
                   >
                     <GeneralIcon icon="edit" class="text-gray-600" />
-                  </a-button>
+                  </NcButton>
                 </div>
               </div>
             </template>
@@ -419,12 +432,12 @@ const isEditBaseModalOpen = computed({
                     </a-tooltip>
                   </div>
                 </div>
-                <div class="ds-table-col ds-table-name font-medium">
+                <div class="ds-table-col ds-table-name font-medium w-full">
                   <GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
                   <div v-if="source.is_meta || source.is_local">-</div>
-                  <div v-else class="flex items-center gap-1">
+                  <span v-else class="truncate">
                     {{ source.is_meta || source.is_local ? $t('general.base') : source.alias }}
-                  </div>
+                  </span>
                 </div>
 
                 <div class="ds-table-col ds-table-type">
@@ -437,56 +450,67 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <a-button
+                    <NcButton
+                      size="small"
                       class="nc-action-btn cursor-pointer outline-0"
                       type="text"
                       @click="baseAction(source.id, DataSourcesSubTab.ERD)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        {{ $t('title.relations') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('title.relations') }}
+                        </div>
                       </div>
-                    </a-button>
-                    <a-button
+                    </NcButton>
+                    <NcButton
+                      size="small"
                       type="text"
                       class="nc-action-btn cursor-pointer outline-0"
                       @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        {{ $t('labels.uiAcl') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('labels.uiAcl') }}
+                        </div>
                       </div>
-                    </a-button>
-                    <a-button
+                    </NcButton>
+                    <NcButton
                       v-if="!source.is_meta && !source.is_local"
+                      size="small"
                       type="text"
                       class="nc-action-btn cursor-pointer outline-0"
                       @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
                     >
                       <div class="flex items-center gap-2 text-gray-600">
                         <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        {{ $t('tooltip.metaSync') }}
+                        <div class="nc-action-btn-label">
+                          {{ $t('tooltip.metaSync') }}
+                        </div>
                       </div>
-                    </a-button>
+                    </NcButton>
                   </div>
                 </div>
                 <div class="ds-table-col ds-table-crud justify-end gap-x-1">
-                  <a-button
+                  <NcButton
                     v-if="!source.is_meta && !source.is_local"
+                    size="small"
                     class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
                     type="text"
                     @click="baseAction(source.id, DataSourcesSubTab.Edit)"
                   >
                     <GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
-                  </a-button>
-                  <a-button
+                  </NcButton>
+                  <NcButton
                     v-if="!source.is_meta && !source.is_local"
+                    size="small"
                     class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
                     type="text"
                     @click="openDeleteBase(source)"
                   >
                     <GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
-                  </a-button>
+                  </NcButton>
                 </div>
               </div>
             </template>
@@ -550,7 +574,7 @@ const isEditBaseModalOpen = computed({
 
 <style>
 .ds-table-head {
-  @apply flex items-center border-0 text-gray-400;
+  @apply flex items-center border-0 text-gray-500;
 }
 
 .ds-table-body {
@@ -578,7 +602,7 @@ const isEditBaseModalOpen = computed({
 }
 
 .ds-table-actions {
-  @apply col-span-7;
+  @apply sm:col-span-6 xl:col-span-7;
 }
 
 .ds-table-crud {
@@ -592,4 +616,8 @@ const isEditBaseModalOpen = computed({
 .ds-table-handle {
   @apply cursor-pointer justify-self-start mr-2;
 }
+
+.nc-action-btn-label {
+  @apply sm:hidden xl:flex;
+}
 </style>
diff --git a/packages/nc-gui/components/general/BaseLogo.vue b/packages/nc-gui/components/general/BaseLogo.vue
index 4655de0625..1720d12083 100644
--- a/packages/nc-gui/components/general/BaseLogo.vue
+++ b/packages/nc-gui/components/general/BaseLogo.vue
@@ -6,10 +6,10 @@ import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserve
 import LogosSnowflakeIcon from '~icons/logos/snowflake-icon'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
-const { baseType } = defineProps<{ baseType?: string }>()
+const { sourceType } = defineProps<{ sourceType?: string }>()
 
 const baseIcon = computed(() => {
-  switch (baseType) {
+  switch (sourceType) {
     case ClientType.MYSQL:
       return LogosMysqlIcon
     case ClientType.PG:
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 4affed1129..abd2d4cd13 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -147,8 +147,8 @@ const onCreateBaseClick = () => {
         </div>
         <div class="w-1/5 text-gray-600" data-testid="proj-view-list__item-type">
           <div v-if="table.source_id === defaultBase?.id" class="ml-0.75">-</div>
-          <div v-else>
-            <GeneralBaseLogo :source-type="sources.get(table.source_id!)?.type" class="w-4 mr-1" />
+          <div v-else class="capitalize flex flex-row items-center gap-x-0.5">
+            <GeneralBaseLogo class="w-4 mr-1" />
             {{ sources.get(table.source_id!)?.alias }}
           </div>
         </div>

From a75538817c20fc4132718fd7b586bf835a5795e3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:14 +0000
Subject: [PATCH 4/8] fix(nc-gui): Added tooltip for Data sources table buttons
 only on small screen

---
 .../dashboard/settings/DataSources.vue        | 240 +++++++++++-------
 packages/nc-gui/components/nc/Tooltip.vue     |   5 +-
 2 files changed, 146 insertions(+), 99 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 78caa981d1..0ed5df9df3 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -351,59 +351,78 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <NcButton
-                      v-if="!sources[0].is_meta && !sources[0].is_local"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      type="text"
-                      size="small"
-                      @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
-                    >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('tooltip.metaSync') }}
+                    <NcTooltip v-if="!sources[0].is_meta && !sources[0].is_local" overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('tooltip.metaSync') }}
+                      </template>
+                      <NcButton
+                        class="nc-action-btn cursor-pointer outline-0"
+                        type="text"
+                        size="small"
+                        @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="sync" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('tooltip.metaSync') }}
+                          </div>
                         </div>
-                      </div>
-                    </NcButton>
-                    <NcButton
-                      size="small"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      type="text"
-                      @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
-                    >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('title.relations') }}
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('title.relations') }}
+                      </template>
+                      <NcButton
+                        size="small"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        type="text"
+                        @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="erd" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('title.relations') }}
+                          </div>
                         </div>
-                      </div>
-                    </NcButton>
-                    <NcButton
-                      size="small"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      type="text"
-                      @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
-                    >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('labels.uiAcl') }}
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('labels.uiAcl') }}
+                      </template>
+                      <NcButton
+                        size="small"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        type="text"
+                        @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="acl" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('labels.uiAcl') }}
+                          </div>
                         </div>
-                      </div>
-                    </NcButton>
-                    <NcButton
-                      size="small"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      type="text"
-                      @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
-                    >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="book" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('title.audit') }}
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('title.audit') }}
+                      </template>
+                      <NcButton
+                        size="small"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        type="text"
+                        @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="book" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('title.audit') }}
+                          </div>
                         </div>
-                      </div>
-                    </NcButton>
+                      </NcButton>
+                    </NcTooltip>
                   </div>
                 </div>
                 <div class="ds-table-col ds-table-crud">
@@ -450,67 +469,92 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <NcButton
-                      size="small"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      type="text"
-                      @click="baseAction(source.id, DataSourcesSubTab.ERD)"
-                    >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('title.relations') }}
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('title.relations') }}
+                      </template>
+                      <NcButton
+                        size="small"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        type="text"
+                        @click="baseAction(source.id, DataSourcesSubTab.ERD)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="erd" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('title.relations') }}
+                          </div>
                         </div>
-                      </div>
-                    </NcButton>
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('labels.uiAcl') }}
+                      </template>
+                      <NcButton
+                        size="small"
+                        type="text"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="acl" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('labels.uiAcl') }}
+                          </div>
+                        </div>
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip overlay-class-name="!xl:hidden">
+                      <template #title>
+                        {{ $t('tooltip.metaSync') }}
+                      </template>
+                      <NcButton
+                        v-if="!source.is_meta && !source.is_local"
+                        size="small"
+                        type="text"
+                        class="nc-action-btn cursor-pointer outline-0"
+                        @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
+                      >
+                        <div class="flex items-center gap-2 text-gray-600">
+                          <GeneralIcon icon="sync" class="group-hover:text-accent" />
+                          <div class="nc-action-btn-label">
+                            {{ $t('tooltip.metaSync') }}
+                          </div>
+                        </div>
+                      </NcButton>
+                    </NcTooltip>
+                  </div>
+                </div>
+                <div class="ds-table-col ds-table-crud justify-end gap-x-1">
+                  <NcTooltip>
+                    <template #title>
+                      {{ $t('general.edit') }}
+                    </template>
                     <NcButton
+                      v-if="!source.is_meta && !source.is_local"
                       size="small"
+                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
                       type="text"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
+                      @click="baseAction(source.id, DataSourcesSubTab.Edit)"
                     >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('labels.uiAcl') }}
-                        </div>
-                      </div>
+                      <GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
                     </NcButton>
+                  </NcTooltip>
+                  <NcTooltip>
+                    <template #title>
+                      {{ $t('general.delete') }}
+                    </template>
                     <NcButton
                       v-if="!source.is_meta && !source.is_local"
                       size="small"
+                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
                       type="text"
-                      class="nc-action-btn cursor-pointer outline-0"
-                      @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
+                      @click="openDeleteBase(source)"
                     >
-                      <div class="flex items-center gap-2 text-gray-600">
-                        <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                        <div class="nc-action-btn-label">
-                          {{ $t('tooltip.metaSync') }}
-                        </div>
-                      </div>
+                      <GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
                     </NcButton>
-                  </div>
-                </div>
-                <div class="ds-table-col ds-table-crud justify-end gap-x-1">
-                  <NcButton
-                    v-if="!source.is_meta && !source.is_local"
-                    size="small"
-                    class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
-                    type="text"
-                    @click="baseAction(source.id, DataSourcesSubTab.Edit)"
-                  >
-                    <GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
-                  </NcButton>
-                  <NcButton
-                    v-if="!source.is_meta && !source.is_local"
-                    size="small"
-                    class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
-                    type="text"
-                    @click="openDeleteBase(source)"
-                  >
-                    <GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
-                  </NcButton>
+                  </NcTooltip>
                 </div>
               </div>
             </template>
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index 0810b8b3ab..97b159e4a9 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -12,6 +12,7 @@ interface Props {
   disabled?: boolean
   placement?: TooltipPlacement | undefined
   hideOnClick?: boolean
+  overlayClassName?: string
 }
 
 const props = defineProps<Props>()
@@ -36,6 +37,8 @@ const attrs = useAttrs()
 
 const isKeyPressed = ref(false)
 
+const overlayClassName = computed(() => props.overlayClassName)
+
 onKeyStroke(
   (e) => e.key === modifierKey.value,
   (e) => {
@@ -100,7 +103,7 @@ const onClick = () => {
 <template>
   <a-tooltip
     v-model:visible="showTooltip"
-    :overlay-class-name="`nc-tooltip ${showTooltip ? 'visible' : 'hidden'}`"
+    :overlay-class-name="`nc-tooltip ${showTooltip ? 'visible' : 'hidden'} ${overlayClassName}`"
     :overlay-style="tooltipStyle"
     arrow-point-at-center
     :trigger="[]"

From 64ade56d8fef46afaac7e136a5eb53caaba3de55 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:14 +0000
Subject: [PATCH 5/8] fix(nc-gui): Removed button label for data sources page

---
 .../dashboard/settings/DataSources.vue        | 40 +++++--------------
 1 file changed, 9 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 0ed5df9df3..2002586f3e 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -351,7 +351,7 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <NcTooltip v-if="!sources[0].is_meta && !sources[0].is_local" overlay-class-name="!xl:hidden">
+                    <NcTooltip v-if="!sources[0].is_meta && !sources[0].is_local">
                       <template #title>
                         {{ $t('tooltip.metaSync') }}
                       </template>
@@ -369,7 +369,7 @@ const isEditBaseModalOpen = computed({
                         </div>
                       </NcButton>
                     </NcTooltip>
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('title.relations') }}
                       </template>
@@ -381,13 +381,10 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('title.relations') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('labels.uiAcl') }}
                       </template>
@@ -399,13 +396,10 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('labels.uiAcl') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('title.audit') }}
                       </template>
@@ -417,9 +411,6 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="book" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('title.audit') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
@@ -469,7 +460,7 @@ const isEditBaseModalOpen = computed({
 
                 <div class="ds-table-col ds-table-actions">
                   <div class="flex items-center gap-2">
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('title.relations') }}
                       </template>
@@ -481,13 +472,10 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="erd" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('title.relations') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('labels.uiAcl') }}
                       </template>
@@ -499,13 +487,10 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="acl" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('labels.uiAcl') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
-                    <NcTooltip overlay-class-name="!xl:hidden">
+                    <NcTooltip>
                       <template #title>
                         {{ $t('tooltip.metaSync') }}
                       </template>
@@ -518,9 +503,6 @@ const isEditBaseModalOpen = computed({
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('tooltip.metaSync') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
@@ -638,7 +620,7 @@ const isEditBaseModalOpen = computed({
 }
 
 .ds-table-name {
-  @apply col-span-6 items-center capitalize;
+  @apply col-span-11 items-center capitalize;
 }
 
 .ds-table-type {
@@ -646,7 +628,7 @@ const isEditBaseModalOpen = computed({
 }
 
 .ds-table-actions {
-  @apply sm:col-span-6 xl:col-span-7;
+  @apply col-span-2;
 }
 
 .ds-table-crud {
@@ -660,8 +642,4 @@ const isEditBaseModalOpen = computed({
 .ds-table-handle {
   @apply cursor-pointer justify-self-start mr-2;
 }
-
-.nc-action-btn-label {
-  @apply sm:hidden xl:flex;
-}
 </style>

From b75bbb99a5af9348f101cd86770d09dd055dfbfd Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:14 +0000
Subject: [PATCH 6/8] fix(nc-gui): Fixed test for data sources page and minor
 UI change

---
 .../dashboard/settings/DataSources.vue         | 18 +++++++++++-------
 .../Dashboard/ProjectView/DataSourcePage.ts    |  4 ++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 2002586f3e..de111530b9 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -315,7 +315,7 @@ const isEditBaseModalOpen = computed({
             <div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">{{ $t('general.visibility') }}</div>
             <div class="ds-table-col ds-table-name">{{ $t('general.name') }}</div>
             <div class="ds-table-col ds-table-type">{{ $t('general.type') }}</div>
-            <div class="ds-table-col ds-table-actions pl-2">{{ $t('labels.actions') }}</div>
+            <div class="ds-table-col ds-table-actions -ml-13">{{ $t('labels.actions') }}</div>
             <div class="ds-table-col ds-table-crud"></div>
           </div>
         </div>
@@ -358,14 +358,12 @@ const isEditBaseModalOpen = computed({
                       <NcButton
                         class="nc-action-btn cursor-pointer outline-0"
                         type="text"
+                        data-testid="nc-data-sources-view-meta-sync"
                         size="small"
                         @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
                           <GeneralIcon icon="sync" class="group-hover:text-accent" />
-                          <div class="nc-action-btn-label">
-                            {{ $t('tooltip.metaSync') }}
-                          </div>
                         </div>
                       </NcButton>
                     </NcTooltip>
@@ -377,6 +375,7 @@ const isEditBaseModalOpen = computed({
                         size="small"
                         class="nc-action-btn cursor-pointer outline-0"
                         type="text"
+                        data-testid="nc-data-sources-view-erd"
                         @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
@@ -392,6 +391,7 @@ const isEditBaseModalOpen = computed({
                         size="small"
                         class="nc-action-btn cursor-pointer outline-0"
                         type="text"
+                        data-testid="nc-data-sources-view-ui-acl"
                         @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
@@ -407,6 +407,7 @@ const isEditBaseModalOpen = computed({
                         size="small"
                         class="nc-action-btn cursor-pointer outline-0"
                         type="text"
+                        data-testid="nc-data-sources-view-audit"
                         @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
@@ -468,6 +469,7 @@ const isEditBaseModalOpen = computed({
                         size="small"
                         class="nc-action-btn cursor-pointer outline-0"
                         type="text"
+                        data-testid="nc-data-sources-view-erd"
                         @click="baseAction(source.id, DataSourcesSubTab.ERD)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
@@ -483,6 +485,7 @@ const isEditBaseModalOpen = computed({
                         size="small"
                         type="text"
                         class="nc-action-btn cursor-pointer outline-0"
+                        data-testid="nc-data-sources-view-ui-acl"
                         @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
                       >
                         <div class="flex items-center gap-2 text-gray-600">
@@ -498,6 +501,7 @@ const isEditBaseModalOpen = computed({
                         v-if="!source.is_meta && !source.is_local"
                         size="small"
                         type="text"
+                        data-testid="nc-data-sources-view-meta-sync"
                         class="nc-action-btn cursor-pointer outline-0"
                         @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
                       >
@@ -620,15 +624,15 @@ const isEditBaseModalOpen = computed({
 }
 
 .ds-table-name {
-  @apply col-span-11 items-center capitalize;
+  @apply col-span-9 items-center capitalize;
 }
 
 .ds-table-type {
-  @apply col-span-3 items-center;
+  @apply col-span-2 items-center;
 }
 
 .ds-table-actions {
-  @apply col-span-2;
+  @apply col-span-5 flex w-full justify-end;
 }
 
 .ds-table-crud {
diff --git a/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts b/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
index b8ee201419..687b34c2c6 100644
--- a/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
+++ b/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
@@ -39,7 +39,7 @@ export class DataSourcePage extends BasePage {
     const row = this.get()
       .locator('.ds-table-row')
       .nth(rowIndex + 1);
-    await row.locator('button.nc-action-btn:has-text("Sync Metadata")').click();
+    await row.getByTestId('nc-data-sources-view-meta-sync').click();
   }
 
   async openERD({ rowIndex }: { rowIndex: number }) {
@@ -47,7 +47,7 @@ export class DataSourcePage extends BasePage {
     const row = this.get()
       .locator('.ds-table-row')
       .nth(rowIndex + 1);
-    await row.locator('button.nc-action-btn:has-text("Relations")').click();
+    await row.getByTestId('nc-data-sources-view-erd').click();
   }
 
   async openAudit({ rowIndex }: { rowIndex: number }) {

From bc6871e00b96f70d75b8d98c59575fa4db664781 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 10:08:14 +0000
Subject: [PATCH 7/8] fix(nc-gui): Fixed test for data sources page and minor
 UI change

---
 .../nc-gui/components/dashboard/settings/DataSources.vue  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index de111530b9..083e47b273 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -520,11 +520,11 @@ const isEditBaseModalOpen = computed({
                     <NcButton
                       v-if="!source.is_meta && !source.is_local"
                       size="small"
-                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
+                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
                       type="text"
                       @click="baseAction(source.id, DataSourcesSubTab.Edit)"
                     >
-                      <GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
+                      <GeneralIcon icon="edit" class="text-gray-600" />
                     </NcButton>
                   </NcTooltip>
                   <NcTooltip>
@@ -534,11 +534,11 @@ const isEditBaseModalOpen = computed({
                     <NcButton
                       v-if="!source.is_meta && !source.is_local"
                       size="small"
-                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
+                      class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
                       type="text"
                       @click="openDeleteBase(source)"
                     >
-                      <GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
+                      <GeneralIcon icon="delete" class="text-red-500" />
                     </NcButton>
                   </NcTooltip>
                 </div>

From f235e818b6af98f17b967f32b490b6791e756f1b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 7 Oct 2023 17:14:50 +0530
Subject: [PATCH 8/8] fix(nc-gui): Test fix

---
 tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts b/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
index 687b34c2c6..5d17bf5c3a 100644
--- a/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
+++ b/tests/playwright/pages/Dashboard/ProjectView/DataSourcePage.ts
@@ -55,6 +55,6 @@ export class DataSourcePage extends BasePage {
     const row = this.get()
       .locator('.ds-table-row')
       .nth(rowIndex + 1);
-    await row.locator('button.nc-action-btn:has-text("Audit")').click();
+    await row.getByTestId('nc-data-sources-view-audit').click();
   }
 }