Y24-432 centralize vue component initialization

seenanair commented 2 weeks ago

Closes https://github.com/sanger/limber/issues/2033

Changes proposed in this pull request

Created a centralized file, vue_app.js, for initializing Vue components
Added a generic helper function to dynamically mount Vue components based on the presence of specific HTML elements and their associated data attributes.
Removed the existing index.js files for each Vue component, eliminating redundancy
Globally registered commonly used components (LbMainContent, LbPage, LbSidebar) to eliminate the need for importing them in each Vue file.

Additional Notes There is potential to globally register other shared components. However, some of these components are currently registered with different names across the application. A major refactor would be needed to unify these, which we recommend handling in a separate story to avoid an overly complex PR.

Instructions for Reviewers

[All PRs] - Confirm PR template filled
[Feature Branches] - Review code
[Production Merges to main]
- Check story numbers included
- Check for debug code
- Check version

codecov[bot] commented 2 weeks ago

Codecov Report

Attention: Patch coverage is 94.05099% with 21 lines in your changes missing coverage. Please review.

Project coverage is 80.43%. Comparing base (abd7f03) to head (aaf4457).

Files with missing lines	Patch %	Lines
app/frontend/javascript/vue_app.js	88.23%	16 Missing :warning:
...ntend/javascript/file-list/components/FileList.vue	0.00%	3 Missing :warning:
app/frontend/entrypoints/application.js	0.00%	1 Missing :warning:
...xp-tube-panel/components/PoolXPTubeSubmitPanel.vue	87.50%	1 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #2058 +/- ## =========================================== + Coverage 78.09% 80.43% +2.34% =========================================== Files 477 471 -6 Lines 18066 17932 -134 Branches 262 268 +6 =========================================== + Hits 14109 14424 +315 + Misses 3955 3506 -449 Partials 2 2 ``` | [Flag](https://app.codecov.io/gh/sanger/limber/pull/2058/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger) | Coverage Δ | | |---|---|---| | [javascript](https://app.codecov.io/gh/sanger/limber/pull/2058/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger) | `73.60% <94.01%> (+3.71%)` | :arrow_up: | | [pull_request](https://app.codecov.io/gh/sanger/limber/pull/2058/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger) | `80.43% <94.05%> (+2.34%)` | :arrow_up: | | [push](https://app.codecov.io/gh/sanger/limber/pull/2058/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger) | `80.43% <94.05%> (+2.34%)` | :arrow_up: | | [ruby](https://app.codecov.io/gh/sanger/limber/pull/2058/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger) | `91.28% <100.00%> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sanger#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

seenanair commented 1 week ago

Looks good, nice work!

I don't know how to test this manually but I am assuming you have and I reckon the int suite will cover most of the use cases.

That’s something I’m also a bit concerned about. I hope the integration suite covers most of it, and I’ll also ask the team if there are any better ways to test it.

StephenHulme commented 4 days ago

Nice work, I like the direction this is taking @seenanair! I see you've found the eventBus too, hopefully we can eventually get rid of all the script tags 🤞

seenanair commented 4 days ago

Nice work, I like the direction this is taking @seenanair! I see you've found the eventBus too, hopefully we can eventually get rid of all the script tags 🤞

Thanks @StephenHulme for the review. 🙏 The asset comment components were pretty tightly linked before, assuming all of them would always be on the same page in Limber. That worked fine for how things were currently set up in Limber, but I hope iit made sense to decouple them so they can be used independently if needed down the line. Plus, this way, we can avoid relying on data altogether.

This would be a great case for proper store management, but that felt like a big step right now. So, I just used the event bus since it was already there and working fine.

sanger / limber