[Cases] Use the new internal users API in the UI

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

@@ -242,7 +242,7 @@ export const CaseViewActivity = ({
             users={reporterAsArray}
             userProfiles={userProfiles}
           />
-          {caseUsers?.participants ? (
+          {caseUsers != null ? (
             <UserList
               dataTestSubj="case-view-user-list-participants"
               theCase={caseData}

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,

x-pack/test/cases_api_integration/common/lib/api/user_profiles.ts

@@ -12,6 +12,7 @@ import { UserProfileBulkGetParams, UserProfileServiceStart } from '@kbn/security
 import { INTERNAL_SUGGEST_USER_PROFILES_URL } from '@kbn/cases-plugin/common/constants';
 import { SuggestUserProfilesRequest } from '@kbn/cases-plugin/common/api';
 import { UserProfileService } from '@kbn/cases-plugin/server/services';
+import { UserProfileAvatarData } from '@kbn/security-plugin/common';
 import { superUser } from '../authentication/users';
 import { User } from '../authentication/types';
 import { getSpaceUrlPrefix } from './helpers';
@@ -70,6 +71,31 @@ export const suggestUserProfiles = async ({
   return profiles;
 };
 
+/**
+ * Updates the avatar of a user.
+ * The API needs a valid user session.
+ * The session acts as the user identifier
+ * whose the avatar is updated.
+ */
+export const updateUserProfileAvatar = async ({
+  supertest,
+  req,
+  expectedHttpCode = 200,
+  headers = {},
+}: {
+  supertest: SuperTest.SuperTest<SuperTest.Test>;
+  req: UserProfileAvatarData;
+  expectedHttpCode?: number;
+  headers?: Record<string, unknown>;
+}): Promise<void> => {
+  await supertest
+    .post('/internal/security/user_profile/_data')
+    .set('kbn-xsrf', 'true')
+    .set(headers)
+    .send({ avatar: req })
+    .expect(expectedHttpCode);
+};
+
 export const loginUsers = async ({
   supertest,
   users = [superUser],