From 2f6217c7a75038e6cda34d7c0264bcb38a913220 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:43:15 +0000
Subject: [PATCH] fix(nc-gui): user management role selector ui updates

---
 packages/nc-gui/components/roles/Badge.vue    | 18 +++++++------
 packages/nc-gui/components/roles/Selector.vue | 27 ++++++++++++++++---
 .../components/workspace/InviteSection.vue    | 10 +++++--
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index ae440a546e..863afd9b64 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -39,14 +39,14 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-start rounded-md"
+    class="flex items-start rounded-md w-[fit-content] nc-role-badge"
     :class="{
       'cursor-pointer': clickableRef,
     }"
   >
-    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef" :size="sizeSelect">
+    <NcBadge class="!px-2 w-full" :color="roleProperties.color" :border="borderRef" :size="sizeSelect">
       <div
-        class="badge-text flex items-center gap-2"
+        class="badge-text w-full flex items-center justify-between gap-2"
         :class="{
           'text-purple-700': roleProperties.color === 'purple',
           'text-blue-700': roleProperties.color === 'blue',
@@ -59,11 +59,13 @@ const roleProperties = computed(() => {
           sizeSelect,
         }"
       >
-        <GeneralIcon :icon="roleProperties.icon" />
-        <span class="flex whitespace-nowrap">
-          {{ $t(`objects.roleType.${roleProperties.label}`) }}
-        </span>
-        <GeneralIcon v-if="clickableRef" icon="arrowDown" />
+        <div class="flex items-center gap-2">
+          <GeneralIcon :icon="roleProperties.icon" />
+          <span class="flex whitespace-nowrap">
+            {{ $t(`objects.roleType.${roleProperties.label}`) }}
+          </span>
+        </div>
+        <GeneralIcon v-if="clickableRef" icon="arrowDown" class="flex-none" />
       </div>
     </NcBadge>
     <!--
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
index d248f789a4..2c9a49b5c0 100644
--- a/packages/nc-gui/components/roles/Selector.vue
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -36,19 +36,19 @@ function onChangeRole(val: SelectValue) {
 
 <template>
   <div ref="dropdownRef" size="lg" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
-    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" />
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" clickable />
     <a-select
       v-model:value="roleRef"
       :open="isDropdownOpen"
       :dropdown-match-select-width="false"
-      dropdown-class-name="!rounded-lg  !h-fit max-w-64"
+      dropdown-class-name="!rounded-lg !h-fit max-w-64 nc-role-selector-dropdown"
       class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
       @change="onChangeRole"
     >
       <a-select-option v-for="rl in props.roles" :key="rl" v-e="['c:workspace:settings:user-role-change']" :value="rl">
         <div
           :class="{
-            'w-[350px]': descriptionRef,
+            'w-full': descriptionRef,
             'w-[200px]': !descriptionRef,
           }"
           class="flex flex-col nc-role-select-dropdown gap-1"
@@ -68,4 +68,25 @@ function onChangeRole(val: SelectValue) {
 .ant-select-item-option-content {
   white-space: normal; /* Change from 'nowrap' to 'normal' */
 }
+.nc-role-selector-dropdown {
+  .rc-virtual-list-holder {
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    &::-webkit-scrollbar-track-piece {
+      width: 0px;
+    }
+    &::-webkit-scrollbar {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      width: 4px;
+      @apply bg-gray-200 rounded-md;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-gray-300;
+    }
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 6c60c3913f..00694079ed 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -233,11 +233,13 @@ const onPaste = (e: ClipboardEvent) => {
             @paste.prevent="onPaste"
           />
         </div>
-        <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
+        <span v-if="emailValidation.isError && emailValidation.message" class="ml-2 text-red-500 text-[10px] mt-1.5">{{
+          emailValidation.message
+        }}</span>
       </div>
       <RolesSelector
         size="md"
-        class="px-1"
+        class="px-1 min-w-[152px] nc-invite-role-selector"
         :role="inviteData.roles"
         :roles="allowedRoles"
         :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
@@ -270,4 +272,8 @@ const onPaste = (e: ClipboardEvent) => {
 :deep(.ant-select-selection-item) {
   @apply mt-0.75;
 }
+
+:deep(.nc-invite-role-selector .nc-role-badge) {
+  @apply w-full;
+}
 </style>