fix: Fixed styling issues with view context menu and fixed issues with test and removed NcMenuItem as it was causing issues with test

packages/nc-gui/assets/style.scss

@@ -236,7 +236,7 @@ a {
 }
 
 .nc-base-menu-item {
-  @apply cursor-pointer flex items-center gap-2 py-2 after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opacity duration-100) hover:(after:(opacity-5));
+  @apply cursor-pointer flex items-center gap-2 py-2;
 
   // &:hover {
   //   .nc-icon {

packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue

@@ -102,26 +102,30 @@ const exportFile = async (exportType: ExportTypes) => {
 <template>
   <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Download Data</div>
 
-  <NcMenuItem @click="exportFile(ExportTypes.CSV)">
+  <a-menu-item class="!mx-1 !py-2 !rounded-md">
-    <div class="flex flex-row items-center justify-between">
+    <div
-      <div v-e="['a:download:csv']" class="nc-base-menu-item !py-0">
+      v-e="['a:download:csv']"
-        <GeneralLoader v-if="isExportingType === ExportTypes.CSV" class="!max-h-4.5 !-mt-1 !mr-0.75" />
+      class="flex flex-row items-center nc-base-menu-item !py-0"
-        <component :is="iconMap.csv" v-else />
+      @click.stop="exportFile(ExportTypes.CSV)"
-        <!-- Download as CSV -->
+    >
-        {{ $t('activity.downloadCSV') }}
+      <GeneralLoader v-if="isExportingType === ExportTypes.CSV" class="!max-h-4.5 !-mt-1 !mr-0.7" />
-      </div>
+      <component :is="iconMap.csv" v-else />
+      <!-- Download as CSV -->
+      {{ $t('activity.downloadCSV') }}
     </div>
-  </NcMenuItem>
+  </a-menu-item>
-
+
-  <NcMenuItem @click="exportFile(ExportTypes.EXCEL)">
+  <a-menu-item class="!mx-1 !py-2 !rounded-md">
-    <div class="flex flex-row items-center justify-between">
+    <div
-      <div v-e="['a:download:excel']" class="nc-base-menu-item !py-0">
+      v-e="['a:download:excel']"
-        <GeneralLoader v-if="isExportingType === ExportTypes.EXCEL" class="!max-h-4.5 !-mt-1 !mr-0.75" />
+      class="flex flex-row items-center nc-base-menu-item !py-0"
-        <component :is="iconMap.excel" v-else />
+      @click="exportFile(ExportTypes.EXCEL)"
-
+    >
-        <!-- Download as XLSX -->
+      <GeneralLoader v-if="isExportingType === ExportTypes.EXCEL" class="!max-h-4.5 !-mt-1 !mr-0.7" />
-        {{ $t('activity.downloadExcel') }}
+      <component :is="iconMap.excel" v-else />
-      </div>
+
+      <!-- Download as XLSX -->
+      {{ $t('activity.downloadExcel') }}
     </div>
-  </NcMenuItem>
+  </a-menu-item>
 </template>

packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

@@ -75,6 +75,8 @@ async function changeLockType(type: LockType) {
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+
+  isDropdownOpen.value = false
 }
 
 const { copy } = useCopy()
@@ -221,7 +223,7 @@ watch(isDropdownOpen, () => {
   <NcDropdown
     v-else
     v-model:visible="isDropdownOpen"
-    class="!xs:pointer-events-none nc-actions-menu-btn"
+    class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn"
     overlay-class-name="nc-dropdown-actions-menu"
   >
     <div
@@ -293,7 +295,7 @@ watch(isDropdownOpen, () => {
         </template>
         <NcSubMenu key="download">
           <template #title>
-            <div v-e="['c:download']" class="nc-base-menu-item group">
+            <div v-e="['c:download']" class="nc-base-menu-item group nc-view-context-download-option">
               <DownloadIcon class="w-4 h-4" />
               {{ $t('general.download') }}
             </div>
@@ -327,13 +329,13 @@ watch(isDropdownOpen, () => {
 
           <template #expandIcon></template>
           <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">View Settings</div>
-          <NcMenuItem class="nc-view-action-lock-subaction" @click="changeLockType(LockType.Collaborative)">
+          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
+            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
-          </NcMenuItem>
+          </a-menu-item>
 
-          <NcMenuItem @click="changeLockType(LockType.Locked)">
+          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-            <LazySmartsheetToolbarLockType :type="LockType.Locked" />
+            <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
-          </NcMenuItem>
+          </a-menu-item>
         </NcSubMenu>
       </NcMenu>
     </template>

tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts

@@ -22,6 +22,6 @@ export class ToolbarActionsPage extends BasePage {
   }
 
   async clickDownloadSubmenu(label: string) {
-    await this.rootPage.locator(`div[class="nc-base-menu-item"]:has-text("${label}")`).first().click();
+    await this.rootPage.locator(`div.nc-base-menu-item:has-text("${label}")`).first().click();
   }
 }

tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts

@@ -12,7 +12,7 @@ export class ToolbarViewMenuPage extends BasePage {
   constructor(toolbar: ToolbarPage) {
     super(toolbar.rootPage);
     this.toolbar = toolbar;
-    this.viewsMenuBtn = this.toolbar.get().locator(`.nc-actions-menu-btn`);
+    this.viewsMenuBtn = this.rootPage.locator('.nc-view-context-btn');
   }
 
   get() {

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -65,7 +65,7 @@ export class ToolbarPage extends BasePage {
   async clickActions() {
     const menuOpen = await this.actions.get().isVisible();
 
-    await this.get().locator(`button.nc-actions-menu-btn`).click();
+    await this.rootPage.locator(`div.nc-view-context-btn`).click();
 
     // Wait for the menu to close
     if (menuOpen) await this.fields.get().waitFor({ state: 'hidden' });
@@ -161,7 +161,7 @@ export class ToolbarPage extends BasePage {
   }
 
   async clickDownload(type: string, verificationFile = 'expectedData.txt') {
-    await this.get().locator(`.nc-actions-menu-btn`).click();
+    await this.rootPage.locator(`.nc-view-context-btn`).click();
 
     const [download] = await Promise.all([
       // Start waiting for the download
@@ -195,7 +195,13 @@ export class ToolbarPage extends BasePage {
   }
 
   async verifyDownloadDisabled() {
-    await this.get().locator(`nc-actions-menu-btn`).waitFor({ state: 'hidden' });
+    await this.rootPage.locator(`.nc-view-context-btn`).click();
+
+    await this.rootPage.waitForTimeout(500);
+
+    await this.rootPage.locator(`.nc-view-context-download-option`).waitFor({ state: 'hidden' });
+
+    await this.rootPage.locator(`.nc-view-context-btn`).click();
   }
 
   async clickAddEditStack() {