Alert management list styling should be updated to work with latest gitlab-ui
Summary
After GitLab got updated version of giltab-ui (15.0.0+), the classes applied to bodyTrClass
in app/assets/javascripts/alert_management/components/alert_management_list.vue
are incorrect when hovering over a row
Example Project
master
.
Possible fixes
Apparently, the following patch even though needs proper validation from the ~"group::health" team, should give the basic ground for the fix:
Index: app/assets/javascripts/alert_management/components/alert_management_list.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- app/assets/javascripts/alert_management/components/alert_management_list.vue (revision 0e18c7fdb4adf32adfc74767f363a4ea3951bb94)
+++ app/assets/javascripts/alert_management/components/alert_management_list.vue (date 1590491838435)
@@ -25,7 +25,7 @@
const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
const bodyTrClass =
- 'gl-border-1 gl-border-t-solid gl-border-gray-100 hover-bg-blue-50 hover-gl-cursor-pointer hover-gl-border-b-solid hover-gl-border-blue-200';
+ 'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
const findDefaultSortColumn = () => document.querySelector('.js-started-at');
export default {
When testing locally, the hover state of the row turns to something that is needed, I assume: