[SIEM] Fixes dragging entries to the Timeline while data is loading may trigger a partial page reload #59476
Conversation
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
…g 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 Result** * The page does not appear to reload * In development mode, a single error is logged to the JS console **Actual Resluts** * 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
|
Pinging @elastic/siem (Team:SIEM) |
patrykkopycinski
approved these changes
Mar 5, 2020
💚 Build SucceededTo update your PR or re-run it, just comment with: |
andrew-goldstein
added a commit
to andrew-goldstein/kibana
that referenced
this pull request
Mar 6, 2020
…ay trigger a partial page reload (elastic#59476) 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 Result** * The page does not appear to reload * In development mode, a single error is logged to the JS console **Actual Resluts** * 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
andrew-goldstein
added a commit
that referenced
this pull request
Mar 6, 2020
…ay trigger a partial page reload (#59476) (#59521) ## [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 #59466
andrew-goldstein
added a commit
that referenced
this pull request
Mar 6, 2020
…ay trigger a partial page reload (#59476) (#59523) 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 Result** * The page does not appear to reload * In development mode, a single error is logged to the JS console **Actual Resluts** * 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 #59466
jloleysens
added a commit
to jloleysens/kibana
that referenced
this pull request
Mar 6, 2020
…x-closed-index * 'master' of github.com:elastic/kibana: (32 commits) [ML] Use Kibana's HttpHandler for HTTP requests (elastic#59320) [APM] Create settings page to manage Custom Links (elastic#57788) [Upgrade Assistant] Server-side batch reindexing (elastic#58598) completes navigation test (elastic#59141) [SIEM] Fixes dragging entries to the Timeline while data is loading may trigger a partial page reload (elastic#59476) [Reporting/Screenshots] Handle page setup errors and capture the page, don't fail the job (elastic#58683) [SIEM] [CASES] API with io-ts validation (elastic#59265) Use camelCase rather than snakeCase for plugin name (elastic#59461) [Maps] top term percentage field property (elastic#59386) Add custom action to registry and show actions list in siem (elastic#58395) [Search service] Add enhanced ES search strategy (elastic#59224) [Logs UI] Speed up stream rendering using memoization (elastic#59163) expand max-old-space-size for xpack jest tests (elastic#59455) Added possibility to embed connectors create and edit flyouts (elastic#58514) Revert "Temporarily disabling PR project mappings (elastic#59485)" (elastic#59491) Temporarily disabling PR project mappings (elastic#59485) [Endpoint] Fix alert list functional test error (elastic#59357) Rename status_page to statusPage (elastic#59186) Fix visual baseline job (elastic#59348) Extended AlertContextValue with metadata optional property (elastic#59391) ... # Conflicts: # x-pack/plugins/upgrade_assistant/common/types.ts # x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_actions.ts # x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_service.test.ts # x-pack/plugins/upgrade_assistant/server/lib/reindexing/reindex_service.ts # x-pack/plugins/upgrade_assistant/server/routes/reindex_indices/reindex_indices.test.ts # x-pack/plugins/upgrade_assistant/server/routes/reindex_indices/reindex_indices.ts
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
[SIEM] Fixes dragging entries to the Timeline while data is loading may trigger a partial page reload
The
react-beautiful-dndlibrary, upgraded during the7.6stack release from10.0.1to12.2.0, includes a breaking change to the way errors are handledand 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
orqueryExpected Result
Actual Resluts
Error 1
Error 2
Desk testing
Tested locally in:
80.0.3987.12273.0.113.0.5Fixes #59466