feat: new role badge and selector

packages/nc-gui/components/nc/Badge.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
       'border-green-500 bg-green-100': props.color === 'green',
       'border-orange-500 bg-orange-100': props.color === 'orange',
       'border-yellow-500 bg-yellow-100': props.color === 'yellow',
+      'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
     }"
   >

packages/nc-gui/components/project/AccessSettings.vue

@@ -1,15 +1,25 @@
 <script lang="ts" setup>
-import type { WorkspaceUserType } from 'nocodb-sdk'
+import type { OrgUserRoles, WorkspaceUserRoles } from 'nocodb-sdk'
-import { OrderedProjectRoles, ProjectRoles, RoleColors, RoleLabels } from 'nocodb-sdk'
+import { OrderedProjectRoles, ProjectRoles, WorkspaceRolesToProjectRoles } from 'nocodb-sdk'
 import InfiniteLoading from 'v3-infinite-loading'
-import { isEeUI, storeToRefs, stringToColour, timeAgo, useGlobal } from '#imports'
+import { isEeUI, storeToRefs, stringToColour, timeAgo } from '#imports'
 
-const { user } = useGlobal()
 const projectsStore = useProjects()
 const { getProjectUsers, createProjectUser, updateProjectUser, removeProjectUser } = projectsStore
 const { activeProjectId } = storeToRefs(projectsStore)
 
-const collaborators = ref<WorkspaceUserType[]>([])
+const { projectRoles } = useRoles()
+
+const collaborators = ref<
+  {
+    id: string
+    email: string
+    main_roles: OrgUserRoles
+    roles: ProjectRoles
+    workspace_roles: WorkspaceUserRoles
+    created_at: string
+  }[]
+>([])
 const totalCollaborators = ref(0)
 const userSearchText = ref('')
 const currentPage = ref(0)
