[Cases] Refactor attach alert to new case flyout (#125505)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Esteban Beltran 2022-02-22 10:58:40 +01:00 committed by GitHub
parent 67a38e61a1
commit 1b2f9a43be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 530 additions and 104 deletions

View file

@ -8,6 +8,8 @@
import React, { memo } from 'react';
import { EuiContextMenuItem } from '@elastic/eui';
import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
import { TimelinesStartServices } from '../../../../types';
import { useAddToCase } from '../../../../hooks/use_add_to_case';
import { AddToCaseActionProps } from './add_to_case_action';
import * as i18n from './translations';
@ -25,7 +27,7 @@ const AddToNewCaseButtonComponent: React.FC<AddToNewCaseButtonProps> = ({
owner,
onClose,
}) => {
const { addNewCaseClick, isDisabled, userCanCrud } = useAddToCase({
const { isDisabled, userCanCrud, caseAttachments, onCaseSuccess, onCaseCreated } = useAddToCase({
event,
useInsertTimeline,
casePermissions,
@ -33,6 +35,20 @@ const AddToNewCaseButtonComponent: React.FC<AddToNewCaseButtonProps> = ({
owner,
onClose,
});
const { cases } = useKibana<TimelinesStartServices>().services;
const createCaseFlyout = cases.hooks.getUseCasesAddToNewCaseFlyout({
attachments: caseAttachments,
afterCaseCreated: onCaseCreated,
onSuccess: onCaseSuccess,
});
const handleClick = () => {
// close the popover
if (onClose) {
onClose();
}
createCaseFlyout.open();
};
return (
<>
@ -40,7 +56,7 @@ const AddToNewCaseButtonComponent: React.FC<AddToNewCaseButtonProps> = ({
<EuiContextMenuItem
aria-label={ariaLabel}
data-test-subj="add-new-case-item"
onClick={addNewCaseClick}
onClick={handleClick}
// needs forced size="s" since it is lazy loaded and the EuiContextMenuPanel can not initialize the size
size="s"
disabled={isDisabled}

View file

@ -9,14 +9,14 @@ import { useState, useCallback, useMemo, SyntheticEvent } from 'react';
import { useDispatch } from 'react-redux';
import { ALERT_RULE_NAME, ALERT_RULE_UUID } from '@kbn/rule-data-utils';
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
import { Case } from '../../../cases/common';
import { Case, CommentType } from '../../../cases/common';
import { TimelinesStartServices } from '../types';
import { TimelineItem } from '../../common/search_strategy';
import { tGridActions } from '../store/t_grid';
import { useDeepEqualSelector } from './use_selector';
import { createUpdateSuccessToaster } from '../components/actions/timeline/cases/helpers';
import { AddToCaseActionProps } from '../components/actions';
import { CasesDeepLinkId, generateCaseViewPath } from '../../../cases/public';
import { CaseAttachments, CasesDeepLinkId, generateCaseViewPath } from '../../../cases/public';
interface UseAddToCase {
addNewCaseClick: () => void;
@ -32,6 +32,7 @@ interface UseAddToCase {
closePopover: () => void;
isPopoverOpen: boolean;
isCreateCaseFlyoutOpen: boolean;
caseAttachments?: CaseAttachments;
}
export const useAddToCase = ({
@ -39,6 +40,7 @@ export const useAddToCase = ({
casePermissions,
appId,
onClose,
owner,
}: AddToCaseActionProps): UseAddToCase => {
const eventId = event?.ecs._id ?? '';
const dispatch = useDispatch();
@ -109,6 +111,23 @@ export const useAddToCase = ({
},
[onViewCaseClick, toasts, dispatch, eventId]
);
const caseAttachments: CaseAttachments = useMemo(() => {
const eventIndex = event?.ecs._index ?? '';
const { ruleId, ruleName } = normalizedEventFields(event);
const attachments = [
{
alertId: eventId,
index: eventIndex ?? '',
rule: {
id: ruleId,
name: ruleName,
},
owner,
type: CommentType.alert as const,
},
];
return attachments;
}, [event, eventId, owner]);
const onCaseClicked = useCallback(
(theCase?: Case) => {
@ -140,6 +159,7 @@ export const useAddToCase = ({
}
}, [onClose, closePopover, dispatch, eventId]);
return {
caseAttachments,
addNewCaseClick,
addExistingCaseClick,
onCaseClicked,