fix: org viewer visual bug

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -4,15 +4,12 @@ const projectStore = useProject()
 
 const { appInfo } = useGlobal()
 
-const { activeWorkspace, isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } =
-  storeToRefs(workspaceStore)
+const { isWorkspaceLoading, isWorkspaceOwnerOrCreator, isWorkspaceSettingsPageOpened } = storeToRefs(workspaceStore)
 
 const { navigateToWorkspaceSettings } = workspaceStore
 
 const { isSharedBase } = storeToRefs(projectStore)
 
-const { isUIAllowed } = useUIPermission()
-
 const isCreateProjectOpen = ref(false)
 
 const navigateToSettings = () => {
@@ -66,7 +63,6 @@ const navigateToSettings = () => {
         </div>
       </NcButton>
       <WorkspaceCreateProjectBtn
-        v-if="isUIAllowed('createProject', false, activeWorkspace?.roles) && !isSharedBase"
         v-model:is-open="isCreateProjectOpen"
         modal
         type="text"

packages/nc-gui/components/workspace/CreateProjectBtn.vue

@@ -12,11 +12,13 @@ const props = defineProps<{
 
 const { isUIAllowed } = useUIPermission()
 
+const { orgRoles, workspaceRoles } = useRoles()
+
 const projectStore = useProject()
 const { isSharedBase } = storeToRefs(projectStore)
 
 const workspaceStore = useWorkspace()
-const { activeWorkspace, activeWorkspaceId: _activeWorkspaceId } = storeToRefs(workspaceStore)
+const { activeWorkspaceId: _activeWorkspaceId } = storeToRefs(workspaceStore)
 
 const projectCreateDlg = ref(false)
 
@@ -26,7 +28,7 @@ const centered = computed(() => props.centered ?? true)
 
 <template>
   <NcButton
-    v-if="isUIAllowed('createProject', false, activeWorkspace?.roles) && !isSharedBase"
+    v-if="isUIAllowed('createProject', false, workspaceRoles ?? orgRoles) && !isSharedBase"
     type="text"
     :size="size"
     :centered="centered"

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

@@ -16,7 +16,7 @@ export const useRoles = createSharedComposable(() => {
 
   const { api } = useApi()
 
-  const allRoles = computed<Roles>(() => {
+  const allRoles = computed<Roles | null>(() => {
     let orgRoles = user.value?.roles ?? {}
 
     orgRoles = extractRolesObj(orgRoles)
@@ -31,7 +31,7 @@ export const useRoles = createSharedComposable(() => {
     }
   })
 
-  const orgRoles = computed<Roles>(() => {
+  const orgRoles = computed<Roles | null>(() => {
     let orgRoles = user.value?.roles ?? {}
 
     orgRoles = extractRolesObj(orgRoles)
@@ -39,7 +39,7 @@ export const useRoles = createSharedComposable(() => {
     return orgRoles
   })
 
-  const projectRoles = computed<Roles>(() => {
+  const projectRoles = computed<Roles | null>(() => {
     let projectRoles = user.value?.project_roles ?? {}
 
     if (Object.keys(projectRoles).length === 0) {
@@ -51,6 +51,10 @@ export const useRoles = createSharedComposable(() => {
     return projectRoles
   })
 
+  const workspaceRoles = computed<Roles | null>(() => {
+    return null
+  })
+
   async function loadRoles(
     projectId?: string,
     options: { isSharedBase?: boolean; sharedBaseId?: string; isSharedErd?: boolean; sharedErdId?: string } = {},
@@ -108,5 +112,5 @@ export const useRoles = createSharedComposable(() => {
     return allRoles.value[role]
   }
 
-  return { allRoles, orgRoles, projectRoles, loadRoles, hasRole }
+  return { allRoles, orgRoles, workspaceRoles, projectRoles, loadRoles, hasRole }
 })

packages/nocodb-sdk/src/lib/helperFunctions.ts

@@ -22,8 +22,10 @@ const isSystemColumn = (col): boolean =>
     (col.pk && col.meta && col.meta.ag) ||
     col.system);
 
-type Roles = Record<OrgUserRoles | ProjectRoles | WorkspaceUserRoles | string, boolean>
-
+type Roles = Record<
+  OrgUserRoles | ProjectRoles | WorkspaceUserRoles | string,
+  boolean
+>;
 
 const extractRolesObj = (roles: Roles | string[] | string): Roles => {
   if (!roles) return {};
@@ -33,16 +35,19 @@ const extractRolesObj = (roles: Roles | string[] | string): Roles => {
   if (typeof roles === 'string') {
     roles = roles.split(',');
   }
+
+  if (roles.length === 0) return null;
+
   return roles.reduce((acc, role) => {
     acc[role] = true;
     return acc;
   }, {});
-}
+};
 
 const stringifyRolesObj = (roles: Roles): string => {
   const rolesArr = Object.keys(roles).filter((r) => roles[r]);
   return rolesArr.join(',');
-}
+};
 
 export {
   filterOutSystemColumns,