Merge branch 'Remove-clickable-styling-from-loading-row' into 'master'

Fix alerts table empty and loading row styling

See merge request gitlab-org/gitlab!32531

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -26,7 +26,6 @@ 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';
 
 export default {
-  bodyTrClass,
   i18n: {
     noAlertsMsg: s__(
       "AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page.",
@@ -132,7 +131,6 @@ export default {
   },
   data() {
     return {
-      alerts: null,
       errored: false,
       isAlertDismissed: false,
       isErrorAlertDismissed: false,
@@ -149,6 +147,12 @@ export default {
     loading() {
       return this.$apollo.queries.alerts.loading;
     },
+    hasAlerts() {
+      return this.alerts?.length;
+    },
+    tbodyTrClass() {
+      return !this.loading && this.hasAlerts ? bodyTrClass : '';
+    },
   },
   methods: {
     filterAlertsByStatus(tabIndex) {
@@ -210,7 +214,7 @@ export default {
         :show-empty="true"
         :busy="loading"
         stacked="md"
-        :tbody-tr-class="$options.bodyTrClass"
+        :tbody-tr-class="tbodyTrClass"
         @row-clicked="navigateToAlertDetails"
       >
         <template #cell(severity)="{ item }">

changelogs/unreleased/Remove-clickable-styling-from-loading-row.yml

+---
+title: Fix loading and empty state styling for alerts list
+merge_request: 32531
+author:
+type: fixed

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -142,6 +142,11 @@ describe('AlertManagementList', () => {
       });
       expect(findAlertsTable().exists()).toBe(true);
       expect(findLoader().exists()).toBe(true);
+      expect(
+        findAlerts()
+          .at(0)
+          .classes(),
+      ).not.toContain('hover-bg-blue-50');
     });
 
     it('error state', () => {
@@ -154,6 +159,11 @@ describe('AlertManagementList', () => {
       expect(findAlertsTable().text()).toContain('No alerts to display');
       expect(findLoader().exists()).toBe(false);
       expect(findAlert().props().variant).toBe('danger');
+      expect(
+        findAlerts()
+          .at(0)
+          .classes(),
+      ).not.toContain('hover-bg-blue-50');
     });
 
     it('empty state', () => {
@@ -166,6 +176,11 @@ describe('AlertManagementList', () => {
       expect(findAlertsTable().text()).toContain('No alerts to display');
       expect(findLoader().exists()).toBe(false);
       expect(findAlert().props().variant).toBe('info');
+      expect(
+        findAlerts()
+          .at(0)
+          .classes(),
+      ).not.toContain('hover-bg-blue-50');
     });
 
     it('has data state', () => {
@@ -177,6 +192,11 @@ describe('AlertManagementList', () => {
       expect(findLoader().exists()).toBe(false);
       expect(findAlertsTable().exists()).toBe(true);
       expect(findAlerts()).toHaveLength(mockAlerts.length);
+      expect(
+        findAlerts()
+          .at(0)
+          .classes(),
+      ).toContain('hover-bg-blue-50');
     });
 
     it('displays status dropdown', () => {