Merge pull request #7413 from nocodb/nc-fix/ui-bug-fixes

UI bug fixes ( Sync EE to OSS )

packages/nc-gui/components/account/UserList.vue

@@ -203,13 +203,13 @@ const openDeleteModal = (user: UserType) => {
             data-rec="true"
           >
             <span>
-              {{ $t('labels.email') }}
+              {{ $t('objects.users') }}
             </span>
             <LazyAccountUserMenu :direction="sortDirection.email" field="email" :handle-user-sort="saveOrUpdate" />
           </div>
           <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start flex items-center space-x-2" data-rec="true">
             <span>
-              {{ $t('objects.role') }}
+              {{ $t('general.access') }}
             </span>
             <LazyAccountUserMenu :direction="sortDirection.roles" field="roles" :handle-user-sort="saveOrUpdate" />
           </div>
@@ -235,7 +235,15 @@ const openDeleteModal = (user: UserType) => {
             }"
           >
             <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
+              <NcTooltip v-if="el.display_name">
+                <template #title>
+                  {{ el.email }}
+                </template>
                 <GeneralTruncateText length="29">
+                  {{ el.display_name }}
+                </GeneralTruncateText>
+              </NcTooltip>
+              <GeneralTruncateText v-else length="29">
                 {{ el.email }}
               </GeneralTruncateText>
             </div>

packages/nc-gui/components/cell/Text.vue

@@ -60,5 +60,5 @@ const focus: VNodeRef = (el) =>
 
   <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :style="{ 'word-break': 'break-word' }" />
 </template>

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

@@ -30,6 +30,7 @@ interface Collaborators {
   base_roles: Roles
   workspace_roles: WorkspaceUserRoles
   created_at: string
+  display_name: string | null
 }
 const collaborators = ref<Collaborators[]>([])
 const totalCollaborators = ref(0)
@@ -40,7 +41,9 @@ const isSearching = ref(false)
 const accessibleRoles = ref<(typeof ProjectRoles)[keyof typeof ProjectRoles][]>([])
 
 const filteredCollaborators = computed(() =>
-  collaborators.value.filter((collab) => collab.email.toLowerCase().includes(userSearchText.value.toLowerCase())),
+  collaborators.value.filter((collab) =>
+    (collab.display_name || collab.email).toLowerCase().includes(userSearchText.value.toLowerCase()),
+  ),
 )
 
 const sortedCollaborators = computed(() => {
@@ -182,7 +185,15 @@ onMounted(async () => {
             >
               <div class="flex gap-3 items-center users-email-grid">
                 <GeneralUserIcon size="base" :email="collab.email" />
+                <NcTooltip v-if="collab.display_name">
+                  <template #title>
+                    {{ collab.email }}
+                  </template>
                   <span class="truncate">
+                    {{ collab.display_name }}
+                  </span>
+                </NcTooltip>
+                <span v-else class="truncate">
                   {{ collab.email }}
                 </span>
               </div>

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
 import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
-import { ColumnInj, IsExpandedFormOpenInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useRoles } from '#imports'
+import { UITypes, UITypesName } from 'nocodb-sdk'
+import {
+  ColumnInj,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  IsKanbanInj,
+  inject,
+  parseProp,
+  provide,
+  ref,
+  toRef,
+  useRoles,
+} from '#imports'
 
 interface Props {
   column: ColumnType
@@ -15,6 +27,8 @@ const { isMobileMode } = useGlobal()
 
 const hideMenu = toRef(props, 'hideMenu')
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -37,6 +51,13 @@ const editColumnDropdown = ref(false)
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
 
+const columnTypeName = computed(() => {
+  if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
+    return UITypesName.RichText
+  }
+  return column.value.uidt ? UITypesName[column.value.uidt] : ''
+})
+
 const addField = async (payload: any) => {
   columnOrder.value = payload
   editColumnDropdown.value = true
@@ -84,12 +105,22 @@ const onClick = (e: Event) => {
     @click.right="openDropDown"
     @click="onClick"
   >
+    <template v-if="column && !props.hideIcon">
+      <NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
+        <template #title> {{ columnTypeName }} </template>
+        <SmartsheetHeaderCellIcon
+          :class="{
+            'self-start': isForm || isSurveyForm,
+          }"
+        />
+      </NcTooltip>
       <SmartsheetHeaderCellIcon
-      v-if="column && !props.hideIcon"
+        v-else
         :class="{
           'self-start': isForm || isSurveyForm,
         }"
       />
+    </template>
     <NcTooltip
       v-if="column"
       :class="{

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnReqType, ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
-import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import { UITypes, UITypesName, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import {
   ColumnInj,
   IsFormInj,
@@ -46,6 +46,8 @@ const { isUIAllowed } = useRoles()
 
 const meta = inject(MetaInj, ref())
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
@@ -116,6 +118,13 @@ const tooltipMsg = computed(() => {
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
 
+const columnTypeName = computed(() => {
+  if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
+    return UITypesName.RichText
+  }
+  return column.value.uidt ? UITypesName[column.value.uidt] : ''
+})
+
 const addField = async (payload: any) => {
   columnOrder.value = payload
   editColumnDropdown.value = true
@@ -152,8 +161,13 @@ const openDropDown = (e: Event) => {
     @dblclick="openHeaderMenu"
     @click.right="openDropDown"
   >
-    <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
-
+    <template v-if="column && !props.hideIcon">
+      <NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
+        <template #title> {{ columnTypeName }} </template>
+        <LazySmartsheetHeaderVirtualCellIcon />
+      </NcTooltip>
+      <LazySmartsheetHeaderVirtualCellIcon v-else />
+    </template>
     <NcTooltip placement="bottom" class="truncate name pl-1" show-on-truncate-only>
       <template #title>
         {{ tooltipMsg }}

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

@@ -19,7 +19,9 @@ const filterCollaborators = computed(() => {
 
   if (!collaborators.value) return []
 
-  return collaborators.value.filter((collab) => collab.email!.includes(userSearchText.value))
+  return collaborators.value.filter((collab) =>
+    (collab.display_name || collab.email).toLowerCase().includes(userSearchText.value.toLowerCase()),
+  )
 })
 
 const sortedCollaborators = computed(() => {
@@ -96,7 +98,15 @@ onMounted(async () => {
           >
             <div class="flex gap-3 items-center users-email-grid w-3/8 ml-10">
               <GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
+              <NcTooltip v-if="collab.display_name">
+                <template #title>
+                  {{ collab.email }}
+                </template>
                 <span class="truncate">
+                  {{ collab.display_name }}
+                </span>
+              </NcTooltip>
+              <span v-else class="truncate">
                 {{ collab.email }}
               </span>
             </div>

packages/nocodb-sdk/src/lib/UITypes.ts

@@ -44,6 +44,51 @@ enum UITypes {
   LastModifiedBy = 'LastModifiedBy',
 }
 
+export const UITypesName = {
+  [UITypes.ID]: 'ID',
+  [UITypes.LinkToAnotherRecord]: 'Link to another record',
+  [UITypes.ForeignKey]: 'Foreign key',
+  [UITypes.Lookup]: 'Lookup',
+  [UITypes.SingleLineText]: 'Single line text',
+  [UITypes.LongText]: 'Long text',
+  RichText: 'Rich text',
+  [UITypes.Attachment]: 'Attachment',
+  [UITypes.Checkbox]: 'Checkbox',
+  [UITypes.MultiSelect]: 'Multi select',
+  [UITypes.SingleSelect]: 'Single select',
+  [UITypes.Collaborator]: 'Collaborator',
+  [UITypes.Date]: 'Date',
+  [UITypes.Year]: 'Year',
+  [UITypes.Time]: 'Time',
+  [UITypes.PhoneNumber]: 'Phone number',
+  [UITypes.GeoData]: 'Geo data',
+  [UITypes.Email]: 'Email',
+  [UITypes.URL]: 'URL',
+  [UITypes.Number]: 'Number',
+  [UITypes.Decimal]: 'Decimal',
+  [UITypes.Currency]: 'Currency',
+  [UITypes.Percent]: 'Percent',
+  [UITypes.Duration]: 'Duration',
+  [UITypes.Rating]: 'Rating',
+  [UITypes.Formula]: 'Formula',
+  [UITypes.Rollup]: 'Rollup',
+  [UITypes.Count]: 'Count',
+  [UITypes.DateTime]: 'Date time',
+  [UITypes.CreatedTime]: 'Created time',
+  [UITypes.LastModifiedTime]: 'Last modified time',
+  [UITypes.AutoNumber]: 'Auto number',
+  [UITypes.Geometry]: 'Geometry',
+  [UITypes.JSON]: 'JSON',
+  [UITypes.SpecificDBType]: 'Specific DB type',
+  [UITypes.Barcode]: 'Barcode',
+  [UITypes.QrCode]: 'Qr code',
+  [UITypes.Button]: 'Button',
+  [UITypes.Links]: 'Links',
+  [UITypes.User]: 'User',
+  [UITypes.CreatedBy]: 'Created by',
+  [UITypes.LastModifiedBy]: 'Last modified by',
+};
+
 export const numericUITypes = [
   UITypes.Duration,
   UITypes.Currency,

packages/nocodb-sdk/src/lib/index.ts

@@ -9,6 +9,7 @@ export * from '~/lib/enums';
 export * from '~/lib/formulaHelpers';
 export {
   default as UITypes,
+  UITypesName,
   numericUITypes,
   isNumericCol,
   isVirtualCol,

packages/nocodb/src/models/User.ts

@@ -194,7 +194,7 @@ export default class User implements UserType {
     {
       limit,
       offset,
-      query,
+      query = '',
     }: {
       limit?: number | undefined;
       offset?: number | undefined;
@@ -217,6 +217,7 @@ export default class User implements UserType {
         `${MetaTable.USERS}.created_at`,
         `${MetaTable.USERS}.updated_at`,
         `${MetaTable.USERS}.roles`,
+        `${MetaTable.USERS}.display_name`,
       )
       .select(
         ncMeta
@@ -228,7 +229,17 @@ export default class User implements UserType {
           .as('projectsCount'),
       );
     if (query) {
-      queryBuilder.where('email', 'like', `%${query.toLowerCase?.()}%`);
+      queryBuilder.where(function () {
+        this.where(function () {
+          this.whereNotNull('display_name')
+            .andWhereNot('display_name', '')
+            .andWhere('display_name', 'like', `%${query.toLowerCase()}%`);
+        }).orWhere(function () {
+          this.where(function () {
+            this.whereNull('display_name').orWhere('display_name', '');
+          }).andWhere('email', 'like', `%${query.toLowerCase()}%`);
+        });
+      });
     }
 
     return queryBuilder;