diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx index b1ab58282ab87..63be7009f8c15 100644 --- a/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx +++ b/x-pack/plugins/cases/public/components/case_view/components/case_view_activity.tsx @@ -6,7 +6,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiLoadingContent } from '@elastic/eui'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { isEqual, uniq } from 'lodash'; import { useGetCurrentUserProfile } from '../../../containers/user_profiles/use_get_current_user_profile'; import { useBulkGetUserProfiles } from '../../../containers/user_profiles/use_bulk_get_user_profiles'; @@ -58,19 +58,12 @@ export const CaseViewActivity = ({ [caseData.assignees] ); - const [uidsToRetrieve, setUidsToRetrieve] = useState<string[]>([]); + const uidsToRetrieve = uniq([...(userActionsData?.profileUids ?? []), ...assignees]); const { data: userProfiles, isLoading: isLoadingUserProfiles } = useBulkGetUserProfiles({ uids: uidsToRetrieve, }); - useEffect(() => { - if (userActionsData?.profileUids !== undefined) { - const uids = uniq([...userActionsData.profileUids, ...assignees]); - setUidsToRetrieve(uids); - } - }, [assignees, userActionsData?.profileUids]); - const { data: currentUserProfile, isLoading: isLoadingCurrentUserProfile } = useGetCurrentUserProfile(); diff --git a/x-pack/plugins/cases/public/components/user_actions/assignees.tsx b/x-pack/plugins/cases/public/components/user_actions/assignees.tsx index 0f424bfb9d5b9..0e16184634a4a 100644 --- a/x-pack/plugins/cases/public/components/user_actions/assignees.tsx +++ b/x-pack/plugins/cases/public/components/user_actions/assignees.tsx @@ -26,8 +26,7 @@ const FormatListItem: React.FC<{ if (shouldAddAnd(index, listSize)) { return ( <> - {i18n.AND_SPACE} - {children} + {i18n.AND} {children} </> ); } else if (shouldAddComma(index, listSize)) { @@ -82,7 +81,7 @@ interface AssigneesProps { const AssigneesComponent = ({ assignees, createdByUser }: AssigneesProps) => ( <> {assignees.length > 0 && ( - <EuiFlexGroup alignItems="center" gutterSize="xs"> + <EuiFlexGroup alignItems="center" gutterSize="xs" wrap> {assignees.map((assignee, index) => { const usernameDataTestSubj = getUsernameDataTestSubj(assignee); diff --git a/x-pack/plugins/cases/public/components/user_actions/translations.ts b/x-pack/plugins/cases/public/components/user_actions/translations.ts index cf155e4686828..91425c368286d 100644 --- a/x-pack/plugins/cases/public/components/user_actions/translations.ts +++ b/x-pack/plugins/cases/public/components/user_actions/translations.ts @@ -91,6 +91,6 @@ export const THEMSELVES = i18n.translate('xpack.cases.caseView.assignee.themselv defaultMessage: 'themselves', }); -export const AND_SPACE = i18n.translate('xpack.cases.caseView.assignee.and', { - defaultMessage: 'and ', +export const AND = i18n.translate('xpack.cases.caseView.assignee.and', { + defaultMessage: 'and', });