Sort user list

x-pack/plugins/cases/public/components/case_view/components/user_list.test.tsx

@@ -6,11 +6,13 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
 import { UserList } from './user_list';
 import * as i18n from '../translations';
 import { basicCase } from '../../../containers/mock';
 import { useCaseViewNavigation } from '../../../common/navigation/hooks';
+import type { AppMockRenderer } from '../../../common/mock';
+import { createAppMockRenderer } from '../../../common/mock';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../../common/navigation/hooks');
 
@@ -27,15 +29,17 @@ describe('UserList ', () => {
 
   const open = jest.fn();
   const getCaseViewUrl = jest.fn().mockReturnValue(caseLink);
+  let appMockRender: AppMockRenderer;
 
   beforeEach(() => {
     jest.clearAllMocks();
+    appMockRender = createAppMockRenderer();
     useCaseViewNavigationMock.mockReturnValue({ getCaseViewUrl });
     window.open = open;
   });
 
   it('triggers mailto when email icon clicked', () => {
-    const wrapper = shallow(
+    const result = appMockRender.render(
       <UserList
         theCase={basicCase}
         headline={i18n.REPORTER}
@@ -47,11 +51,37 @@ describe('UserList ', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="user-list-email-button"]').simulate('click');
+    userEvent.click(result.getByTestId('user-list-email-button'));
 
     expect(open).toBeCalledWith(
       `mailto:${user.email}?subject=${i18n.EMAIL_SUBJECT(title)}&body=${i18n.EMAIL_BODY(caseLink)}`,
       '_blank'
     );
   });
+
+  it('sort the users correctly', () => {
+    const result = appMockRender.render(
+      <UserList
+        theCase={basicCase}
+        headline={i18n.REPORTER}
+        users={[
+          {
+            user: { ...user, full_name: 'Cases' },
+          },
+          {
+            user: { ...user, username: 'elastic', email: '[email protected]', full_name: null },
+          },
+          {
+            user: { ...user, username: 'test', full_name: null, email: null },
+          },
+        ]}
+      />
+    );
+
+    const userProfiles = result.getAllByTestId('user-profile-username');
+
+    expect(userProfiles[0].textContent).toBe('Cases');
+    expect(userProfiles[1].textContent).toBe('[email protected]');
+    expect(userProfiles[2].textContent).toBe('test');
+  });
 });

x-pack/plugins/cases/public/components/case_view/components/user_list.tsx

@@ -7,6 +7,7 @@
 
 import React, { useCallback } from 'react';
 import { isEmpty } from 'lodash/fp';
+import { sortBy } from 'lodash';
 
 import {
   EuiButtonIcon,
@@ -26,6 +27,7 @@ import * as i18n from '../translations';
 import type { CaseUserWithProfileInfo, UserInfoWithAvatar } from '../../user_profiles/types';
 import { HoverableUserWithAvatar } from '../../user_profiles/hoverable_user_with_avatar';
 import { convertToUserInfo } from '../../user_profiles/user_converter';
+import { getSortField } from '../../user_profiles/sort';
 
 interface UserListProps {
   theCase: Case;
@@ -90,8 +92,9 @@ export const UserList: React.FC<UserListProps> = React.memo(
     );
 
     const validUsers = getValidUsers(users, userProfiles ?? new Map());
+    const orderedUsers = sortBy(validUsers, getSortField);
 
-    if (validUsers.length === 0) {
+    if (orderedUsers.length === 0) {
       return null;
     }
 
@@ -107,7 +110,7 @@ export const UserList: React.FC<UserListProps> = React.memo(
               </EuiFlexItem>
             </EuiFlexGroup>
           )}
-          {renderUsers(validUsers, handleSendEmail)}
+          {renderUsers(orderedUsers, handleSendEmail)}
         </EuiText>
       </EuiFlexItem>
     );

x-pack/plugins/cases/public/components/user_profiles/sort.ts

@@ -9,12 +9,14 @@ import type { UserProfileWithAvatar } from '@kbn/user-profile-components';
 import { sortBy } from 'lodash';
 import { NO_ASSIGNEES_VALUE } from '../all_cases/assignees_filter';
 import type { CurrentUserProfile } from '../types';
-import type { AssigneesFilteringSelection } from './types';
-
-export const getSortField = (profile: UserProfileWithAvatar) =>
-  profile.user.full_name?.toLowerCase() ??
-  profile.user.email?.toLowerCase() ??
-  profile.user.username.toLowerCase();
+import { UNKNOWN } from './translations';
+import type { AssigneesFilteringSelection, UserInfoWithAvatar } from './types';
+
+export const getSortField = (profile: UserProfileWithAvatar | UserInfoWithAvatar) =>
+  profile.user?.full_name?.toLowerCase() ??
+  profile.user?.email?.toLowerCase() ??
+  profile.user?.username.toLowerCase() ??
+  UNKNOWN;
 
 export const moveCurrentUserToBeginning = <T extends { uid: string }>(
   currentUserProfile?: T,