fix(nc-gui): auth tab constantly re-opening

* Only reload project if it's not loaded already
* Prevent tab from re-opening

packages/nc-gui/components.d.ts

@@ -224,6 +224,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

packages/nc-gui/composables/useProject.ts

@@ -4,7 +4,7 @@ import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { useNuxtApp, useRoute } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
-import { useInjectionState } from '#imports'
+import { createEventHook, useInjectionState } from '#imports'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { $api, $e } = useNuxtApp()
@@ -12,6 +12,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { includeM2M } = useGlobal()
   const { setTheme, theme } = useTheme()
 
+  const projectLoadedHook = createEventHook<ProjectType>()
+
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
   const project = ref<ProjectType>({})
   const tables = ref<TableType[]>([])
@@ -86,6 +88,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     await loadProjectRoles()
     await loadTables()
     setTheme(projectMeta.value?.theme)
+
+    projectLoadedHook.trigger(project.value)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -151,6 +155,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectMetaInfo,
     projectMeta,
     saveTheme,
+    projectLoadedHook: projectLoadedHook.on,
   }
 }, 'useProject')
 

packages/nc-gui/composables/useUIPermission/index.ts

@@ -1,6 +1,7 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
+import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
+import type { Role, Roles } from '~/lib'
 
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
@@ -8,7 +9,7 @@ export function useUIPermission() {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
   const baseRoles = computed(() => {
-    let userRoles = user.value?.roles || {}
+    let userRoles = typeof user.value?.roles === 'string' ? user.value?.roles : ({ ...(user.value?.roles || {}) } as Roles)
 
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
@@ -17,20 +18,20 @@ export function useUIPermission() {
         return acc
       }, {})
     }
+
     // merge user role and project specific user roles
-    const roles = {
+    return {
       ...userRoles,
       ...projectRoles.value,
     }
-
-    return roles
   })
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = baseRoles.value
+    let roles = baseRoles.value as Record<string, any>
+
     if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [previewAs.value]: true,
+        [previewAs.value as Role]: true,
       }
     }
 

packages/nc-gui/lib/types.ts

@@ -31,7 +31,7 @@ export interface Field {
   system?: boolean
 }
 
-export type Roles = Record<Role, boolean>
+export type Roles = Record<Role, boolean> | string
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -19,6 +19,7 @@ import {
   useTabs,
   useUIPermission,
 } from '#imports'
+import { TabType } from '~/composables'
 
 definePageMeta({
   hideHeader: true,
@@ -30,9 +31,9 @@ const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
+const { projectLoadedHook, project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
-const { clearTabs } = useTabs()
+const { clearTabs, addTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
@@ -138,6 +139,12 @@ onKeyStroke(
 )
 
 clearTabs()
+
+projectLoadedHook(() => {
+  if (!route.params.type && isUIAllowed('teamAndAuth')) {
+    addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
+  }
+})
 </script>
 
 <template>

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -7,23 +7,19 @@ import {
   provide,
   ref,
   useGlobal,
-  useI18n,
   useProject,
   useRoute,
   useRouter,
   useSidebar,
   useTabs,
-  useUIPermission,
 } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
-const { t } = useI18n()
+const { project, loadProject, loadTables } = useProject()
 
-const { loadProject, loadTables } = useProject()
-
-const { tabs, activeTabIndex, activeTab, closeTab, addTab } = useTabs()
+const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isLoading } = useGlobal()
 
@@ -31,16 +27,10 @@ const route = useRoute()
 
 const router = useRouter()
 
-const { isUIAllowed } = useUIPermission()
-
 const isReady = ref(false)
 
 onBeforeMount(async () => {
-  await loadProject()
-
-  if (!route.params.type && isUIAllowed('teamAndAuth')) {
-    addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
-  }
+  if (!Object.keys(project.value).length) await loadProject()
 
   /** If v1 url found navigate to corresponding new url */
   const { type, name, view } = route.query