feat: use new role selector for invite part

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

@@ -117,36 +117,13 @@ const copyUrl = async () => {
             class="!max-w-130 !rounded"
           />
 
-          <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-            <template #suffixIcon>
-              <MdiChevronDown />
-            </template>
-            <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
-              <!-- <div
-                class="flex flex-row h-full justify-start items-center"
-                :data-testid="`nc-share-invite-user-role-option-${role}`"
-              >
-                <div class="px-2 py-1 flex rounded-full text-xs capitalize">
-                  {{ role }}
-                </div>
-              </div> -->
-              <NcBadge v-if="role === ProjectRoles.OWNER" color="purple">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.CREATOR" color="blue">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.EDITOR" color="green">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.COMMENTER" color="orange">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-              <NcBadge v-if="role === ProjectRoles.VIEWER" color="yellow">
-                <p class="badge-text">{{ role }}</p>
-              </NcBadge>
-            </a-select-option>
-          </NcSelect>
+          <RolesSelector
+            class="px-1"
+            :role="inviteData.roles"
+            :roles="ProjectRoles"
+            :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
+            :description="false"
+          />
 
           <a-button
             type="primary"

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

@@ -36,13 +36,17 @@ const roleProperties = computed(() => {
     descriptionText,
   }
 })
+
+console.log('dummy')
 </script>
 
 <template>
   <div
-    class="flex flex-col py-[6px] px-[8px] gap-[4px] w-[350px] rounded-md bg-gray-50"
+    class="flex flex-col py-[3px] px-[8px] gap-[4px] rounded-md bg-gray-50"
     :class="{
       'cursor-pointer hover:bg-gray-100': clickableRef,
+      'w-[350px]': descriptionRef,
+      'w-[140px] items-center': !descriptionRef,
     }"
   >
     <div class="flex items-center">

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

@@ -2,20 +2,27 @@
 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 props = withDefaults(
+  defineProps<{
+    role: keyof typeof RoleLabels
+    roles: (keyof typeof RoleLabels)[]
+    description?: boolean
+    inherit?: string
+    onRoleChange: (role: keyof typeof RoleLabels) => void
+  }>(),
+  {
+    description: true,
+  },
+)
 
 const roleRef = toRef(props, 'role')
 const inheritRef = toRef(props, 'inherit')
+const descriptionRef = toRef(props, 'description')
 </script>
 
 <template>
   <NcDropdown>
-    <RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" />
+    <RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" :description="descriptionRef" />
     <template #overlay>
       <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
         <div class="flex flex-col gap-[4px]">
@@ -32,6 +39,7 @@ const inheritRef = toRef(props, 'inherit')
               :class="`nc-role-select-${rl}`"
               :role="rl"
               :inherit="inheritRef === rl"
+              :description="descriptionRef"
             />
           </div>
         </div>

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

@@ -10,7 +10,8 @@ const inviteData = reactive({
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
-const { isInvitingCollaborators, workspaceRole } = storeToRefs(workspaceStore)
+const { isInvitingCollaborators } = storeToRefs(workspaceStore)
+const { workspaceRoles } = useRoles()
 
 const inviteCollaborator = async () => {
   try {
@@ -23,9 +24,19 @@ const inviteCollaborator = async () => {
 }
 
 // allow only lower roles to be assigned
-const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
-  const currentRoleIndex = OrderedWorkspaceRoles.findIndex((role) => role === workspaceRole.value)
-  return OrderedWorkspaceRoles.slice(currentRoleIndex + 1)
+const allowedRoles = ref<WorkspaceUserRoles[]>([])
+
+onMounted(async () => {
+  try {
+    const currentRoleIndex = OrderedWorkspaceRoles.findIndex(
+      (role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role),
+    )
+    if (currentRoleIndex !== -1) {
+      allowedRoles.value = OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r)
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 })
 </script>
 
@@ -41,18 +52,13 @@ const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
           class="!max-w-130 !rounded"
         />
 
-        <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
-          <template #suffixIcon>
-            <MdiChevronDown />
-          </template>
-          <template v-for="role of allowedRoles" :key="`role-option-${role}`">
-            <a-select-option v-if="role" :value="role">
-              <NcBadge :color="RoleColors[role]">
-                <p class="badge-text">{{ RoleLabels[role] }}</p>
-              </NcBadge>
-            </a-select-option>
-          </template>
-        </NcSelect>
+        <RolesSelector
+          class="px-1"
+          :role="inviteData.roles"
+          :roles="allowedRoles"
+          :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
+          :description="false"
+        />
 
         <a-button
           type="primary"