refactor(nc-gui): use computed value in all permissions state

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

@@ -1,7 +1,7 @@
 import { isString } from '@vueuse/core'
 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 { ProjectRole, Role, Roles } from '~/lib'
 
 export function useUIPermission() {
@@ -9,23 +9,25 @@ export function useUIPermission() {
 
   const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
 
-  const allRoles = useState<Roles>('allRoles', () => {
-    let userRoles = user.value?.roles
+  const allRoles = useState<Roles>('allRoles', () =>
+    computed(() => {
+      let userRoles = user.value?.roles
 
-    // if string populate key-value paired object
-    if (isString(userRoles)) {
-      userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
-        acc[role] = true
-        return acc
-      }, {})
-    }
+      // if string populate key-value paired object
+      if (isString(userRoles)) {
+        userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
+          acc[role] = true
+          return acc
+        }, {})
+      }
 
-    // merge user role and project specific user roles
-    return {
-      ...userRoles,
-      ...projectRoles.value,
-    }
-  })
+      // merge user role and project specific user roles
+      return {
+        ...userRoles,
+        ...projectRoles.value,
+      }
+    }),
+  )
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
     let roles = { ...allRoles.value }