From 8f41c836dd4b205230b4fcf9ace71367dccdc1b6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 01/30] fix: Added new view context menu

---
 packages/nc-gui/assets/nc-icons/check.svg     |   2 +-
 .../smartsheet/toolbar/ExportSubActions.vue   |  14 +-
 .../smartsheet/toolbar/LockType.vue           |  28 +-
 .../smartsheet/toolbar/OpenedViewAction.vue   | 258 ++++++++++++++++++
 .../smartsheet/toolbar/ViewInfo.vue           |  25 +-
 5 files changed, 284 insertions(+), 43 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

diff --git a/packages/nc-gui/assets/nc-icons/check.svg b/packages/nc-gui/assets/nc-icons/check.svg
index 314287cb8e..21d49df996 100644
--- a/packages/nc-gui/assets/nc-icons/check.svg
+++ b/packages/nc-gui/assets/nc-icons/check.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="check">
-<path id="Vector" d="M13.3333 4.5L5.99996 11.8333L2.66663 8.5" stroke="#40444D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M13.3333 4.5L5.99996 11.8333L2.66663 8.5" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 1f31d21396..3537e7e51a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -99,19 +99,21 @@ const exportFile = async (exportType: ExportTypes) => {
 </script>
 
 <template>
-  <a-menu-item>
-    <div v-e="['a:download:csv']" class="nc-base-menu-item" @click="exportFile(ExportTypes.CSV)">
+  <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Download Data</div>
+
+  <NcMenuItem>
+    <div v-e="['a:download:csv']" class="nc-base-menu-item !py-0" @click="exportFile(ExportTypes.CSV)">
       <component :is="iconMap.csv" />
       <!-- Download as CSV -->
       {{ $t('activity.downloadCSV') }}
     </div>
-  </a-menu-item>
+  </NcMenuItem>
 
-  <a-menu-item>
-    <div v-e="['a:download:excel']" class="nc-base-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+  <NcMenuItem>
+    <div v-e="['a:download:excel']" class="nc-base-menu-item !py-0" @click="exportFile(ExportTypes.EXCEL)">
       <component :is="iconMap.excel" />
       <!-- Download as XLSX -->
       {{ $t('activity.downloadExcel') }}
     </div>
-  </a-menu-item>
+  </NcMenuItem>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
index d2892aefae..031f3186c9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
@@ -29,29 +29,31 @@ const selectedView = inject(ActiveViewInj)
 </script>
 
 <template>
-  <div class="nc-locked-menu-item min-w-50" @click="emit('select', type)">
+  <div class="nc-locked-menu-item !px-1 min-w-50 text-gray-800" @click="emit('select', type)">
     <div :class="{ 'show-tick': !hideTick }">
-      <div class="flex items-center gap-2 flex-grow">
-        <component :is="types[type].icon" class="text-gray-800 !w-4 !h-4" />
-        <div class="flex flex-col">
-          {{ $t(types[type].title) }}
-          <div v-if="!hideTick" class="nc-subtitle max-w-120 text-sm text-gray-500 whitespace-normal">
-            {{ $t(types[type].subtitle) }}
+      <div class="flex flex-col gap-y-1">
+        <div class="flex items-center gap-2 flex-grow">
+          <component :is="types[type].icon" class="!w-4 !min-w-4 text-inherit !h-4" />
+          <div class="flex">
+            {{ $t(types[type].title) }}
           </div>
+          <div class="flex flex-grow"></div>
+          <template v-if="!hideTick">
+            <GeneralIcon v-if="selectedView?.lock_type === type" icon="check" class="!text-brand-500" />
+            <span v-else />
+          </template>
+        </div>
+        <div v-if="!hideTick" class="nc-subtitle max-w-120 text-sm text-gray-500 whitespace-normal ml-6">
+          {{ $t(types[type].subtitle) }}
         </div>
       </div>
-
-      <template v-if="!hideTick">
-        <GeneralIcon v-if="selectedView?.lock_type === type" icon="check" />
-        <span v-else />
-      </template>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .nc-locked-menu-item > div {
-  @apply py-2 items-center;
+  @apply !py-0 items-center;
 
   &.show-tick {
     @apply flex gap-2;
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
new file mode 100644
index 0000000000..f67d190ec1
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -0,0 +1,258 @@
+<script lang="ts" setup>
+import type { ViewType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
+import { LockType } from '~/lib'
+import UploadIcon from '~icons/nc-icons/upload'
+import DownloadIcon from '~icons/nc-icons/download'
+
+const { activeView, views } = storeToRefs(useViewsStore())
+const { loadViews, navigateToView } = useViewsStore()
+
+const { isMobileMode } = useGlobal()
+
+const { activeTable } = storeToRefs(useTablesStore())
+
+const { base, isSharedBase } = storeToRefs(useBase())
+
+const { refreshCommandPalette } = useCommandPalette()
+
+const { t } = useI18n()
+
+const { $api, $e } = useNuxtApp()
+
+const isPublicView = inject(IsPublicInj, ref(false))
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const lockType = computed(() => (activeView.value?.lock_type as LockType) || LockType.Collaborative)
+
+// TODO: add 'json' when it's ready
+
+const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel']
+
+const isViewIdCopied = ref(false)
+
+const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce(
+  (acc: any, curr) => {
+    acc[curr] = ref(false)
+    return acc
+  },
+  {},
+) as Record<QuickImportDialogType, Ref<boolean>>
+
+const { isUIAllowed } = useRoles()
+
+async function changeLockType(type: LockType) {
+  $e('a:grid:lockmenu', { lockType: type })
+
+  if (!activeView.value) return
+
+  if (type === 'personal') {
+    // Coming soon
+    return message.info(t('msg.toast.futureRelease'))
+  }
+  try {
+    activeView.value.lock_type = type
+    await $api.dbView.update(activeView.value.id as string, {
+      lock_type: type,
+    })
+
+    message.success(`Successfully Switched to ${type} view`)
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const { copy } = useCopy()
+
+const onViewIdCopy = async () => {
+  await copy(activeView.value!.id!)
+  isViewIdCopied.value = true
+}
+
+/** Duplicate a view */
+// todo: This is not really a duplication, maybe we need to implement a true duplication?
+function onDuplicate() {
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
+    'modelValue': isOpen,
+    'title': activeView.value!.title,
+    'type': activeView.value!.type as ViewTypes,
+    'tableId': activeTable.value!.id,
+    'selectedViewId': activeView.value!.id,
+    'views': views,
+    'onUpdate:modelValue': closeDialog,
+    'onCreated': async (view: ViewType) => {
+      closeDialog()
+
+      refreshCommandPalette()
+
+      await loadViews({
+        force: true,
+        tableId: activeTable.value!.id!,
+      })
+
+      navigateToView({
+        view,
+        tableId: activeTable.value!.id!,
+        baseId: base.value.id!,
+        hardReload: view.type === ViewTypes.FORM,
+      })
+
+      $e('a:view:create', { view: view.type })
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+</script>
+
+<template>
+  <NcDropdown>
+    <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="{
+        'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
+        'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
+        'max-w-1/2': isMobileMode,
+        'text-gray-500': activeView?.is_default,
+        'text-gray-800 font-medium': !activeView?.is_default,
+      }"
+    >
+      <span
+        class="truncate xs:pl-1.25 text-inherit"
+        :class="{
+          'max-w-28/100': !isMobileMode,
+        }"
+      >
+        {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
+      </span>
+      <GeneralIcon icon="arrowDown" class="ml-1" />
+    </div>
+    <template #overlay>
+      <NcMenu class="min-w-72">
+        <div class="flex items-center justify-between py-2 px-2">
+          <div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div>
+          <NcTooltip>
+            <template #title>Click to copy View ID</template>
+            <NcButton size="xsmall" type="secondary" @click="onViewIdCopy">
+              <GeneralIcon v-if="isViewIdCopied" icon="check" />
+              <GeneralIcon v-else else icon="copy" />
+            </NcButton>
+          </NcTooltip>
+        </div>
+        <NcDivider />
+        <NcMenuItem>
+          <GeneralIcon icon="edit" />
+          Rename View
+        </NcMenuItem>
+        <NcMenuItem @click="onDuplicate">
+          <GeneralIcon icon="copy" />
+          Duplicate View
+        </NcMenuItem>
+        <NcDivider />
+
+        <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">
+                  <div
+                    v-e="[`a:upload:${type}`]"
+                    class="nc-base-menu-item"
+                    :class="{ disabled: isLocked }"
+                    @click="!isLocked ? (dialog.value = true) : {}"
+                  >
+                    <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>
+
+            <template #expandIcon></template>
+
+            <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>
+                <div class="flex flex-grow"></div>
+              </div>
+            </template>
+
+            <template #expandIcon></template>
+            <div class="flex py-3 px-4 font-semibold 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>
+      </NcMenu>
+    </template>
+  </NcDropdown>
+</template>
+
+<style lang="scss" scoped>
+.nc-base-menu-item {
+  @apply !py-0;
+}
+
+.nc-view-actions-lock-type {
+  @apply !min-w-0;
+}
+</style>
+
+<style lang="scss">
+.nc-view-actions-lock-type > div {
+  @apply !py-0;
+}
+
+.nc-view-action-lock-subaction {
+  @apply !min-w-82;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index 680fc370de..8ab03280c6 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -121,7 +121,7 @@ const openedBaseUrl = computed(() => {
       </div>
     </template>
 
-    <div v-if="!isMobileMode" class="px-1 text-gray-500">/</div>
+    <div v-if="!isMobileMode" class="pl-1 text-gray-500">/</div>
 
     <template v-if="!(isMobileMode && activeView?.is_default)">
       <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeView?.meta?.icon" readonly size="xsmall">
@@ -130,28 +130,7 @@ const openedBaseUrl = computed(() => {
         </template>
       </LazyGeneralEmojiPicker>
 
-      <NcTooltip
-        class="truncate nc-active-view-title"
-        :class="{
-          'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
-          'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
-          'max-w-1/2': isMobileMode,
-        }"
-      >
-        <template #title>
-          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
-        </template>
-        <span
-          class="truncate xs:pl-1.25"
-          :class="{
-            'max-w-28/100': !isMobileMode,
-            'text-gray-500': activeView?.is_default,
-            'text-gray-800 font-medium': !activeView?.is_default,
-          }"
-        >
-          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
-        </span>
-      </NcTooltip>
+      <SmartsheetToolbarOpenedViewAction />
     </template>
 
     <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode" />

From f7b32687100492b9a2895d5ca42df6dc3bd00b65 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 02/30] fix: View id copy button resets when dropdown is closed
 and small jumping on copy view id

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index f67d190ec1..36087da9e7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -20,6 +20,8 @@ const { t } = useI18n()
 
 const { $api, $e } = useNuxtApp()
 
+const isOpen = ref(false)
+
 const isPublicView = inject(IsPublicInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -112,10 +114,16 @@ function onDuplicate() {
     close(1000)
   }
 }
+
+watch(isOpen, () => {
+  setTimeout(() => {
+    isViewIdCopied.value = false
+  }, 250)
+})
 </script>
 
 <template>
-  <NcDropdown>
+  <NcDropdown v-model:visible="isOpen">
     <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="{
@@ -143,21 +151,23 @@ function onDuplicate() {
           <NcTooltip>
             <template #title>Click to copy View ID</template>
             <NcButton size="xsmall" type="secondary" @click="onViewIdCopy">
-              <GeneralIcon v-if="isViewIdCopied" icon="check" />
-              <GeneralIcon v-else else icon="copy" />
+              <GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" />
+              <GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" />
             </NcButton>
           </NcTooltip>
         </div>
         <NcDivider />
-        <NcMenuItem>
-          <GeneralIcon icon="edit" />
-          Rename View
-        </NcMenuItem>
-        <NcMenuItem @click="onDuplicate">
-          <GeneralIcon icon="copy" />
-          Duplicate View
-        </NcMenuItem>
-        <NcDivider />
+        <template v-if="!activeView?.is_default">
+          <NcMenuItem>
+            <GeneralIcon icon="edit" />
+            Rename View
+          </NcMenuItem>
+          <NcMenuItem @click="onDuplicate">
+            <GeneralIcon icon="copy" />
+            Duplicate View
+          </NcMenuItem>
+          <NcDivider />
+        </template>
 
         <NcMenuItem-group>
           <template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView">

From 35df7e7cdb145596f919006ddacfb3d59011f7a9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 03/30] fix: Fixed kanban duplicate issue

---
 packages/nc-gui/components/dlg/ViewCreate.vue          |  2 +-
 .../components/smartsheet/toolbar/OpenedViewAction.vue | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 3535096681..e1a7cfaa13 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -308,7 +308,7 @@ onMounted(async () => {
           <NcSelect
             v-model:value="form.fk_grp_col_id"
             class="w-full nc-kanban-grouping-field-select"
-            :disabled="groupingFieldColumnId || isMetaLoading"
+            :disabled="isMetaLoading"
             :loading="isMetaLoading"
             :options="viewSelectFieldOptions"
             :placeholder="$t('placeholder.selectGroupField')"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 36087da9e7..45c31a00bb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -20,7 +20,7 @@ const { t } = useI18n()
 
 const { $api, $e } = useNuxtApp()
 
-const isOpen = ref(false)
+const isDropdownOpen = ref(false)
 
 const isPublicView = inject(IsPublicInj, ref(false))
 
@@ -77,6 +77,7 @@ const onViewIdCopy = async () => {
 /** Duplicate a view */
 // todo: This is not really a duplication, maybe we need to implement a true duplication?
 function onDuplicate() {
+  isDropdownOpen.value = false
   const isOpen = ref(true)
 
   const { close } = useDialog(resolveComponent('DlgViewCreate'), {
@@ -85,6 +86,7 @@ function onDuplicate() {
     'type': activeView.value!.type as ViewTypes,
     'tableId': activeTable.value!.id,
     'selectedViewId': activeView.value!.id,
+    'groupingFieldColumnId': activeView.value!.view!.fk_grp_col_id,
     'views': views,
     'onUpdate:modelValue': closeDialog,
     'onCreated': async (view: ViewType) => {
@@ -115,7 +117,7 @@ function onDuplicate() {
   }
 }
 
-watch(isOpen, () => {
+watch(isDropdownOpen, () => {
   setTimeout(() => {
     isViewIdCopied.value = false
   }, 250)
@@ -123,7 +125,7 @@ watch(isOpen, () => {
 </script>
 
 <template>
-  <NcDropdown v-model:visible="isOpen">
+  <NcDropdown v-model:visible="isDropdownOpen">
     <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="{
@@ -232,7 +234,7 @@ watch(isOpen, () => {
             </template>
 
             <template #expandIcon></template>
-            <div class="flex py-3 px-4 font-semibold uppercase text-xs text-gray-500">View Settings</div>
+            <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>

From a70eb4115619116dab2da48001f7a764644163d6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 04/30] fix: Added exporting loading to view context menu

---
 .../smartsheet/toolbar/ExportSubActions.vue   | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 3537e7e51a..3a4b726dfe 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -35,11 +35,15 @@ const selectedView = inject(ActiveViewInj)
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
+const isExportingType = ref<ExportTypes | undefined>(undefined)
+
 const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
 
+  isExportingType.value = exportType
+
   const XLSX = await import('xlsx')
   const FileSaver = await import('file-saver')
 
@@ -84,13 +88,10 @@ const exportFile = async (exportType: ExportTypes) => {
       }
 
       offset = +headers['nc-export-offset']
-      if (offset > -1) {
-        // Downloading more files
-        message.info(t('msg.info.downloadingMoreFiles'))
-      } else {
-        // Successfully exported all table data
-        message.success(t('msg.success.tableDataExported'))
-      }
+
+      setTimeout(() => {
+        isExportingType.value = undefined
+      }, 200)
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -101,19 +102,26 @@ 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>
-    <div v-e="['a:download:csv']" class="nc-base-menu-item !py-0" @click="exportFile(ExportTypes.CSV)">
-      <component :is="iconMap.csv" />
-      <!-- Download as CSV -->
-      {{ $t('activity.downloadCSV') }}
+  <NcMenuItem @click="exportFile(ExportTypes.CSV)">
+    <div class="flex flex-row items-center justify-between">
+      <div v-e="['a:download:csv']" class="nc-base-menu-item !py-0">
+        <GeneralLoader v-if="isExportingType === ExportTypes.CSV" class="!max-h-4.5 !-mt-1 !mr-0.75" />
+        <component :is="iconMap.csv" v-else />
+        <!-- Download as CSV -->
+        {{ $t('activity.downloadCSV') }}
+      </div>
     </div>
   </NcMenuItem>
 
-  <NcMenuItem>
-    <div v-e="['a:download:excel']" class="nc-base-menu-item !py-0" @click="exportFile(ExportTypes.EXCEL)">
-      <component :is="iconMap.excel" />
-      <!-- Download as XLSX -->
-      {{ $t('activity.downloadExcel') }}
+  <NcMenuItem @click="exportFile(ExportTypes.EXCEL)">
+    <div class="flex flex-row items-center justify-between">
+      <div v-e="['a:download:excel']" class="nc-base-menu-item !py-0">
+        <GeneralLoader v-if="isExportingType === ExportTypes.EXCEL" class="!max-h-4.5 !-mt-1 !mr-0.75" />
+        <component :is="iconMap.excel" v-else />
+
+        <!-- Download as XLSX -->
+        {{ $t('activity.downloadExcel') }}
+      </div>
     </div>
   </NcMenuItem>
 </template>

From b94f314b9b46a09250400561e1329a8769a8ec71 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 05/30] fix: Wired in import click and close dropdown when
 clicked on import (view info dropdown)

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 45c31a00bb..f209ceae45 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -22,6 +22,8 @@ const { $api, $e } = useNuxtApp()
 
 const isDropdownOpen = ref(false)
 
+const currentBaseId = computed(() => activeTable.value?.source_id)
+
 const isPublicView = inject(IsPublicInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -117,6 +119,13 @@ function onDuplicate() {
   }
 }
 
+const onImportClick = (dialog: any) => {
+  if (isLocked.value) return
+
+  isDropdownOpen.value = false
+  dialog.value = true
+}
+
 watch(isDropdownOpen, () => {
   setTimeout(() => {
     isViewIdCopied.value = false
@@ -185,13 +194,8 @@ watch(isDropdownOpen, () => {
               <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">
-                  <div
-                    v-e="[`a:upload:${type}`]"
-                    class="nc-base-menu-item"
-                    :class="{ disabled: isLocked }"
-                    @click="!isLocked ? (dialog.value = true) : {}"
-                  >
+                <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>
@@ -247,6 +251,17 @@ watch(isDropdownOpen, () => {
       </NcMenu>
     </template>
   </NcDropdown>
+
+  <template v-if="currentBaseId">
+    <LazyDlgQuickImport
+      v-for="tp in quickImportDialogTypes"
+      :key="tp"
+      v-model="quickImportDialogs[tp].value"
+      :import-type="tp"
+      :source-id="currentBaseId"
+      :import-data-only="true"
+    />
+  </template>
 </template>
 
 <style lang="scss" scoped>

From 28193bc55e3efe0a1973780dc71bae2c87b53370 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:42 +0000
Subject: [PATCH 06/30] fix: Added entire view info section in view context
 menu to click to copy view id

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index f209ceae45..4bcf8acfe2 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -156,17 +156,27 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <NcMenu class="min-w-72">
-        <div class="flex items-center justify-between py-2 px-2">
-          <div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div>
-          <NcTooltip>
-            <template #title>Click to copy View ID</template>
-            <NcButton size="xsmall" type="secondary" @click="onViewIdCopy">
+      <NcMenu class="min-w-84">
+        <NcTooltip>
+          <template #title>
+            <div>
+              <div class="flex flex-row items-center gap-x-1">
+                <GeneralViewIcon class="-ml-0.5" :meta="{ type: ViewTypes.GRID }" />
+                <div class="text-base">
+                  {{ activeView?.title }}
+                </div>
+              </div>
+              <div class="flex">Click to copy View ID</div>
+            </div>
+          </template>
+          <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
+            <div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div>
+            <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
               <GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" />
               <GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" />
             </NcButton>
-          </NcTooltip>
-        </div>
+          </div>
+        </NcTooltip>
         <NcDivider />
         <template v-if="!activeView?.is_default">
           <NcMenuItem>

From 87ae2f73c65fcf091940bf63c12af306f521d467 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 07/30] fix: Added rename option to view context menu

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 92 ++++++++++++++++++-
 .../smartsheet/toolbar/ViewInfo.vue           |  4 +-
 2 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 4bcf8acfe2..4e66861402 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -5,7 +5,7 @@ import { LockType } from '~/lib'
 import UploadIcon from '~icons/nc-icons/upload'
 import DownloadIcon from '~icons/nc-icons/download'
 
-const { activeView, views } = storeToRefs(useViewsStore())
+const { activeView, views, openedViewsTab } = storeToRefs(useViewsStore())
 const { loadViews, navigateToView } = useViewsStore()
 
 const { isMobileMode } = useGlobal()
@@ -38,6 +38,14 @@ const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel']
 
 const isViewIdCopied = ref(false)
 
+const isRenaming = ref(false)
+
+const renameInputDom = ref()
+
+const viewRenameTitle = ref('')
+
+const error = ref<string | undefined>()
+
 const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce(
   (acc: any, curr) => {
     acc[curr] = ref(false)
@@ -126,6 +134,56 @@ const onImportClick = (dialog: any) => {
   dialog.value = true
 }
 
+const onRenameMenuClick = () => {
+  isRenaming.value = true
+  isDropdownOpen.value = false
+  viewRenameTitle.value = activeView.value!.title
+
+  setTimeout(() => {
+    renameInputDom.value.focus()
+  })
+}
+
+watch(renameInputDom, () => {
+  renameInputDom.value?.focus()
+})
+
+const onRenameBlur = async () => {
+  if (validate()) {
+    activeView.value!.title = viewRenameTitle.value
+    isRenaming.value = false
+    error.value = undefined
+
+    await $api.dbView.update(activeView.value!.id!, {
+      title: viewRenameTitle.value,
+    })
+  } else {
+    renameInputDom.value?.focus()
+  }
+}
+
+/** validate view title */
+function validate() {
+  if (!viewRenameTitle.value || viewRenameTitle.value.trim().length < 0) {
+    error.value = t('msg.error.viewNameRequired')
+
+    return false
+  }
+
+  if (views.value.some((v) => v.title === viewRenameTitle.value && v.id !== activeView.value!.id)) {
+    error.value = t('msg.error.viewNameDuplicate')
+    return false
+  }
+
+  return true
+}
+
+watch(viewRenameTitle, () => {
+  if (error.value) {
+    error.value = undefined
+  }
+})
+
 watch(isDropdownOpen, () => {
   setTimeout(() => {
     isViewIdCopied.value = false
@@ -134,7 +192,33 @@ watch(isDropdownOpen, () => {
 </script>
 
 <template>
-  <NcDropdown v-model:visible="isDropdownOpen">
+  <div
+    v-if="isRenaming"
+    class="h-6 relative"
+    :class="{
+      'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
+      'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
+    }"
+  >
+    <input
+      ref="renameInputDom"
+      v-model="viewRenameTitle"
+      class="ml-0.25 w-full px-1 py-0.5 rounded-md font-medium text-gray-800"
+      :class="{
+        'outline-brand-500': !error,
+        'outline-red-500': error,
+      }"
+      @blur="onRenameBlur"
+      @keydown.enter="onRenameBlur"
+    />
+    <NcTooltip v-if="error" class="absolute top-0.25 -right-0.5">
+      <template #title>
+        {{ error }}
+      </template>
+      <GeneralIcon icon="info" class="cursor-pointer" />
+    </NcTooltip>
+  </div>
+  <NcDropdown v-else v-model:visible="isDropdownOpen">
     <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="{
@@ -179,7 +263,7 @@ watch(isDropdownOpen, () => {
         </NcTooltip>
         <NcDivider />
         <template v-if="!activeView?.is_default">
-          <NcMenuItem>
+          <NcMenuItem @click="onRenameMenuClick">
             <GeneralIcon icon="edit" />
             Rename View
           </NcMenuItem>
@@ -262,6 +346,8 @@ watch(isDropdownOpen, () => {
     </template>
   </NcDropdown>
 
+  <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode && !isRenaming" />
+
   <template v-if="currentBaseId">
     <LazyDlgQuickImport
       v-for="tp in quickImportDialogTypes"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index 8ab03280c6..8023d7d6e5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { isMobileMode } = useGlobal()
 
-const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
+const { activeView } = storeToRefs(useViewsStore())
 
 const { base, isSharedBase } = storeToRefs(useBase())
 const { baseUrl } = useBase()
@@ -132,7 +132,5 @@ const openedBaseUrl = computed(() => {
 
       <SmartsheetToolbarOpenedViewAction />
     </template>
-
-    <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode" />
   </div>
 </template>

From 50b7529615d757a8466e5a6dc6b35e6fde7e7368 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 08/30] fix: Reverted view title info on view context menu

---
 .../smartsheet/toolbar/OpenedViewAction.vue          | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 4e66861402..66a1543b43 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -242,17 +242,7 @@ watch(isDropdownOpen, () => {
     <template #overlay>
       <NcMenu class="min-w-84">
         <NcTooltip>
-          <template #title>
-            <div>
-              <div class="flex flex-row items-center gap-x-1">
-                <GeneralViewIcon class="-ml-0.5" :meta="{ type: ViewTypes.GRID }" />
-                <div class="text-base">
-                  {{ activeView?.title }}
-                </div>
-              </div>
-              <div class="flex">Click to copy View ID</div>
-            </div>
-          </template>
+          <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">
             <div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div>
             <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">

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 09/30] 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() {

From 893e2ccfd9ea118d8248c388081b49981a88828e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 10/30] 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             |  2 +-
 .../smartsheet/toolbar/ExportSubActions.vue   | 44 ++++++++++---------
 .../smartsheet/toolbar/OpenedViewAction.vue   | 18 ++++----
 .../Dashboard/common/Toolbar/Actions/index.ts |  2 +-
 .../Dashboard/common/Toolbar/ViewMenu.ts      |  2 +-
 .../pages/Dashboard/common/Toolbar/index.ts   | 12 +++--
 6 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index fd9aae2ee8..73c2c8a0c3 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/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 {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 3a4b726dfe..aa673e068e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/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)">
-    <div class="flex flex-row items-center justify-between">
-      <div v-e="['a:download:csv']" class="nc-base-menu-item !py-0">
-        <GeneralLoader v-if="isExportingType === ExportTypes.CSV" class="!max-h-4.5 !-mt-1 !mr-0.75" />
-        <component :is="iconMap.csv" v-else />
-        <!-- Download as CSV -->
-        {{ $t('activity.downloadCSV') }}
-      </div>
+  <a-menu-item class="!mx-1 !py-2 !rounded-md">
+    <div
+      v-e="['a:download:csv']"
+      class="flex flex-row items-center nc-base-menu-item !py-0"
+      @click.stop="exportFile(ExportTypes.CSV)"
+    >
+      <GeneralLoader v-if="isExportingType === ExportTypes.CSV" class="!max-h-4.5 !-mt-1 !mr-0.7" />
+      <component :is="iconMap.csv" v-else />
+      <!-- Download as CSV -->
+      {{ $t('activity.downloadCSV') }}
     </div>
-  </NcMenuItem>
-
-  <NcMenuItem @click="exportFile(ExportTypes.EXCEL)">
-    <div class="flex flex-row items-center justify-between">
-      <div v-e="['a:download:excel']" class="nc-base-menu-item !py-0">
-        <GeneralLoader v-if="isExportingType === ExportTypes.EXCEL" class="!max-h-4.5 !-mt-1 !mr-0.75" />
-        <component :is="iconMap.excel" v-else />
-
-        <!-- Download as XLSX -->
-        {{ $t('activity.downloadExcel') }}
-      </div>
+  </a-menu-item>
+
+  <a-menu-item class="!mx-1 !py-2 !rounded-md">
+    <div
+      v-e="['a:download:excel']"
+      class="flex flex-row items-center nc-base-menu-item !py-0"
+      @click="exportFile(ExportTypes.EXCEL)"
+    >
+      <GeneralLoader v-if="isExportingType === ExportTypes.EXCEL" class="!max-h-4.5 !-mt-1 !mr-0.7" />
+      <component :is="iconMap.excel" v-else />
+
+      <!-- Download as XLSX -->
+      {{ $t('activity.downloadExcel') }}
     </div>
-  </NcMenuItem>
+  </a-menu-item>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index f910f6c7de..5fc6045d9f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/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)">
-            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
-          </NcMenuItem>
+          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
+          </a-menu-item>
 
-          <NcMenuItem @click="changeLockType(LockType.Locked)">
-            <LazySmartsheetToolbarLockType :type="LockType.Locked" />
-          </NcMenuItem>
+          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+            <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
+          </a-menu-item>
         </NcSubMenu>
       </NcMenu>
     </template>
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts
index 1efd54edbf..8a5522983d 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts
+++ b/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();
   }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
index 09c4abe126..4fb459ceef 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
+++ b/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() {
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index e9fc84fb1f..6aaf54d1db 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/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() {

From f60c18dd33e71375b12e02fc073d69390d536e52 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 11/30] fix: Fixed issue with test

---
 tests/playwright/pages/Dashboard/common/Toolbar/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 6aaf54d1db..e05766769a 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.rootPage.locator(`.nc-view-context-btn`).click();
+    await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).click();
 
     const [download] = await Promise.all([
       // Start waiting for the download

From 9aeecec92dcced25d9cf229857dbf4f45a440428 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 12/30] fix: Fixed issue with test

---
 tests/playwright/pages/Dashboard/common/Toolbar/index.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index e05766769a..6886a871b3 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -195,13 +195,7 @@ export class ToolbarPage extends BasePage {
   }
 
   async verifyDownloadDisabled() {
-    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();
+    await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).waitFor({ state: 'hidden' });
   }
 
   async clickAddEditStack() {

From 06be13d9bee8418591a9a11118957c128049b3cd Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 13/30] feat: Added translation for view context menu

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 26 ++++++++++++-------
 packages/nc-gui/lang/en.json                  |  4 +++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 5fc6045d9f..4397c0c237 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -247,11 +247,17 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <NcMenu class="min-w-84" data-testid="toolbar-actions">
+      <NcMenu class="!min-w-84" data-testid="toolbar-actions">
         <NcTooltip>
-          <template #title> Click to copy View ID </template>
+          <template #title> {{ $t('msg.clickToCopyViewID') }} </template>
           <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
-            <div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div>
+            <div class="flex text-xs font-bold text-gray-500 ml-1">
+              {{
+                $t('labels.viewIdColon', {
+                  viewId: activeView?.id,
+                })
+              }}
+            </div>
             <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
               <GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" />
               <GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" />
@@ -262,11 +268,11 @@ watch(isDropdownOpen, () => {
         <template v-if="!activeView?.is_default">
           <NcMenuItem @click="onRenameMenuClick">
             <GeneralIcon icon="edit" />
-            Rename View
+            {{ $t('activity.renameView') }}
           </NcMenuItem>
           <NcMenuItem @click="onDuplicate">
-            <GeneralIcon icon="copy" />
-            Duplicate View
+            <GeneralIcon icon="duplicate" />
+            {{ $t('labels.duplicateView') }}
           </NcMenuItem>
           <NcDivider />
         </template>
@@ -281,7 +287,7 @@ watch(isDropdownOpen, () => {
             </template>
 
             <template #expandIcon></template>
-            <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Upload Data</div>
+            <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('activity.uploadData') }}</div>
 
             <template v-for="(dialog, type) in quickImportDialogs">
               <NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)">
@@ -315,7 +321,9 @@ watch(isDropdownOpen, () => {
         >
           <template #title>
             <div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3">
-              <div>View Settings</div>
+              <div>
+                {{ $t('labels.viewSettings') }}
+              </div>
               <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
                 <LazySmartsheetToolbarLockType
                   hide-tick
@@ -328,7 +336,7 @@ watch(isDropdownOpen, () => {
           </template>
 
           <template #expandIcon></template>
-          <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">View Settings</div>
+          <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewSettings') }}</div>
           <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
             <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
           </a-menu-item>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index d91045d5fe..410934ec28 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -413,6 +413,7 @@
     "noToken": "No Token",
     "tokenLimit": "Only one token per user is allowed",
     "duplicateAttachment": "File with name {filename} already attached",
+    "viewIdColon": "VIEW ID: {viewId}",
     "toAddress": "To Address",
     "subject": "Subject",
     "body": "Body",
@@ -447,6 +448,8 @@
     "clickToHide": "Click to hide",
     "clickToDownload": "Click to download",
     "forRole": "for role",
+    "clickToCopyViewID": "Click to copy View ID",
+    "viewSettings": "View Settings",
     "searchUsers": "Search Users",
     "superAdmin": "Super Admin",
     "allTables": "All Tables",
@@ -760,6 +763,7 @@
     "ListView": "Views List",
     "copyView": "Copy view",
     "renameView": "Rename view",
+    "uploadData": "Upload Data",
     "deleteView": "Delete view",
     "createGrid": "Create Grid View",
     "createGallery": "Create Gallery View",

From 9df26f14cdba3dd7097f242530a9eb9585073729 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 14/30] chore: font capitalise

---
 packages/nc-gui/lang/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 410934ec28..1c783dd390 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -761,10 +761,10 @@
     "fillByCodeScan": "Fill by scan",
     "listSharedView": "Shared View List",
     "ListView": "Views List",
-    "copyView": "Copy view",
-    "renameView": "Rename view",
+    "copyView": "Copy View",
+    "renameView": "Rename View",
     "uploadData": "Upload Data",
-    "deleteView": "Delete view",
+    "deleteView": "Delete View",
     "createGrid": "Create Grid View",
     "createGallery": "Create Gallery View",
     "createCalendar": "Create Calendar View",

From 6075d7020761a3747880170ef581b0015be18935 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Nov 2023 10:54:43 +0000
Subject: [PATCH 15/30] fix: tooltip

---
 .../nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 4397c0c237..73dfd5e6ec 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -249,7 +249,7 @@ watch(isDropdownOpen, () => {
     <template #overlay>
       <NcMenu class="!min-w-84" data-testid="toolbar-actions">
         <NcTooltip>
-          <template #title> {{ $t('msg.clickToCopyViewID') }} </template>
+          <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
           <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
             <div class="flex text-xs font-bold text-gray-500 ml-1">
               {{

From b863a72a235904986b9ac4095ad82bbafa403442 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 16/30] fix: Made view context menu shorted, renamed view
 settings to view mode and shortned view modes

---
 .../nc-gui/components/smartsheet/toolbar/LockType.vue  | 10 +++++-----
 .../components/smartsheet/toolbar/OpenedViewAction.vue |  8 ++++----
 packages/nc-gui/lang/en.json                           |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
index 031f3186c9..e48363d3b6 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/LockType.vue
@@ -9,17 +9,17 @@ const emit = defineEmits(['select'])
 
 const types = {
   [LockType.Personal]: {
-    title: 'title.personalView',
+    title: 'title.personal',
     icon: iconMap.account,
     subtitle: 'msg.info.personalView',
   },
   [LockType.Collaborative]: {
-    title: 'title.collabView',
+    title: 'title.collaborative',
     icon: UsersIcon,
     subtitle: 'msg.info.collabView',
   },
   [LockType.Locked]: {
-    title: 'title.lockedView',
+    title: 'title.locked',
     icon: LockIcon,
     subtitle: 'msg.info.lockedView',
   },
@@ -29,7 +29,7 @@ const selectedView = inject(ActiveViewInj)
 </script>
 
 <template>
-  <div class="nc-locked-menu-item !px-1 min-w-50 text-gray-800" @click="emit('select', type)">
+  <div class="nc-locked-menu-item !px-1 text-gray-800" @click="emit('select', type)">
     <div :class="{ 'show-tick': !hideTick }">
       <div class="flex flex-col gap-y-1">
         <div class="flex items-center gap-2 flex-grow">
@@ -37,7 +37,7 @@ const selectedView = inject(ActiveViewInj)
           <div class="flex">
             {{ $t(types[type].title) }}
           </div>
-          <div class="flex flex-grow"></div>
+          <div v-if="!hideTick" class="flex flex-grow"></div>
           <template v-if="!hideTick">
             <GeneralIcon v-if="selectedView?.lock_type === type" icon="check" class="!text-brand-500" />
             <span v-else />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 73dfd5e6ec..fbe6a405ca 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -247,10 +247,10 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <NcMenu class="!min-w-84" data-testid="toolbar-actions">
+      <NcMenu class="!min-w-70" data-testid="toolbar-actions">
         <NcTooltip>
           <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
-          <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
+          <div class="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
             <div class="flex text-xs font-bold text-gray-500 ml-1">
               {{
                 $t('labels.viewIdColon', {
@@ -322,7 +322,7 @@ watch(isDropdownOpen, () => {
           <template #title>
             <div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3">
               <div>
-                {{ $t('labels.viewSettings') }}
+                {{ $t('labels.viewMode') }}
               </div>
               <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
                 <LazySmartsheetToolbarLockType
@@ -336,7 +336,7 @@ watch(isDropdownOpen, () => {
           </template>
 
           <template #expandIcon></template>
-          <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewSettings') }}</div>
+          <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div>
           <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
             <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
           </a-menu-item>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 1c783dd390..841806fa59 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -343,9 +343,9 @@
     "createBase": "Create Base",
     "myProject": "My Bases",
     "formTitle": "Form Title",
-    "collabView": "Collaborative View",
-    "lockedView": "Locked View",
-    "personalView": "Personal View",
+    "collaborative": "Collaborative",
+    "locked": "Locked",
+    "personal": "Personal",
     "appStore": "App Store",
     "teamAndAuth": "Team & Auth",
     "rolesUserMgmt": "Roles & Users Management",
@@ -449,7 +449,7 @@
     "clickToDownload": "Click to download",
     "forRole": "for role",
     "clickToCopyViewID": "Click to copy View ID",
-    "viewSettings": "View Settings",
+    "viewMode": "View Mode",
     "searchUsers": "Search Users",
     "superAdmin": "Super Admin",
     "allTables": "All Tables",

From 83f35a81b7b2180664ebc5510da9243282f48cc9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 17/30] fix: Moved view context menu content to a different
 reusable component, added max length validation to view title and improved
 view title renamed UX

---
 .../smartsheet/toolbar/OpenedViewAction.vue   | 266 ++----------------
 .../smartsheet/toolbar/ViewActionMenu.vue     | 251 +++++++++++++++++
 packages/nc-gui/lang/en.json                  |   1 +
 3 files changed, 269 insertions(+), 249 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue

diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index fbe6a405ca..3347bc6138 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -1,41 +1,16 @@
 <script lang="ts" setup>
-import type { ViewType } from 'nocodb-sdk'
-import { ViewTypes } from 'nocodb-sdk'
-import { LockType } from '~/lib'
-import UploadIcon from '~icons/nc-icons/upload'
-import DownloadIcon from '~icons/nc-icons/download'
-
 const { activeView, views, openedViewsTab } = storeToRefs(useViewsStore())
-const { loadViews, navigateToView } = useViewsStore()
 
 const { isMobileMode } = useGlobal()
 
-const { activeTable } = storeToRefs(useTablesStore())
-
-const { base, isSharedBase } = storeToRefs(useBase())
-
-const { refreshCommandPalette } = useCommandPalette()
+const { isSharedBase } = storeToRefs(useBase())
 
 const { t } = useI18n()
 
-const { $api, $e } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const isDropdownOpen = ref(false)
 
-const currentBaseId = computed(() => activeTable.value?.source_id)
-
-const isPublicView = inject(IsPublicInj, ref(false))
-
-const isLocked = inject(IsLockedInj, ref(false))
-
-const { isSqlView } = useSmartsheetStoreOrThrow()
-
-const lockType = computed(() => (activeView.value?.lock_type as LockType) || LockType.Collaborative)
-
-// TODO: add 'json' when it's ready
-
-const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel']
-
 const isViewIdCopied = ref(false)
 
 const isRenaming = ref(false)
@@ -46,96 +21,6 @@ const viewRenameTitle = ref('')
 
 const error = ref<string | undefined>()
 
-const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce(
-  (acc: any, curr) => {
-    acc[curr] = ref(false)
-    return acc
-  },
-  {},
-) as Record<QuickImportDialogType, Ref<boolean>>
-
-const { isUIAllowed } = useRoles()
-
-async function changeLockType(type: LockType) {
-  $e('a:grid:lockmenu', { lockType: type })
-
-  if (!activeView.value) return
-
-  if (type === 'personal') {
-    // Coming soon
-    return message.info(t('msg.toast.futureRelease'))
-  }
-  try {
-    activeView.value.lock_type = type
-    await $api.dbView.update(activeView.value.id as string, {
-      lock_type: type,
-    })
-
-    message.success(`Successfully Switched to ${type} view`)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-
-  isDropdownOpen.value = false
-}
-
-const { copy } = useCopy()
-
-const onViewIdCopy = async () => {
-  await copy(activeView.value!.id!)
-  isViewIdCopied.value = true
-}
-
-/** Duplicate a view */
-// todo: This is not really a duplication, maybe we need to implement a true duplication?
-function onDuplicate() {
-  isDropdownOpen.value = false
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
-    'modelValue': isOpen,
-    'title': activeView.value!.title,
-    'type': activeView.value!.type as ViewTypes,
-    'tableId': activeTable.value!.id,
-    'selectedViewId': activeView.value!.id,
-    'groupingFieldColumnId': activeView.value!.view!.fk_grp_col_id,
-    'views': views,
-    'onUpdate:modelValue': closeDialog,
-    'onCreated': async (view: ViewType) => {
-      closeDialog()
-
-      refreshCommandPalette()
-
-      await loadViews({
-        force: true,
-        tableId: activeTable.value!.id!,
-      })
-
-      navigateToView({
-        view,
-        tableId: activeTable.value!.id!,
-        baseId: base.value.id!,
-        hardReload: view.type === ViewTypes.FORM,
-      })
-
-      $e('a:view:create', { view: view.type })
-    },
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-const onImportClick = (dialog: any) => {
-  if (isLocked.value) return
-
-  isDropdownOpen.value = false
-  dialog.value = true
-}
-
 const onRenameMenuClick = () => {
   isRenaming.value = true
   isDropdownOpen.value = false
@@ -172,6 +57,12 @@ function validate() {
     return false
   }
 
+  if (viewRenameTitle.value.trim().length > 255) {
+    error.value = t('msg.error.nameMaxLength256')
+
+    return false
+  }
+
   if (views.value.some((v) => v.title === viewRenameTitle.value && v.id !== activeView.value!.id)) {
     error.value = t('msg.error.viewNameDuplicate')
     return false
@@ -191,6 +82,11 @@ watch(isDropdownOpen, () => {
     isViewIdCopied.value = false
   }, 250)
 })
+
+const resetViewRename = () => {
+  viewRenameTitle.value = activeView.value!.title
+  isRenaming.value = false
+}
 </script>
 
 <template>
@@ -208,12 +104,13 @@ watch(isDropdownOpen, () => {
       class="ml-0.25 w-full px-1 py-0.5 rounded-md font-medium text-gray-800"
       :class="{
         'outline-brand-500': !error,
-        'outline-red-500': error,
+        'outline-red-500 pr-6': error,
       }"
       @blur="onRenameBlur"
       @keydown.enter="onRenameBlur"
+      @keydown.esc="resetViewRename"
     />
-    <NcTooltip v-if="error" class="absolute top-0.25 -right-0.5">
+    <NcTooltip v-if="error" class="absolute top-0.25 right-0.5 bg-white rounded-lg">
       <template #title>
         {{ error }}
       </template>
@@ -247,138 +144,9 @@ watch(isDropdownOpen, () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <NcMenu class="!min-w-70" data-testid="toolbar-actions">
-        <NcTooltip>
-          <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
-          <div class="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
-            <div class="flex text-xs font-bold text-gray-500 ml-1">
-              {{
-                $t('labels.viewIdColon', {
-                  viewId: activeView?.id,
-                })
-              }}
-            </div>
-            <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
-              <GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" />
-              <GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" />
-            </NcButton>
-          </div>
-        </NcTooltip>
-        <NcDivider />
-        <template v-if="!activeView?.is_default">
-          <NcMenuItem @click="onRenameMenuClick">
-            <GeneralIcon icon="edit" />
-            {{ $t('activity.renameView') }}
-          </NcMenuItem>
-          <NcMenuItem @click="onDuplicate">
-            <GeneralIcon icon="duplicate" />
-            {{ $t('labels.duplicateView') }}
-          </NcMenuItem>
-          <NcDivider />
-        </template>
-
-        <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">{{ $t('activity.uploadData') }}</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 #title>
-            <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>
-          </template>
-
-          <template #expandIcon></template>
-
-          <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>
-                {{ $t('labels.viewMode') }}
-              </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>
-            </div>
-          </template>
-
-          <template #expandIcon></template>
-          <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div>
-          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-            <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
-          </a-menu-item>
-
-          <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-            <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
-          </a-menu-item>
-        </NcSubMenu>
-      </NcMenu>
+      <SmartsheetToolbarViewActionMenu @close-modal="isDropdownOpen = false" @rename="onRenameMenuClick" />
     </template>
   </NcDropdown>
 
   <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode && !isRenaming" />
-
-  <template v-if="currentBaseId">
-    <LazyDlgQuickImport
-      v-for="tp in quickImportDialogTypes"
-      :key="tp"
-      v-model="quickImportDialogs[tp].value"
-      :import-type="tp"
-      :source-id="currentBaseId"
-      :import-data-only="true"
-    />
-  </template>
 </template>
-
-<style lang="scss" scoped>
-.nc-base-menu-item {
-  @apply !py-0;
-}
-
-.nc-view-actions-lock-type {
-  @apply !min-w-0;
-}
-</style>
-
-<style lang="scss">
-.nc-view-actions-lock-type > div {
-  @apply !py-0;
-}
-
-.nc-view-action-lock-subaction {
-  @apply !min-w-82;
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
new file mode 100644
index 0000000000..39637fead8
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -0,0 +1,251 @@
+<script lang="ts" setup>
+import type { ViewType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
+import { LockType } from '~/lib'
+
+import UploadIcon from '~icons/nc-icons/upload'
+import DownloadIcon from '~icons/nc-icons/download'
+
+const emits = defineEmits(['rename', 'closeModal'])
+
+const { isUIAllowed } = useRoles()
+
+const isPublicView = inject(IsPublicInj, ref(false))
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const { $api, $e } = useNuxtApp()
+
+const { t } = useI18n()
+
+const { activeView, views } = storeToRefs(useViewsStore())
+const { loadViews, navigateToView } = useViewsStore()
+
+const { base } = storeToRefs(useBase())
+
+const { activeTable } = storeToRefs(useTablesStore())
+
+const { refreshCommandPalette } = useCommandPalette()
+
+const lockType = computed(() => (activeView.value?.lock_type as LockType) || LockType.Collaborative)
+
+const isViewIdCopied = ref(false)
+
+const currentBaseId = computed(() => activeTable.value?.source_id)
+
+const onRenameMenuClick = () => {
+  emits('rename')
+}
+
+const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel']
+
+const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce(
+  (acc: any, curr) => {
+    acc[curr] = ref(false)
+    return acc
+  },
+  {},
+) as Record<QuickImportDialogType, Ref<boolean>>
+
+const onImportClick = (dialog: any) => {
+  if (isLocked.value) return
+
+  emits('closeModal')
+  dialog.value = true
+}
+
+async function changeLockType(type: LockType) {
+  $e('a:grid:lockmenu', { lockType: type })
+
+  if (!activeView.value) return
+
+  if (type === 'personal') {
+    // Coming soon
+    return message.info(t('msg.toast.futureRelease'))
+  }
+  try {
+    activeView.value.lock_type = type
+    await $api.dbView.update(activeView.value.id as string, {
+      lock_type: type,
+    })
+
+    message.success(`Successfully Switched to ${type} view`)
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+
+  emits('closeModal')
+}
+
+/** Duplicate a view */
+// todo: This is not really a duplication, maybe we need to implement a true duplication?
+function onDuplicate() {
+  emits('closeModal')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
+    'modelValue': isOpen,
+    'title': activeView.value!.title,
+    'type': activeView.value!.type as ViewTypes,
+    'tableId': activeTable.value!.id,
+    'selectedViewId': activeView.value!.id,
+    'groupingFieldColumnId': activeView.value!.view!.fk_grp_col_id,
+    'views': views,
+    'onUpdate:modelValue': closeDialog,
+    'onCreated': async (view: ViewType) => {
+      closeDialog()
+
+      refreshCommandPalette()
+
+      await loadViews({
+        force: true,
+        tableId: activeTable.value!.id!,
+      })
+
+      navigateToView({
+        view,
+        tableId: activeTable.value!.id!,
+        baseId: base.value.id!,
+        hardReload: view.type === ViewTypes.FORM,
+      })
+
+      $e('a:view:create', { view: view.type })
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+</script>
+
+<template>
+  <NcMenu class="!min-w-70" data-testid="toolbar-actions">
+    <NcTooltip>
+      <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
+      <div class="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
+        <div class="flex text-xs font-bold text-gray-500 ml-1">
+          {{
+            $t('labels.viewIdColon', {
+              viewId: activeView?.id,
+            })
+          }}
+        </div>
+        <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
+          <GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" />
+          <GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" />
+        </NcButton>
+      </div>
+    </NcTooltip>
+    <NcDivider />
+    <template v-if="!activeView?.is_default">
+      <NcMenuItem @click="onRenameMenuClick">
+        <GeneralIcon icon="edit" />
+        {{ $t('activity.renameView') }}
+      </NcMenuItem>
+      <NcMenuItem @click="onDuplicate">
+        <GeneralIcon icon="duplicate" />
+        {{ $t('labels.duplicateView') }}
+      </NcMenuItem>
+      <NcDivider />
+    </template>
+
+    <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
+      <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">{{ $t('activity.uploadData') }}</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 #title>
+        <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>
+      </template>
+
+      <template #expandIcon></template>
+
+      <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>
+            {{ $t('labels.viewMode') }}
+          </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>
+        </div>
+      </template>
+
+      <template #expandIcon></template>
+      <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div>
+      <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+        <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
+      </a-menu-item>
+
+      <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+        <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
+      </a-menu-item>
+    </NcSubMenu>
+    <template v-if="currentBaseId">
+      <LazyDlgQuickImport
+        v-for="tp in quickImportDialogTypes"
+        :key="tp"
+        v-model="quickImportDialogs[tp].value"
+        :import-type="tp"
+        :source-id="currentBaseId"
+        :import-data-only="true"
+      />
+    </template>
+  </NcMenu>
+</template>
+
+<style lang="scss" scoped>
+.nc-base-menu-item {
+  @apply !py-0;
+}
+
+.nc-view-actions-lock-type {
+  @apply !min-w-0;
+}
+</style>
+
+<style lang="scss">
+.nc-view-actions-lock-type > div {
+  @apply !py-0;
+}
+
+.nc-view-action-lock-subaction {
+  @apply !min-w-82;
+}
+</style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 841806fa59..c0bae087f1 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -1190,6 +1190,7 @@
       "nameMinLength": "Name must be at least 2 characters long",
       "nameMaxLength": "Name must be at most 60 characters long",
       "viewNameRequired": "View name is required",
+      "nameMaxLength256": "Name must be at most 256 characters long",
       "viewNameUnique": "View name should be unique",
       "searchProject": "Your search for {search} found no results",
       "invalidChar": "Invalid character in folder path.",

From 31aae41a92c7e61e95ae646872e6ee014ac9fa88 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 18/30] fix: Removed active view and active table logic from
 View context menu and integrated it with sidebar view node

---
 .../dashboard/TreeView/ViewsList.vue          |  1 +
 .../dashboard/TreeView/ViewsNode.vue          | 53 ++++---------------
 .../smartsheet/toolbar/OpenedViewAction.vue   |  9 +++-
 .../smartsheet/toolbar/ViewActionMenu.vue     | 52 +++++++++++-------
 4 files changed, 54 insertions(+), 61 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 25bb17641f..f5d595e617 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -420,6 +420,7 @@ function onOpenModal({
         :key="view.id"
         :view="view"
         :on-validate="validate"
+        :table="table"
         class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100"
         :class="{
           'bg-gray-200': isMarked === view.id,
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index a85ac95777..a7d0e64d8f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
+import type { TableType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
 import {
   IsLockedInj,
@@ -16,6 +16,7 @@ import {
 
 interface Props {
   view: ViewType
+  table: TableType
   onValidate: (view: ViewType) => boolean | string
 }
 
@@ -49,6 +50,8 @@ const base = inject(ProjectInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
+const table = computed(() => props.table)
+
 const isLocked = inject(IsLockedInj, ref(false))
 
 const isDefaultBase = computed(() => {
@@ -121,28 +124,6 @@ onKeyStroke('Enter', (event) => {
 
 const focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
-/** Duplicate a view */
-// todo: This is not really a duplication, maybe we need to implement a true duplication?
-function onDuplicate() {
-  isDropdownOpen.value = false
-
-  emits('openModal', {
-    type: vModel.value.type!,
-    title: vModel.value.title,
-    copyViewId: vModel.value.id,
-    groupingFieldColumnId: (vModel.value.view as KanbanType).fk_grp_col_id!,
-  })
-
-  $e('c:view:copy', { view: vModel.value.type })
-}
-
-/** Delete a view */
-async function onDelete() {
-  isDropdownOpen.value = false
-
-  emits('delete', vModel.value)
-}
-
 /** Rename a view */
 async function onRename() {
   isDropdownOpen.value = false
@@ -262,25 +243,13 @@ function onStopEdit() {
           </NcButton>
 
           <template #overlay>
-            <NcMenu class="min-w-27" :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
-              <NcMenuItem v-e="['c:view:rename']" @click.stop="onDblClick">
-                <GeneralIcon icon="edit" />
-                <div class="-ml-0.25">{{ $t('general.rename') }}</div>
-              </NcMenuItem>
-              <NcMenuItem v-e="['c:view:duplicate']" @click.stop="onDuplicate">
-                <GeneralIcon icon="duplicate" class="nc-view-copy-icon" />
-                {{ $t('general.duplicate') }}
-              </NcMenuItem>
-
-              <NcDivider />
-
-              <template v-if="!vModel.is_default">
-                <NcMenuItem v-e="['c:view:delete']" class="!text-red-500 !hover:bg-red-50" @click.stop="onDelete">
-                  <GeneralIcon icon="delete" class="text-sm nc-view-delete-icon" />
-                  <div class="-ml-0.25">{{ $t('general.delete') }}</div>
-                </NcMenuItem>
-              </template>
-            </NcMenu>
+            <SmartsheetToolbarViewActionMenu
+              :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`"
+              :view="vModel"
+              :table="table"
+              @close-modal="isDropdownOpen = false"
+              @rename="onRename"
+            />
           </template>
         </NcDropdown>
       </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 3347bc6138..d48daa6a8b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 const { activeView, views, openedViewsTab } = storeToRefs(useViewsStore())
 
+const { activeTable } = storeToRefs(useTablesStore())
+
 const { isMobileMode } = useGlobal()
 
 const { isSharedBase } = storeToRefs(useBase())
@@ -144,7 +146,12 @@ const resetViewRename = () => {
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>
-      <SmartsheetToolbarViewActionMenu @close-modal="isDropdownOpen = false" @rename="onRenameMenuClick" />
+      <SmartsheetToolbarViewActionMenu
+        :table="activeTable"
+        :view="activeView"
+        @close-modal="isDropdownOpen = false"
+        @rename="onRenameMenuClick"
+      />
     </template>
   </NcDropdown>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 39637fead8..295f840b9a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -1,11 +1,16 @@
 <script lang="ts" setup>
-import type { ViewType } from 'nocodb-sdk'
+import type { TableType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { LockType } from '~/lib'
 
 import UploadIcon from '~icons/nc-icons/upload'
 import DownloadIcon from '~icons/nc-icons/download'
 
+const props = defineProps<{
+  view: ViewType
+  table: TableType
+}>()
+
 const emits = defineEmits(['rename', 'closeModal'])
 
 const { isUIAllowed } = useRoles()
@@ -18,20 +23,24 @@ const { $api, $e } = useNuxtApp()
 
 const { t } = useI18n()
 
-const { activeView, views } = storeToRefs(useViewsStore())
+const view = computed(() => props.view)
+
+const table = computed(() => props.table)
+
+const { viewsByTable } = storeToRefs(useViewsStore())
 const { loadViews, navigateToView } = useViewsStore()
 
 const { base } = storeToRefs(useBase())
 
-const { activeTable } = storeToRefs(useTablesStore())
-
 const { refreshCommandPalette } = useCommandPalette()
 
-const lockType = computed(() => (activeView.value?.lock_type as LockType) || LockType.Collaborative)
+const lockType = computed(() => (view.value?.lock_type as LockType) || LockType.Collaborative)
+
+const views = computed(() => viewsByTable.value.get(table.value.id!))
 
 const isViewIdCopied = ref(false)
 
-const currentBaseId = computed(() => activeTable.value?.source_id)
+const currentBaseId = computed(() => table.value?.source_id)
 
 const onRenameMenuClick = () => {
   emits('rename')
@@ -57,15 +66,15 @@ const onImportClick = (dialog: any) => {
 async function changeLockType(type: LockType) {
   $e('a:grid:lockmenu', { lockType: type })
 
-  if (!activeView.value) return
+  if (!view.value) return
 
   if (type === 'personal') {
     // Coming soon
     return message.info(t('msg.toast.futureRelease'))
   }
   try {
-    activeView.value.lock_type = type
-    await $api.dbView.update(activeView.value.id as string, {
+    view.value.lock_type = type
+    await $api.dbView.update(view.value.id as string, {
       lock_type: type,
     })
 
@@ -86,11 +95,11 @@ function onDuplicate() {
 
   const { close } = useDialog(resolveComponent('DlgViewCreate'), {
     'modelValue': isOpen,
-    'title': activeView.value!.title,
-    'type': activeView.value!.type as ViewTypes,
-    'tableId': activeTable.value!.id,
-    'selectedViewId': activeView.value!.id,
-    'groupingFieldColumnId': activeView.value!.view!.fk_grp_col_id,
+    'title': view.value!.title,
+    'type': view.value!.type as ViewTypes,
+    'tableId': table.value!.id,
+    'selectedViewId': view.value!.id,
+    'groupingFieldColumnId': view.value!.view!.fk_grp_col_id,
     'views': views,
     'onUpdate:modelValue': closeDialog,
     'onCreated': async (view: ViewType) => {
@@ -100,12 +109,12 @@ function onDuplicate() {
 
       await loadViews({
         force: true,
-        tableId: activeTable.value!.id!,
+        tableId: table.value!.id!,
       })
 
       navigateToView({
         view,
-        tableId: activeTable.value!.id!,
+        tableId: table.value!.id!,
         baseId: base.value.id!,
         hardReload: view.type === ViewTypes.FORM,
       })
@@ -120,6 +129,13 @@ function onDuplicate() {
     close(1000)
   }
 }
+
+const { copy } = useCopy()
+
+const onViewIdCopy = async () => {
+  await copy(view.value!.id!)
+  isViewIdCopied.value = true
+}
 </script>
 
 <template>
@@ -130,7 +146,7 @@ function onDuplicate() {
         <div class="flex text-xs font-bold text-gray-500 ml-1">
           {{
             $t('labels.viewIdColon', {
-              viewId: activeView?.id,
+              viewId: view?.id,
             })
           }}
         </div>
@@ -141,7 +157,7 @@ function onDuplicate() {
       </div>
     </NcTooltip>
     <NcDivider />
-    <template v-if="!activeView?.is_default">
+    <template v-if="!view?.is_default">
       <NcMenuItem @click="onRenameMenuClick">
         <GeneralIcon icon="edit" />
         {{ $t('activity.renameView') }}

From 864d6cabc3d2ceff7c94f8b551cb76797d7c3a72 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 19/30] fix: Removed horizontal scrollbar always coming for
 grid

---
 packages/nc-gui/components/smartsheet/grid/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 79871ce31c..438f4289c5 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -385,7 +385,7 @@ const gridWrapperClass = computed<string>(() => {
   const classes = []
   if (headerOnly !== true) {
     if (!scrollParent.value) {
-      classes.push('nc-scrollbar-x-lg overflow-auto')
+      classes.push('nc-scrollbar-x-lg !overflow-auto')
     }
   } else {
     classes.push('overflow-visible')

From 5e6aaa055d359eeebffd36a848a7402fd83440aa Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 20/30] fix: Integrated new view context menu import option to
 view sidebar bar node

---
 .../components/dashboard/TreeView/ViewsNode.vue    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index a7d0e64d8f..d9e62854f8 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -48,9 +48,15 @@ const { isUIAllowed } = useRoles()
 
 const base = inject(ProjectInj, ref())
 
-const activeView = inject(ActiveViewInj, ref())
+const { activeView } = storeToRefs(useViewsStore())
+
+const { getMeta } = useMetas()
 
 const table = computed(() => props.table)
+const injectedTable = ref(table.value)
+
+provide(ActiveViewInj, vModel)
+provide(MetaInj, injectedTable)
 
 const isLocked = inject(IsLockedInj, ref(false))
 
@@ -170,6 +176,12 @@ function onStopEdit() {
     isStopped.value = false
   }, 250)
 }
+
+watch(isDropdownOpen, async () => {
+  if (!isDropdownOpen.value) return
+
+  injectedTable.value = (await getMeta(table.value.id!)) as any
+})
 </script>
 
 <template>

From 4df048082469068cbd972e64bad96ad8477b4657 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 21/30] fix: Integrated Delete view button to view context menu

---
 .../dashboard/TreeView/ViewsNode.vue          |  7 +++
 .../smartsheet/toolbar/OpenedViewAction.vue   | 53 +++++++++++++++++--
 .../smartsheet/toolbar/ViewActionMenu.vue     | 15 +++++-
 packages/nc-gui/lang/en.json                  |  1 +
 4 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index d9e62854f8..373737e422 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -177,6 +177,12 @@ function onStopEdit() {
   }, 250)
 }
 
+const onDelete = () => {
+  isDropdownOpen.value = false
+
+  emits('delete', vModel.value)
+}
+
 watch(isDropdownOpen, async () => {
   if (!isDropdownOpen.value) return
 
@@ -261,6 +267,7 @@ watch(isDropdownOpen, async () => {
               :table="table"
               @close-modal="isDropdownOpen = false"
               @rename="onRename"
+              @delete="onDelete"
             />
           </template>
         </NcDropdown>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index d48daa6a8b..abe3db8922 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-const { activeView, views, openedViewsTab } = storeToRefs(useViewsStore())
-
 const { activeTable } = storeToRefs(useTablesStore())
 
 const { isMobileMode } = useGlobal()
 
-const { isSharedBase } = storeToRefs(useBase())
+const { isSharedBase, base } = storeToRefs(useBase())
 
 const { t } = useI18n()
 
 const { $api } = useNuxtApp()
 
+const { refreshCommandPalette } = useCommandPalette()
+
+const { activeView, views, openedViewsTab, viewsByTable } = storeToRefs(useViewsStore())
+const { loadViews, removeFromRecentViews } = useViewsStore()
+
+const { navigateToTable } = useTablesStore()
+
 const isDropdownOpen = ref(false)
 
 const isViewIdCopied = ref(false)
@@ -89,6 +94,47 @@ const resetViewRename = () => {
   viewRenameTitle.value = activeView.value!.title
   isRenaming.value = false
 }
+
+function openDeleteDialog() {
+  const isOpen = ref(true)
+  isDropdownOpen.value = false
+
+  const { close } = useDialog(resolveComponent('DlgViewDelete'), {
+    'modelValue': isOpen,
+    'view': activeView.value,
+    'onUpdate:modelValue': closeDialog,
+    'onDeleted': async () => {
+      closeDialog()
+
+      removeFromRecentViews({ viewId: activeView.value!.id, tableId: activeView.value!.fk_model_id, baseId: base.value.id })
+      refreshCommandPalette()
+      if (activeView.value?.id === activeView.value!.id) {
+        navigateToTable({
+          tableId: activeTable.value!.id!,
+          baseId: base.value.id!,
+        })
+      }
+
+      await loadViews({
+        tableId: activeTable.value!.id!,
+        force: true,
+      })
+
+      const activeNonDefaultViews = viewsByTable.value.get(activeTable!.value!.id!)?.filter((v) => !v.is_default) ?? []
+
+      activeTable!.value!.meta = {
+        ...(activeTable!.value!.meta as object),
+        hasNonDefaultViews: activeNonDefaultViews.length > 1,
+      }
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -151,6 +197,7 @@ const resetViewRename = () => {
         :view="activeView"
         @close-modal="isDropdownOpen = false"
         @rename="onRenameMenuClick"
+        @delete="openDeleteDialog"
       />
     </template>
   </NcDropdown>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 295f840b9a..01f0312699 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   table: TableType
 }>()
 
-const emits = defineEmits(['rename', 'closeModal'])
+const emits = defineEmits(['rename', 'closeModal', 'delete'])
 
 const { isUIAllowed } = useRoles()
 
@@ -136,6 +136,10 @@ const onViewIdCopy = async () => {
   await copy(view.value!.id!)
   isViewIdCopied.value = true
 }
+
+const onDelete = async () => {
+  emits('delete')
+}
 </script>
 
 <template>
@@ -233,6 +237,15 @@ const onViewIdCopy = async () => {
         <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
       </a-menu-item>
     </NcSubMenu>
+    <NcDivider />
+    <NcMenuItem class="!hover:bg-red-50 !text-red-500" @click="onDelete">
+      <GeneralIcon icon="delete" />
+      {{
+        $t('general.deleteEntity', {
+          entity: $t('objects.view'),
+        })
+      }}
+    </NcMenuItem>
     <template v-if="currentBaseId">
       <LazyDlgQuickImport
         v-for="tp in quickImportDialogTypes"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c0bae087f1..da6bd70323 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -88,6 +88,7 @@
     "action": "Action",
     "insert": "Insert",
     "delete": "Delete",
+    "deleteEntity": "Delete {entity}",
     "bulkInsert": "Bulk Insert",
     "bulkDelete": "Bulk Delete",
     "bulkUpdate": "Bulk Update",

From a47aac0a9bd296cf1851a8d25d2741d01d7d90b7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 22/30] fix: Fixed sort btn color for locked view

---
 packages/nc-gui/assets/nc-icons/sort.svg                    | 6 +++---
 packages/nc-gui/assets/style.scss                           | 3 +++
 .../nc-gui/components/smartsheet/toolbar/SortListMenu.vue   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/assets/nc-icons/sort.svg b/packages/nc-gui/assets/nc-icons/sort.svg
index 9acb6113c7..513c55c68b 100644
--- a/packages/nc-gui/assets/nc-icons/sort.svg
+++ b/packages/nc-gui/assets/nc-icons/sort.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 13.3334V10.6667" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 13.3334V6.66669" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 13.3334V2.66669" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 13.3334V10.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13.3334V6.66669" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 13.3334V2.66669" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 73c2c8a0c3..4a620c5276 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -479,6 +479,9 @@ a {
 .nc-toolbar-btn {
   @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
 }
+.nc-toolbar-btn[disabled] {
+  @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
+}
 
 .nc-warning-info {
   @apply !shadow-none rounded ring-1 ring-red-600;
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 3327863351..c4660fab9e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -113,7 +113,7 @@ onMounted(() => {
     <div :class="{ 'nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-2">
-          <component :is="iconMap.sort" class="h-4 w-4" />
+          <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />
 
           <!-- Sort -->
           <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.sort') }}</span>

From d9a02822725fa5f8f8505b34ada52b8b62be9f1c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:44 +0000
Subject: [PATCH 23/30] fix: Lock icon color

---
 packages/nc-gui/assets/nc-icons/lock.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/assets/nc-icons/lock.svg b/packages/nc-gui/assets/nc-icons/lock.svg
index 45946a1cf5..05f258b22a 100644
--- a/packages/nc-gui/assets/nc-icons/lock.svg
+++ b/packages/nc-gui/assets/nc-icons/lock.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.6667 7.33337H3.33333C2.59695 7.33337 2 7.93033 2 8.66671V13.3334C2 14.0698 2.59695 14.6667 3.33333 14.6667H12.6667C13.403 14.6667 14 14.0698 14 13.3334V8.66671C14 7.93033 13.403 7.33337 12.6667 7.33337Z" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.66667 7.33337V4.66671C4.66667 3.78265 5.01786 2.93481 5.64298 2.30968C6.2681 1.68456 7.11595 1.33337 8 1.33337C8.88406 1.33337 9.73191 1.68456 10.357 2.30968C10.9821 2.93481 11.3333 3.78265 11.3333 4.66671V7.33337" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6667 7.33337H3.33333C2.59695 7.33337 2 7.93033 2 8.66671V13.3334C2 14.0698 2.59695 14.6667 3.33333 14.6667H12.6667C13.403 14.6667 14 14.0698 14 13.3334V8.66671C14 7.93033 13.403 7.33337 12.6667 7.33337Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 7.33337V4.66671C4.66667 3.78265 5.01786 2.93481 5.64298 2.30968C6.2681 1.68456 7.11595 1.33337 8 1.33337C8.88406 1.33337 9.73191 1.68456 10.357 2.30968C10.9821 2.93481 11.3333 3.78265 11.3333 4.66671V7.33337" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

From a59a6f5c63ddb5325cc7ba3181c38ee0998ed761 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 24/30] fix: Hide delete view btn for default view

---
 .../smartsheet/toolbar/ViewActionMenu.vue     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 01f0312699..9804c252fd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -237,15 +237,17 @@ const onDelete = async () => {
         <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
       </a-menu-item>
     </NcSubMenu>
-    <NcDivider />
-    <NcMenuItem class="!hover:bg-red-50 !text-red-500" @click="onDelete">
-      <GeneralIcon icon="delete" />
-      {{
-        $t('general.deleteEntity', {
-          entity: $t('objects.view'),
-        })
-      }}
-    </NcMenuItem>
+    <template v-if="!view.is_default">
+      <NcDivider />
+      <NcMenuItem class="!hover:bg-red-50 !text-red-500" @click="onDelete">
+        <GeneralIcon icon="delete" />
+        {{
+          $t('general.deleteEntity', {
+            entity: $t('objects.view'),
+          })
+        }}
+      </NcMenuItem>
+    </template>
     <template v-if="currentBaseId">
       <LazyDlgQuickImport
         v-for="tp in quickImportDialogTypes"

From a56c8fac2b9e6031ef2f13f36ae7c9b724ca41ab Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 25/30] fix: Integrated new view context menu to tests

---
 .../components/smartsheet/toolbar/ViewActionMenu.vue      | 6 +++---
 .../pages/Dashboard/common/Toolbar/Actions/index.ts       | 2 +-
 tests/playwright/tests/db/general/viewMenu.spec.ts        | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 9804c252fd..ebb647983c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -143,7 +143,7 @@ const onDelete = async () => {
 </script>
 
 <template>
-  <NcMenu class="!min-w-70" data-testid="toolbar-actions">
+  <NcMenu class="!min-w-70" data-id="toolbar-actions" :data-testid="`view-sidebar-view-actions-${view!.alias || view!.title}`">
     <NcTooltip>
       <template #title> {{ $t('labels.clickToCopyViewID') }} </template>
       <div class="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
@@ -167,7 +167,7 @@ const onDelete = async () => {
         {{ $t('activity.renameView') }}
       </NcMenuItem>
       <NcMenuItem @click="onDuplicate">
-        <GeneralIcon icon="duplicate" />
+        <GeneralIcon icon="duplicate" class="nc-view-copy-icon" />
         {{ $t('labels.duplicateView') }}
       </NcMenuItem>
       <NcDivider />
@@ -240,7 +240,7 @@ const onDelete = async () => {
     <template v-if="!view.is_default">
       <NcDivider />
       <NcMenuItem class="!hover:bg-red-50 !text-red-500" @click="onDelete">
-        <GeneralIcon icon="delete" />
+        <GeneralIcon icon="delete" class="nc-view-delete-icon" />
         {{
           $t('general.deleteEntity', {
             entity: $t('objects.view'),
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts
index 8a5522983d..25d9e74fae 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts
@@ -13,7 +13,7 @@ export class ToolbarActionsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[data-testid="toolbar-actions"]`);
+    return this.rootPage.locator(`[data-id="toolbar-actions"]`);
   }
 
   // todo: use enum
diff --git a/tests/playwright/tests/db/general/viewMenu.spec.ts b/tests/playwright/tests/db/general/viewMenu.spec.ts
index 96bd5c1cdc..0abd1d316c 100644
--- a/tests/playwright/tests/db/general/viewMenu.spec.ts
+++ b/tests/playwright/tests/db/general/viewMenu.spec.ts
@@ -23,8 +23,8 @@ test.describe('Grid view locked', () => {
 
     // enable view lock
     await dashboard.grid.toolbar.viewsMenu.click({
-      menu: 'Collaborative View',
-      subMenu: 'Locked View',
+      menu: 'Collaborative',
+      subMenu: 'Locked',
     });
 
     // verify view lock
@@ -32,8 +32,8 @@ test.describe('Grid view locked', () => {
 
     // enable collaborative view
     await dashboard.grid.toolbar.viewsMenu.click({
-      menu: 'Locked View',
-      subMenu: 'Collaborative View',
+      menu: 'Locked',
+      subMenu: 'Collaborative',
     });
 
     await dashboard.grid.verifyCollaborativeMode();

From 4901517aaed205bbaf91d488025338446706cac2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 26/30] fix: Fixed disabled col select in view create

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

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index e1a7cfaa13..524c1d66f0 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -325,7 +325,7 @@ onMounted(async () => {
             v-model:value="form.fk_geo_data_col_id"
             class="w-full"
             :options="viewSelectFieldOptions"
-            :disabled="groupingFieldColumnId || isMetaLoading"
+            :disabled="isMetaLoading"
             :loading="isMetaLoading"
             :placeholder="$t('placeholder.selectGeoField')"
             :not-found-content="$t('placeholder.selectGeoFieldNotFound')"

From 76ed19368a4acceefa030546330c68b74f2d6a29 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 27/30] fix: Added i18n to ExportSubAction and configured
 events to differentiate it from sidebar and breadcrumb view context menu

---
 .../dashboard/TreeView/ViewsNode.vue          |  1 +
 .../smartsheet/toolbar/ExportSubActions.vue   |  2 +-
 .../smartsheet/toolbar/OpenedViewAction.vue   |  1 +
 .../smartsheet/toolbar/ViewActionMenu.vue     | 46 ++++++++++++++++---
 packages/nc-gui/lang/en.json                  |  1 +
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 373737e422..57c5fb1afb 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -265,6 +265,7 @@ watch(isDropdownOpen, async () => {
               :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`"
               :view="vModel"
               :table="table"
+              in-sidebar
               @close-modal="isDropdownOpen = false"
               @rename="onRename"
               @delete="onDelete"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index aa673e068e..9e9402fbc5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -100,7 +100,7 @@ const exportFile = async (exportType: ExportTypes) => {
 </script>
 
 <template>
-  <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Download Data</div>
+  <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.downloadData') }}</div>
 
   <a-menu-item class="!mx-1 !py-2 !rounded-md">
     <div
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index abe3db8922..33812e84d0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
@@ -168,6 +168,7 @@ function openDeleteDialog() {
   <NcDropdown
     v-else
     v-model:visible="isDropdownOpen"
+    v-e="['c:breadcrumb:view-actions']"
     class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn"
     overlay-class-name="nc-dropdown-actions-menu"
   >
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index ebb647983c..8f63ee85f3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -9,6 +9,7 @@ import DownloadIcon from '~icons/nc-icons/download'
 const props = defineProps<{
   view: ViewType
   table: TableType
+  inSidebar: boolean
 }>()
 
 const emits = defineEmits(['rename', 'closeModal', 'delete'])
@@ -64,7 +65,7 @@ const onImportClick = (dialog: any) => {
 }
 
 async function changeLockType(type: LockType) {
-  $e('a:grid:lockmenu', { lockType: type })
+  $e('a:grid:lockmenu', { lockType: type, sidebar: props.inSidebar })
 
   if (!view.value) return
 
@@ -119,7 +120,7 @@ function onDuplicate() {
         hardReload: view.type === ViewTypes.FORM,
       })
 
-      $e('a:view:create', { view: view.type })
+      $e('a:view:create', { view: view.type, sidebar: props.inSidebar })
     },
   })
 
@@ -176,7 +177,15 @@ const onDelete = async () => {
     <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
       <NcSubMenu key="upload">
         <template #title>
-          <div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
+          <div
+            v-e="[
+              'c:navdraw:preview-as',
+              {
+                sidebar: props.inSidebar,
+              },
+            ]"
+            class="nc-base-menu-item group"
+          >
             <UploadIcon class="w-4 h-4" />
             {{ $t('general.upload') }}
           </div>
@@ -187,7 +196,16 @@ const onDelete = async () => {
 
         <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 }">
+            <div
+              v-e="[
+                `a:upload:${type}`,
+                {
+                  sidebar: props.inSidebar,
+                },
+              ]"
+              class="nc-base-menu-item"
+              :class="{ disabled: isLocked }"
+            >
               <component :is="iconMap.upload" />
               {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
             </div>
@@ -197,7 +215,15 @@ const onDelete = async () => {
     </template>
     <NcSubMenu key="download">
       <template #title>
-        <div v-e="['c:download']" class="nc-base-menu-item group nc-view-context-download-option">
+        <div
+          v-e="[
+            'c:download',
+            {
+              sidebar: props.inSidebar,
+            },
+          ]"
+          class="nc-base-menu-item group nc-view-context-download-option"
+        >
           <DownloadIcon class="w-4 h-4" />
           {{ $t('general.download') }}
         </div>
@@ -212,7 +238,15 @@ const onDelete = async () => {
 
     <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
+          v-e="[
+            'c:navdraw:preview-as',
+            {
+              sidebar: props.inSidebar,
+            },
+          ]"
+          class="flex flex-row items-center gap-x-3"
+        >
           <div>
             {{ $t('labels.viewMode') }}
           </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index da6bd70323..5a7fdf61f2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -411,6 +411,7 @@
     }
   },
   "labels": {
+    "downloadData": "Download Data",
     "noToken": "No Token",
     "tokenLimit": "Only one token per user is allowed",
     "duplicateAttachment": "File with name {filename} already attached",

From c0935591835465ee06c84dec9bc1ded0fca577b5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 28/30] fix: Remvoed useSmartsheetStore dependecy with
 ViewACtionsMenu and sidebar and added proxy states to views store

---
 .../smartsheet/toolbar/ExportSubActions.vue   |  6 +----
 .../nc-gui/composables/useSmartsheetStore.ts  | 22 ++++++++++++++++++-
 packages/nc-gui/lang/en.json                  |  4 ++--
 packages/nc-gui/store/views.ts                | 10 ++++++++-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
index 9e9402fbc5..5f647286b3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ExportSubActions.vue
@@ -13,13 +13,9 @@ import {
   ref,
   storeToRefs,
   useBase,
-  useI18n,
   useNuxtApp,
-  useSmartsheetStoreOrThrow,
 } from '#imports'
 
-const { t } = useI18n()
-
 const isPublicView = inject(IsPublicInj, ref(false))
 
 const fields = inject(FieldsInj, ref([]))
@@ -33,7 +29,7 @@ const meta = inject(MetaInj, ref())
 
 const selectedView = inject(ActiveViewInj)
 
-const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+const { activeNestedFilters: nestedFilters, activeSorts: sorts } = storeToRefs(useViewsStore())
 
 const isExportingType = ref<ExportTypes | undefined>(undefined)
 
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 81763fdbb7..9f26b9de5c 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -15,7 +15,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   ) => {
     const { $api } = useNuxtApp()
 
-    const { activeView: view } = storeToRefs(useViewsStore())
+    const { activeView: view, activeNestedFilters, activeSorts } = storeToRefs(useViewsStore())
 
     const baseStore = useBase()
 
@@ -57,6 +57,26 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
+    watch(
+      sorts,
+      () => {
+        activeSorts.value = sorts.value
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    watch(
+      nestedFilters,
+      () => {
+        activeNestedFilters.value = nestedFilters.value
+      },
+      {
+        immediate: true,
+      },
+    )
+
     return {
       view,
       meta,
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 5a7fdf61f2..d86ab3c6e4 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -748,8 +748,8 @@
     "deleteSelectedRow": "Delete Selected Records",
     "importExcel": "Import Excel",
     "importCSV": "Import CSV",
-    "downloadCSV": "Download as CSV",
-    "downloadExcel": "Download as XLSX",
+    "downloadCSV": "Download CSV",
+    "downloadExcel": "Download Excel",
     "uploadCSV": "Upload CSV",
     "import": "Import",
     "importMetadata": "Import Metadata",
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index a6f9547025..ce3ca8855a 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -1,4 +1,4 @@
-import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import type { FilterType, SortType, ViewType, ViewTypes } from 'nocodb-sdk'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { ViewPageType } from '~/lib'
 
@@ -41,6 +41,12 @@ export const useViewsStore = defineStore('viewsStore', () => {
     },
   })
 
+  // Both are synced with `useSmartsheetStore` state
+  // Sort of active view
+  const activeSorts = ref<SortType[]>([])
+  // Filters of active view (used for local filters)
+  const activeNestedFilters = ref<FilterType[]>([])
+
   const isViewsLoading = ref(true)
   const isViewDataLoading = ref(true)
   const isPublic = computed(() => route.value.meta?.public)
@@ -304,6 +310,8 @@ export const useViewsStore = defineStore('viewsStore', () => {
     navigateToView,
     changeView,
     removeFromRecentViews,
+    activeSorts,
+    activeNestedFilters,
   }
 })
 

From 833b9acfb53956e366b87af3e0cedebc5cc9a64c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 29/30] fix: Integrated Download CSV & Excel label rename to
 tests

---
 .../playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts | 8 ++++----
 tests/playwright/pages/Dashboard/common/Toolbar/index.ts  | 4 ++--
 .../playwright/tests/db/columns/columnAttachments.spec.ts | 2 +-
 tests/playwright/tests/db/general/viewMenu.spec.ts        | 4 ++--
 tests/playwright/tests/db/views/viewGridShare.spec.ts     | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
index 4fb459ceef..477713a47a 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts
@@ -89,12 +89,12 @@ export class ToolbarViewMenuPage extends BasePage {
     await this.get().locator(`.ant-dropdown-menu-title-content:has-text("${menu}")`).first().click();
     if (subMenu) {
       // for CSV download, pass locator instead of clicking it here
-      if (subMenu === 'Download as CSV') {
+      if (subMenu === 'Download CSV') {
         await this.verifyDownloadAsCSV({
           downloadLocator: this.rootPage.locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`).last(),
           expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
         });
-      } else if (subMenu === 'Download as XLSX') {
+      } else if (subMenu === 'Download Excel') {
         await this.verifyDownloadAsXLSX({
           downloadLocator: this.rootPage.locator(`.ant-dropdown-menu-title-content:has-text("${subMenu}")`).last(),
           expectedDataFile: verificationInfo?.verificationFile ?? './fixtures/expectedBaseDownloadData.txt',
@@ -104,12 +104,12 @@ export class ToolbarViewMenuPage extends BasePage {
       }
 
       switch (subMenu) {
-        case 'Download as CSV':
+        case 'Download CSV':
           await this.verifyToast({
             message: 'Successfully exported all table data',
           });
           break;
-        case 'Download as XLSX':
+        case 'Download Excel':
           await this.verifyToast({
             message: 'Successfully exported all table data',
           });
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 6886a871b3..ca4376fdb9 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -206,8 +206,8 @@ export class ToolbarPage extends BasePage {
     const menuItems = {
       creator: ['Download', 'Upload'],
       editor: ['Download', 'Upload'],
-      commenter: ['Download as CSV', 'Download as XLSX'],
-      viewer: ['Download as CSV', 'Download as XLSX'],
+      commenter: ['Download CSV', 'Download Excel'],
+      viewer: ['Download CSV', 'Download Excel'],
     };
     const vMenu = this.rootPage.locator('.nc-dropdown-actions-menu:visible');
     for (const item of menuItems[param.role.toLowerCase()]) {
diff --git a/tests/playwright/tests/db/columns/columnAttachments.spec.ts b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
index fac8ef6c4b..c7c95bbbbe 100644
--- a/tests/playwright/tests/db/columns/columnAttachments.spec.ts
+++ b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
@@ -97,7 +97,7 @@ test.describe('Attachment column', () => {
     await dashboard.grid.toolbar.actions.click('Download');
 
     const csvFileData: string = await dashboard.downloadAndGetFile({
-      downloadUIAction: dashboard.grid.toolbar.actions.clickDownloadSubmenu('Download as CSV'),
+      downloadUIAction: dashboard.grid.toolbar.actions.clickDownloadSubmenu('Download CSV'),
     });
     const csvArray = csvFileData.split('\r\n');
     const columns = csvArray[0];
diff --git a/tests/playwright/tests/db/general/viewMenu.spec.ts b/tests/playwright/tests/db/general/viewMenu.spec.ts
index 0abd1d316c..ca3ef4fbae 100644
--- a/tests/playwright/tests/db/general/viewMenu.spec.ts
+++ b/tests/playwright/tests/db/general/viewMenu.spec.ts
@@ -52,7 +52,7 @@ test.describe('Grid view locked', () => {
 
     await dashboard.grid.toolbar.viewsMenu.click({
       menu: 'Download',
-      subMenu: 'Download as CSV',
+      subMenu: 'Download CSV',
       verificationInfo: {
         verificationFile: isPg(context) ? './fixtures/expectedBaseDownloadDataPg.txt' : null,
       },
@@ -72,7 +72,7 @@ test.describe('Grid view locked', () => {
 
     await dashboard.grid.toolbar.viewsMenu.click({
       menu: 'Download',
-      subMenu: 'Download as XLSX',
+      subMenu: 'Download Excel',
       verificationInfo: {
         verificationFile: isPg(context) ? './fixtures/expectedBaseDownloadDataPg.txt' : null,
       },
diff --git a/tests/playwright/tests/db/views/viewGridShare.spec.ts b/tests/playwright/tests/db/views/viewGridShare.spec.ts
index 8cb454c9bf..0b0f588837 100644
--- a/tests/playwright/tests/db/views/viewGridShare.spec.ts
+++ b/tests/playwright/tests/db/views/viewGridShare.spec.ts
@@ -247,7 +247,7 @@ test.describe('Shared view', () => {
 
     // verify download
     await sharedPage.grid.toolbar.clickDownload(
-      'Download as CSV',
+      'Download CSV',
       isSqlite(context) || isPg(context) ? 'expectedDataSqlite.txt' : 'expectedData.txt'
     );
   });

From 65797c01c6b32ddef7bec4f4aaf29ca2fd9b9b97 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 10 Nov 2023 10:54:45 +0000
Subject: [PATCH 30/30] fix: Hide import and export option in view menu for
 form view

---
 .../smartsheet/toolbar/ViewActionMenu.vue     | 93 ++++++++++---------
 1 file changed, 47 insertions(+), 46 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 8f63ee85f3..e93b9eaa6b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -174,67 +174,68 @@ const onDelete = async () => {
       <NcDivider />
     </template>
 
-    <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
-      <NcSubMenu key="upload">
+    <template v-if="view.type !== ViewTypes.FORM">
+      <template v-if="isUIAllowed('csvTableImport') && !isPublicView">
+        <NcSubMenu key="upload">
+          <template #title>
+            <div
+              v-e="[
+                'c:navdraw:preview-as',
+                {
+                  sidebar: props.inSidebar,
+                },
+              ]"
+              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">{{ $t('activity.uploadData') }}</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}`,
+                  {
+                    sidebar: props.inSidebar,
+                  },
+                ]"
+                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:navdraw:preview-as',
+              'c:download',
               {
                 sidebar: props.inSidebar,
               },
             ]"
-            class="nc-base-menu-item group"
+            class="nc-base-menu-item group nc-view-context-download-option"
           >
-            <UploadIcon class="w-4 h-4" />
-            {{ $t('general.upload') }}
+            <DownloadIcon class="w-4 h-4" />
+            {{ $t('general.download') }}
           </div>
         </template>
 
         <template #expandIcon></template>
-        <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('activity.uploadData') }}</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}`,
-                {
-                  sidebar: props.inSidebar,
-                },
-              ]"
-              class="nc-base-menu-item"
-              :class="{ disabled: isLocked }"
-            >
-              <component :is="iconMap.upload" />
-              {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
-            </div>
-          </NcMenuItem>
-        </template>
+        <LazySmartsheetToolbarExportSubActions />
       </NcSubMenu>
+      <NcDivider />
     </template>
-    <NcSubMenu key="download">
-      <template #title>
-        <div
-          v-e="[
-            'c:download',
-            {
-              sidebar: props.inSidebar,
-            },
-          ]"
-          class="nc-base-menu-item group nc-view-context-download-option"
-        >
-          <DownloadIcon class="w-4 h-4" />
-          {{ $t('general.download') }}
-        </div>
-      </template>
-
-      <template #expandIcon></template>
-
-      <LazySmartsheetToolbarExportSubActions />
-    </NcSubMenu>
-
-    <NcDivider />
 
     <NcSubMenu v-if="isUIAllowed('viewCreateOrEdit')" key="lock-type" class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0">
       <template #title>