[Serverless] Changes to TopNavMenu placement for serverless projects. #158053
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
6fa3f85 to
e3578ce
Compare
e3578ce to
8be4dab
Compare
tsullivan
commented
May 18, 2023
|
|
||
| act(() => { | ||
| menuMount$.next(createMountPoint('FOO')); | ||
| }); | ||
| await refresh(); |
There was a problem hiding this comment.
Minor cleanup: I've removed the unnecessary await statements, as they create warnings in my editor.
8d08509 to
c674d5e
Compare
c674d5e to
c75427b
Compare
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
MichaelMarcialis
approved these changes
May 22, 2023
rshen91
reviewed
May 22, 2023
rshen91
approved these changes
May 22, 2023
💚 Build Succeeded
Metrics [docs]Page load bundle
Unknown metric groupsESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: cc @tsullivan |
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
May 25, 2023
…elastic#158053) ## Summary Part of elastic#158034 This PR moves the TopNavMenu placement to below the breadcrumbs bar for the serverless project chrome layout. The app toolbar must appear below the breadcrumbs bar in the layout, when the app has TopNavMenu items registered with the navigation service. To prevent the layout from rendering an empty container, I had to create a new hook, `useHeaderActionMenuMounter`, that extracts the state from HeaderActionMenu. The state (`mounter: MountPoint | undefined`) is hoisted above so that the header can check if it is empty before rendering the container. _Future work is still needed to achieve the end goal of the design._ Apps must be able to define custom layouts, which commonly require grid and spacer components. The TopNavMenu needs augmentation to support the new API. See the project document from the issue. ## Screenshots **App showing the toolbar, with the container shown below breadcrumbs**  **App without the toolbar and no empty container** 
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.
Summary
Part of #158034
This PR moves the TopNavMenu placement to below the breadcrumbs bar for the serverless project chrome layout.
The app toolbar must appear below the breadcrumbs bar in the layout, when the app has TopNavMenu items registered with the navigation service.
To prevent the layout from rendering an empty container, I had to create a new hook,
useHeaderActionMenuMounter, that extracts the state from HeaderActionMenu. The state (mounter: MountPoint | undefined) is hoisted above so that the header can check if it is empty before rendering the container.Future work is still needed to achieve the end goal of the design. Apps must be able to define custom layouts, which commonly require grid and spacer components. The TopNavMenu needs augmentation to support the new API. See the project document from the issue.
Screenshots
App showing the toolbar, with the container shown below breadcrumbs
App without the toolbar and no empty container
