Vue Shared - JS Popover Component
What / Why
Similar to vue_alerts.js
Follow up from conversation here: !152841 (comment 1909672013)
There are situations when working on older Frontend code in HAML where adding minor JS elements is beneficial but not worth entire Vue applications for one added piece of functionality. In this situation, it is sometimes nice to have very generic and minor Vue applications that have one sole purpose.
An example of this is vue_alerts.js
. Vue alerts is a small piece of JS that can be included on any /pages/*.js
file that will create alerts in a very lightweight manner in an otherwise HAML view.
We'd like to do the same for Popovers. These elements are vital to locked settings per our UX guidelines . It will be beneficial to have a pattern to add these disabled popovers without needing to move an entire section of HAML into a JS/Vue application.
Proposal
Create a JS file similar to vue_alerts.js
that collects all necessary information to bootstrap a popover onto the desired HAML elements. There already exists vue_shared/components/help_popover.vue
that could potentially be used instead of creating another new shared popover component.
Implementation Guide
- Create
vue_popovers.js
file inspired byvue_alerts.js
- Utilize
vue_shared/components/help_popover.vue
as the Vue component used by this JS file - Hook up first usage to disabled setting for User Profiles in
ee/app/views/user_settings/profiles/_private_profile.html.haml