From 46d69f2b2e3018daf90646716f1e532f31c24a1c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH] fix: Remvoed old view action dropdown and integrated changes
 in test

---
 .../nc-gui/components/smartsheet/Toolbar.vue  |   7 -
 .../smartsheet/toolbar/OpenedViewAction.vue   | 121 +++++++++---------
 .../smartsheet/toolbar/ViewInfo.vue           |   4 +-
 .../pages/Dashboard/common/Toolbar/index.ts   |   4 +-
 4 files changed, 66 insertions(+), 70 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index b116c186a0..7587db85f8 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -51,13 +51,6 @@ const { allowCSVDownload } = useSharedView()
           'w-full': isMobileMode,
         }"
       />
-
-      <template v-if="!isMobileMode">
-        <LazySmartsheetToolbarViewActions
-          v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
-          :show-system-fields="false"
-        />
-      </template>
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 66a1543b43..f910f6c7de 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -218,7 +218,12 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="info" class="cursor-pointer" />
     </NcTooltip>
   </div>
-  <NcDropdown v-else v-model:visible="isDropdownOpen">
+  <NcDropdown
+    v-else
+    v-model:visible="isDropdownOpen"
+    class="!xs:pointer-events-none nc-actions-menu-btn"
+    overlay-class-name="nc-dropdown-actions-menu"
+  >
     <div
       class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
       :class="{
@@ -240,7 +245,7 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <NcMenu class="min-w-84">
+      <NcMenu class="min-w-84" data-testid="toolbar-actions">
         <NcTooltip>
           <template #title> Click to copy View ID </template>
           <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
@@ -264,74 +269,72 @@ watch(isDropdownOpen, () => {
           <NcDivider />
         </template>
 
-        <NcMenuItem-group>
-          <template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView">
-            <NcSubMenu key="upload">
-              <template #title>
-                <div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
-                  <UploadIcon class="w-4 h-4" />
-                  {{ $t('general.upload') }}
-                </div>
-              </template>
-
-              <template #expandIcon></template>
-              <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Upload Data</div>
-
-              <template v-for="(dialog, type) in quickImportDialogs">
-                <NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)">
-                  <div v-e="[`a:upload:${type}`]" class="nc-base-menu-item" :class="{ disabled: isLocked }">
-                    <component :is="iconMap.upload" />
-                    {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
-                  </div>
-                </NcMenuItem>
-              </template>
-            </NcSubMenu>
-          </template>
-          <NcSubMenu key="download">
+        <template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView">
+          <NcSubMenu key="upload">
             <template #title>
-              <div v-e="['c:download']" class="nc-base-menu-item group">
-                <DownloadIcon class="w-4 h-4" />
-                {{ $t('general.download') }}
+              <div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
+                <UploadIcon class="w-4 h-4" />
+                {{ $t('general.upload') }}
               </div>
             </template>
 
             <template #expandIcon></template>
+            <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Upload Data</div>
 
-            <LazySmartsheetToolbarExportSubActions />
+            <template v-for="(dialog, type) in quickImportDialogs">
+              <NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)">
+                <div v-e="[`a:upload:${type}`]" class="nc-base-menu-item" :class="{ disabled: isLocked }">
+                  <component :is="iconMap.upload" />
+                  {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
+                </div>
+              </NcMenuItem>
+            </template>
           </NcSubMenu>
+        </template>
+        <NcSubMenu key="download">
+          <template #title>
+            <div v-e="['c:download']" class="nc-base-menu-item group">
+              <DownloadIcon class="w-4 h-4" />
+              {{ $t('general.download') }}
+            </div>
+          </template>
 
-          <NcDivider />
+          <template #expandIcon></template>
 
-          <NcSubMenu
-            v-if="isUIAllowed('viewCreateOrEdit')"
-            key="lock-type"
-            class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0"
-          >
-            <template #title>
-              <div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3">
-                <div>View Settings</div>
-                <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
-                  <LazySmartsheetToolbarLockType
-                    hide-tick
-                    :type="lockType"
-                    class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink"
-                  />
-                </div>
-                <div class="flex flex-grow"></div>
+          <LazySmartsheetToolbarExportSubActions />
+        </NcSubMenu>
+
+        <NcDivider />
+
+        <NcSubMenu
+          v-if="isUIAllowed('viewCreateOrEdit')"
+          key="lock-type"
+          class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0"
+        >
+          <template #title>
+            <div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3">
+              <div>View Settings</div>
+              <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
+                <LazySmartsheetToolbarLockType
+                  hide-tick
+                  :type="lockType"
+                  class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink"
+                />
               </div>
-            </template>
+              <div class="flex flex-grow"></div>
+            </div>
+          </template>
 
-            <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)">
-              <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
-            </NcMenuItem>
-
-            <NcMenuItem @click="changeLockType(LockType.Locked)">
-              <LazySmartsheetToolbarLockType :type="LockType.Locked" />
-            </NcMenuItem>
-          </NcSubMenu>
-        </NcMenuItem-group>
+          <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)">
+            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
+          </NcMenuItem>
+
+          <NcMenuItem @click="changeLockType(LockType.Locked)">
+            <LazySmartsheetToolbarLockType :type="LockType.Locked" />
+          </NcMenuItem>
+        </NcSubMenu>
       </NcMenu>
     </template>
   </NcDropdown>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index 8023d7d6e5..7a9096fa8c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -68,7 +68,7 @@ const openedBaseUrl = computed(() => {
           </div>
         </NcTooltip>
       </NuxtLink>
-      <div class="px-1.5 text-gray-500">/</div>
+      <div class="px-1.75 text-gray-500">/</div>
     </template>
     <template v-if="!(isMobileMode && !activeView?.is_default)">
       <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeTable?.meta?.icon" readonly size="xsmall">
@@ -121,7 +121,7 @@ const openedBaseUrl = computed(() => {
       </div>
     </template>
 
-    <div v-if="!isMobileMode" class="pl-1 text-gray-500">/</div>
+    <div v-if="!isMobileMode" class="pl-1.25 text-gray-500">/</div>
 
     <template v-if="!(isMobileMode && activeView?.is_default)">
       <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeView?.meta?.icon" readonly size="xsmall">
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 434f0a215b..e9fc84fb1f 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -161,7 +161,7 @@ export class ToolbarPage extends BasePage {
   }
 
   async clickDownload(type: string, verificationFile = 'expectedData.txt') {
-    await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).click();
+    await this.get().locator(`.nc-actions-menu-btn`).click();
 
     const [download] = await Promise.all([
       // Start waiting for the download
@@ -195,7 +195,7 @@ export class ToolbarPage extends BasePage {
   }
 
   async verifyDownloadDisabled() {
-    await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).waitFor({ state: 'hidden' });
+    await this.get().locator(`nc-actions-menu-btn`).waitFor({ state: 'hidden' });
   }
 
   async clickAddEditStack() {