chore(react-electron-menu): implement React based rendering for the various electron menus in the app 🦨 #5818
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.
For this Skunkworks I hacked together something we discussed pretty long time ago and I wanted to try out ever since: this patch introduces a new package in the monorepo that should allow us to render Electron menu (either application menu, dock menu, or context one) using React components right in the application code.
The upsides of this approach is that we can use a more declarative way of defining the menus and bring them closer to the actual application features and data without the need of manually syncing required data back and forth between main process and renderers. Using current "Collection" menu items as an example, not only we don't need any extra ipc events to make main process aware of what is the current active tab in the app, whether or not it's a collection, and if this collection is read only, we have access to way more useful collection metadata that we can use to build the menu.
The library works somewhat similarly to react-helmet in a sense that if you are rendering submenus, they will be merged, allowing childred to declaratively add more items to already rendered items. This is for example how the "Connect" submenu works in this PR.
A new feature that we didn't have easy way of implementing before is that we can now render context menus dynamically right in React components that have access to all the context of the application around them. This makes implementing things like copying for the document or showing navigation tree item actions on right click very straightforward.
There are some existing libraries out there that are trying to do the same thing, but all of them don't look maintained, they use "remote" as a way to communicate with main, which is not recommended anymore (deprecated and removed when used from electron directly), and they don't allow to define the menu on different levels of application tree which is a feature I think we can benefit from the most.
Some examples of things I described above:
Connection now shows the connection name and is dynamically rendered only when you are actually connected (supports multiple connections)
Collection menu uses the collection name in the menu group
Context menu for copying the document
Context menu for navigation tree items
I didn't have much time to work on this, so some polish would be required if we want to merge this into main: