[Security Solution][Timeline] Toast wrap word when new filter is added to timeline (#142803)

* added break-word wrapper around toast that fires off when a filter is added to timeline

* renamed ToastAddSuccess to AddSuccessMessage and update it to accept children
This commit is contained in:
christineweng 2022-10-11 16:40:43 -05:00 committed by GitHub
parent 119d8dc105
commit 4ec846cac4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 6 deletions

View file

@ -9,7 +9,11 @@ import { EuiButtonEmpty } from '@elastic/eui';
import { act, fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import AddToTimelineButton, { ADD_TO_TIMELINE_KEYBOARD_SHORTCUT } from './add_to_timeline';
import AddToTimelineButton, {
ADD_TO_TIMELINE_KEYBOARD_SHORTCUT,
SuccessMessageProps,
AddSuccessMessage,
} from './add_to_timeline';
import { DataProvider, IS_OPERATOR } from '../../../../common/types';
import { useDeepEqualSelector } from '../../../hooks/use_selector';
import { TestProviders } from '../../../mock';
@ -391,7 +395,11 @@ describe('add to timeline', () => {
fireEvent.click(screen.getByRole('button'));
expect(mockAddSuccess).toBeCalledWith('Added a to timeline');
const message: SuccessMessageProps = {
children: i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(providerA.name, true),
};
const wrapper = render(<AddSuccessMessage {...message} />);
expect(wrapper.container.textContent).toBe('Added a to timeline');
});
test('Add success is called with "template" if timeline type is template', () => {
@ -405,7 +413,11 @@ describe('add to timeline', () => {
fireEvent.click(screen.getByRole('button'));
expect(mockAddSuccess).toBeCalledWith('Added a to template');
const message: SuccessMessageProps = {
children: i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(providerA.name, false),
};
const wrapper = render(<AddSuccessMessage {...message} />);
expect(wrapper.container.textContent).toBe('Added a to template');
});
});
});

View file

@ -11,6 +11,7 @@ import { DraggableId } from 'react-beautiful-dnd';
import { useDispatch } from 'react-redux';
import { isEmpty } from 'lodash';
import { toMountPoint } from '@kbn/kibana-react-plugin/public';
import { stopPropagationAndPreventDefault } from '../../../../common/utils/accessibility';
import { DataProvider, TimelineId } from '../../../../common/types';
import { useDeepEqualSelector } from '../../../hooks/use_selector';
@ -46,6 +47,17 @@ const useGetHandleStartDragToTimeline = ({
return handleStartDragToTimeline;
};
export interface SuccessMessageProps {
children: React.ReactChild;
}
export const AddSuccessMessage = (props: SuccessMessageProps) => {
return (
<span className="eui-textBreakWord" data-test-subj="add-to-timeline-toast-success">
{props.children}
</span>
);
};
export interface AddToTimelineButtonProps extends HoverActionComponentProps {
/** `Component` is only used with `EuiDataGrid`; the grid keeps a reference to `Component` for show / hide functionality */
Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon | typeof EuiContextMenuItem;
@ -88,9 +100,16 @@ const AddToTimelineButton: React.FC<AddToTimelineButtonProps> = React.memo(
dataProvider: provider,
})
);
addSuccess(
i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(provider.name, timelineType === 'default')
);
addSuccess({
title: toMountPoint(
<AddSuccessMessage>
{i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(
provider.name,
timelineType === 'default'
)}
</AddSuccessMessage>
),
});
}
});
}