Commit c0a081a5 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Denys Mishunov

Fix alerts table empty and loading row styling

parent 4c9d2e3a
......@@ -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 }">
......
---
title: Fix loading and empty state styling for alerts list
merge_request: 32531
author:
type: fixed
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment