Sort by display name in owner and mentions list (#14734)

* sort by display name in owner and mentions list

* maintain sort order

* fix cypress

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/cypress/common/Utils/Owner.ts

@@ -15,7 +15,7 @@ import { interceptURL, verifyResponseStatusCode } from '../common';
 const userURL =
   '/api/v1/search/query?q=**%20AND%20isBot:false&from=0&size=0&index=user_search_index';
 const teamURL =
-  '/api/v1/search/query?q=*%20AND%20teamType:Group&from=0&size=10&index=team_search_index';
+  '/api/v1/search/query?q=*%20AND%20teamType:Group&from=0&size=10&index=team_search_index&sort_field=displayName.keyword&sort_order=asc';
 
 export const validateOwnerAndTeamCounts = () => {
   cy.getAllLocalStorage().then((data) => {
@@ -122,7 +122,7 @@ export const removeOwner = (ownerName: string) => {
 export const addTeamAsOwner = (teamName: string) => {
   interceptURL(
     'GET',
-    '/api/v1/search/query?q=*&from=0&size=*&index=team_search_index',
+    '/api/v1/search/query?q=*&from=0&size=*&index=team_search_index&sort_field=displayName.keyword&sort_order=asc',
     'getTeams'
   );
 

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Service.spec.js

@@ -80,7 +80,7 @@ describe('Services page should work properly', () => {
     verifyResponseStatusCode('@pipelineServiceClient', 200);
     interceptURL(
       'GET',
-      '/api/v1/search/query?q=*%20AND%20teamType:Group&from=0&size=*&index=team_search_index',
+      '/api/v1/search/query?q=*%20AND%20teamType:Group&from=0&size=*&index=team_search_index&sort_field=displayName.keyword&sort_order=asc',
       'editOwner'
     );
     cy.get('[data-testid="edit-owner"]')

openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.interface.ts

@@ -20,6 +20,7 @@ export interface MentionSuggestionsItem {
   type?: string;
   avatarEle?: HTMLDivElement;
   breadcrumbs: Array<{ name: string }>;
+  displayName?: string;
 }
 
 export interface FeedEditorProp extends HTMLAttributes<HTMLDivElement> {

openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx

@@ -87,30 +87,30 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
       const newMatches: MentionSuggestionsItem[] = [];
       try {
         // Fetch profile images in case of user listing
-        const promises = matches.map(async (item) => {
+        const promises = matches.map(async (item, index) => {
           if (item.type === 'user') {
             return getUserByName(item.name, { fields: 'profile' }).then(
               (res) => {
                 updateUserProfilePics({ id: item.name, user: res });
 
-                newMatches.push({
+                newMatches[index] = {
                   ...item,
                   avatarEle: userMentionItemWithAvatar(
                     item,
                     userProfilePics[item.name] ?? res
                   ),
-                });
+                };
               }
             );
           } else if (item.type === 'team') {
-            newMatches.push({
+            newMatches[index] = {
               ...item,
               avatarEle: userMentionItemWithAvatar(item),
-            });
+            };
           } else {
-            newMatches.push({
+            newMatches[index] = {
               ...item,
-            });
+            };
           }
 
           return Promise.resolve();

openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

@@ -105,64 +105,33 @@ export const UserTeamSelectableList = ({
   const fetchTeamOptions = async (searchText: string, after?: string) => {
     const afterPage = isNaN(Number(after)) ? 1 : Number(after);
 
-    if (searchText) {
-      try {
-        const res = await searchData(
-          searchText,
-          afterPage,
-          PAGE_SIZE_MEDIUM,
-          'teamType:Group',
-          '',
-          '',
-          SearchIndex.TEAM
-        );
+    try {
+      const res = await searchData(
+        searchText || '',
+        afterPage,
+        PAGE_SIZE_MEDIUM,
+        'teamType:Group',
+        'displayName.keyword',
+        'asc',
+        SearchIndex.TEAM
+      );
 
-        const data = getEntityReferenceListFromEntities(
-          formatTeamsResponse(res.data.hits.hits),
-          EntityType.TEAM
-        );
+      const data = getEntityReferenceListFromEntities(
+        formatTeamsResponse(res.data.hits.hits),
+        EntityType.TEAM
+      );
 
-        setCount((pre) => ({ ...pre, team: res.data.hits.total.value }));
+      setCount((pre) => ({ ...pre, team: res.data.hits.total.value }));
 
-        return {
-          data,
-          paging: {
-            total: res.data.hits.total.value,
-            after: toString(afterPage + 1),
-          },
-        };
-      } catch (error) {
-        return { data: [], paging: { total: 0 } };
-      }
-    } else {
-      try {
-        const { data } = await searchData(
-          '',
-          afterPage,
-          PAGE_SIZE_MEDIUM,
-          'teamType:Group',
-          '',
-          '',
-          SearchIndex.TEAM
-        );
-
-        const filterData = getEntityReferenceListFromEntities(
-          formatTeamsResponse(data.hits.hits),
-          EntityType.TEAM
-        );
-
-        setCount((pre) => ({ ...pre, team: data.hits.total.value }));
-
-        return {
-          data: filterData,
-          paging: {
-            total: data.hits.total.value,
-            after: toString(afterPage + 1),
-          },
-        };
-      } catch (error) {
-        return { data: [], paging: { total: 0 } };
-      }
+      return {
+        data,
+        paging: {
+          total: res.data.hits.total.value,
+          after: toString(afterPage + 1),
+        },
+      };
+    } catch (error) {
+      return { data: [], paging: { total: 0 } };
     }
   };
 

openmetadata-ui/src/main/resources/ui/src/utils/FeedUtils.tsx

@@ -69,7 +69,11 @@ import {
 import { getRelativeCalendar } from './date-time/DateTimeUtils';
 import EntityLink from './EntityLink';
 import entityUtilClassBase from './EntityUtilClassBase';
-import { ENTITY_LINK_SEPARATOR, getEntityBreadcrumbs } from './EntityUtils';
+import {
+  ENTITY_LINK_SEPARATOR,
+  getEntityBreadcrumbs,
+  getEntityName,
+} from './EntityUtils';
 import Fqn from './Fqn';
 import {
   getImageWithResolutionAndFallback,
@@ -209,6 +213,7 @@ export async function suggestions(
             type:
               hit._index === SearchIndex.USER ? UserTeam.User : UserTeam.Team,
             name: hit._source.name,
+            displayName: hit._source.displayName,
           };
         })
       );
@@ -221,7 +226,7 @@ export async function suggestions(
         hits.map(async (hit: any) => {
           const entityType = hit._source.entityType;
           const name = getEntityPlaceHolder(
-            `@${hit._source.name ?? hit._source.display_name}`,
+            `@${hit._source.name ?? hit._source.displayName}`,
             hit._source.deleted
           );
 
@@ -235,6 +240,7 @@ export async function suggestions(
             type:
               hit._index === SearchIndex.USER ? UserTeam.User : UserTeam.Team,
             name: hit._source.name,
+            displayName: hit._source.displayName,
           };
         })
       );
@@ -335,7 +341,9 @@ export const userMentionItemWithAvatar = (
           </div>
         )}
       </div>
-      <span className="d-flex items-center truncate w-56">{item.name}</span>
+      <span className="d-flex items-center truncate w-56">
+        {getEntityName(item)}
+      </span>
     </div>,
     wrapper
   );