-
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
[Cases] Add Severity bulk action & row action #142826
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
cfe7d58
Add severity action
cnasikas 483a005
Change translation
cnasikas 331cba4
Add unit tests
cnasikas 4f2e95e
Add e2e tests
cnasikas d68c8a6
Fix i18n
cnasikas 68f844d
PR feedback
cnasikas af1d2a5
Merge branch 'main' into severity_bulk_action
kibanamachine cf689fa
Merge branch 'main' into severity_bulk_action
kibanamachine File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
x-pack/plugins/cases/public/components/actions/severity/translations.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
/* | ||
* 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 { i18n } from '@kbn/i18n'; | ||
import { CaseSeverity } from '../../../../common/api'; | ||
import { severities } from '../../severity/config'; | ||
|
||
const SET_SEVERITY = ({ | ||
totalCases, | ||
severity, | ||
caseTitle, | ||
}: { | ||
totalCases: number; | ||
severity: string; | ||
caseTitle?: string; | ||
}) => | ||
i18n.translate('xpack.cases.actions.severity', { | ||
values: { caseTitle, totalCases, severity }, | ||
defaultMessage: | ||
'{totalCases, plural, =1 {Case "{caseTitle}" was} other {{totalCases} cases were}} set to {severity}', | ||
}); | ||
|
||
export const SET_SEVERITY_LOW = ({ | ||
totalCases, | ||
caseTitle, | ||
}: { | ||
totalCases: number; | ||
caseTitle?: string; | ||
}) => | ||
SET_SEVERITY({ | ||
totalCases, | ||
caseTitle, | ||
severity: severities[CaseSeverity.LOW].label, | ||
}); | ||
|
||
export const SET_SEVERITY_MEDIUM = ({ | ||
totalCases, | ||
caseTitle, | ||
}: { | ||
totalCases: number; | ||
caseTitle?: string; | ||
}) => | ||
SET_SEVERITY({ | ||
totalCases, | ||
caseTitle, | ||
severity: severities[CaseSeverity.MEDIUM].label, | ||
}); | ||
|
||
export const SET_SEVERITY_HIGH = ({ | ||
totalCases, | ||
caseTitle, | ||
}: { | ||
totalCases: number; | ||
caseTitle?: string; | ||
}) => | ||
SET_SEVERITY({ | ||
totalCases, | ||
caseTitle, | ||
severity: severities[CaseSeverity.HIGH].label, | ||
}); | ||
|
||
export const SET_SEVERITY_CRITICAL = ({ | ||
totalCases, | ||
caseTitle, | ||
}: { | ||
totalCases: number; | ||
caseTitle?: string; | ||
}) => | ||
SET_SEVERITY({ | ||
totalCases, | ||
caseTitle, | ||
severity: severities[CaseSeverity.CRITICAL].label, | ||
}); |
210 changes: 210 additions & 0 deletions
210
x-pack/plugins/cases/public/components/actions/severity/use_severity_action.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,210 @@ | ||
/* | ||
* 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 { AppMockRenderer, createAppMockRenderer } from '../../../common/mock'; | ||
import { act, renderHook } from '@testing-library/react-hooks'; | ||
import { useSeverityAction } from './use_severity_action'; | ||
|
||
import * as api from '../../../containers/api'; | ||
import { basicCase } from '../../../containers/mock'; | ||
import { CaseSeverity } from '../../../../common/api'; | ||
|
||
jest.mock('../../../containers/api'); | ||
|
||
describe('useSeverityAction', () => { | ||
let appMockRender: AppMockRenderer; | ||
const onAction = jest.fn(); | ||
const onActionSuccess = jest.fn(); | ||
|
||
beforeEach(() => { | ||
appMockRender = createAppMockRenderer(); | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
it('renders an action', async () => { | ||
const { result } = renderHook( | ||
() => | ||
useSeverityAction({ | ||
onAction, | ||
onActionSuccess, | ||
isDisabled: false, | ||
}), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
expect(result.current.getActions([basicCase])).toMatchInlineSnapshot(` | ||
Array [ | ||
Object { | ||
"data-test-subj": "cases-bulk-action-severity-low", | ||
"disabled": true, | ||
"icon": "empty", | ||
"key": "cases-bulk-action-severity-low", | ||
"name": "Low", | ||
"onClick": [Function], | ||
}, | ||
Object { | ||
"data-test-subj": "cases-bulk-action-severity-medium", | ||
"disabled": false, | ||
"icon": "empty", | ||
"key": "cases-bulk-action-severity-medium", | ||
"name": "Medium", | ||
"onClick": [Function], | ||
}, | ||
Object { | ||
"data-test-subj": "cases-bulk-action-severity-high", | ||
"disabled": false, | ||
"icon": "empty", | ||
"key": "cases-bulk-action-severity-high", | ||
"name": "High", | ||
"onClick": [Function], | ||
}, | ||
Object { | ||
"data-test-subj": "cases-bulk-action-severity-critical", | ||
"disabled": false, | ||
"icon": "empty", | ||
"key": "cases-bulk-action-severity-critical", | ||
"name": "Critical", | ||
"onClick": [Function], | ||
}, | ||
] | ||
`); | ||
}); | ||
|
||
it('update the severity cases', async () => { | ||
const updateSpy = jest.spyOn(api, 'updateCases'); | ||
|
||
const { result, waitFor } = renderHook( | ||
() => useSeverityAction({ onAction, onActionSuccess, isDisabled: false }), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
const actions = result.current.getActions([basicCase]); | ||
|
||
for (const [index, severity] of [ | ||
CaseSeverity.LOW, | ||
CaseSeverity.MEDIUM, | ||
CaseSeverity.HIGH, | ||
CaseSeverity.CRITICAL, | ||
].entries()) { | ||
act(() => { | ||
// @ts-expect-error: onClick expects a MouseEvent argument | ||
actions[index]!.onClick(); | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(onAction).toHaveBeenCalled(); | ||
expect(onActionSuccess).toHaveBeenCalled(); | ||
expect(updateSpy).toHaveBeenCalledWith( | ||
[{ severity, id: basicCase.id, version: basicCase.version }], | ||
expect.anything() | ||
); | ||
}); | ||
} | ||
}); | ||
|
||
const singleCaseTests = [ | ||
[CaseSeverity.LOW, 0, 'Case "Another horrible breach!!" was set to Low'], | ||
[CaseSeverity.MEDIUM, 1, 'Case "Another horrible breach!!" was set to Medium'], | ||
[CaseSeverity.HIGH, 2, 'Case "Another horrible breach!!" was set to High'], | ||
[CaseSeverity.CRITICAL, 3, 'Case "Another horrible breach!!" was set to Critical'], | ||
]; | ||
|
||
it.each(singleCaseTests)( | ||
'shows the success toaster correctly when updating the severity of the case: %s', | ||
async (_, index, expectedMessage) => { | ||
const { result, waitFor } = renderHook( | ||
() => useSeverityAction({ onAction, onActionSuccess, isDisabled: false }), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
const actions = result.current.getActions([basicCase]); | ||
|
||
act(() => { | ||
// @ts-expect-error: onClick expects a MouseEvent argument | ||
actions[index]!.onClick(); | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( | ||
expectedMessage | ||
); | ||
}); | ||
} | ||
); | ||
|
||
const multipleCasesTests: Array<[CaseSeverity, number, string]> = [ | ||
[CaseSeverity.LOW, 0, '2 cases were set to Low'], | ||
[CaseSeverity.MEDIUM, 1, '2 cases were set to Medium'], | ||
[CaseSeverity.HIGH, 2, '2 cases were set to High'], | ||
[CaseSeverity.CRITICAL, 3, '2 cases were set to Critical'], | ||
]; | ||
|
||
it.each(multipleCasesTests)( | ||
'shows the success toaster correctly when updating the severity of the case: %s', | ||
async (_, index, expectedMessage) => { | ||
const { result, waitFor } = renderHook( | ||
() => useSeverityAction({ onAction, onActionSuccess, isDisabled: false }), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
const actions = result.current.getActions([basicCase, basicCase]); | ||
|
||
act(() => { | ||
// @ts-expect-error: onClick expects a MouseEvent argument | ||
actions[index]!.onClick(); | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(appMockRender.coreStart.notifications.toasts.addSuccess).toHaveBeenCalledWith( | ||
expectedMessage | ||
); | ||
}); | ||
} | ||
); | ||
|
||
const disabledTests: Array<[CaseSeverity, number]> = [ | ||
[CaseSeverity.LOW, 0], | ||
[CaseSeverity.MEDIUM, 1], | ||
[CaseSeverity.HIGH, 2], | ||
[CaseSeverity.CRITICAL, 3], | ||
]; | ||
|
||
it.each(disabledTests)('disables the severity button correctly: %s', async (severity, index) => { | ||
const { result } = renderHook( | ||
() => useSeverityAction({ onAction, onActionSuccess, isDisabled: false }), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
const actions = result.current.getActions([{ ...basicCase, severity }]); | ||
expect(actions[index].disabled).toBe(true); | ||
}); | ||
|
||
it.each(disabledTests)( | ||
'disables the severity button correctly if isDisabled=true: %s', | ||
async (severity, index) => { | ||
const { result } = renderHook( | ||
() => useSeverityAction({ onAction, onActionSuccess, isDisabled: true }), | ||
{ | ||
wrapper: appMockRender.AppWrapper, | ||
} | ||
); | ||
|
||
const actions = result.current.getActions([basicCase]); | ||
expect(actions[index].disabled).toBe(true); | ||
} | ||
); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
if
caseTitle
is undefined will it showCase "undefined" was
?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.
The case is a mandatory field and it will never be
undefined
. Types also protect us from that, right?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.
I might be misunderstanding but I'm referring to
caseTitle?: string;
, so it's optional and can beundefined
.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.
Oh, sorry my mistake 🙂. It is a pattern we had before that I followed. The title will only show if you have one case. Indeed, it is possible to show "undefined" if
totalCases === 1
andcaseTitlte === undefined
. Do you want me to change the pattern to something else? Any ideas? I am not super fun of it for the reason you mentioned.