fix(nc-gui): open view new tab in background on cmd+click

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

@@ -6,6 +6,8 @@ const { isUIAllowed } = useRoles()
 
 const { appInfo } = useGlobal()
 
+const { meta: metaKey, ctrlKey } = useMagicKeys()
+
 const { isWorkspaceLoading, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
 
 const { navigateToWorkspaceSettings } = workspaceStore
@@ -15,8 +17,10 @@ const { isSharedBase } = storeToRefs(baseStore)
 const isCreateProjectOpen = ref(false)
 
 const navigateToSettings = () => {
+  const cmdOrCtrl = isMac() ? metaKey.value : ctrlKey.value
+
   // TODO: Handle cloud case properly
-  navigateToWorkspaceSettings()
+  navigateToWorkspaceSettings('', cmdOrCtrl)
 
   // if (appInfo.value.baseHostName) {
   //   window.location.href = `https://app.${appInfo.value.baseHostName}/dashboard`

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

@@ -16,6 +16,7 @@ import {
   h,
   inject,
   navigateTo,
+  navigateToBlankTargetOpenOption,
   openLink,
   ref,
   resolveComponent,
@@ -26,14 +27,13 @@ import {
   useDialog,
   useGlobal,
   useI18n,
+  useMagicKeys,
   useNuxtApp,
   useRoles,
   useRouter,
   useTablesStore,
   useTabs,
   useToggle,
-  useMagicKeys,
-  navigateToBlankTargetOpenOption,
 } from '#imports'
 import type { NcProject } from '#imports'
 

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

@@ -4,7 +4,7 @@ import { toRef } from '@vue/reactivity'
 import { message } from 'ant-design-vue'
 import { storeToRefs } from 'pinia'
 
-import { ProjectRoleInj, TreeViewInj, useNuxtApp, useRoles, useTabs, useMagicKeys } from '#imports'
+import { ProjectRoleInj, TreeViewInj, useMagicKeys, useNuxtApp, useRoles, useTabs } from '#imports'
 import type { SidebarTableNode } from '~/lib'
 
 const props = withDefaults(

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

@@ -9,6 +9,7 @@ import {
   message,
   onKeyStroke,
   useDebounceFn,
+  useMagicKeys,
   useNuxtApp,
   useRoles,
   useVModel,
@@ -52,6 +53,8 @@ const { activeView } = storeToRefs(useViewsStore())
 
 const { getMeta } = useMetas()
 
+const { meta: metaKey, ctrlKey } = useMagicKeys()
+
 const table = computed(() => props.table)
 const injectedTable = ref(table.value)
 
@@ -80,11 +83,21 @@ const _title = ref<string | undefined>()
 
 /** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
 const onClick = useDebounceFn(() => {
-  if (isEditing.value || isStopped.value) return
-
   emits('changeView', vModel.value)
 }, 250)
 
+const handleOnClick = () => {
+  if (isEditing.value || isStopped.value) return
+
+  const cmdOrCtrl = isMac() ? metaKey.value : ctrlKey.value
+
+  if (cmdOrCtrl) {
+    emits('changeView', vModel.value)
+  } else {
+    onClick()
+  }
+}
+
 /** Enable editing view name on dbl click */
 function onDblClick() {
   if (isMobileMode.value) return
@@ -209,7 +222,7 @@ watch(isDropdownOpen, async () => {
     }"
     :data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
     @dblclick.stop="onDblClick"
-    @click="onClick"
+    @click.prevent="handleOnClick"
   >
     <div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item">
       <div

packages/nc-gui/composables/useTableNew.ts

@@ -10,17 +10,17 @@ import {
   extractSdkResponseErrorMsg,
   generateUniqueTitle as generateTitle,
   message,
+  navigateToBlankTargetOpenOption,
   reactive,
   storeToRefs,
   useBase,
   useCommandPalette,
   useI18n,
+  useMagicKeys,
   useMetas,
   useNuxtApp,
   useTabs,
   watch,
-  useMagicKeys,
-  navigateToBlankTargetOpenOption,
 } from '#imports'
 
 export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => void; baseId: string; sourceId?: string }) {

packages/nc-gui/store/views.ts

@@ -1,7 +1,7 @@
 import type { FilterType, SortType, ViewType, ViewTypes } from 'nocodb-sdk'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { ViewPageType } from '~/lib'
-import { useMagicKeys, navigateToBlankTargetOpenOption } from '#imports'
+import { navigateToBlankTargetOpenOption, useMagicKeys } from '#imports'
 
 export const useViewsStore = defineStore('viewsStore', () => {
   const { $api } = useNuxtApp()

packages/nc-gui/store/workspace.ts

@@ -199,8 +199,15 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     })
   }
 
-  const navigateToWorkspaceSettings = async () => {
+  const navigateToWorkspaceSettings = async (_, cmdOrCtrl) => {
-    navigateTo('/account/users')
+    await navigateTo(
+      `${cmdOrCtrl ? '#' : ''}/account/users`,
+      cmdOrCtrl
+        ? {
+            open: navigateToBlankTargetOpenOption,
+          }
+        : undefined,
+    )
   }
 
   function setLoadingState(isLoading = false) {