[8.7] [Dashboard] [Navigation] Fix mount point bug (#150507) #150763
Merged
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
Closes elastic#150371 ## Summary Oooh, man. This was a fun one! Okay, so. To try to understand this bug, we first have to understand a little bit about how the header action menu is rendered as part of the `TopNavMenu` component (in `dashboard_top_nav.tsx`). Essentially, as part of rendering `TopNavMenu`, a `MountPointPortal` is created for the `headerActionMenu` so that the items get rendered in the correct location, like so:  When there is **no** filter pill (i.e. `showSearchBar` is `false`), this `MountPointPortal` gets **unmounted** alongside the search bar as part of the `TopNavMenu` component (after all, only the dashboard viewport is getting rendered in this scenario). When you exit fullscreen mode, both the search bar and the `MountPointPortal` get re-mounted, which triggers a re-render, and so the `headerActionMenu` shows up as expected. Now, consider what happens when there **is** a filter pill (i.e. when `showSearchBar` is `true`). Because the search bar still needs to get rendered, neither it **nor** the `MountPointPortal` get unmounted - instead, the search bar simply gets re-rendered while the portal gets updated to point at an element that no longer exists (since the place where the `headerActionMenu` normally gets rendered is no longer present). Now, when you exit fullscreen mode, neither element needs to get re-mounted - they simply need to get re-rendered. Everything works great for the search bar, but the `headerActionMenu` seems to be rendering itself **before** the portal gets a chance to point to the correct place again - so, it doesn't show up unless a re-render of `TopNavMenu` is manually triggered (like, say, by removing the filter pill): https://user-images.githubusercontent.com/8698078/217868558-7eb73df8-3417-4d5a-ab5d-e7c9138532a9.mov So essentially, from what I can understand, this bug comes down to a race condition between the `MountPointPortal` telling the `headerActionMenu` **where** to render and the `TopNavMenu` actually rendering. Since the `MountPointPortal` **is not necessary** in fullscreen mode, regardless of if `showSearchBar` is `true` or `false`, the best way to prevent this bug is to simply ensure that it **always** gets unmounted when entering fullscreen mode - this ensures that the rendering always happens in the order that it is meant to. This can be accomplished by setting the `MenuMountPoint` to `undefined` when the dashboard enters fullscreen mode. As far as why this bug only happened on **click** and not when the escape key was hit... For some reason (React magic 🤷), hitting the escape key causes two renders of the `TopNavMenu` component whereas clicking the button only causes a single render. This means that, by the time the second render occurs when hitting escape, `MountPointPortal` has had a chance to update - hence, why the menu shows up where it's supposed to. ### Checklist - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit 5d4c880)
2 tasks
💚 Build Succeeded
Metrics [docs]Async chunks
To update your PR or re-run it, just comment with: cc @Heenawter |
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.
Backport
This will backport the following commits from
mainto8.7:Questions ?
Please refer to the Backport tool documentation