@@ -34,9 +44,12 @@ const loadCollaborators = async () => {
       ...collaborators.value,
       ...users.map((user: any) => ({
         ...user,
-        projectRoles: user.roles,
+        project_roles: user.roles,
-        // TODO: Remove this hack and make the values consistent with the backend
+        roles:
-        roles: user.roles ?? (RoleLabels[user.workspace_roles as string] as string)?.toLowerCase() ?? ProjectRoles.NO_ACCESS,
+          user.roles ??
+          (user.workspace_roles
+            ? WorkspaceRolesToProjectRoles[user.workspace_roles as WorkspaceUserRoles] ?? ProjectRoles.NO_ACCESS
+            : ProjectRoles.NO_ACCESS),
       })),
     ]
   } catch (e: any) {
@@ -62,16 +75,29 @@ const loadListData = async ($state: any) => {
   $state.loaded()
 }
 
-const updateCollaborator = async (collab, roles) => {
+const updateCollaborator = async (collab: any, roles: ProjectRoles) => {
   try {
-    if (!roles || roles === 'inherit' || (roles === ProjectRoles.NO_ACCESS && !isEeUI)) {
+    if (
+      !roles ||
+      (roles === ProjectRoles.NO_ACCESS && !isEeUI) ||
+      (collab.workspace_roles && WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles] === roles && isEeUI)
+    ) {
       await removeProjectUser(activeProjectId.value!, collab)
-      collab.projectRoles = null
+      if (
-    } else if (collab.projectRoles) {
+        collab.workspace_roles &&
+        WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles] === roles &&
+        isEeUI
+      ) {
+        collab.roles = WorkspaceRolesToProjectRoles[collab.workspace_roles as WorkspaceUserRoles]
+      } else {
+        collab.roles = null
+      }
+    } else if (collab.project_roles) {
+      collab.roles = roles
       await updateProjectUser(activeProjectId.value!, collab)
     } else {
+      collab.roles = roles
       await createProjectUser(activeProjectId.value!, collab)
-      collab.projectRoles = roles
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -107,16 +133,13 @@ const reloadCollabs = async () => {
   await loadCollaborators()
 }
 
-const userProjectRole = computed<(typeof ProjectRoles)[keyof typeof ProjectRoles]>(() => {
-  const projectUser = collaborators.value?.find((collab) => collab.id === user.value?.id)
-  return projectUser?.projectRoles
-})
-
 onMounted(async () => {
   isLoading.value = true
   try {
     await loadCollaborators()
-    const currentRoleIndex = OrderedProjectRoles.findIndex((role) => role === userProjectRole.value)
+    const currentRoleIndex = OrderedProjectRoles.findIndex(
+      (role) => projectRoles.value && Object.keys(projectRoles.value).includes(role),
+    )
     if (currentRoleIndex !== -1) {
       accessibleRoles.value = OrderedProjectRoles.slice(currentRoleIndex + 1)
     }
@@ -180,41 +203,22 @@ onMounted(async () => {
               {{ timeAgo(collab.created_at) }}
             </div>
             <div class="w-1/5 roles">
-              <div class="nc-collaborator-role-select">
+              <div class="nc-collaborator-role-select p-2">
-                <NcSelect
+                <template v-if="accessibleRoles.includes(collab.roles)">
-                  v-model:value="collab.roles"
+                  <RolesSelector
-                  class="w-35 !rounded px-1"
+                    :role="collab.roles"
-                  :virtual="true"
+                    :roles="accessibleRoles"
-                  :placeholder="$t('labels.noAccess')"
+                    :inherit="
-                  :disabled="collab.id === user?.id || (collab.roles && !accessibleRoles.includes(collab.roles))"
+                      isEeUI && collab.workspace_roles && WorkspaceRolesToProjectRoles[collab.workspace_roles]
-                  @change="(value) => updateCollaborator(collab, value)"
+                        ? WorkspaceRolesToProjectRoles[collab.workspace_roles]
-                >
+                        : null
-                  <template #suffixIcon>
+                    "
-                    <MdiChevronDown />
+                    :on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)"
+                  />
                 </template>
-                  <a-select-option v-if="collab.id === user?.id" :value="userProjectRole">
+                <template v-else>
-                    <NcBadge :color="RoleColors[userProjectRole]">
+                  <RolesBadge class="!bg-white" :role="collab.roles" />
-                      <p class="badge-text">{{ RoleLabels[userProjectRole] }}</p>
-                    </NcBadge>
-                  </a-select-option>
-                  <a-select-option v-if="collab.roles && !accessibleRoles.includes(collab.roles)" :value="collab.roles">
-                    <NcBadge :color="RoleColors[collab.roles]">
-                      <p class="badge-text">{{ RoleLabels[collab.roles] }}</p>
-                    </NcBadge>
-                  </a-select-option>
-                  <template v-for="role of accessibleRoles" :key="`role-option-${role}`">
-                    <a-select-option :value="role">
-                      <NcBadge :color="RoleColors[role]">
-                        <p class="badge-text">{{ RoleLabels[role] }}</p>
-                      </NcBadge>
-                    </a-select-option>
                 </template>
-                  <a-select-option v-if="isEeUI" value="inherit">
-                    <NcBadge color="white">
-                      <p class="badge-text">Inherit</p>
-                    </NcBadge>
-                  </a-select-option>
-                </NcSelect>
               </div>
             </div>
             <div class="w-1/5"></div>
@@ -238,7 +242,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .badge-text {
-  @apply text-[14px] pt-1 text-center;
+  @apply text-[14px] flex items-center justify-center gap-1 pt-0.5;
 }
 
 .nc-collaborators-list {

packages/nc-gui/components/roles/Badge.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { RoleColors, RoleDescriptions, RoleIcons, RoleLabels } from 'nocodb-sdk'
+import { toRef } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    role: keyof typeof RoleLabels
+    description?: boolean
+    clickable?: boolean
+    inherit?: boolean
+  }>(),
+  {
+    description: true,
+    clickable: false,
+    inherit: false,
+  },
+)
+
+const roleRef = toRef(props, 'role')
+const descriptionRef = toRef(props, 'description')
+const clickableRef = toRef(props, 'clickable')
+const inheritRef = toRef(props, 'inherit')
+
+const roleProperties = computed(() => {
+  const role = roleRef.value
+
+  const color = RoleColors[role]
+  const icon = RoleIcons[role]
+  const label = RoleLabels[role]
+  const descriptionText = RoleDescriptions[role]
+
+  return {
+    color,
+    icon,
+    label,
+    descriptionText,
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col py-[6px] px-[8px] gap-[4px] w-[350px] rounded-md bg-gray-50"
+    :class="{
+      'cursor-pointer hover:bg-gray-100': clickableRef,
+    }"
+  >
+    <div class="flex items-center">
+      <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color">
+        <div
+          class="badge-text flex items-center gap-[4px]"
+          :class="{
+            'text-purple-500': roleProperties.color === 'purple',
+            'text-blue-500': roleProperties.color === 'blue',
+            'text-green-500': roleProperties.color === 'green',
+            'text-orange-500': roleProperties.color === 'orange',
+            'text-yellow-500': roleProperties.color === 'yellow',
+            'text-red-500': roleProperties.color === 'red',
+            'text-gray-300': !roleProperties.color,
+          }"
+        >
+          <GeneralIcon :icon="roleProperties.icon" />
+          {{ roleProperties.label }}
+        </div>
+      </NcBadge>
+      <div class="flex-1"></div>
+      <a-tooltip v-if="inheritRef" placement="bottom">
+        <div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div>
+      </a-tooltip>
+    </div>
+    <div v-if="descriptionRef" class="text-gray-500">{{ roleProperties.descriptionText }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/components/roles/Selector.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { RoleLabels } from 'nocodb-sdk'
+import { toRef } from '#imports'
+
+const props = defineProps<{
+  role: keyof typeof RoleLabels
+  roles: (keyof typeof RoleLabels)[]
+  inherit?: string
+  onRoleChange: (role: keyof typeof RoleLabels) => void
+}>()
+
+const roleRef = toRef(props, 'role')
+const inheritRef = toRef(props, 'inherit')
+</script>
+
+<template>
+  <NcDropdown>
+    <RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" />
+    <template #overlay>
+      <div class="flex flex-col gap-[4px] p-1">
+        <div class="flex flex-col gap-[4px]">
+          <NcDropdownItem
+            v-for="rl in props.roles"
+            :key="rl"
+            class="cursor-pointer"
+            :value="rl"
+            :selected="rl === roleRef"
+            @click="props.onRoleChange(rl)"
+          >
+            <RolesBadge class="!bg-white hover:!bg-gray-100" :role="rl" :inherit="inheritRef === rl" />
+          </NcDropdownItem>
+        </div>
+      </div>
+    </template>
+  </NcDropdown>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/utils/iconUtils.ts

@@ -76,6 +76,13 @@ import Up from '~icons/material-symbols/keyboard-arrow-up-rounded'
 import Down from '~icons/material-symbols/keyboard-arrow-down-rounded'
 import PhTriangleFill from '~icons/ph/triangle-fill'
 
+// Roles
+import MaterialSymbolsManageAccountsOutline from '~icons/material-symbols/manage-accounts-outline'
+// account
+import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
+import MaterialSymbolsPersonSearchOutline from '~icons/material-symbols/person-search-outline'
+import MaterialSymbolsBlock from '~icons/material-symbols/block'
+
 // keep it for reference
 // todo: remove it after all icons are migrated
 /* export const iconMapOld = {
@@ -400,6 +407,12 @@ export const iconMap = {
   magic1: MdiMagicStaff,
   workspace: h('span', { class: 'material-symbols' }, 'dataset'),
   notification: NcNotification,
+  role_owner: MaterialSymbolsManageAccountsOutline,
+  role_creator: MaterialSymbolsManageAccountsOutline,
+  role_editor: h('span', { class: 'material-symbols' }, 'person'),
+  role_commenter: MdiCommentAccountOutline,
+  role_viewer: MaterialSymbolsPersonSearchOutline,
+  role_no_access: MaterialSymbolsBlock,
 }
 
 export const getMdiIcon = (type: string): any => {

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

@@ -194,6 +194,40 @@ export const RoleColors = {
   [OrgUserRoles.VIEWER]: 'yellow',
 };
 
+export const RoleDescriptions = {
+  [WorkspaceUserRoles.OWNER]: 'Full access to workspace',
+  [WorkspaceUserRoles.CREATOR]: 'Can create projects, sync tables, views, setup web-hooks and more',
+  [WorkspaceUserRoles.EDITOR]: 'Can edit data in workspace projects',
+  [WorkspaceUserRoles.COMMENTER]: 'Can view and comment data in workspace projects',
+  [WorkspaceUserRoles.VIEWER]: 'Can view data in workspace projects',
+  [ProjectRoles.OWNER]: 'Full access to project',
+  [ProjectRoles.CREATOR]: 'Can create tables, views, setup web-hooks and more',
+  [ProjectRoles.EDITOR]: 'Can only edit data in project',
+  [ProjectRoles.COMMENTER]: 'Can only view and comment on data in project',
+  [ProjectRoles.VIEWER]: 'Can only view data in project',
+  [ProjectRoles.NO_ACCESS]: 'User cannot view project',
+  [OrgUserRoles.SUPER_ADMIN]: 'Full access to all',
+  [OrgUserRoles.CREATOR]: 'Can create projects, sync tables, views, setup web-hooks and more',
+  [OrgUserRoles.VIEWER]: 'Can only view projects',
+};
+
+export const RoleIcons = {
+  [WorkspaceUserRoles.OWNER]: 'role_owner',
+  [WorkspaceUserRoles.CREATOR]: 'role_creator',
+  [WorkspaceUserRoles.EDITOR]: 'role_editor',
+  [WorkspaceUserRoles.COMMENTER]: 'role_commenter',
+  [WorkspaceUserRoles.VIEWER]: 'role_viewer',
+  [ProjectRoles.OWNER]: 'role_owner',
+  [ProjectRoles.CREATOR]: 'role_creator',
+  [ProjectRoles.EDITOR]: 'role_editor',
+  [ProjectRoles.COMMENTER]: 'role_commenter',
+  [ProjectRoles.VIEWER]: 'role_viewer',
+  [ProjectRoles.NO_ACCESS]: 'role_no_access',
+  [OrgUserRoles.SUPER_ADMIN]: 'role_owner',
+  [OrgUserRoles.CREATOR]: 'role_creator',
+  [OrgUserRoles.VIEWER]: 'role_viewer',
+};
+
 export const WorkspaceRolesToProjectRoles = {
   [WorkspaceUserRoles.OWNER]: ProjectRoles.OWNER,
   [WorkspaceUserRoles.CREATOR]: ProjectRoles.CREATOR,

packages/nocodb/src/guards/global/global.guard.ts

@@ -51,7 +51,7 @@ export class GlobalGuard extends AuthGuard(['jwt']) {
         return this.authenticate(req, {
           ...req.user,
           isAuthorized: true,
-          roles: req.user.roles === 'owner' ? 'owner,creator' : req.user.roles,
+          roles: req.user.roles,
         });
       }
     } else if (req.headers['xc-shared-base-id']) {

packages/nocodb/src/models/User.ts

@@ -263,8 +263,7 @@ export default class User implements UserType {
     const projectRoles = await new Promise((resolve) => {
       if (args.projectId) {
         ProjectUser.get(args.projectId, user.id).then(async (projectUser) => {
-          let roles = projectUser?.roles;
+          const roles = projectUser?.roles;
-          roles = roles === 'owner' ? 'owner,creator' : roles;
           // + (user.roles ? `,${user.roles}` : '');
           if (roles) {
             resolve(extractRolesObj(roles));

packages/nocodb/src/strategies/google.strategy/google.strategy.ts

@@ -36,8 +36,6 @@ export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
           ProjectUser.get(req.ncProjectId, user.id)
             .then(async (projectUser) => {
               user.roles = projectUser?.roles || user.roles;
-              user.roles =
-                user.roles === 'owner' ? 'owner,creator' : user.roles;
               // + (user.roles ? `,${user.roles}` : '');
 
               done(null, sanitiseUserObj(user));