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] 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>