From 5259cba36499ec01a85d319594f44cb463db7a76 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 01:06:28 +0200
Subject: [PATCH 01/26] chore(nc-gui): add components.d.ts to eslint ignore
 patterns

---
 packages/nc-gui/.eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/.eslintrc.js b/packages/nc-gui/.eslintrc.js
index f7291c452f..8780df770e 100644
--- a/packages/nc-gui/.eslintrc.js
+++ b/packages/nc-gui/.eslintrc.js
@@ -14,5 +14,5 @@ module.exports = {
   extends: ['@antfu', 'plugin:prettier/recommended'],
   plugins: ['prettier'],
   rules: baseRules,
-  ignorePatterns: ['!*.d.ts'],
+  ignorePatterns: ['!*.d.ts', 'components.d.ts'],
 }

From e19b0a79ca8a337ca70bfd65ccf34018b7685c93 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 11:05:41 +0200
Subject: [PATCH 02/26] chore(nc-gui): update previewAs type

---
 packages/nc-gui/composables/useGlobal/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index 18939fb7df..8a232b6d65 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref, ToRefs } from 'vue'
 import type { WritableComputedRef } from '@vue/reactivity'
 import type { JwtPayload } from 'jwt-decode'
-import type { Language, User } from '~/lib'
+import type { Language, Role, User } from '~/lib'
 import type { useCounter } from '#imports'
 
 export interface FeedbackForm {
@@ -33,7 +33,7 @@ export interface StoredState {
   darkMode: boolean
   feedbackForm: FeedbackForm
   filterAutoSave: boolean
-  previewAs: string | null
+  previewAs: Role | null
   includeM2M: boolean
   currentVersion: string | null
   latestRelease: string | null

From 27791f505430fd9ec88ff76eb6b68711efe9dec5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 11:25:26 +0200
Subject: [PATCH 03/26] refactor(nc-gui): clean up permission types

---
 .../composables/useUIPermission/index.ts      | 25 ++++++++++---------
 .../useUIPermission/rolePermissions.ts        | 14 ++++-------
 packages/nc-gui/lib/enums.ts                  |  1 +
 packages/nc-gui/lib/types.ts                  |  6 ++---
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 212bf23355..9d1015edc0 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -2,19 +2,19 @@ import { isString } from '@vueuse/core'
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
 import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
-import type { Role, Roles } from '~/lib'
+import type { Roles } from '~/lib'
 
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
 
-  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
+  const projectRoles = useState<Roles>(USER_PROJECT_ROLES, () => ({}))
 
-  const baseRoles = computed(() => {
-    let userRoles = isString(user.value?.roles) ? user.value?.roles : ({ ...(user.value?.roles || {}) } as Roles)
+  const baseRoles = computed<Roles>(() => {
+    let userRoles = user.value?.roles
 
     // if string populate key-value paired object
-    if (typeof userRoles === 'string') {
-      userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
+    if (isString(userRoles)) {
+      userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
         acc[role] = true
         return acc
       }, {})
@@ -27,18 +27,19 @@ export function useUIPermission() {
     }
   })
 
-  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = baseRoles.value as Record<string, any>
+  const isUIAllowed = (permission: Permission, skipPreviewAs = false) => {
+    let roles = baseRoles.value
 
     if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [previewAs.value as Role]: true,
+        [previewAs.value]: true,
       }
     }
 
-    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
-      const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
-      return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
+    return Object.entries(roles).some(([role, hasRole]) => {
+      const rolePermission = rolePermissions[role as keyof typeof rolePermissions]
+
+      return hasRole && (rolePermission === '*' || rolePermission?.[permission as keyof typeof rolePermission])
     })
   }
 
diff --git a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
index 0754afbcbf..fcc46c7031 100644
--- a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
@@ -43,14 +43,10 @@ const rolePermissions = {
   },
 } as const
 
-export default rolePermissions
+type GetKeys<T> = T extends Record<string, boolean> ? keyof T : never
 
-type GetKeys<T> = T extends Record<string, any> ? keyof T : never
+export type Permission<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> =
+  | (K extends 'creator' | 'owner' ? T[K] : never | T[K] extends Record<string, boolean> ? GetKeys<T[K]> : never)
+  | string
 
-export type Permission<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> = K extends
-  | 'creator'
-  | 'owner'
-  ? T[K]
-  : never | T[K] extends Record<string, any>
-  ? GetKeys<T[K]>
-  : never
+export default rolePermissions
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index ef6ad54540..5c9e856508 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -2,6 +2,7 @@ export enum Role {
   Super = 'super',
   Admin = 'admin',
   User = 'user',
+  Guest = 'guest',
 }
 
 export enum ProjectRole {
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index ac8d3fc562..c7d1859424 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,13 +1,13 @@
 import type { FilterType } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
-import type { Role } from './enums'
+import type { ProjectRole, Role } from './enums'
 
 export interface User {
   id: string
   email: string
   firstname: string | null
   lastname: string | null
-  roles: Roles
+  roles: Roles | string
   invite_token?: string
   project_id?: string
 }
@@ -31,7 +31,7 @@ export interface Field {
   system?: boolean
 }
 
-export type Roles = Record<Role | string, boolean> | string
+export type Roles = Record<Role | ProjectRole | string, boolean>
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 

From ea946edd871ac0c53a095872601f14b7b54c97dd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 13:28:41 +0200
Subject: [PATCH 04/26] chore(nc-gui): cleanup types

---
 packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue     | 2 --
 .../components/smartsheet/sidebar/RenameableMenuItem.vue      | 4 ++--
 packages/nc-gui/components/smartsheet/sidebar/index.vue       | 3 ++-
 packages/nc-gui/composables/useSharedFormViewStore.ts         | 2 +-
 .../nc-gui/composables/useUIPermission/rolePermissions.ts     | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index cec93e16d2..e32063c96c 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -32,8 +32,6 @@ interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
 
   (event: 'deleted'): void
-
-  (event: 'sorted'): void
 }
 
 const { $e } = useNuxtApp()
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 2602e742a7..6501be738d 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -2,7 +2,7 @@
 import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import type { WritableComputedRef } from '@vue/reactivity'
-import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel, viewIcons } from '#imports'
+import { IsLockedInj, inject, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel, viewIcons } from '#imports'
 
 interface Props {
   view: ViewType
@@ -21,7 +21,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'view', emits) as WritableComputedRef<any>
+const vModel = useVModel(props, 'view', emits) as WritableComputedRef<ViewType & { is_default: boolean }>
 
 const { $e } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index ec45026669..7964bf4337 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -14,6 +14,7 @@ import {
   useRoute,
   useRouter,
   useSidebar,
+  useUIPermission,
   useViews,
   watch,
 } from '#imports'
@@ -114,7 +115,7 @@ function onCreate(view: ViewType) {
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
     />
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
-      <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
+      <MenuTop @open-modal="openModal" @deleted="loadViews" />
 
       <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3 w-full border-b-1" />
 
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 6bc3e54499..a64b2365d0 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -30,7 +30,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const sharedView = ref<ViewType>()
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
-  const columns = ref<(ColumnType & { required?: boolean; show?: boolean })[]>()
+  const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
 
   const { api, isLoading } = useApi()
 
diff --git a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
index fcc46c7031..997799c704 100644
--- a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
@@ -47,6 +47,6 @@ type GetKeys<T> = T extends Record<string, boolean> ? keyof T : never
 
 export type Permission<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> =
   | (K extends 'creator' | 'owner' ? T[K] : never | T[K] extends Record<string, boolean> ? GetKeys<T[K]> : never)
-  | string
+  | T[K]
 
 export default rolePermissions

From 26ca9dcf1afd8c9720724aeadb442715a5a51084 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 00:48:42 +0200
Subject: [PATCH 05/26] chore(nc-gui): remove unused composable

---
 packages/nc-gui/composables/index.ts         | 1 -
 packages/nc-gui/composables/useAttachment.ts | 9 ---------
 packages/nc-gui/plugins/tele.ts              | 9 ---------
 3 files changed, 19 deletions(-)
 delete mode 100644 packages/nc-gui/composables/useAttachment.ts

diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index 149bbff61d..5fd560cb5c 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/packages/nc-gui/composables/index.ts
@@ -5,7 +5,6 @@ export * from './useInjectionState'
 export * from './useSidebar'
 export * from './useTheme'
 export * from './useUIPermission'
-export * from './useAttachment'
 export * from './useColors'
 export * from './useColumn'
 export * from './useGridViewColumnWidth'
diff --git a/packages/nc-gui/composables/useAttachment.ts b/packages/nc-gui/composables/useAttachment.ts
deleted file mode 100644
index 3aee3b2798..0000000000
--- a/packages/nc-gui/composables/useAttachment.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// todo: implement useAttachment
-export function useAttachment() {
-  const localFilesState = reactive([])
-  const attachments = ref([])
-
-  const uploadFile = () => {}
-
-  return { uploadFile, localFilesState, attachments }
-}
diff --git a/packages/nc-gui/plugins/tele.ts b/packages/nc-gui/plugins/tele.ts
index 4970f32bd1..481dd133f3 100644
--- a/packages/nc-gui/plugins/tele.ts
+++ b/packages/nc-gui/plugins/tele.ts
@@ -41,15 +41,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     })
   })
 
