fix : added select component in role selection

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

@@ -2,6 +2,7 @@
 import { RoleDescriptions } from 'nocodb-sdk'
 import type { RoleLabels } from 'nocodb-sdk'
 import { toRef } from '#imports'
+import type { SelectValue } from 'ant-design-vue/es/select'
 
 const props = withDefaults(
   defineProps<{
@@ -21,47 +22,55 @@ const props = withDefaults(
 const roleRef = toRef(props, 'role')
 const inheritRef = toRef(props, 'inherit')
 const descriptionRef = toRef(props, 'description')
+const isDropdownOpen = ref(false)
+const dropdownRef = ref(null)
 const sizeRef = toRef(props, 'size')
+
+onClickOutside(dropdownRef, () => (isDropdownOpen.value = false))
+
+function onChangeRole(val: SelectValue) {
+  props.onRoleChange(val as keyof typeof RoleLabels)
+  isDropdownOpen.value = false
+}
 </script>
 
 <template>
-  <NcDropdown size="lg" class="nc-roles-selector">
+  <div size="lg" ref="dropdownRef" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
-    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable :size="sizeRef" />
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" />
-    <template #overlay>
+    <a-select
-      <div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
+      v-model:value="roleRef"
-        <div class="flex flex-col gap-1">
+      :open="isDropdownOpen"
-          <div
+      :dropdown-match-select-width="false"
-            v-for="rl in props.roles"
+      dropdown-class-name="!rounded-lg  !h-fit max-w-64"
-            :key="rl"
+      class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
-            v-e="['c:workspace:settings:user-role-change']"
+      @change="onChangeRole"
-            :value="rl"
+    >
-            :selected="rl === roleRef"
+      <a-select-option
-            @click="props.onRoleChange(rl)"
+        v-for="rl in props.roles"
-          >
+        :key="rl"
-            <div
+        v-e="['c:workspace:settings:user-role-change']"
-              class="flex flex-col py-1.5 rounded-lg px-2 gap-1 bg-transparent cursor-pointer hover:bg-gray-100"
+        :value="rl"
-              :class="{
+      >
-                'w-[350px]': descriptionRef,
+        <div
-                'w-[200px]': !descriptionRef,
+          :class="{
-              }"
+            'w-[350px]': descriptionRef,
-            >
+            'w-[200px]': !descriptionRef,
-              <div class="flex items-center justify-between">
+          }"
-                <RolesBadge
+          class="flex flex-col nc-role-select-dropdown gap-1"
-                  class="!bg-white hover:!bg-gray-100"
+        >
-                  :class="`nc-role-select-${rl}`"
+          <div class="flex items-center justify-between">
-                  :role="rl"
+            <RolesBadge :class="`nc-role-select-${rl}`" :role="rl" :inherit="inheritRef === rl" :border="false" />
-                  :inherit="inheritRef === rl"
+            <GeneralIcon v-if="rl === roleRef" icon="check" class="text-primary" />
-                  :border="false"
-                />
-                <GeneralIcon v-if="rl === roleRef" icon="check" class="text-primary"/>
-              </div>
-              <div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div>
-            </div>
           </div>
+          <div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div>
         </div>
-      </div>
+      </a-select-option>
-    </template>
+    </a-select>
-  </NcDropdown>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+.ant-select-item-option-content {
+  white-space: normal; /* Change from 'nowrap' to 'normal' */
+}
+</style>