Y24-432 centralize vue component initialization

[seenanair]

Closes #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]

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 (a4e4a00) to head (4102bb0).
Report is 38 commits behind head on develop.

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

Additional details and impacted files

@@             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	Coverage Δ
javascript	73.60% <94.01%> (+3.71%)	⬆️
pull_request	80.43% <94.05%> (+2.34%)	⬆️
push	80.43% <94.05%> (+2.34%)	⬆️
ruby	91.28% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BenTopping]

Nice bit of refactoring 👌
Let me know if you want to go over the comments.

[BenTopping]

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.

[seenanair]

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]

That looks good - thanks for the improvements 🚀

[StephenHulme]

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]

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.

[BenTopping]

Nice, changes look sensible. Quite difficult to wrap my head around the store but I think it looks ok.