Efficiently render user avatars (#170372)

## Summary

Improved Assignees cell rendering within the alerts table.

x-pack/plugins/security_solution/public/common/components/assignees/assignees_apply_panel.test.tsx

@@ -32,8 +32,13 @@ const renderAssigneesApplyPanel = (
     onSelectionChange?: () => void;
     onAssigneesApply?: () => void;
   } = { assignedUserIds: [] }
-) =>
-  render(
+) => {
+  const assignedProfiles = mockUserProfiles.filter((user) => assignedUserIds.includes(user.uid));
+  (useGetUserProfiles as jest.Mock).mockReturnValue({
+    loading: false,
+    userProfiles: assignedProfiles,
+  });
+  return render(
     <TestProviders>
       <AssigneesApplyPanel
         assignedUserIds={assignedUserIds}
@@ -43,14 +48,11 @@ const renderAssigneesApplyPanel = (
       />
     </TestProviders>
   );
+};
 
 describe('<AssigneesApplyPanel />', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    (useGetUserProfiles as jest.Mock).mockReturnValue({
-      loading: false,
-      userProfiles: mockUserProfiles,
-    });
     (useSuggestUsers as jest.Mock).mockReturnValue({
       loading: false,
       userProfiles: mockUserProfiles,
@@ -86,15 +88,9 @@ describe('<AssigneesApplyPanel />', () => {
   });
 
   it('should call `onAssigneesApply` on apply button click', () => {
-    const mockAssignedProfile = mockUserProfiles[0];
-    (useGetUserProfiles as jest.Mock).mockReturnValue({
-      loading: false,
-      userProfiles: [mockAssignedProfile],
-    });
-
     const onAssigneesApplyMock = jest.fn();
     const { getByText, getByTestId } = renderAssigneesApplyPanel({
-      assignedUserIds: [mockAssignedProfile.uid],
+      assignedUserIds: ['user-id-1'],
       onAssigneesApply: onAssigneesApplyMock,
     });
 

x-pack/plugins/security_solution/public/common/components/assignees/assignees_apply_panel.tsx

@@ -65,7 +65,7 @@ export const AssigneesApplyPanel: FC<AssigneesApplyPanelProps> = memo(
       () => removeNoAssigneesSelection(assignedUserIds),
       [assignedUserIds]
     );
-    const { loading: isLoadingAssignedUserProfiles, userProfiles: assignedUserProfiles } =
+    const { loading: isLoadingAssignedUsers, userProfiles: assignedUsers } =
       useGetUserProfiles(existingIds);
 
     const [searchTerm, setSearchTerm] = useState('');
@@ -83,16 +83,16 @@ export const AssigneesApplyPanel: FC<AssigneesApplyPanelProps> = memo(
 
     const [selectedAssignees, setSelectedAssignees] = useState<AssigneesProfilesSelection[]>([]);
     useEffect(() => {
-      if (isLoadingAssignedUserProfiles) {
+      if (isLoadingAssignedUsers) {
         return;
       }
       const hasNoAssigneesSelection = assignedUserIds.find((uid) => uid === NO_ASSIGNEES_VALUE);
       const newAssignees =
         hasNoAssigneesSelection !== undefined
-          ? [NO_ASSIGNEES_VALUE, ...assignedUserProfiles]
-          : assignedUserProfiles;
+          ? [NO_ASSIGNEES_VALUE, ...assignedUsers]
+          : assignedUsers;
       setSelectedAssignees(newAssignees);
-    }, [assignedUserIds, assignedUserProfiles, isLoadingAssignedUserProfiles]);
+    }, [assignedUserIds, assignedUsers, isLoadingAssignedUsers]);
 
     const handleSelectedAssignees = useCallback(
       (newAssignees: AssigneesProfilesSelection[]) => {
@@ -114,7 +114,7 @@ export const AssigneesApplyPanel: FC<AssigneesApplyPanelProps> = memo(
       []
     );
 
-    const isLoading = isLoadingAssignedUserProfiles || isLoadingSuggestedUsers;
+    const isLoading = isLoadingAssignedUsers || isLoadingSuggestedUsers;
 
     return (
       <div data-test-subj={ASSIGNEES_APPLY_PANEL_TEST_ID}>

x-pack/plugins/security_solution/public/common/components/assignees/assignees_popover.test.tsx

@@ -28,8 +28,13 @@ const renderAssigneesPopover = ({
 }: {
   assignedUserIds: string[];
   isPopoverOpen: boolean;
-}) =>
-  render(
+}) => {
+  const assignedProfiles = mockUserProfiles.filter((user) => assignedUserIds.includes(user.uid));
+  (useGetUserProfiles as jest.Mock).mockReturnValue({
+    loading: false,
+    userProfiles: assignedProfiles,
+  });
+  return render(
     <TestProviders>
       <AssigneesPopover
         assignedUserIds={assignedUserIds}
@@ -39,14 +44,11 @@ const renderAssigneesPopover = ({
       />
     </TestProviders>
   );
+};
 
 describe('<AssigneesPopover />', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    (useGetUserProfiles as jest.Mock).mockReturnValue({
-      loading: false,
-      userProfiles: mockUserProfiles,
-    });
     (useSuggestUsers as jest.Mock).mockReturnValue({
       loading: false,
       userProfiles: mockUserProfiles,

x-pack/plugins/security_solution/public/common/components/assignees/test_ids.ts

@@ -10,9 +10,3 @@ const PREFIX = 'securitySolutionAssignees';
 /* Apply Panel */
 export const ASSIGNEES_APPLY_PANEL_TEST_ID = `${PREFIX}ApplyPanel`;
 export const ASSIGNEES_APPLY_BUTTON_TEST_ID = `${PREFIX}ApplyButton`;
-
-/* Avatars */
-export const ASSIGNEES_AVATAR_ITEM_TEST_ID = (userName: string) => `${PREFIX}Avatar-${userName}`;
-export const ASSIGNEES_AVATARS_PANEL_TEST_ID = `${PREFIX}AvatarsPanel`;
-export const ASSIGNEES_AVATARS_COUNT_BADGE_TEST_ID = `${PREFIX}AvatarsCountBadge`;
-export const ASSIGNEES_AVATARS_LOADING_TEST_ID = `${PREFIX}AvatarsLoading`;

x-pack/plugins/security_solution/public/common/components/filter_group/filter_by_assignees.test.tsx

@@ -33,7 +33,7 @@ const mockUserProfiles = [
     data: {},
   },
 ];
-jest.mock('../../../detections/containers/detection_engine/user_profiles/use_suggest_users', () => {
+jest.mock('../user_profiles/use_suggest_users', () => {
   return {
     useSuggestUsers: () => ({
       loading: false,

x-pack/plugins/security_solution/public/common/components/user_profiles/test_ids.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+const PREFIX = 'securitySolutionUsers';
+
+/* Avatars */
+export const USER_AVATAR_ITEM_TEST_ID = (userName: string) => `${PREFIX}Avatar-${userName}`;
+export const USERS_AVATARS_PANEL_TEST_ID = `${PREFIX}AvatarsPanel`;
+export const USERS_AVATARS_COUNT_BADGE_TEST_ID = `${PREFIX}AvatarsCountBadge`;

x-pack/plugins/security_solution/public/common/components/user_profiles/translations.ts

@@ -8,11 +8,18 @@
 import { i18n } from '@kbn/i18n';
 
 export const CURRENT_USER_PROFILE_FAILURE = i18n.translate(
-  'xpack.securitySolution.containers.detectionEngine.currentUserProfile.failure',
+  'xpack.securitySolution.userProfiles.fetchCurrentUserProfile.failure',
   { defaultMessage: 'Failed to find current user' }
 );
 
 export const USER_PROFILES_FAILURE = i18n.translate(
-  'xpack.securitySolution.containers.detectionEngine.userProfiles.failure',
-  { defaultMessage: 'Failed to find users' }
+  'xpack.securitySolution.userProfiles.fetchUserProfiles.failure',
+  {
+    defaultMessage: 'Failed to find users',
+  }
+);
+
+export const UNKNOWN_USER_PROFILE_NAME = i18n.translate(
+  'xpack.securitySolution.userProfiles.unknownUser.displayName',
+  { defaultMessage: 'Unknown' }
 );