Use resize observer vulnerability report container sticky
What does this MR do and why?
Related #460231 (closed)
This MR switches the approach to calculate the top offset for the sticky table in the vulnerability_report.vue component from CSS classes and hard-coded heights to using ResizeObserver.
Because the content of the container above the table can be so different, there are many scenarios that need to be taken into account for calculating the precise offset. The following factors play a role in the height:
- is "advanced filtering" or "normal filtering" used
- is the "group by" functionality enabled
- is the "selection summary" showing
- are there form errors in the "selection summary"
- is there a network error message showing for the "selection summary" (in this case we can't even calculate the height 100% correctly because it depends on how many items failed and that defines how long the list of ids is. This can take up multiple rows).
For all these scenarios we used CSS classes and hard-coded heights to calculate the top offset of thead th. The new approach changes to using a ResizeObserver (with the resize observer directive from gitlab-ui) to get up-to-date and exact height calculations of that container. This value is set as a custom property --sticky-container-height, which is then used to set the top offset more directly.
The offset is now also simply set on thead instead of thead th because the sticky position bug that existed on Chrome for thead has been resolved in the mean time.
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
How to set up and validate locally
Play around with the vulnerability report on the project level, group level, instance level, and pipeline security tab in different scenarios with advanced filtering enabled/disabled (vulnerability_report_advanced_filtering), using the group by functionality, selecting findings and submitting a bulk dismissal without reason, and mock an offline network to get graphql errors.