-  /**
-   * unreachable code?
-      if (socket) {
-        socket.emit('page', {
-          path: route.matched[0].path + (route.query && route.query.type ? `?type=${route.query.type}` : ''),
-        })
-      }
-   */
-
   const tele = {
     emit(evt: string, data: Record<string, any>) {
       // debugger

From 9a43bfa787311859b82cf4099bf994479fae789d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 10:53:18 +0200
Subject: [PATCH 06/26] refactor(nc-gui): use enum for role permission keys

---
 .../nc-gui/components/general/PreviewAs.vue   | 28 +++++++------
 .../nc-gui/composables/useGlobal/types.ts     |  4 +-
 .../composables/useUIPermission/index.ts      | 12 ++++--
 .../useUIPermission/rolePermissions.ts        | 40 +++++++++++--------
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue
index c4f6ee36bd..b99623b256 100644
--- a/packages/nc-gui/components/general/PreviewAs.vue
+++ b/packages/nc-gui/components/general/PreviewAs.vue
@@ -1,29 +1,26 @@
 <script lang="ts" setup>
-import { onUnmounted, useEventListener, useGlobal, useState, watch } from '#imports'
+import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
 import MdiEyeOutline from '~icons/mdi/eye-outline'
 import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
+import { ProjectRole } from '~/lib'
 
 const { float } = defineProps<{ float?: boolean }>()
 
-const position = useState('preview-as-position', () => ({
-  y: `${window.innerHeight - 100}px`,
-  x: `${window.innerWidth / 2 - 250}px`,
-}))
-
 const { $e } = useNuxtApp()
+
 const { t } = useI18n()
 
+const { previewAs } = useGlobal()
+
 const roleList = [
-  { value: 'editor', label: t('objects.roleType.editor') },
-  { value: 'commenter', label: t('objects.roleType.commenter') },
-  { value: 'viewer', label: t('objects.roleType.viewer') },
+  { value: ProjectRole.Editor, label: t('objects.roleType.editor') },
+  { value: ProjectRole.Commenter, label: t('objects.roleType.commenter') },
+  { value: ProjectRole.Viewer, label: t('objects.roleType.viewer') },
 ]
 
-const { previewAs } = useGlobal()
-
 const roleIcon = {
   owner: MdiAccountStar,
   creator: MdiAccountHardHat,
@@ -32,6 +29,11 @@ const roleIcon = {
   commenter: MdiCommentAccountOutline,
 }
 
+const position = ref({
+  y: `${window.innerHeight - 100}px`,
+  x: `${window.innerWidth / 2 - 250}px`,
+})
+
 const divMove = (e: MouseEvent) => {
   position.value = { y: `${e.clientY - 10}px`, x: `${e.clientX - 18}px` }
 }
@@ -49,7 +51,7 @@ onUnmounted(() => {
   window.removeEventListener('mousemove', divMove, true)
 })
 
-/** reload page on previewas change */
+/** reload page on preview-as change */
 watch(previewAs, (newRole) => {
   $e('a:navdraw:preview', { role: newRole })
   window.location.reload()
@@ -63,7 +65,7 @@ watch(previewAs, (newRole) => {
     class="floating-reset-btn nc-floating-preview-btn p-4"
     :style="{ top: position.y, left: position.x }"
   >
-    <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
+    <MdiDrag class="cursor-move text-white" @mousedown="mouseDown" />
 
     <div class="divider" />
 
diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index 8a232b6d65..4969d406e8 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref, ToRefs } from 'vue'
 import type { WritableComputedRef } from '@vue/reactivity'
 import type { JwtPayload } from 'jwt-decode'
-import type { Language, Role, User } from '~/lib'
+import type { Language, ProjectRole, User } from '~/lib'
 import type { useCounter } from '#imports'
 
 export interface FeedbackForm {
@@ -33,7 +33,7 @@ export interface StoredState {
   darkMode: boolean
   feedbackForm: FeedbackForm
   filterAutoSave: boolean
-  previewAs: Role | null
+  previewAs: ProjectRole | null
   includeM2M: boolean
   currentVersion: string | null
   latestRelease: string | null
diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 9d1015edc0..72ddd52c7a 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -2,7 +2,7 @@ import { isString } from '@vueuse/core'
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
 import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
-import type { Roles } from '~/lib'
+import type { ProjectRole, Role, Roles } from '~/lib'
 
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
@@ -27,7 +27,7 @@ export function useUIPermission() {
     }
   })
 
-  const isUIAllowed = (permission: Permission, skipPreviewAs = false) => {
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
     let roles = baseRoles.value
 
     if (previewAs.value && !skipPreviewAs) {
@@ -37,9 +37,13 @@ export function useUIPermission() {
     }
 
     return Object.entries(roles).some(([role, hasRole]) => {
-      const rolePermission = rolePermissions[role as keyof typeof rolePermissions]
+      const rolePermission = rolePermissions[role as Role | ProjectRole]
 
-      return hasRole && (rolePermission === '*' || rolePermission?.[permission as keyof typeof rolePermission])
+      return (
+        hasRole &&
+        rolePermission &&
+        ((isString(rolePermission) && rolePermission === '*') || rolePermission[permission as keyof typeof rolePermission])
+      )
     })
   }
 
diff --git a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
index 997799c704..887553d3e7 100644
--- a/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui/composables/useUIPermission/rolePermissions.ts
@@ -1,13 +1,24 @@
+import { ProjectRole, Role } from '~/lib'
+
 const rolePermissions = {
+  // general role permissions
   /** todo: enable wildcard permission
    *  limited permission  due to unexpected behaviour in shared base if opened in same window  */
-  super: {
+  [Role.Super]: {
     projectTheme: true,
   },
-  creator: '*',
-  owner: '*',
-  guest: {},
-  editor: {
+  [Role.Admin]: {},
+  [Role.Guest]: {},
+  [Role.User]: {
+    projectCreate: true,
+    projectActions: true,
+    projectSettings: true,
+  },
+
+  // Project role permissions
+  [ProjectRole.Creator]: '*',
+  [ProjectRole.Owner]: '*',
+  [ProjectRole.Editor]: {
     smartSheet: true,
     xcDatatableEditable: true,
     column: true,
@@ -25,28 +36,25 @@ const rolePermissions = {
     projectSettings: true,
     newUser: false,
   },
-  commenter: {
+  [ProjectRole.Commenter]: {
     smartSheet: true,
     column: true,
     rowComments: true,
     projectSettings: true,
   },
-  viewer: {
+  [ProjectRole.Viewer]: {
     smartSheet: true,
     column: true,
     projectSettings: true,
   },
-  user: {
-    projectCreate: true,
-    projectActions: true,
-    projectSettings: true,
-  },
 } as const
 
-type GetKeys<T> = T extends Record<string, boolean> ? keyof T : never
+type RolePermissions = Omit<typeof rolePermissions, 'creator' | 'owner' | 'guest' | 'admin'>
+
+type GetKeys<T> = T extends Record<string, any> ? keyof T : never
 
-export type Permission<T extends typeof rolePermissions = typeof rolePermissions, K extends keyof T = keyof T> =
-  | (K extends 'creator' | 'owner' ? T[K] : never | T[K] extends Record<string, boolean> ? GetKeys<T[K]> : never)
-  | T[K]
+export type Permission<K extends keyof RolePermissions = keyof RolePermissions> = RolePermissions[K] extends Record<string, any>
+  ? GetKeys<RolePermissions[K]>
+  : never
 
 export default rolePermissions

From be0b641f366c0fc5484fafa4cb7403a2526ad838 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 12:20:45 +0200
Subject: [PATCH 07/26] chore(nc-gui): add generic to narrow roles type

---
 packages/nc-gui/composables/useProject.ts            | 4 ++--
 packages/nc-gui/composables/useUIPermission/index.ts | 2 +-
 packages/nc-gui/lib/types.ts                         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index f5b728d4f0..30d075961f 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -16,7 +16,7 @@ import {
   useTheme,
   watch,
 } from '#imports'
-import type { ProjectMetaInfo, Roles } from '~/lib'
+import type { ProjectMetaInfo, ProjectRole, Roles } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
@@ -36,7 +36,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const tables = ref<TableType[]>([])
 
-  const projectRoles = useState<Roles>(USER_PROJECT_ROLES, () => ({}))
+  const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
 
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
 
diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 72ddd52c7a..7140957480 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -7,7 +7,7 @@ import type { ProjectRole, Role, Roles } from '~/lib'
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
 
-  const projectRoles = useState<Roles>(USER_PROJECT_ROLES, () => ({}))
+  const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
 
   const baseRoles = computed<Roles>(() => {
     let userRoles = user.value?.roles
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index c7d1859424..6a8e509532 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -31,7 +31,7 @@ export interface Field {
   system?: boolean
 }
 
-export type Roles = Record<Role | ProjectRole | string, boolean>
+export type Roles<T extends Role | ProjectRole = Role | ProjectRole> = Record<T | string, boolean>
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 

From e56282fec22a7b3fd90ce86ad36aced80fe123a0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 12:26:58 +0200
Subject: [PATCH 08/26] refactor(nc-gui): replace computed with useState to
 prevent unnecessary duplicates

---
 packages/nc-gui/composables/useUIPermission/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 7140957480..09b08cafcb 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/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, computed, useGlobal, useState } from '#imports'
+import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
 import type { ProjectRole, Role, Roles } from '~/lib'
 
 export function useUIPermission() {
@@ -9,7 +9,7 @@ export function useUIPermission() {
 
   const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
 
-  const baseRoles = computed<Roles>(() => {
+  const allRoles = useState<Roles>('allRoles', () => {
     let userRoles = user.value?.roles
 
     // if string populate key-value paired object
@@ -28,7 +28,7 @@ export function useUIPermission() {
   })
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = baseRoles.value
+    let roles = { ...allRoles.value }
 
     if (previewAs.value && !skipPreviewAs) {
       roles = {

From 96d12f6f80946062cc42b654dbf7d5b909f1620f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 12:43:52 +0200
Subject: [PATCH 09/26] refactor(nc-gui): use computed value in all permissions
 state

---
 .../composables/useUIPermission/index.ts      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 09b08cafcb..e7e593ac03 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/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 }

From 92110603ee5a9119e82076f3708831b4cec67311 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 12:44:11 +0200
Subject: [PATCH 10/26] refactor(nc-gui): stop duplicating allRoles & check
 preview permissions separately

---
 .../composables/useUIPermission/index.ts      | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index e7e593ac03..57e014d1c9 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -29,24 +29,26 @@ export function useUIPermission() {
     }),
   )
 
-  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = { ...allRoles.value }
+  const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
+    const rolePermission = rolePermissions[role]
+
+    return (
+      hasRole &&
+      rolePermission &&
+      ((isString(rolePermission) && rolePermission === '*') || rolePermission[permission as keyof typeof rolePermission])
+    )
+  }
 
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
+    let hasPreviewPermission = false
     if (previewAs.value && !skipPreviewAs) {
-      roles = {
-        [previewAs.value]: true,
-      }
+      hasPreviewPermission = hasPermission(previewAs.value, true, permission)
     }
 
-    return Object.entries(roles).some(([role, hasRole]) => {
-      const rolePermission = rolePermissions[role as Role | ProjectRole]
-
-      return (
-        hasRole &&
-        rolePermission &&
-        ((isString(rolePermission) && rolePermission === '*') || rolePermission[permission as keyof typeof rolePermission])
-      )
-    })
+    return (
+      hasPreviewPermission ||
+      Object.entries(allRoles.value).some(([role, hasRole]) => hasPermission(role as Role | ProjectRole, hasRole, permission))
+    )
   }
 
   return { isUIAllowed }

From e7ec02c160225689a4eaa16c79542948db531811 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 14:09:33 +0200
Subject: [PATCH 11/26] refactor(nc-gui): return permission check if preview
 permission found

---
 packages/nc-gui/composables/useUIPermission/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 57e014d1c9..57249d1d95 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -40,14 +40,14 @@ export function useUIPermission() {
   }
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let hasPreviewPermission = false
     if (previewAs.value && !skipPreviewAs) {
-      hasPreviewPermission = hasPermission(previewAs.value, true, permission)
+      const hasPreviewPermission = hasPermission(previewAs.value, true, permission)
+
+      if (hasPreviewPermission) return true
     }
 
-    return (
-      hasPreviewPermission ||
-      Object.entries(allRoles.value).some(([role, hasRole]) => hasPermission(role as Role | ProjectRole, hasRole, permission))
+    return Object.entries(allRoles.value).some(([role, hasRole]) =>
+      hasPermission(role as Role | ProjectRole, hasRole, permission),
     )
   }
 

From 95485d6f1d8797686ae569c040bfaeb377d2367b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 15:47:49 +0200
Subject: [PATCH 12/26] feat(nc-gui): add `useRoles` composable

---
 packages/nc-gui/composables/index.ts          |  1 +
 packages/nc-gui/composables/useProject.ts     | 31 ++--------
 packages/nc-gui/composables/useRoles/index.ts | 62 +++++++++++++++++++
 3 files changed, 68 insertions(+), 26 deletions(-)
 create mode 100644 packages/nc-gui/composables/useRoles/index.ts

diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index 5fd560cb5c..8f49f15ea0 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/packages/nc-gui/composables/index.ts
@@ -2,6 +2,7 @@ export * from './useApi'
 export * from './useDialog'
 export * from './useGlobal'
 export * from './useInjectionState'
+export * from './useRoles'
 export * from './useSidebar'
 export * from './useTheme'
 export * from './useUIPermission'
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 30d075961f..1ed25b61c6 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -3,7 +3,6 @@ import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
-  USER_PROJECT_ROLES,
   computed,
   createEventHook,
   ref,
@@ -11,12 +10,12 @@ import {
   useGlobal,
   useInjectionState,
   useNuxtApp,
+  useRoles,
   useRoute,
-  useState,
   useTheme,
   watch,
 } from '#imports'
-import type { ProjectMetaInfo, ProjectRole, Roles } from '~/lib'
+import type { ProjectMetaInfo } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
@@ -30,14 +29,14 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const { setTheme, theme } = useTheme()
 
+  const { projectRoles, loadProjectRoles } = useRoles()
+
   const projectLoadedHook = createEventHook<ProjectType>()
 
   const project = ref<ProjectType>({})
 
   const tables = ref<TableType[]>([])
 
-  const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
-
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
 
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
@@ -72,26 +71,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     }
   }
 
-  async function loadProjectRoles() {
-    projectRoles.value = {}
-
-    if (isSharedBase.value) {
-      const user = await api.auth.me(
-        {},
-        {
-          headers: {
-            'xc-shared-base-id': route.params.projectId,
-          },
-        },
-      )
-
-      projectRoles.value = user.roles
-    } else if (project.value.id) {
-      const user = await api.auth.me({ project_id: project.value.id })
-      projectRoles.value = user.roles
-    }
-  }
-
   async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await api.dbTable.list(project.value.id, {
@@ -121,7 +100,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
       return
     }
 
-    await loadProjectRoles()
+    await loadProjectRoles(project.value.id || (route.params.projectId as string), isSharedBase.value)
 
     await loadTables()
 
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
new file mode 100644
index 0000000000..ead8ad2355
--- /dev/null
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -0,0 +1,62 @@
+import { isString } from '@vueuse/core'
+import { computed, ref, useApi, useGlobal, useInjectionState } from '#imports'
+import type { ProjectRole, Role, Roles } from '~/lib'
+
+const [setup, use] = useInjectionState(() => {
+  const { user } = useGlobal()
+
+  const { api } = useApi()
+
+  const projectRoles = ref<Roles<ProjectRole>>({})
+
+  const userRoles = computed<Roles<Role>>(() => {
+    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
+      }, {})
+    }
+
+    return userRoles
+  })
+
+  async function loadProjectRoles(projectId: string, isSharedBase: boolean) {
+    projectRoles.value = {}
+
+    if (isSharedBase) {
+      const user = await api.auth.me(
+        {},
+        {
+          headers: {
+            'xc-shared-base-id': projectId,
+          },
+        },
+      )
+
+      projectRoles.value = user.roles
+    } else if (projectId) {
+      const user = await api.auth.me({ project_id: projectId })
+      projectRoles.value = user.roles
+    }
+  }
+
+  const allRoles = computed<Roles>(() => ({
+    ...userRoles.value,
+    ...projectRoles.value,
+  }))
+
+  return { allRoles, userRoles, projectRoles, loadProjectRoles }
+}, 'useRoles')
+
+export function useRoles() {
+  const roles = use()
+
+  if (!roles) {
+    return setup()
+  }
+
+  return roles
+}

From 84b9f8b10f8315a92f8cc1346d3dc1b17a2ddab8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:04:25 +0200
Subject: [PATCH 13/26] refactor(nc-gui): use injection state for
 `useUIPermission`

---
 .../composables/useUIPermission/index.ts      | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 57249d1d95..5f06758941 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -1,33 +1,13 @@
 import { isString } from '@vueuse/core'
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
-import type { ProjectRole, Role, Roles } from '~/lib'
+import { useGlobal, useInjectionState, useRoles } from '#imports'
+import type { ProjectRole, Role } from '~/lib'
 
-export function useUIPermission() {
-  const { user, previewAs } = useGlobal()
-
-  const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_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
-        }, {})
-      }
-
-      // merge user role and project specific user roles
-      return {
-        ...userRoles,
-        ...projectRoles.value,
-      }
-    }),
-  )
+const [setup, use] = useInjectionState(() => {
+  const { previewAs } = useGlobal()
+
+  const { allRoles } = useRoles()
 
   const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
     const rolePermission = rolePermissions[role]
@@ -51,5 +31,15 @@ export function useUIPermission() {
     )
   }
 
-  return { isUIAllowed }
+  return { isUIAllowed, projectRoles }
+}, 'useUIPermission')
+
+export function useUIPermission() {
+  let usePermissions = use()
+
+  if (!usePermissions) {
+    usePermissions = setup()
+  }
+
+  return { isUIAllowed: usePermissions.isUIAllowed }
 }

From 4bd0dccc8d649d04e81ad0e9f2b3ee08ef1a53ca Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:35:45 +0200
Subject: [PATCH 14/26] refactor(nc-gui): cancel permission check if
 prematurely caught

---
 packages/nc-gui/composables/useUIPermission/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 5f06758941..d29bd19689 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -12,11 +12,11 @@ const [setup, use] = useInjectionState(() => {
   const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
     const rolePermission = rolePermissions[role]
 
-    return (
-      hasRole &&
-      rolePermission &&
-      ((isString(rolePermission) && rolePermission === '*') || rolePermission[permission as keyof typeof rolePermission])
-    )
+    if (!hasRole || !rolePermission) return false
+
+    if (isString(rolePermission) && rolePermission === '*') return true
+
+    return rolePermission[permission as keyof typeof rolePermission]
   }
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {

From 010d5ad51b6ad79e9a64d3fc3d4b7ec3ba9cead2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:40:31 +0200
Subject: [PATCH 15/26] chore(nc-gui): rename variable

---
 packages/nc-gui/composables/useRoles/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index ead8ad2355..1931528a9f 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -10,17 +10,17 @@ const [setup, use] = useInjectionState(() => {
   const projectRoles = ref<Roles<ProjectRole>>({})
 
   const userRoles = computed<Roles<Role>>(() => {
-    let userRoles = user.value?.roles ?? {}
+    let roles = user.value?.roles ?? {}
 
     // if string populate key-value paired object
-    if (isString(userRoles)) {
-      userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
+    if (isString(roles)) {
+      roles = roles.split(',').reduce<Roles>((acc, role) => {
         acc[role] = true
         return acc
       }, {})
     }
 
-    return userRoles
+    return roles
   })
 
   async function loadProjectRoles(projectId: string, isSharedBase: boolean) {

From 9f387b6342e52221f179beb5ac5eaf90c0efb103 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 19:08:40 +0200
Subject: [PATCH 16/26] chore(nc-gui): remove unused var

---
 packages/nc-gui/composables/useUIPermission/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index d29bd19689..5b53213aab 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -31,7 +31,7 @@ const [setup, use] = useInjectionState(() => {
     )
   }
 
-  return { isUIAllowed, projectRoles }
+  return { isUIAllowed }
 }, 'useUIPermission')
 
 export function useUIPermission() {

From 58210be87af69b2166b0b72b916ab5018a9efc78 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 19:50:37 +0200
Subject: [PATCH 17/26] refactor(nc-gui): remove `useInjectionState` from
 `useUIPermission`

---
 .../composables/useUIPermission/index.ts      | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 5b53213aab..9cd73613d6 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -1,23 +1,23 @@
 import { isString } from '@vueuse/core'
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { useGlobal, useInjectionState, useRoles } from '#imports'
+import { useGlobal, useRoles } from '#imports'
 import type { ProjectRole, Role } from '~/lib'
 
-const [setup, use] = useInjectionState(() => {
-  const { previewAs } = useGlobal()
+const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
+  const rolePermission = rolePermissions[role]
 
-  const { allRoles } = useRoles()
+  if (!hasRole || !rolePermission) return false
 
-  const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
-    const rolePermission = rolePermissions[role]
+  if (isString(rolePermission) && rolePermission === '*') return true
 
-    if (!hasRole || !rolePermission) return false
+  return rolePermission[permission as keyof typeof rolePermission]
+}
 
-    if (isString(rolePermission) && rolePermission === '*') return true
+export function useUIPermission() {
+  const { previewAs } = useGlobal()
 
-    return rolePermission[permission as keyof typeof rolePermission]
-  }
+  const { allRoles } = useRoles()
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
     if (previewAs.value && !skipPreviewAs) {
@@ -32,14 +32,4 @@ const [setup, use] = useInjectionState(() => {
   }
 
   return { isUIAllowed }
-}, 'useUIPermission')
-
-export function useUIPermission() {
-  let usePermissions = use()
-
-  if (!usePermissions) {
-    usePermissions = setup()
-  }
-
-  return { isUIAllowed: usePermissions.isUIAllowed }
 }

From 8bfe3cbb955ec8642ecf0a9647eaecf4b704f6e9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:29:42 +0200
Subject: [PATCH 18/26] refactor(nc-gui): use shared composable instead of
 injection state for roles

---
 packages/nc-gui/composables/useRoles/index.ts | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index 1931528a9f..3a8e0cd101 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -1,8 +1,8 @@
 import { isString } from '@vueuse/core'
-import { computed, ref, useApi, useGlobal, useInjectionState } from '#imports'
+import { computed, createSharedComposable, ref, useApi, useGlobal } from '#imports'
 import type { ProjectRole, Role, Roles } from '~/lib'
 
-const [setup, use] = useInjectionState(() => {
+export const useRoles = createSharedComposable(() => {
   const { user } = useGlobal()
 
   const { api } = useApi()
@@ -49,14 +49,4 @@ const [setup, use] = useInjectionState(() => {
   }))
 
   return { allRoles, userRoles, projectRoles, loadProjectRoles }
-}, 'useRoles')
-
-export function useRoles() {
-  const roles = use()
-
-  if (!roles) {
-    return setup()
-  }
-
-  return roles
-}
+})

From 95095c67c8f12d8c1d0dd94e1c30b74873361278 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:32:17 +0200
Subject: [PATCH 19/26] refactor(nc-gui): use shared composable instead of
 injection state for permissions

---
 packages/nc-gui/composables/useUIPermission/index.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index 9cd73613d6..ffc2e1e83e 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/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 { useGlobal, useRoles } from '#imports'
+import { createSharedComposable, useGlobal, useRoles } from '#imports'
 import type { ProjectRole, Role } from '~/lib'
 
 const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: Permission | string) => {
@@ -14,9 +14,8 @@ const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: P
   return rolePermission[permission as keyof typeof rolePermission]
 }
 
-export function useUIPermission() {
+export const useUIPermission = createSharedComposable(() => {
   const { previewAs } = useGlobal()
-
   const { allRoles } = useRoles()
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
@@ -32,4 +31,4 @@ export function useUIPermission() {
   }
 
   return { isUIAllowed }
-}
+})

From 1fd6e08b1c5e35348881d98771b4ea03de215ae5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:39:32 +0200
Subject: [PATCH 20/26] refactor(nc-gui): remove unnecessary injection state
 from useSidebar

---
 .../nc-gui/composables/useSidebar/index.ts    | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/composables/useSidebar/index.ts b/packages/nc-gui/composables/useSidebar/index.ts
index 9a1f678661..b4ecb5ba48 100644
--- a/packages/nc-gui/composables/useSidebar/index.ts
+++ b/packages/nc-gui/composables/useSidebar/index.ts
@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { MemStorage, onScopeDispose, useInjectionState, watch } from '#imports'
+import { MemStorage, onScopeDispose, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -8,14 +8,16 @@ interface UseSidebarProps {
 }
 
 /**
- * Injection state for sidebars
+ * States for sidebars
  *
- * Use `provideSidebar` to provide the injection state on current component level (will affect all children injections)
- * Use `useSidebar` to use the injection state on current component level
+ * Use `provideSidebar` to provide the state and save to memory or local storage
+ * Use `useSidebar` to use the state
  *
- * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
+ * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no state can be found
+ *
+ * Requires an id to work, id should correspond to the sidebar state you want to create or fetch
  */
-const [setupSidebarStore, useSidebarStore] = useInjectionState(() => new MemStorage(), 'SidebarStore')
+const sidebarStorage = new MemStorage()
 
 const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   const isOpen = ref(props.isOpen ?? false)
@@ -59,18 +61,8 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   }
 }
 
-const useSidebarStorage = () => {
-  let sidebarStorage = useSidebarStore()
-
-  if (!sidebarStorage) {
-    sidebarStorage = setupSidebarStore()
-  }
-
-  return sidebarStorage
-}
-
 export const provideSidebar = (id: string, props: UseSidebarProps = {}) => {
-  const sidebarStorage = useSidebarStorage()
+  if (!id) throw new Error('provideSidebar requires an id')
 
   onScopeDispose(() => {
     sidebarStorage.remove(id)
@@ -95,8 +87,6 @@ export const provideSidebar = (id: string, props: UseSidebarProps = {}) => {
 export function useSidebar(id: string, props: UseSidebarProps = {}) {
   if (!id) throw new Error('useSidebar requires an id')
 
-  const sidebarStorage = useSidebarStorage()
-
   if (sidebarStorage.has(id)) {
     const sidebar = sidebarStorage.get(id)
 

From ff4af30b47a66e0248d53958f973a552fa472513 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:48:17 +0200
Subject: [PATCH 21/26] chore(nc-gui): export mem storage from utils

---
 packages/nc-gui/utils/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/utils/index.ts b/packages/nc-gui/utils/index.ts
index 642feed20c..7a2cf1d395 100644
--- a/packages/nc-gui/utils/index.ts
+++ b/packages/nc-gui/utils/index.ts
@@ -18,3 +18,4 @@ export * from './currencyUtils'
 export * from './dataUtils'
 export * from './userUtils'
 export * from './stringUtils'
+export * from './memStorage'

From 6173d6ac2e7af4afce7f324b9f7042b331a822e1 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:48:45 +0200
Subject: [PATCH 22/26] refactor(nc-gui): implement `useGlobalState` for
 `useGlobal` composable

---
 packages/nc-gui/composables/useGlobal/index.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/composables/useGlobal/index.ts b/packages/nc-gui/composables/useGlobal/index.ts
index 4591ff46a0..3088dc9dad 100644
--- a/packages/nc-gui/composables/useGlobal/index.ts
+++ b/packages/nc-gui/composables/useGlobal/index.ts
@@ -2,7 +2,7 @@ import { useGlobalState } from './state'
 import { useGlobalActions } from './actions'
 import type { UseGlobalReturn } from './types'
 import { useGlobalGetters } from './getters'
-import { useNuxtApp, watch } from '#imports'
+import { createGlobalState, useNuxtApp, watch } from '#imports'
 
 /**
  * Global state is injected by {@link import('~/plugins/state') state} plugin into our nuxt app (available as `$state`).
@@ -34,11 +34,8 @@ import { useNuxtApp, watch } from '#imports'
  * console.log(state.isLoading.value) // isLoading = true if any api request is still running
  * ```
  */
-export const useGlobal = (): UseGlobalReturn => {
-  const { $state, provide } = useNuxtApp()
-
-  /** If state already exists, return it */
-  if (typeof $state !== 'undefined') return $state
+export const useGlobal = createGlobalState((): UseGlobalReturn => {
+  const { provide } = useNuxtApp()
 
   const state = useGlobalState()
 
@@ -84,4 +81,4 @@ export const useGlobal = (): UseGlobalReturn => {
   provide('state', globalState)
 
   return globalState
-}
+})

From 27005af74c23151286a463f1749aaff6e5ffe50c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:51:29 +0200
Subject: [PATCH 23/26] refactor(nc-gui): simplify useSidebar and update
 comments

---
 .../nc-gui/components/tabs/Smartsheet.vue     |  6 ++--
 .../nc-gui/composables/useSidebar/index.ts    | 35 +++++--------------
 packages/nc-gui/layouts/default.vue           |  4 +--
 3 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index ed1a4da11c..a9115c0f53 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -11,9 +11,9 @@ import {
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   computed,
+  createEventHook,
   inject,
   provide,
-  provideSidebar,
   useMetas,
   useProvideSmartsheetStore,
   watch,
@@ -35,14 +35,14 @@ const fields = ref<ColumnType[]>([])
 provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
-const reloadEventHook = createEventHook<void>()
+const reloadEventHook = createEventHook()
 const reloadViewMetaEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
 // provide the sidebar injection state
-provideSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
+useSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
 
 // todo: move to store
 provide(MetaInj, meta)
diff --git a/packages/nc-gui/composables/useSidebar/index.ts b/packages/nc-gui/composables/useSidebar/index.ts
index b4ecb5ba48..344dc90f3e 100644
--- a/packages/nc-gui/composables/useSidebar/index.ts
+++ b/packages/nc-gui/composables/useSidebar/index.ts
@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { MemStorage, onScopeDispose, watch } from '#imports'
+import { MemStorage, onScopeDispose, ref, syncRef, toRefs, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -10,12 +10,8 @@ interface UseSidebarProps {
 /**
  * States for sidebars
  *
- * Use `provideSidebar` to provide the state and save to memory or local storage
- * Use `useSidebar` to use the state
- *
- * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no state can be found
- *
  * Requires an id to work, id should correspond to the sidebar state you want to create or fetch
+ * If `useSidebar` was not called before it will create a new state if no state can be found for the specified id
  */
 const sidebarStorage = new MemStorage()
 
@@ -61,40 +57,25 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   }
 }
 
-export const provideSidebar = (id: string, props: UseSidebarProps = {}) => {
-  if (!id) throw new Error('provideSidebar requires an id')
-
-  onScopeDispose(() => {
-    sidebarStorage.remove(id)
-  })
+export function useSidebar(id: string, props: UseSidebarProps = {}) {
+  if (!id) throw new Error('useSidebar requires an id')
 
   if (!sidebarStorage.has(id)) {
     const sidebar = createSidebar(id, props)
 
     sidebarStorage.set(id, sidebar)
 
-    return sidebar
-  } else {
-    const sidebar = sidebarStorage.get(id)
-
-    if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
-    if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
+    onScopeDispose(() => {
+      sidebarStorage.remove(id)
+    })
 
     return sidebar
-  }
-}
-
-export function useSidebar(id: string, props: UseSidebarProps = {}) {
-  if (!id) throw new Error('useSidebar requires an id')
-
-  if (sidebarStorage.has(id)) {
+  } else {
     const sidebar = sidebarStorage.get(id)
 
     if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
     if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
 
     return sidebar
-  } else {
-    return provideSidebar(id, props)
   }
 }
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index cb45473340..cc836efafa 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
-import { provideSidebar, useI18n, useRoute } from '#imports'
+import { useI18n, useRoute, useSidebar } from '#imports'
 
 const route = useRoute()
 
 const { te, t } = useI18n()
 
-const { hasSidebar } = provideSidebar('nc-left-sidebar')
+const { hasSidebar } = useSidebar('nc-left-sidebar')
 
 useTitle(route.meta?.title && te(route.meta.title) ? `${t(route.meta.title)} | NocoDB` : 'NocoDB')
 </script>

From 69475f86aefbceca938957096fa26008f1a19651 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:55:17 +0200
Subject: [PATCH 24/26] chore(nc-gui): add comments to `useRoles`

---
 packages/nc-gui/composables/useRoles/index.ts | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index 3a8e0cd101..eaa3711fb3 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -2,6 +2,15 @@ import { isString } from '@vueuse/core'
 import { computed, createSharedComposable, ref, useApi, useGlobal } from '#imports'
 import type { ProjectRole, Role, Roles } from '~/lib'
 
+/**
+ * Provides the roles a user currently has
+ *
+ * * `userRoles` - the roles a user has outside of projects
+ * * `projectRoles` - the roles a user has in the current project (if one was loaded)
+ * * `allRoles` - all roles a user has (userRoles + projectRoles)
+ * * `hasRole` - a function to check if a user has a specific role
+ * * `loadProjectRoles` - a function to load the project roles for a specific project (by id)
+ */
 export const useRoles = createSharedComposable(() => {
   const { user } = useGlobal()
 
@@ -23,6 +32,11 @@ export const useRoles = createSharedComposable(() => {
     return roles
   })
 
+  const allRoles = computed<Roles>(() => ({
+    ...userRoles.value,
+    ...projectRoles.value,
+  }))
+
   async function loadProjectRoles(projectId: string, isSharedBase: boolean) {
     projectRoles.value = {}
 
@@ -43,10 +57,9 @@ export const useRoles = createSharedComposable(() => {
     }
   }
 
-  const allRoles = computed<Roles>(() => ({
-    ...userRoles.value,
-    ...projectRoles.value,
-  }))
+  function hasRole(role: Role | ProjectRole | string) {
+    return allRoles.value[role]
+  }
 
-  return { allRoles, userRoles, projectRoles, loadProjectRoles }
+  return { allRoles, userRoles, projectRoles, loadProjectRoles, hasRole }
 })

From 043443322bf3180ab23690f25444bc093861f5f3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 21:18:40 +0200
Subject: [PATCH 25/26] refactor(nc-gui): use global state for useTheme

---
 packages/nc-gui/app.vue                       |  4 +---
 packages/nc-gui/composables/useTheme/index.ts | 20 +++----------------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index 46c1784d71..933ebfc3d6 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { computed, provideTheme, useRoute } from '#imports'
+import { computed, useRoute } from '#imports'
 
 const route = useRoute()
 
 const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
-
-provideTheme()
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index 8370380855..f0b4eb0220 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -1,14 +1,14 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import tinycolor from 'tinycolor2'
-import { hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
+import { createGlobalState, hexToRGB, ref, themeV2Colors, useCssVar } from '#imports'
 
 export interface ThemeConfig extends AntTheme {
   primaryColor: string
   accentColor: string
 }
 
-const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
+export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
   const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
   const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
 
@@ -46,18 +46,4 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
     theme: currentTheme,
     setTheme,
   }
-}, 'theme')
-
-export const provideTheme = setup
-
-export function useTheme(config?: Partial<ThemeConfig>) {
-  const theme = use()
-
-  if (!theme) {
-    return setup(config)
-  } else {
-    if (config) theme.setTheme(config)
-  }
-
-  return theme
-}
+})

From fee34c1233f94bb65a272a1cf0a5120af1d5f1cd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 23 Sep 2022 11:36:46 +0200
Subject: [PATCH 26/26] fix(nc-gui): pass shared base id to loadProjectRoles

---
 packages/nc-gui/composables/useProject.ts     | 6 +++++-
 packages/nc-gui/composables/useRoles/index.ts | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 1ed25b61c6..050c20be52 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -100,7 +100,11 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
       return
     }
 
-    await loadProjectRoles(project.value.id || (route.params.projectId as string), isSharedBase.value)
+    await loadProjectRoles(
+      project.value.id || (route.params.projectId as string),
+      isSharedBase.value,
+      route.params.projectId as string,
+    )
 
     await loadTables()
 
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
index eaa3711fb3..bfa8fd4e1f 100644
--- a/packages/nc-gui/composables/useRoles/index.ts
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -37,7 +37,7 @@ export const useRoles = createSharedComposable(() => {
     ...projectRoles.value,
   }))
 
-  async function loadProjectRoles(projectId: string, isSharedBase: boolean) {
+  async function loadProjectRoles(projectId: string, isSharedBase?: boolean, sharedBaseId?: string) {
     projectRoles.value = {}
 
     if (isSharedBase) {
@@ -45,7 +45,7 @@ export const useRoles = createSharedComposable(() => {
         {},
         {
           headers: {
-            'xc-shared-base-id': projectId,
+            'xc-shared-base-id': sharedBaseId,
           },
         },
       )