-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ResponseOps][Cases] Add assignee user actions #139392
Changes from 4 commits
6db3d1c
0198583
f4061a0
75168d2
0a0d0e0
22cd14e
039447c
9ca5a6a
a5c37d7
77491ff
ae3f44b
356a966
d4252a6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
/* | ||
* 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. | ||
*/ | ||
|
||
import React from 'react'; | ||
import { EuiCommentList } from '@elastic/eui'; | ||
import { render, screen } from '@testing-library/react'; | ||
|
||
import { Actions } from '../../../common/api'; | ||
import { getUserAction } from '../../containers/mock'; | ||
import { TestProviders } from '../../common/mock'; | ||
import { createAssigneesUserActionBuilder } from './assignees'; | ||
import { getMockBuilderArgs } from './mock'; | ||
|
||
jest.mock('../../common/lib/kibana'); | ||
jest.mock('../../common/navigation/hooks'); | ||
|
||
describe('createAssigneesUserActionBuilder', () => { | ||
const builderArgs = getMockBuilderArgs(); | ||
|
||
beforeEach(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
it('renders assigned users', () => { | ||
const userAction = getUserAction('assignees', Actions.add); | ||
const builder = createAssigneesUserActionBuilder({ | ||
...builderArgs, | ||
userAction, | ||
}); | ||
|
||
const createdUserAction = builder.build(); | ||
render( | ||
<TestProviders> | ||
<EuiCommentList comments={createdUserAction} /> | ||
</TestProviders> | ||
); | ||
|
||
expect(screen.getByText('assigned')).toBeInTheDocument(); | ||
expect(screen.getByText('themselves,')).toBeInTheDocument(); | ||
expect(screen.getByText('Physical Dinosaur')).toBeInTheDocument(); | ||
|
||
expect(screen.getByTestId('ua-assignee-physical_dinosaur')).toContainElement( | ||
screen.getByText('and') | ||
); | ||
}); | ||
|
||
it('renders unassigned users', () => { | ||
const userAction = getUserAction('assignees', Actions.delete); | ||
const builder = createAssigneesUserActionBuilder({ | ||
...builderArgs, | ||
userAction, | ||
}); | ||
|
||
const createdUserAction = builder.build(); | ||
render( | ||
<TestProviders> | ||
<EuiCommentList comments={createdUserAction} /> | ||
</TestProviders> | ||
); | ||
|
||
expect(screen.getByText('unassigned')).toBeInTheDocument(); | ||
expect(screen.getByText('themselves,')).toBeInTheDocument(); | ||
expect(screen.getByText('Physical Dinosaur')).toBeInTheDocument(); | ||
|
||
expect(screen.getByTestId('ua-assignee-physical_dinosaur')).toContainElement( | ||
screen.getByText('and') | ||
); | ||
}); | ||
|
||
it('renders a single assigned user', () => { | ||
const userAction = getUserAction('assignees', Actions.add, { | ||
payload: { | ||
assignees: [ | ||
// only render the physical dinosaur | ||
{ uid: 'u_A_tM4n0wPkdiQ9smmd8o0Hr_h61XQfu8aRPh9GMoRoc_0' }, | ||
], | ||
}, | ||
}); | ||
const builder = createAssigneesUserActionBuilder({ | ||
...builderArgs, | ||
userAction, | ||
}); | ||
|
||
const createdUserAction = builder.build(); | ||
render( | ||
<TestProviders> | ||
<EuiCommentList comments={createdUserAction} /> | ||
</TestProviders> | ||
); | ||
|
||
expect(screen.getByText('Physical Dinosaur')).toBeInTheDocument(); | ||
expect(screen.queryByText('themselves,')).not.toBeInTheDocument(); | ||
expect(screen.queryByText('and')).not.toBeInTheDocument(); | ||
}); | ||
|
||
it('renders a single assigned user that is themselves', () => { | ||
const userAction = getUserAction('assignees', Actions.add, { | ||
payload: { | ||
assignees: [ | ||
// only render the damaged raccoon which is the current user | ||
{ uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0' }, | ||
], | ||
}, | ||
}); | ||
const builder = createAssigneesUserActionBuilder({ | ||
...builderArgs, | ||
userAction, | ||
}); | ||
|
||
const createdUserAction = builder.build(); | ||
render( | ||
<TestProviders> | ||
<EuiCommentList comments={createdUserAction} /> | ||
</TestProviders> | ||
); | ||
|
||
expect(screen.getByText('themselves')).toBeInTheDocument(); | ||
expect(screen.queryByText('Physical Dinosaur')).not.toBeInTheDocument(); | ||
expect(screen.queryByText('and')).not.toBeInTheDocument(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,13 +5,159 @@ | |
* 2.0. | ||
*/ | ||
|
||
import type { UserActionBuilder } from './types'; | ||
import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; | ||
import { UserProfileWithAvatar } from '@kbn/user-profile-components'; | ||
import React, { memo } from 'react'; | ||
import { Actions, AssigneesUserAction } from '../../../common/api'; | ||
import { getName } from '../user_profiles/display_name'; | ||
import { Assignee } from '../user_profiles/types'; | ||
import { UserToolTip } from '../user_profiles/user_tooltip'; | ||
import { createCommonUpdateUserActionBuilder } from './common'; | ||
import type { UserActionBuilder, UserActionResponse } from './types'; | ||
import * as i18n from './translations'; | ||
import { getUsernameDataTestSubj } from '../user_profiles/data_test_subject'; | ||
|
||
const FormatListItem: React.FC<{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great catch! |
||
children: React.ReactElement; | ||
index: number; | ||
listSize: number; | ||
}> = ({ children, index, listSize }) => { | ||
if (shouldAddAnd(index, listSize)) { | ||
return ( | ||
<> | ||
{i18n.AND_SPACE} | ||
{children} | ||
</> | ||
); | ||
} else if (shouldAddComma(index, listSize)) { | ||
return ( | ||
<> | ||
{children} | ||
{','} | ||
</> | ||
); | ||
} | ||
|
||
return children; | ||
}; | ||
FormatListItem.displayName = 'FormatListItem'; | ||
|
||
const shouldAddComma = (index: number, arrayLength: number) => { | ||
return arrayLength > 0 && index !== arrayLength - 1; | ||
}; | ||
|
||
const shouldAddAnd = (index: number, arrayLength: number) => { | ||
return arrayLength > 1 && index === arrayLength - 1; | ||
}; | ||
|
||
const Themselves: React.FC<{ | ||
index: number; | ||
numOfAssigness: number; | ||
}> = ({ index, numOfAssigness }) => ( | ||
<FormatListItem index={index} listSize={numOfAssigness}> | ||
<>{i18n.THEMSELVES}</> | ||
</FormatListItem> | ||
); | ||
Themselves.displayName = 'Themselves'; | ||
|
||
const AssigneeComponent: React.FC<{ | ||
assignee: Assignee; | ||
index: number; | ||
numOfAssigness: number; | ||
}> = ({ assignee, index, numOfAssigness }) => ( | ||
<FormatListItem index={index} listSize={numOfAssigness}> | ||
<UserToolTip profile={assignee.profile}> | ||
<strong>{getName(assignee.profile?.user)}</strong> | ||
</UserToolTip> | ||
</FormatListItem> | ||
); | ||
AssigneeComponent.displayName = 'Assignee'; | ||
|
||
interface AssigneesProps { | ||
assignees: Assignee[]; | ||
currentUserProfile?: UserProfileWithAvatar; | ||
} | ||
|
||
const AssigneesComponent = ({ assignees, currentUserProfile }: AssigneesProps) => ( | ||
<> | ||
{assignees.length > 0 && ( | ||
<EuiFlexGroup alignItems="center" gutterSize="xs"> | ||
peteharverson marked this conversation as resolved.
Show resolved
Hide resolved
|
||
{assignees.map((assignee, index) => { | ||
const usernameDataTestSubj = getUsernameDataTestSubj(assignee); | ||
|
||
return ( | ||
<EuiFlexItem | ||
data-test-subj={`ua-assignee-${usernameDataTestSubj}`} | ||
grow={false} | ||
key={assignee.uid} | ||
> | ||
<EuiText size="s" className="eui-textBreakWord"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can't reproduce this one a second time! Maybe some stale state? |
||
{isCurrentUser(assignee, currentUserProfile) ? ( | ||
<Themselves index={index} numOfAssigness={assignees.length} /> | ||
) : ( | ||
<AssigneeComponent | ||
assignee={assignee} | ||
index={index} | ||
numOfAssigness={assignees.length} | ||
/> | ||
)} | ||
</EuiText> | ||
</EuiFlexItem> | ||
); | ||
})} | ||
</EuiFlexGroup> | ||
)} | ||
</> | ||
); | ||
AssigneesComponent.displayName = 'Assignees'; | ||
const Assignees = memo(AssigneesComponent); | ||
|
||
const isCurrentUser = (assignee: Assignee, currentUserProfile?: UserProfileWithAvatar) => { | ||
return assignee.uid === currentUserProfile?.uid; | ||
}; | ||
|
||
const getLabelTitle = ( | ||
userAction: UserActionResponse<AssigneesUserAction>, | ||
userProfiles?: Map<string, UserProfileWithAvatar>, | ||
currentUserProfile?: UserProfileWithAvatar | ||
) => { | ||
const assignees = userAction.payload.assignees.map((assignee) => { | ||
const profile = userProfiles?.get(assignee.uid); | ||
return { | ||
uid: assignee.uid, | ||
profile, | ||
}; | ||
}); | ||
|
||
return ( | ||
<EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span" responsive={false}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah the mocks are showing the Once we have support for display name the user can customize the name that is displayed. |
||
<EuiFlexItem data-test-subj="ua-assignees-label" grow={false}> | ||
{userAction.action === Actions.add && i18n.ASSIGNED} | ||
{userAction.action === Actions.delete && i18n.UNASSIGNED} | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<Assignees assignees={assignees} currentUserProfile={currentUserProfile} /> | ||
peteharverson marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
}; | ||
|
||
export const createAssigneesUserActionBuilder: UserActionBuilder = ({ | ||
userAction, | ||
handleOutlineComment, | ||
userProfiles, | ||
currentUserProfile, | ||
}) => ({ | ||
build: () => { | ||
return []; | ||
const assigneesUserAction = userAction as UserActionResponse<AssigneesUserAction>; | ||
const label = getLabelTitle(assigneesUserAction, userProfiles, currentUserProfile); | ||
const commonBuilder = createCommonUpdateUserActionBuilder({ | ||
userAction, | ||
handleOutlineComment, | ||
label, | ||
icon: 'userAvatar', | ||
}); | ||
|
||
return commonBuilder.build(); | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is no need to use a
useEffect
to derive the uids. You can do:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah ok, just to make sure I understand, let's say
useGetCaseUserActions
initially returnsundefined
because it's loading, we'll calluseBulkGetUserProfiles
with only theassignees
. OnceuseGetCaseUserActions
is finished loading, the component will rerender and it'll automatically calluseBulkGetUserProfiles
with the updateduidsToRetrieve
if we don't include auseEffect
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Exactly! Usually, you do need a
useEffect
to derive the state from props or functions. These articles are great to read about the topic: https://tkdodo.eu/blog/dont-over-use-state and https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html