fix: User list UX #2022 for ee

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

@@ -6,6 +6,7 @@ import {
   WorkspaceRolesToProjectRoles,
   extractRolesObj,
   timeAgo,
+  parseStringDateTime,
 } from 'nocodb-sdk'
 import type { WorkspaceUserRoles } from 'nocodb-sdk'
 import { isEeUI, storeToRefs } from '#imports'
@@ -145,8 +146,8 @@ const filteredCollaborators = computed(() =>
         <div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
           <div class="flex flex-row bg-gray-50 min-h-12 items-center border-b-1">
             <div class="text-gray-700 users-email-grid">{{ $t('objects.users') }}</div>
-            <div class="text-gray-700 date-joined-grid">{{ $t('title.dateJoined') }}</div>
             <div class="text-gray-700 user-access-grid">{{ $t('general.access') }}</div>
+            <div class="text-gray-700 date-joined-grid">{{ $t('title.dateJoined') }}</div>
           </div>
 
           <div class="flex flex-col nc-scrollbar-md">
@@ -161,7 +162,6 @@ const filteredCollaborators = computed(() =>
                   {{ collab.email }}
                 </span>
               </div>
-              <div class="date-joined-grid">{{ timeAgo(collab.created_at) }}</div>
               <div class="user-access-grid">
                 <template v-if="accessibleRoles.includes(collab.roles)">
                   <RolesSelector
@@ -180,6 +180,16 @@ const filteredCollaborators = computed(() =>
                   <RolesBadge :role="collab.roles" />
                 </template>
               </div>
+              <div class="date-joined-grid">
+                <NcTooltip class="max-w-full">
+                  <template #title>
+                    {{ parseStringDateTime(collab.created_at) }}
+                  </template>
+                  <span>
+                    {{ timeAgo(collab.created_at) }}
+                  </span>
+                </NcTooltip>
+              </div>
             </div>
           </div>
         </div>
@@ -206,12 +216,11 @@ const filteredCollaborators = computed(() =>
 }
 
 .date-joined-grid {
-  @apply flex items-start;
+  @apply w-1/4 flex items-start;
-  width: calc(50% - 10rem);
 }
 
 .user-access-grid {
-  @apply w-40;
+  @apply w-1/4 flex justify-start;
 }
 
 .user-row {

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { OrderedWorkspaceRoles, WorkspaceUserRoles, timeAgo } from 'nocodb-sdk'
+import { OrderedWorkspaceRoles, WorkspaceUserRoles, parseStringDateTime, timeAgo } from 'nocodb-sdk'
 import { storeToRefs, useWorkspace } from '#imports'
 
 const { workspaceRoles, loadRoles } = useRoles()
@@ -59,9 +59,9 @@ onMounted(async () => {
     <div v-else class="nc-collaborators-list mt-6 h-full">
       <div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
         <div class="flex flex-row bg-gray-50 min-h-12 items-center">
-          <div class="text-gray-700 users-email-grid w-3/8 ml-10">{{ $t('objects.users') }}</div>
+          <div class="text-gray-700 users-email-grid w-3/8 ml-10 mr-3">{{ $t('objects.users') }}</div>
-          <div class="text-gray-700 date-joined-grid w-2/8 mr-3 pl-1">{{ $t('title.dateJoined') }}</div>
           <div class="text-gray-700 user-access-grid w-2/8 mr-3">{{ $t('general.access') }}</div>
+          <div class="text-gray-700 date-joined-grid w-2/8 mr-3">{{ $t('title.dateJoined') }}</div>
           <div class="text-gray-700 user-access-grid w-1/8">Actions</div>
         </div>
 
@@ -77,7 +77,6 @@ onMounted(async () => {
                 {{ collab.email }}
               </span>
             </div>
-            <div class="date-joined-grid w-2/8">{{ timeAgo(collab.created_at) }}</div>
             <div class="user-access-grid w-2/8">
               <template v-if="accessibleRoles.includes(collab.roles)">
                 <div class="w-[30px]">
@@ -94,6 +93,16 @@ onMounted(async () => {
                 <RolesBadge :role="collab.roles" class="cursor-default" />
               </template>
             </div>
+            <div class="date-joined-grid w-2/8 flex justify-start">
+              <NcTooltip class="max-w-full">
+                <template #title>
+                  {{ parseStringDateTime(collab.created_at) }}
+                </template>
+                <span>
+                  {{ timeAgo(collab.created_at) }}
+                </span>
+              </NcTooltip>
+            </div>
             <div class="w-1/8 pl-6">
               <NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
                 <MdiDotsVertical