Chore: upgrade to msw v2 (#82270)

* Update dependency msw to v2

* close

* minor fixes

* fetch import changes

* fix some alerting tests

* fix another alerting test

* fix systemjs tests

* don't return undefined in json mocks

* don't return undefined in json response

* add type

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

package.json

@@ -183,7 +183,7 @@
     "jest-matcher-utils": "29.7.0",
     "lerna": "7.4.1",
     "mini-css-extract-plugin": "2.8.0",
-    "msw": "1.3.2",
+    "msw": "2.2.0",
     "mutationobserver-shim": "0.3.7",
     "ngtemplate-loader": "2.1.0",
     "node-notifier": "10.0.1",

public/app/core/components/NestedFolderPicker/NestedFolderPicker.test.tsx

@@ -1,7 +1,7 @@
 import 'whatwg-fetch'; // fetch polyfill
 import { fireEvent, render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { rest } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { SetupServer, setupServer } from 'msw/node';
 import React from 'react';
 import { TestProvider } from 'test/helpers/TestProvider';
@@ -47,14 +47,11 @@ describe('NestedFolderPicker', () => {
   beforeAll(() => {
     window.HTMLElement.prototype.scrollIntoView = function () {};
     server = setupServer(
-      rest.get('/api/folders/:uid', (_, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.json({
-            title: folderA.item.title,
-            uid: folderA.item.uid,
-          })
-        );
+      http.get('/api/folders/:uid', () => {
+        return HttpResponse.json({
+          title: folderA.item.title,
+          uid: folderA.item.uid,
+        });
       })
     );
     server.listen();

public/app/features/alerting/unified/CloneRuleEditor.test.tsx

@@ -1,3 +1,4 @@
+import 'whatwg-fetch';
 import { render, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -11,7 +12,6 @@ import { backendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchItem, DashboardSearchItemType } from 'app/features/search/types';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { RuleWithLocation } from 'app/types/unified-alerting';
-import 'whatwg-fetch';
 
 import {
   RulerAlertingRuleDTO,

public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.test.tsx

@@ -1,10 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import 'whatwg-fetch';
+import { render, screen, waitFor } from '@testing-library/react';
 import { setupServer } from 'msw/node';
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import 'whatwg-fetch';
-
 import { setBackendSrv } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { configureStore } from 'app/store/configureStore';
@@ -76,7 +75,9 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
       <GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />
     );
 
-    expect(container).toBeEmptyDOMElement();
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
   });
 
   it('Should render no warning when choice is All but no active AM instances', async () => {
@@ -89,7 +90,9 @@ describe('GrafanaAlertmanagerDeliveryWarning', () => {
       <GrafanaAlertmanagerDeliveryWarning currentAlertmanager={GRAFANA_RULES_SOURCE_NAME} />
     );
 
-    expect(container).toBeEmptyDOMElement();
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
   });
 });
 

public/app/features/alerting/unified/components/PluginBridge.mock.ts

@@ -1,20 +1,25 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
 // bit of setup to mock HTTP request responses
 import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+
 import { SupportedPlugin } from '../types/pluginBridges';
 
 export const NON_EXISTING_PLUGIN = '__does_not_exist__';
 
 const server = setupServer(
-  rest.get(`/api/plugins/${NON_EXISTING_PLUGIN}/settings`, async (_req, res, ctx) => res(ctx.status(404))),
-  rest.get(`/api/plugins/${SupportedPlugin.Incident}/settings`, async (_req, res, ctx) => {
-    return res(
-      ctx.json({
-        enabled: true,
-      })
-    );
+  http.get(`/api/plugins/${NON_EXISTING_PLUGIN}/settings`, async () =>
+    HttpResponse.json(
+      {},
+      {
+        status: 404,
+      }
+    )
+  ),
+  http.get(`/api/plugins/${SupportedPlugin.Incident}/settings`, async () => {
+    return HttpResponse.json({
+      enabled: true,
+    });
   })
 );
 

public/app/features/alerting/unified/components/contact-points/__mocks__/grafanaManagedServer.ts

@@ -1,4 +1,5 @@
-import { rest } from 'msw';
+import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/node';
 
 import { AlertmanagerChoice, AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -14,15 +15,15 @@ import receiversMock from './receivers.mock.json';
 export default (server: SetupServer) => {
   server.use(
     // this endpoint is a grafana built-in alertmanager
-    rest.get('/api/alertmanager/grafana/config/api/v1/alerts', (_req, res, ctx) =>
-      res(ctx.json<AlertManagerCortexConfig>(alertmanagerMock))
+    http.get('/api/alertmanager/grafana/config/api/v1/alerts', () =>
+      HttpResponse.json<AlertManagerCortexConfig>(alertmanagerMock)
     ),
     // this endpoint is only available for the built-in alertmanager
-    rest.get('/api/alertmanager/grafana/config/api/v1/receivers', (_req, res, ctx) =>
-      res(ctx.json<ReceiversStateDTO[]>(receiversMock))
+    http.get('/api/alertmanager/grafana/config/api/v1/receivers', () =>
+      HttpResponse.json<ReceiversStateDTO[]>(receiversMock)
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json({}, { status: 404 }))
   );
 
   // this endpoint is for rendering the "additional AMs to configure" warning
@@ -41,12 +42,18 @@ export const setupTestEndpointMock = (server: SetupServer) => {
   const mock = jest.fn();
 
   server.use(
-    rest.post('/api/alertmanager/grafana/config/api/v1/receivers/test', async (req, res, ctx) => {
-      const requestBody = await req.json();
-      mock(requestBody);
+    http.post(
+      '/api/alertmanager/grafana/config/api/v1/receivers/test',
+      async ({ request }) => {
+        const requestBody = await request.json();
+        mock(requestBody);
 
-      return res.once(ctx.status(200));
-    })
+        return HttpResponse.json({});
+      },
+      {
+        once: true,
+      }
+    )
   );
 
   return mock;
@@ -56,12 +63,18 @@ export const setupSaveEndpointMock = (server: SetupServer) => {
   const mock = jest.fn();
 
   server.use(
-    rest.post('/api/alertmanager/grafana/config/api/v1/alerts', async (req, res, ctx) => {
-      const requestBody = await req.json();
-      mock(requestBody);
+    http.post(
+      '/api/alertmanager/grafana/config/api/v1/alerts',
+      async ({ request }) => {
+        const requestBody = await request.json();
+        mock(requestBody);
 
-      return res.once(ctx.status(200));
-    })
+        return HttpResponse.json({});
+      },
+      {
+        once: true,
+      }
+    )
   );
 
   return mock;

public/app/features/alerting/unified/components/contact-points/__mocks__/mimirFlavoredServer.ts

@@ -1,4 +1,5 @@
-import { rest } from 'msw';
+import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/lib/node';
 
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -10,14 +11,20 @@ export const MIMIR_DATASOURCE_UID = 'mimir';
 
 export default (server: SetupServer) => {
   server.use(
-    rest.get(`/api/alertmanager/${MIMIR_DATASOURCE_UID}/config/api/v1/alerts`, (_req, res, ctx) =>
-      res(ctx.json<AlertManagerCortexConfig>(mimirAlertmanagerMock))
+    http.get(`/api/alertmanager/${MIMIR_DATASOURCE_UID}/config/api/v1/alerts`, () =>
+      HttpResponse.json(mimirAlertmanagerMock)
     ),
-    rest.get(`/api/datasources/proxy/uid/${MIMIR_DATASOURCE_UID}/api/v1/status/buildinfo`, (_req, res, ctx) =>
-      res(ctx.status(404))
+    http.get(`/api/datasources/proxy/uid/${MIMIR_DATASOURCE_UID}/api/v1/status/buildinfo`, () =>
+      HttpResponse.json<AlertManagerCortexConfig>(
+        {
+          template_files: {},
+          alertmanager_config: {},
+        },
+        { status: 404 }
+      )
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json({}, { status: 404 }))
   );
 
   return server;

public/app/features/alerting/unified/components/contact-points/__mocks__/vanillaAlertmanagerServer.ts

@@ -1,4 +1,5 @@
-import { rest } from 'msw';
+import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/lib/node';
 
 import { AlertmanagerStatus } from 'app/plugins/datasource/alertmanager/types';
@@ -10,11 +11,11 @@ export const VANILLA_ALERTMANAGER_DATASOURCE_UID = 'alertmanager';
 
 export default (server: SetupServer) => {
   server.use(
-    rest.get(`/api/alertmanager/${VANILLA_ALERTMANAGER_DATASOURCE_UID}/api/v2/status`, (_req, res, ctx) =>
-      res(ctx.json<AlertmanagerStatus>(vanillaAlertManagerConfig))
+    http.get(`/api/alertmanager/${VANILLA_ALERTMANAGER_DATASOURCE_UID}/api/v2/status`, () =>
+      HttpResponse.json<AlertmanagerStatus>(vanillaAlertManagerConfig)
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json({}, { status: 404 }))
   );
 
   return server;

public/app/features/alerting/unified/components/rule-viewer/v2/__mocks__/server.ts

@@ -1,7 +1,7 @@
-import { rest } from 'msw';
+import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
 import { SetupServer, setupServer } from 'msw/node';
 
-import 'whatwg-fetch';
 import { AlertmanagersChoiceResponse } from 'app/features/alerting/unified/api/alertmanagerApi';
 import { mockAlertmanagerChoiceResponse } from 'app/features/alerting/unified/mocks/alertmanagerApi';
 import { AlertmanagerChoice } from 'app/plugins/datasource/alertmanager/types';
@@ -33,16 +33,15 @@ export function createMockGrafanaServer() {
 // a user must alsso have permissions for the folder (namespace) in which the alert rule is stored
 function mockFolderAccess(server: SetupServer, accessControl: Partial<Record<AccessControlAction, boolean>>) {
   server.use(
-    rest.get('/api/folders/:uid', (req, res, ctx) => {
-      const uid = req.params.uid;
-
-      return res(
-        ctx.json({
-          title: 'My Folder',
-          uid,
-          accessControl,
-        })
-      );
+    http.get('/api/folders/:uid', ({ request }) => {
+      const url = new URL(request.url);
+      const uid = url.searchParams.get('uid');
+
+      return HttpResponse.json({
+        title: 'My Folder',
+        uid,
+        accessControl,
+      });
     })
   );
 
@@ -51,8 +50,8 @@ function mockFolderAccess(server: SetupServer, accessControl: Partial<Record<Acc
 
 function mockGrafanaIncidentPluginSettings(server: SetupServer) {
   server.use(
-    rest.get('/api/plugins/grafana-incident-app/settings', (_, res, ctx) => {
-      return res(ctx.status(200));
+    http.get('/api/plugins/grafana-incident-app/settings', () => {
+      return HttpResponse.json({});
     })
   );
 }

public/app/features/alerting/unified/components/rules/RuleDetails.test.tsx

@@ -1,4 +1,6 @@
+import 'whatwg-fetch';
 import { render, screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
 import { Provider } from 'react-redux';
@@ -18,6 +20,7 @@ import { AlertmanagersChoiceResponse } from '../../api/alertmanagerApi';
 import { useIsRuleEditable } from '../../hooks/useIsRuleEditable';
 import { getCloudRule, getGrafanaRule } from '../../mocks';
 import { mockAlertmanagerChoiceResponse } from '../../mocks/alertmanagerApi';
+import { SupportedPlugin } from '../../types/pluginBridges';
 
 import { RuleDetails } from './RuleDetails';
 
@@ -42,7 +45,13 @@ const ui = {
   },
 };
 
-const server = setupServer();
+const server = setupServer(
+  http.get(`/api/plugins/${SupportedPlugin.Incident}/settings`, async () => {
+    return HttpResponse.json({
+      enabled: false,
+    });
+  })
+);
 
 const alertmanagerChoiceMockedResponse: AlertmanagersChoiceResponse = {
   alertmanagersChoice: AlertmanagerChoice.Internal,
@@ -74,6 +83,7 @@ beforeEach(() => {
     ],
   });
   server.resetHandlers();
+  mockAlertmanagerChoiceResponse(server, alertmanagerChoiceMockedResponse);
 });
 
 describe('RuleDetails RBAC', () => {
@@ -107,7 +117,6 @@ describe('RuleDetails RBAC', () => {
     it('Should not render Silence button for users wihout the instance create permission', async () => {
       // Arrange
       jest.spyOn(contextSrv, 'hasPermission').mockReturnValue(false);
-      mockAlertmanagerChoiceResponse(server, alertmanagerChoiceMockedResponse);
 
       // Act
       renderRuleDetails(grafanaRule);
@@ -118,8 +127,6 @@ describe('RuleDetails RBAC', () => {
     });
 
     it('Should render Silence button for users with the instance create permissions', async () => {
-      mockAlertmanagerChoiceResponse(server, alertmanagerChoiceMockedResponse);
-
       // Arrange
       jest
         .spyOn(contextSrv, 'hasPermission')

public/app/features/alerting/unified/components/rules/RulesGroup.test.tsx

@@ -108,10 +108,12 @@ describe('Rules group tests', () => {
       groups: [group],
     };
 
-    it('Should hide delete and edit group buttons', () => {
+    it('Should hide delete and edit group buttons', async () => {
       // Act
       mockUseHasRuler(true, true);
+      mockFolderApi(server).folder('cpu-usage', mockFolder({ uid: 'cpu-usage', canSave: false }));
       renderRulesGroup(namespace, group);
+      expect(await screen.findByTestId('rule-group')).toBeInTheDocument();
 
       // Assert
       expect(ui.deleteGroupButton.query()).not.toBeInTheDocument();