[7.x] [SIEM] Fixes dragging entries to the Timeline while data is loading may trigger a partial page reload (#59476) #59521
Conversation
This file contains hidden or 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
…ay trigger a partial page reload (elastic#59476) ## [SIEM] Fixes dragging entries to the Timeline while data is loading may trigger a partial page reload The `react-beautiful-dnd` library, upgraded during the `7.6` stack release from `10.0.1` to `12.2.0`, includes a breaking change to the way [errors are handled](https://github.com/atlassian/react-beautiful-dnd/blob/v12.0.0/docs/guides/setup-problem-detection-and-error-recovery.md) and recovered. As a result of this change, an uncaught error may trigger a an effect that feels (from the perspective of a user) like a partial page reload. The most common condition where this can occur is when dragging entries to the Timeline while data is loading, per the animated gif below:  ## Reproduction steps 1. Navigate to the Hosts page 2. Open the Timeline 3. Drag a host to the Timeline 4. While data is still loading, drag a different host to the Timeline to create an `or` query **Expected Results** * The page does not appear to reload * In development mode, a single error is logged to the JS console **Actual Results** * The page appears to reload * In development mode, two errors are logged to the JS console **Error 1** ``` react-beautiful-dnd Invariant failed: Cannot find droppable entry with id [droppableId.content.event-details-value-default-draggable-plain-column-renderer-formatted-field-value-timeline-1-kLGooXABOOUskGlPiQw5-@timestamp-1583260131000]👷<200d> This is a development only message. It will be removed in production builds. in Draggable (created by ConnectFunction) in ConnectFunction (created by PrivateDraggable) in PrivateDraggable (created by PublicDraggable) in PublicDraggable (created by Droppable) in Droppable (created by ConnectFunction) in ConnectFunction ``` **Error 2** ``` react-beautiful-dnd Invariant failed: Cannot find droppable entry with id [droppableId.content.event-details-value-default-draggable-plain-column-renderer-formatted-field-value-timeline-1-kLGooXABOOUskGlPiQw5-@timestamp-1583260131000]👷<200d> This is a development only message. It will be removed in production builds. in ErrorBoundary (created by DragDropContext) in DragDropContext (created by Anonymous) in Anonymous ``` ### Desk testing Tested locally in: * Chrome `80.0.3987.122` * Firefox `73.0.1` * Safari `13.0.5` Fixes elastic#59466
Contributor
💚 Build SucceededTo update your PR or re-run it, just comment with: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Backports the following commits to 7.x: