Extract lock_popovers component DOM parsing
What does this MR do and why?
In some HAML page with cascading settings, we use lock_popovers.vue a a mean to add popovers on all locked elements. This component break the encapsulation that Vue components promise, which is that they should only manipulate the DOM within themselves. Additionally, when in a pure Vue App (not in Haml), then this pattern is even more problematic because to work, we would need to add css class to all elements of the form that are disabled and then let this parsing occurs.
Instead, we separate lock_popovers into haml_lock_popovers and lock_popover (singular) which should get the element to attach on and whether it is locked by the admin or by a parent group. That way when building Vue applications, we can pass this data to the component with $refs element instead of querying the DOM, but existing implementation relying on this can keep working as before for now.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
No changes:
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Go to a root group and create a new sub group
- On the root group, go to Settings -> General
- Under Permissions and group features -> Security policy management, check the box pipeline security execution box
- Now navigate to the sub group
- Navigate to the same settings
- Notice that you cannot change the settings
- Hover on the lock icon
- Notice that you still see a popover with the appropriate message
Related to #469414 (closed)