diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.test.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.test.tsx
index ff57ca0527a..94642688d1e 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.test.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.test.tsx
@@ -1,7 +1,10 @@
import { render, screen, userEvent, within } from 'test/test-utils';
import { setupMswServer } from 'app/features/alerting/unified/mockApi';
-import { setMuteTimingsListError } from 'app/features/alerting/unified/mocks/server/configure';
+import {
+ setMuteTimingsListError,
+ setTimeIntervalsListEmpty,
+} from 'app/features/alerting/unified/mocks/server/configure';
import { setAlertmanagerConfig } from 'app/features/alerting/unified/mocks/server/entities/alertmanagers';
import { captureRequests } from 'app/features/alerting/unified/mocks/server/events';
import { AccessControlAction } from 'app/types';
@@ -89,6 +92,8 @@ describe('MuteTimingsTable', () => {
expect(await screen.findByTestId('dynamic-table')).toBeInTheDocument();
expect(await screen.findByText('Provisioned')).toBeInTheDocument();
+ expect(screen.queryByText(/no mute timings configured/i)).not.toBeInTheDocument();
+ expect(screen.queryByText(/you haven't created any mute timings yet/i)).not.toBeInTheDocument();
});
it('shows error when mute timings cannot load', async () => {
@@ -114,6 +119,12 @@ describe('MuteTimingsTable', () => {
expect(deleteRequest).toBeDefined();
});
+
+ it('shows empty state when no mute timings are configured', async () => {
+ setTimeIntervalsListEmpty();
+ renderWithProvider();
+ expect(await screen.findByText(/you haven't created any mute timings yet/i)).toBeInTheDocument();
+ });
});
describe('without necessary permissions', () => {
diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
index e9fad0243e8..de41092bc25 100644
--- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
+++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx
@@ -108,24 +108,28 @@ export const MuteTimingsTable = () => {
)}
{items.length > 0 ? : null}
- {items.length === 0 && !hideActions ? (
-
+ {!hideActions ? (
+
+ ) : (
+
)}
- buttonLabel="Add mute timing"
- buttonIcon="plus"
- buttonSize="lg"
- href={makeAMLink('alerting/routes/mute-timing/new', alertManagerSourceName)}
- showButton={allowedToCreateMuteTiming}
- />
- ) : (
-
+ >
)}
);
diff --git a/public/app/features/alerting/unified/mocks/server/configure.ts b/public/app/features/alerting/unified/mocks/server/configure.ts
index b7efbcd53b5..ceed4471e0c 100644
--- a/public/app/features/alerting/unified/mocks/server/configure.ts
+++ b/public/app/features/alerting/unified/mocks/server/configure.ts
@@ -14,7 +14,11 @@ import {
getDisabledPluginHandler,
getPluginMissingHandler,
} from 'app/features/alerting/unified/mocks/server/handlers/plugins';
-import { ALERTING_API_SERVER_BASE_URL, paginatedHandlerFor } from 'app/features/alerting/unified/mocks/server/utils';
+import {
+ ALERTING_API_SERVER_BASE_URL,
+ getK8sResponse,
+ paginatedHandlerFor,
+} from 'app/features/alerting/unified/mocks/server/utils';
import { SupportedPlugin } from 'app/features/alerting/unified/types/pluginBridges';
import { clearPluginSettingsCache } from 'app/features/plugins/pluginSettings';
import { AlertmanagerChoice } from 'app/plugins/datasource/alertmanager/types';
@@ -158,6 +162,19 @@ export const setMuteTimingsListError = () => {
return handler;
};
+/**
+ * Makes the mock server respond with no time intervals
+ */
+export const setTimeIntervalsListEmpty = () => {
+ const listMuteTimingsPath = listNamespacedTimeIntervalHandler().info.path;
+ const handler = http.get(listMuteTimingsPath, () => {
+ return HttpResponse.json(getK8sResponse('TimeIntervalList', []));
+ });
+
+ server.use(handler);
+ return handler;
+};
+
export function mimirDataSource() {
const dataSource = mockDataSource(
{