[Security Solution][Timeline] Toast wrap word when new filter is added to timeline#142803
Conversation
… added to timeline
|
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
| return handleStartDragToTimeline; | ||
| }; | ||
|
|
||
| const ToastAddSuccess: React.FC<{ |
There was a problem hiding this comment.
Consider renaming this to something like AddSuccessMessage as this component is not handling anything related to a toast.
You can also consider passing children instead of props so that any message can be passed as below
<ToastAddSuccess>
{i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(
addSuccess,
timelineType === 'default'
)}
</ToastAddSuccess>nitpick: Another suggestion is to create a generic Component BreakWordText which can receive message as children and can be used anywhere where we need to handle long text.
| addSuccess, | ||
| timelineType === 'default' | ||
| ); | ||
| return <span className="eui-textBreakWord">{message}</span>; |
There was a problem hiding this comment.
TIL about class eui-textBreakWord. Thanks.
logeekal
left a comment
There was a problem hiding this comment.
Overall logically, changes look good 👌🏽. But I left some feedback about naming. You can check those and see if they make sense.
|
Updated naming convention to better describe purpose and test cases that look for component with the test string. Kept AddSuccessMessage in add_to_timeline as the bug only appears when a user add a long field without break words (e.g. dll.hash.sha256) to timeline. |
logeekal
left a comment
There was a problem hiding this comment.
This is looking great. Thanks for reviewing the feedback and making changes.
💚 Build Succeeded
Metrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
…d to timeline (elastic#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 (cherry picked from commit 4ec846c)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…d to timeline (#142803) (#143142) * 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 (cherry picked from commit 4ec846c) Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>
Ref: #142804
This PR updates the message in toast when a new filter is added to timeline. Previously if the text is too long and has no break word characters the text would overflow the toast box. A break-word wrapper is added to properly display the message.