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( {