Alerting: Fix empty state for mute timings (#104453)

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', () => {

public/app/features/alerting/unified/components/mute-timings/MuteTimingsTable.tsx

@@ -108,24 +108,28 @@ export const MuteTimingsTable = () => {
         )}
       </Stack>
       {items.length > 0 ? <DynamicTable items={items} cols={columns} pagination={{ itemsPerPage: 25 }} /> : null}
-      {items.length === 0 && !hideActions ? (
-        <EmptyAreaWithCTA
-          text={t(
-            'alerting.mute-timings-table.text-havent-created-timings',
-            "You haven't created any mute timings yet"
+      {items.length === 0 && (
+        <>
+          {!hideActions ? (
+            <EmptyAreaWithCTA
+              text={t(
+                'alerting.mute-timings-table.text-havent-created-timings',
+                "You haven't created any mute timings yet"
+              )}
+              buttonLabel="Add mute timing"
+              buttonIcon="plus"
+              buttonSize="lg"
+              href={makeAMLink('alerting/routes/mute-timing/new', alertManagerSourceName)}
+              showButton={allowedToCreateMuteTiming}
+            />
+          ) : (
+            <EmptyAreaWithCTA
+              text={t('alerting.mute-timings-table.text-no-mute-timings-configured', 'No mute timings configured')}
+              buttonLabel={''}
+              showButton={false}
+            />
           )}
-          buttonLabel="Add mute timing"
-          buttonIcon="plus"
-          buttonSize="lg"
-          href={makeAMLink('alerting/routes/mute-timing/new', alertManagerSourceName)}
-          showButton={allowedToCreateMuteTiming}
-        />
-      ) : (
-        <EmptyAreaWithCTA
-          text={t('alerting.mute-timings-table.text-no-mute-timings-configured', 'No mute timings configured')}
-          buttonLabel={''}
-          showButton={false}
-        />
+        </>
       )}
     </div>
   );

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