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] 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 }) {