From b87982cd075d9f93b0b9916ef22968604038ecfd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 2 Dec 2024 12:09:21 +0000
Subject: [PATCH] fix(nc-gui): org role selector input display issue

---
 packages/nc-gui/assets/style.scss             |  5 ++
 .../nc-gui/components/account/UserList.vue    | 68 +++++++++----------
 .../nc-gui/components/account/UsersModal.vue  | 57 ++++++++--------
 3 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index f65a6f68f2..335b6199ba 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -684,6 +684,11 @@ a {
   @apply hidden;
 }
 
+/* Hide the element with class nc-selected-item-icon */
+.ant-select-selection-item .nc-select-hide-item {
+  @apply hidden;
+}
+
 .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
   @apply bg-transparent;
 }
diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index ef6123c4d2..91642d897a 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -208,6 +208,19 @@ const columns = [
     justify: 'justify-end',
   },
 ] as NcTableColumnProps[]
+
+const userRoleOptions = [
+  {
+    title: 'objects.roleType.orgLevelCreator',
+    subtitle: 'msg.info.roles.orgCreator',
+    value: OrgUserRoles.CREATOR,
+  },
+  {
+    title: 'objects.roleType.orgLevelViewer',
+    subtitle: 'msg.info.roles.orgViewer',
+    value: OrgUserRoles.VIEWER,
+  },
+]
 </script>
 
 <template>
@@ -282,44 +295,31 @@ const columns = [
                   @change="updateRole(el.id, el.roles as string)"
                 >
                   <a-select-option
+                    v-for="(option, idx) of userRoleOptions"
+                    :key="idx"
                     class="nc-users-list-role-option"
-                    :value="OrgUserRoles.CREATOR"
-                    :label="$t(`objects.roleType.orgLevelCreator`)"
+                    :value="option.value"
                   >
-                    <div class="w-full">
-                      <div class="flex items-center gap-1 justify-between">
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
-                        <GeneralIcon
-                          v-if="el?.roles === OrgUserRoles.CREATOR"
-                          id="nc-selected-item-icon"
-                          icon="check"
-                          class="flex-none w-4 h-4 text-primary"
-                        />
-                      </div>
-                      <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
-                        {{ $t('msg.info.roles.orgCreator') }}
+                    <div class="w-full flex items-start gap-1">
+                      <div class="flex-1">
+                        <NcTooltip show-on-truncate-only class="truncate" data-rec="true">
+                          <template #title>
+                            {{ $t(option.title) }}
+                          </template>
+                          {{ $t(option.title) }}
+                        </NcTooltip>
+
+                        <div class="nc-select-hide-item text-gray-500 text-xs whitespace-normal" data-rec="true">
+                          {{ $t(option.subtitle) }}
+                        </div>
                       </div>
-                    </div>
-                  </a-select-option>
 
-                  <a-select-option
-                    class="nc-users-list-role-option"
-                    :value="OrgUserRoles.VIEWER"
-                    :label="$t(`objects.roleType.orgLevelViewer`)"
-                  >
-                    <div class="w-full">
-                      <div class="flex items-center gap-1 justify-between">
-                        <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
-                        <GeneralIcon
-                          v-if="el.roles === OrgUserRoles.VIEWER"
-                          id="nc-selected-item-icon"
-                          icon="check"
-                          class="flex-none w-4 h-4 text-primary"
-                        />
-                      </div>
-                      <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
-                        {{ $t('msg.info.roles.orgViewer') }}
-                      </div>
+                      <GeneralIcon
+                        v-if="el.roles === option.value"
+                        id="nc-selected-item-icon"
+                        icon="check"
+                        class="w-4 h-4 text-primary"
+                      />
                     </div>
                   </a-select-option>
                 </NcSelect>
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index 719161c33d..0c61198c61 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -92,6 +92,19 @@ const onPaste = (e: ClipboardEvent) => {
 
   usersData.value.emails = extractEmail(pastedText) || pastedText
 }
+
+const userRoleOptions = [
+  {
+    title: 'objects.roleType.orgLevelCreator',
+    subtitle: 'msg.info.roles.orgCreator',
+    value: OrgUserRoles.CREATOR,
+  },
+  {
+    title: 'objects.roleType.orgLevelViewer',
+    subtitle: 'msg.info.roles.orgViewer',
+    value: OrgUserRoles.VIEWER,
+  },
+]
 </script>
 
 <template>
@@ -199,42 +212,32 @@ const onPaste = (e: ClipboardEvent) => {
                       dropdown-class-name="nc-dropdown-user-role max-w-64"
                     >
                       <a-select-option
+                        v-for="(option, idx) of userRoleOptions"
+                        :key="idx"
                         class="nc-role-option"
-                        :value="OrgUserRoles.CREATOR"
-                        :label="$t(`objects.roleType.orgLevelCreator`)"
+                        :value="option.value"
                       >
-                        <div class="flex items-center gap-1 justify-between">
-                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
-                          <GeneralIcon
-                            v-if="usersData.role === OrgUserRoles.CREATOR"
-                            id="nc-selected-item-icon"
-                            icon="check"
-                            class="w-4 h-4 text-primary"
-                          />
-                        </div>
+                        <div class="w-full flex items-start gap-1">
+                          <div class="flex-1 max-w-[calc(100%_-_16px)]">
+                            <NcTooltip show-on-truncate-only class="truncate" data-rec="true">
+                              <template #title>
+                                {{ $t(option.title) }}
+                              </template>
+                              {{ $t(option.title) }}
+                            </NcTooltip>
+
+                            <div class="nc-select-hide-item text-gray-500 text-xs whitespace-normal" data-rec="true">
+                              {{ $t(option.subtitle) }}
+                            </div>
+                          </div>
 
-                        <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
-                          {{ $t('msg.info.roles.orgCreator') }}
-                        </div>
-                      </a-select-option>
-
-                      <a-select-option
-                        class="nc-role-option"
-                        :value="OrgUserRoles.VIEWER"
-                        :label="$t(`objects.roleType.orgLevelViewer`)"
-                      >
-                        <div class="flex items-center gap-1 justify-between">
-                          <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                           <GeneralIcon
-                            v-if="usersData.role === OrgUserRoles.VIEWER"
+                            v-if="usersData.role === option.value"
                             id="nc-selected-item-icon"
                             icon="check"
                             class="w-4 h-4 text-primary"
                           />
                         </div>
-                        <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
-                          {{ $t('msg.info.roles.orgViewer') }}
-                        </div>
                       </a-select-option>
                     </NcSelect>
                   </a-form-item>