Merge pull request #6954 from nocodb/fix/runtime-directive-warnings

fix: vue warnings

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -93,17 +93,21 @@ onMounted(() => {
       </div>
       <template #overlay>
         <NcMenu data-testid="nc-sidebar-userinfo">
-          <NcMenuItem v-e="['c:user:logout']" data-testid="nc-sidebar-user-logout" @click="logout">
+          <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
+            <div v-e="['c:user:logout']" class="flex gap-2 items-center">
               <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
               <GeneralIcon v-else icon="signout" class="menu-icon" />
               <span class="menu-btn"> {{ $t('general.logout') }}</span>
+            </div>
           </NcMenuItem>
           <template v-if="!isMobileMode">
-            <NcMenuItem v-e="['c:auth-token:copy']" @click="onCopy">
+            <NcMenuItem @click="onCopy">
+              <div v-e="['c:auth-token:copy']" class="flex gap-2 items-center">
                 <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
                 <GeneralIcon v-else icon="copy" class="menu-icon" />
                 <template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
                 <template v-else> {{ $t('title.copyAuthToken') }} </template>
+              </div>
             </NcMenuItem>
           </template>
           <NcDivider />
@@ -140,13 +144,17 @@ onMounted(() => {
           <template v-if="!appInfo.ee">
             <NcDivider />
             <a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
-              <NcMenuItem v-e="['c:translate:open']">
+              <NcMenuItem>
+                <div v-e="['c:translate:open']" class="flex gap-2 items-center">
                   <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
                   {{ $t('labels.language') }}
                   <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
                   <div class="flex-1" />
 
-                <MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" />
+                  <MaterialSymbolsChevronRightRounded
+                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                  />
+                </div>
               </NcMenuItem>
 
               <template #content>

packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue

@@ -62,7 +62,6 @@ function openQuickImportDialog(type: string) {
   <NcSubMenu class="py-0" data-testid="nc-sidebar-base-import">
     <template #title>
       <GeneralIcon icon="download" />
-
       {{ $t('labels.importData') }}
     </template>
 
@@ -71,41 +70,41 @@ function openQuickImportDialog(type: string) {
     <NcMenuItem
       v-if="isUIAllowed('airtableImport', { roles: baseRole })"
       key="quick-import-airtable"
-      v-e="['c:import:airtable']"
       @click="openAirtableImportDialog(source.base_id, source.id)"
     >
+      <div v-e="['c:import:airtable']" class="flex gap-2 items-center">
         <GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
         <div class="ml-0.5">{{ $t('labels.airtable') }}</div>
+      </div>
     </NcMenuItem>
 
-    <NcMenuItem
-      v-if="isUIAllowed('csvImport', { roles: baseRole })"
-      key="quick-import-csv"
-      v-e="['c:import:csv']"
-      @click="openQuickImportDialog('csv')"
-    >
+    <NcMenuItem v-if="isUIAllowed('csvImport', { roles: baseRole })" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+      <div v-e="['c:import:csv']" class="flex gap-2 items-center">
         <GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
         {{ $t('labels.csvFile') }}
+      </div>
     </NcMenuItem>
 
     <NcMenuItem
       v-if="isUIAllowed('jsonImport', { roles: baseRole })"
       key="quick-import-json"
-      v-e="['c:import:json']"
       @click="openQuickImportDialog('json')"
     >
+      <div v-e="['c:import:json']" class="flex gap-2 items-center">
         <GeneralIcon icon="code" class="w-4 group-hover:text-black" />
         {{ $t('labels.jsonFile') }}
+      </div>
     </NcMenuItem>
 
     <NcMenuItem
       v-if="isUIAllowed('excelImport', { roles: baseRole })"
       key="quick-import-excel"
-      v-e="['c:import:excel']"
       @click="openQuickImportDialog('excel')"
     >
+      <div v-e="['c:import:excel']" class="flex gap-2 items-center">
         <GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
         {{ $t('labels.microsoftExcel') }}
+      </div>
     </NcMenuItem>
   </NcSubMenu>
 </template>

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -77,7 +77,7 @@ const tempTitle = ref('')
 
 const activeBaseId = ref('')
 
-const isErdModalOpen = ref<Boolean>(false)
+const isErdModalOpen = ref<boolean>(false)
 
 const { t } = useI18n()
 
@@ -116,7 +116,7 @@ const showBaseOption = computed(() => {
   return ['airtableImport', 'csvImport', 'jsonImport', 'excelImport'].some((permission) => isUIAllowed(permission))
 })
 
-const enableEditMode = () => {
+function enableEditMode() {
   editMode.value = true
   tempTitle.value = base.value.title!
   nextTick(() => {
@@ -126,7 +126,7 @@ const enableEditMode = () => {
   })
 }
 
-const updateProjectTitle = async () => {
+async function updateProjectTitle() {
   if (!tempTitle.value) return
 
   try {
@@ -146,7 +146,7 @@ const updateProjectTitle = async () => {
 
 const { copy } = useCopy(true)
 
-const copyProjectInfo = async () => {
+async function copyProjectInfo() {
   try {
     if (
       await copy(
@@ -168,7 +168,7 @@ defineExpose({
   enableEditMode,
 })
 
-const setIcon = async (icon: string, base: BaseType) => {
+async function setIcon(icon: string, base: BaseType) {
   try {
     const meta = {
       ...((base.meta as object) || {}),
@@ -224,7 +224,8 @@ function openTableCreateDialog(sourceIndex?: number | undefined) {
 }
 
 const isAddNewProjectChildEntityLoading = ref(false)
-const addNewProjectChildEntity = async () => {
+
+async function addNewProjectChildEntity() {
   if (isAddNewProjectChildEntityLoading.value) return
 
   isAddNewProjectChildEntityLoading.value = true
@@ -248,7 +249,7 @@ const addNewProjectChildEntity = async () => {
   }
 }
 
-const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
+async function onProjectClick(base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) {
   if (!base) {
     return
   }
@@ -347,17 +348,17 @@ onKeyStroke('Escape', () => {
 const isDuplicateDlgOpen = ref(false)
 const selectedProjectToDuplicate = ref()
 
-const duplicateProject = (base: BaseType) => {
+function duplicateProject(base: BaseType) {
   selectedProjectToDuplicate.value = base
   isDuplicateDlgOpen.value = true
 }
 
-const tableDelete = () => {
+function tableDelete() {
   isTableDeleteDialogVisible.value = true
   $e('c:table:delete')
 }
 
-const projectDelete = () => {
+function projectDelete() {
   isProjectDeleteDialogVisible.value = true
   $e('c:project:delete')
 }
@@ -396,21 +397,18 @@ const projectDelete = () => {
           </NcButton>
 
           <div class="flex items-center mr-1" @click="onProjectClick(base)">
-            <div class="flex items-center select-none w-6 h-full">
+            <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
               <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
 
               <LazyGeneralEmojiPicker
                 v-else
                 :key="base.meta?.icon"
-                v-e="['c:base:emojiSelect']"
                 :emoji="base.meta?.icon"
                 :readonly="true"
                 size="small"
                 @emoji-selected="setIcon($event, base)"
               >
-                <template #default>
                 <GeneralProjectIcon :type="base.type" />
-                </template>
               </LazyGeneralEmojiPicker>
             </div>
           </div>
@@ -460,24 +458,22 @@ const projectDelete = () => {
                 @click="isOptionsOpen = false"
               >
                 <template v-if="!isSharedBase">
-                  <NcMenuItem
-                    v-if="isUIAllowed('baseRename')"
-                    v-e="['c:base:rename']"
-                    data-testid="nc-sidebar-project-rename"
-                    @click="enableEditMode"
-                  >
+                  <NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
+                    <div v-e="['c:base:rename']" class="flex gap-2 items-center">
                       <GeneralIcon icon="edit" class="group-hover:text-black" />
                       {{ $t('general.rename') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcMenuItem
                     v-if="isUIAllowed('baseDuplicate', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
-                    v-e="['c:base:duplicate']"
                     data-testid="nc-sidebar-base-duplicate"
                     @click="duplicateProject(base)"
                   >
+                    <div v-e="['c:base:duplicate']" class="flex gap-2 items-center">
                       <GeneralIcon icon="duplicate" class="text-gray-700" />
                       {{ $t('general.duplicate') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" />
@@ -486,30 +482,27 @@ const projectDelete = () => {
                   <NcMenuItem
                     v-if="!isEeUI"
                     key="copy"
-                    v-e="['c:base:copy-proj-info']"
                     data-testid="nc-sidebar-base-copy-base-info"
                     @click.stop="copyProjectInfo"
                   >
+                    <div v-e="['c:base:copy-proj-info']" class="flex gap-2 items-center">
                       <GeneralIcon icon="copy" class="group-hover:text-black" />
                       {{ $t('activity.account.projInfo') }}
+                    </div>
                   </NcMenuItem>
 
                   <!-- ERD View -->
-                  <NcMenuItem
-                    key="erd"
-                    v-e="['c:base:erd']"
-                    data-testid="nc-sidebar-base-relations"
-                    @click="openErdView(base?.sources?.[0]!)"
-                  >
+                  <NcMenuItem key="erd" data-testid="nc-sidebar-base-relations" @click="openErdView(base?.sources?.[0]!)">
+                    <div v-e="['c:base:erd']" class="flex gap-2 items-center">
                       <GeneralIcon icon="erd" />
                       {{ $t('title.relations') }}
+                    </div>
                   </NcMenuItem>
 
                   <!-- Swagger: Rest APIs -->
                   <NcMenuItem
                     v-if="isUIAllowed('apiDocs')"
                     key="api"
-                    v-e="['c:base:api-docs']"
                     data-testid="nc-sidebar-base-rest-apis"
                     @click.stop="
                       () => {
@@ -518,8 +511,10 @@ const projectDelete = () => {
                       }
                     "
                   >
+                    <div v-e="['c:base:api-docs']" class="flex gap-2 items-center">
                       <GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" />
                       {{ $t('activity.account.swagger') }}
+                    </div>
                   </NcMenuItem>
                 </template>
 
@@ -533,13 +528,14 @@ const projectDelete = () => {
                 <NcMenuItem
                   v-if="isUIAllowed('baseMiscSettings')"
                   key="teamAndSettings"
-                  v-e="['c:base:settings']"
                   data-testid="nc-sidebar-base-settings"
                   class="nc-sidebar-base-base-settings"
                   @click="toggleDialog(true, 'teamAndAuth', undefined, base.id)"
                 >
+                  <div v-e="['c:base:settings']" class="flex gap-2 items-center">
                     <GeneralIcon icon="settings" class="group-hover:text-black" />
                     {{ $t('activity.settings') }}
+                  </div>
                 </NcMenuItem>
                 <NcMenuItem
                   v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
@@ -547,8 +543,10 @@ const projectDelete = () => {
                   class="!text-red-500 !hover:bg-red-50"
                   @click="projectDelete"
                 >
+                  <div class="flex gap-2 items-center">
                     <GeneralIcon icon="delete" class="w-4" />
                     {{ $t('general.delete') }}
+                  </div>
                 </NcMenuItem>
               </NcMenu>
             </template>
@@ -666,9 +664,11 @@ const projectDelete = () => {
                                   @click="isBasesOptionsOpen[source!.id!] = false"
                                 >
                                   <!-- ERD View -->
-                                  <NcMenuItem key="erd" v-e="['c:source:erd']" @click="openErdView(source)">
+                                  <NcMenuItem key="erd" @click="openErdView(source)">
+                                    <div v-e="['c:source:erd']" class="flex gap-2 items-center">
                                       <GeneralIcon icon="erd" />
                                       {{ $t('title.relations') }}
+                                    </div>
                                   </NcMenuItem>
 
                                   <DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" />
@@ -712,12 +712,8 @@ const projectDelete = () => {
         <template v-else-if="contextMenuTarget.type === 'source'"></template>
 
         <template v-else-if="contextMenuTarget.type === 'table'">
-          <NcMenuItem
-            v-if="isUIAllowed('tableRename')"
-            v-e="['c:table:rename']"
-            @click="openRenameTableDialog(contextMenuTarget.value, true)"
-          >
-            <div class="nc-base-option-item">
+          <NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
+            <div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
               <GeneralIcon icon="edit" class="text-gray-700" />
               {{ $t('general.rename') }}
             </div>
@@ -725,17 +721,16 @@ const projectDelete = () => {
 
           <NcMenuItem
             v-if="isUIAllowed('tableDuplicate') && (contextMenuBase?.is_meta || contextMenuBase?.is_local)"
-            v-e="['c:table:duplicate']"
             @click="duplicateTable(contextMenuTarget.value)"
           >
-            <div class="nc-base-option-item">
+            <div v-e="['c:table:duplicate']" class="nc-base-option-item flex gap-2 items-center">
               <GeneralIcon icon="duplicate" class="text-gray-700" />
               {{ $t('general.duplicate') }}
             </div>
           </NcMenuItem>
           <NcDivider />
           <NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete">
-            <div class="nc-base-option-item text-red-600">
+            <div class="nc-base-option-item flex gap-2 items-center text-red-600">
               <GeneralIcon icon="delete" />
               {{ $t('general.delete') }}
             </div>

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -180,8 +180,10 @@ const isTableOpened = computed(() => {
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>
+
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
+              v-e="['c:table:emoji-picker']"
               class="flex items-center nc-table-icon"
               :class="{
                 'pointer-events-none': !canUserEditEmote,
@@ -190,7 +192,6 @@ const isTableOpened = computed(() => {
             >
               <LazyGeneralEmojiPicker
                 :key="table.meta?.icon"
-                v-e="['c:table:emoji-picker']"
                 :emoji="table.meta?.icon"
                 size="small"
                 :readonly="!canUserEditEmote || isMobileMode"
@@ -239,16 +240,14 @@ const isTableOpened = computed(() => {
         </span>
         <div class="flex flex-grow h-full"></div>
         <div class="flex flex-row items-center">
-          <NcDropdown
+          <div
             v-if="
               !isSharedBase &&
               (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
             "
             v-e="['c:table:option']"
-            :trigger="['click']"
-            class="nc-sidebar-node-btn"
-            @click.stop
           >
+            <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
               <MdiDotsHorizontal
                 data-testid="nc-sidebar-table-context-menu"
                 class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
@@ -258,12 +257,13 @@ const isTableOpened = computed(() => {
                 <NcMenu>
                   <NcMenuItem
                     v-if="isUIAllowed('tableRename', { roles: baseRole })"
-                  v-e="['c:table:rename']"
                     :data-testid="`sidebar-table-rename-${table.title}`"
                     @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
                   >
+                    <div v-e="['c:table:rename']" class="flex gap-2 items-center">
                       <GeneralIcon icon="edit" class="text-gray-700" />
                       {{ $t('general.rename') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcMenuItem
@@ -272,29 +272,32 @@ const isTableOpened = computed(() => {
                       base.sources?.[sourceIndex] &&
                       (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
                     "
-                  v-e="['c:table:duplicate']"
                     :data-testid="`sidebar-table-duplicate-${table.title}`"
                     @click="duplicateTable(table)"
                   >
+                    <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
                       <GeneralIcon icon="duplicate" class="text-gray-700" />
                       {{ $t('general.duplicate') }}
+                    </div>
                   </NcMenuItem>
 
                   <NcMenuItem
                     v-if="isUIAllowed('tableDelete', { roles: baseRole })"
-                  v-e="['c:table:delete']"
                     :data-testid="`sidebar-table-delete-${table.title}`"
                     class="!text-red-500 !hover:bg-red-50"
                     @click="isTableDeleteDialogVisible = true"
                   >
+                    <div v-e="['c:table:delete']" class="flex gap-2 items-center">
                       <GeneralIcon icon="delete" />
                       {{ $t('general.delete') }}
+                    </div>
                   </NcMenuItem>
                 </NcMenu>
               </template>
             </NcDropdown>
           </div>
         </div>
+      </div>
       <DlgTableDelete
         v-if="table.id && base?.id"
         v-model:visible="isTableDeleteDialogVisible"

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -192,7 +192,6 @@ watch(isDropdownOpen, async () => {
 
 <template>
   <a-menu-item
-    v-e="['c:view:open']"
     class="nc-sidebar-node !min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
     :class="{
       '!pl-18 !xs:(pl-19.75)': isDefaultBase,
@@ -203,9 +202,12 @@ watch(isDropdownOpen, async () => {
     @click="onClick"
   >
     <div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item">
-      <div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
-        <LazyGeneralEmojiPicker
+      <div
         v-e="['c:view:emoji-picker']"
+        class="flex min-w-6"
+        :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"
+      >
+        <LazyGeneralEmojiPicker
           class="nc-table-icon"
           :emoji="props.view?.meta?.icon"
           size="small"

packages/nc-gui/components/general/EmojiPicker.vue

@@ -2,7 +2,6 @@
 import data from 'emoji-mart-vue-fast/data/apple.json'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import { Icon } from '@iconify/vue'
-
 import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
 
 const props = defineProps<{
@@ -21,6 +20,7 @@ const clearable = computed(() => {
 })
 
 const isOpen = ref(false)
+
 const emojiIndex = new EmojiIndex(data, {
   emojisToShowFilter: (emoji: any) => {
     if (Number(emoji.added_in) >= 14) {

packages/nc-gui/components/general/OpenLeftSidebarBtn.vue

@@ -11,8 +11,8 @@ const onClick = () => {
 </script>
 
 <template>
+  <div v-e="['c:leftSidebar:hideToggle']">
     <NcTooltip
-    v-e="['c:leftSidebar:hideToggle']"
       placement="topLeft"
       hide-on-click
       class="transition-all duration-150"
@@ -36,4 +36,5 @@ const onClick = () => {
         </div>
       </NcButton>
     </NcTooltip>
+  </div>
 </template>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -5,7 +5,7 @@ import { Icon } from '@iconify/vue'
 import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
 
 const props = defineProps<{
-  isLoading: boolean
+  loading: boolean
 }>()
 
 const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
@@ -16,7 +16,7 @@ const commentsWrapperEl = ref<HTMLDivElement>()
 
 const { user, appInfo } = useGlobal()
 
-const isExpandedFormLoading = computed(() => props.isLoading)
+const isExpandedFormLoading = computed(() => props.loading)
 
 const tab = ref<'comments' | 'audits'>('comments')
 

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -556,14 +556,15 @@ export default {
                   <NcDivider v-if="isUIAllowed('dataEdit') && !isNew" />
                   <NcMenuItem
                     v-if="isUIAllowed('dataEdit') && !isNew"
-                    v-e="['c:row-expand:delete']"
                     class="!text-red-500 !hover:bg-red-50"
                     @click="!isNew && onDeleteRowClick()"
                   >
-                    <component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" />
-                    <span class="-ml-0.5">
+                    <div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
+                      <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
+                      <span class="-ml-0.25">
                         {{ $t('activity.deleteRecord') }}
                       </span>
+                    </div>
                   </NcMenuItem>
                 </NcMenu>
               </template>

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1471,15 +1471,10 @@ onKeyStroke('ArrowDown', onDown)
                   ></td>
                 </tr>
               </template>
-              <LazySmartsheetRow
-                v-for="(row, rowIndex) of dataRef"
-                v-show="!showSkeleton"
-                ref="rowRefs"
-                :key="rowIndex"
-                :row="row"
-              >
+              <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
                 <template #default="{ state }">
                   <tr
+                    v-show="!showSkeleton"
                     class="nc-grid-row !xs:h-14"
                     :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                     :data-testid="`grid-row-${rowIndex}`"
@@ -1658,47 +1653,50 @@ onKeyStroke('ArrowDown', onDown)
           <NcMenu class="!rounded !py-0" @click="contextMenu = false">
             <NcMenuItem
               v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:update-bulk']"
               @click="emits('bulkUpdateDlg')"
             >
+              <div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
                 <component :is="iconMap.edit" />
-
                 {{ $t('title.updateSelectedRows') }}
+              </div>
             </NcMenuItem>
 
             <NcMenuItem
               v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
-              v-e="['a:row:delete-bulk']"
               class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
               data-testid="nc-delete-row"
               @click="deleteSelectedRows"
             >
+              <div v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
                 <component :is="iconMap.delete" />
                 <!-- Delete Selected Rows -->
                 {{ $t('activity.deleteSelectedRow') }}
+              </div>
             </NcMenuItem>
 
             <!--            <NcMenuItem -->
             <!--              v-if="contextMenuTarget && selectedRange.isSingleCell()" -->
-            <!-- v-e="['a:row:insert']" -->
             <!--              class="nc-base-menu-item" -->
             <!--              @click="addEmptyRow(contextMenuTarget.row + 1)" -->
             <!--            > -->
+            <!--              <div v-e="['a:row:insert']" class="flex gap-2 items-center"> -->
             <!--                <GeneralIcon icon="plus" /> -->
             <!--                Insert New Row -->
             <!--                {{ $t('activity.insertRow') }} -->
+            <!--              </div> -->
             <!--            </NcMenuItem> -->
 
             <NcMenuItem
               v-if="contextMenuTarget"
-              v-e="['a:row:copy']"
               class="nc-base-menu-item"
               data-testid="context-menu-item-copy"
               @click="copyValue(contextMenuTarget)"
             >
+              <div v-e="['a:row:copy']" class="flex gap-2 items-center">
                 <GeneralIcon icon="copy" />
                 <!-- Copy -->
                 {{ $t('general.copy') }}
+              </div>
             </NcMenuItem>
 
             <!-- Clear cell -->
@@ -1709,58 +1707,64 @@ onKeyStroke('ArrowDown', onDown)
                 selectedRange.isSingleCell() &&
                 (isLinksOrLTAR(fields[contextMenuTarget.col]) || !isVirtualCol(fields[contextMenuTarget.col]))
               "
-              v-e="['a:row:clear']"
               class="nc-base-menu-item"
               @click="clearCell(contextMenuTarget)"
             >
+              <div v-e="['a:row:clear']" class="flex gap-2 items-center">
                 <GeneralIcon icon="close" />
                 {{ $t('general.clear') }}
+              </div>
             </NcMenuItem>
 
             <!-- Clear cell -->
             <NcMenuItem
               v-else-if="contextMenuTarget && hasEditPermission"
-              v-e="['a:row:clear-range']"
               class="nc-base-menu-item"
               @click="clearSelectedRangeOfCells()"
             >
+              <div v-e="['a:row:clear-range']" class="flex gap-2 items-center">
                 <GeneralIcon icon="closeBox" class="text-gray-500" />
-
                 {{ $t('general.clear') }}
+              </div>
             </NcMenuItem>
-            <template
+
+            <NcDivider />
+            <NcMenuItem
               v-if="contextMenuTarget && !isLocked && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode"
+              class="nc-base-menu-item"
+              @click="commentRow(contextMenuTarget.row)"
             >
-              <NcDivider />
-              <NcMenuItem v-e="['a:row:comment']" class="nc-base-menu-item" @click="commentRow(contextMenuTarget.row)">
+              <div v-e="['a:row:comment']" class="flex gap-2 items-center">
                 <MdiMessageOutline class="h-4 w-4" />
 
                 {{ $t('general.comment') }}
+              </div>
             </NcMenuItem>
-            </template>
+
             <template v-if="hasEditPermission">
               <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
               <NcMenuItem
                 v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())"
-                v-e="['a:row:delete']"
                 class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
                 @click="confirmDeleteRow(contextMenuTarget.row)"
               >
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
                   <GeneralIcon icon="delete" />
                   <!-- Delete Row -->
                   {{ $t('activity.deleteRow') }}
+                </div>
               </NcMenuItem>
-              <div v-else-if="contextMenuTarget && deleteRangeOfRows">
               <NcMenuItem
-                  v-e="['a:row:delete']"
+                v-else-if="contextMenuTarget && deleteRangeOfRows"
                 class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
                 @click="deleteSelectedRangeOfRows"
               >
+                <div v-e="['a:row:delete']" class="flex gap-2 items-center">
                   <GeneralIcon icon="delete" class="text-gray-500 text-red-600" />
                   <!-- Delete Rows -->
                   {{ $t('activity.deleteRows') }}
-                </NcMenuItem>
                 </div>
+              </NcMenuItem>
             </template>
           </NcMenu>
         </template>

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

@@ -168,11 +168,11 @@ 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"
   >
     <div
+      v-e="['c:breadcrumb:view-actions']"
       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,