Having a way to use the project sidebar outside of Tuleap itself would help the integration with third party tools.
The idea is to maintain the component inside the Tuleap codebase so it can be close to the actual look & feel of the sidebars and get additional features over time.
The project sidebar component needs to embed every assets it needs and take the rest as an input. The usage will look like something like this:
<project-sidebar config='{...}'></project-sidebar>
<script src="/path/to/sidebar.js"></script>
<style>
/* Not forced by the implementation, requirements might be different in your context */
project-sidebar {
position: fixed;
top: 0;
left: 0;
}
</style>
While it is not really a "best practice" from a custom element PoV, our best bet is probably to pass the config of the sidebar as a JSON object. We do not expect it to change once the component is initialized and given the large amount of data we might need to give to the component more traditional approach are probably not suitable here.
The custom element will be published to the npmjs.com registry so it can be easily consumed by third parties.
Technical implementation details:
- The element will be an Vue 3 app in TS build as a custom element, see https://v3.vuejs.org/guide/web-components.html#building-custom-elements-with-vue
- All the styles needs to be embedded and loaded by the element itself, care must be taken to not conflict with other style on the page
- To ease the usage by third parties, the package should not require an additional build process to be used (i.e. the published bundle should be directly usable)
- Interactions requiring changes outside the sidebar itself should throw custom events to let the third party integrate them in the best possible way (e.g. opening the project banner)
- A strategy needs to be elaborated to publish the package, we will probably needs to have specific tags in addition to the ones used to publish main Tuleap versions