chore(deps): upgrade to msw v2 [EE-6489] (#10911)

app/react/portainer/HomeView/BackupFailedPanel.test.tsx

@@ -1,4 +1,6 @@
-import { server, rest } from '@/setup-tests/server';
+import { http, HttpResponse } from 'msw';
+
+import { server } from '@/setup-tests/server';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
 import { isoDate } from '@/portainer/filters/filters';
 
@@ -7,8 +9,8 @@ import { BackupFailedPanel } from './BackupFailedPanel';
 test('when backup failed, should show message', async () => {
   const timestamp = 1500;
   server.use(
-    rest.get('/api/backup/s3/status', (req, res, ctx) =>
-      res(ctx.json({ Failed: true, TimestampUTC: timestamp }))
+    http.get('/api/backup/s3/status', () =>
+      HttpResponse.json({ Failed: true, TimestampUTC: timestamp })
     )
   );
 
@@ -26,8 +28,8 @@ test('when backup failed, should show message', async () => {
 
 test("when user is using less nodes then allowed he shouldn't see message", async () => {
   server.use(
-    rest.get('/api/backup/s3/status', (req, res, ctx) =>
-      res(ctx.json({ Failed: false }))
+    http.get('/api/backup/s3/status', () =>
+      HttpResponse.json({ Failed: false })
     )
   );
   const { findByText } = renderWithQueryClient(<BackupFailedPanel />);

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx

@@ -1,3 +1,5 @@
+import { http, HttpResponse } from 'msw';
+
 import {
   EnvironmentGroup,
   EnvironmentGroupId,
@@ -8,7 +10,7 @@ import { UserViewModel } from '@/portainer/models/user';
 import { Tag } from '@/portainer/tags/types';
 import { createMockEnvironment } from '@/react-tools/test-mocks';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
-import { server, rest } from '@/setup-tests/server';
+import { server } from '@/setup-tests/server';
 
 import { EnvironmentItem } from './EnvironmentItem';
 
@@ -39,7 +41,7 @@ function renderComponent(
 ) {
   const user = new UserViewModel({ Username: 'test', Role: isAdmin ? 1 : 2 });
 
-  server.use(rest.get('/api/tags', (req, res, ctx) => res(ctx.json(tags))));
+  server.use(http.get('/api/tags', () => HttpResponse.json(tags)));
 
   return renderWithQueryClient(
     <UserContext.Provider value={{ user }}>

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.test.tsx

@@ -1,8 +1,10 @@
+import { http, HttpResponse } from 'msw';
+
 import { Environment } from '@/react/portainer/environments/types';
 import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
-import { rest, server } from '@/setup-tests/server';
+import { server } from '@/setup-tests/server';
 
 import { EnvironmentList } from './EnvironmentList';
 
@@ -37,12 +39,13 @@ async function renderComponent(
   const user = new UserViewModel({ Username: 'test', Role: isAdmin ? 1 : 2 });
 
   server.use(
-    rest.get('/api/endpoints', (req, res, ctx) =>
-      res(
-        ctx.set('x-total-available', environments.length.toString()),
-        ctx.set('x-total-count', environments.length.toString()),
-        ctx.json(environments)
-      )
+    http.get('/api/endpoints', () =>
+      HttpResponse.json(environments, {
+        headers: {
+          'x-total-available': environments.length.toString(),
+          'x-total-count': environments.length.toString(),
+        },
+      })
     )
   );
 

app/react/portainer/HomeView/LicenseNodePanel.test.tsx

@@ -1,4 +1,6 @@
-import { server, rest } from '@/setup-tests/server';
+import { http, HttpResponse } from 'msw';
+
+import { server } from '@/setup-tests/server';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
 
 import { LicenseType } from '../licenses/types';
@@ -9,12 +11,10 @@ test('when user is using more nodes then allowed he should see message', async (
   const allowed = 2;
   const used = 5;
   server.use(
-    rest.get('/api/licenses/info', (req, res, ctx) =>
-      res(ctx.json({ nodes: allowed, type: LicenseType.Subscription }))
+    http.get('/api/licenses/info', () =>
+      HttpResponse.json({ nodes: allowed, type: LicenseType.Subscription })
     ),
-    rest.get('/api/system/nodes', (req, res, ctx) =>
-      res(ctx.json({ nodes: used }))
-    )
+    http.get('/api/system/nodes', () => HttpResponse.json({ nodes: used }))
   );
 
   const { findByText } = renderWithQueryClient(<LicenseNodePanel />);
@@ -30,12 +30,10 @@ test("when user is using less nodes then allowed he shouldn't see message", asyn
   const allowed = 5;
   const used = 2;
   server.use(
-    rest.get('/api/licenses/info', (req, res, ctx) =>
-      res(ctx.json({ nodes: allowed, type: LicenseType.Subscription }))
+    http.get('/api/licenses/info', () =>
+      HttpResponse.json({ nodes: allowed, type: LicenseType.Subscription })
     ),
-    rest.get('/api/system/nodes', (req, res, ctx) =>
-      res(ctx.json({ nodes: used }))
-    )
+    http.get('/api/system/nodes', () => HttpResponse.json({ nodes: used }))
   );
 
   const { findByText } = renderWithQueryClient(<LicenseNodePanel />);

app/react/portainer/access-control/AccessControlForm/AccessControlForm.test.tsx

@@ -1,4 +1,6 @@
-import { server, rest } from '@/setup-tests/server';
+import { http, HttpResponse } from 'msw';
+
+import { server } from '@/setup-tests/server';
 import { UserContext } from '@/react/hooks/useUser';
 import { UserViewModel } from '@/portainer/models/user';
 import { renderWithQueryClient, within } from '@/react-tools/test-utils';
@@ -305,11 +307,11 @@ async function renderComponent(
   const state = { user };
 
   if (teams) {
-    server.use(rest.get('/api/teams', (req, res, ctx) => res(ctx.json(teams))));
+    server.use(http.get('/api/teams', () => HttpResponse.json(teams)));
   }
 
   if (users) {
-    server.use(rest.get('/api/users', (req, res, ctx) => res(ctx.json(users))));
+    server.use(http.get('/api/users', () => HttpResponse.json(users)));
   }
 
   const renderResult = renderWithQueryClient(

app/react/portainer/access-control/AccessControlPanel/AccessControlPaneDetails.test.tsx

@@ -1,8 +1,9 @@
 import _ from 'lodash';
+import { http, HttpResponse } from 'msw';
 
 import { createMockTeams, createMockUsers } from '@/react-tools/test-mocks';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
-import { rest, server } from '@/setup-tests/server';
+import { server } from '@/setup-tests/server';
 import { Role } from '@/portainer/users/types';
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
 
@@ -86,7 +87,7 @@ for (let i = 0; i < inheritanceTests.length; i += 1) {
 test('when resource is limited to specific users, show number of users', async () => {
   const users = createMockUsers(10, Role.Standard);
 
-  server.use(rest.get('/api/users', (req, res, ctx) => res(ctx.json(users))));
+  server.use(http.get('/api/users', () => HttpResponse.json(users)));
 
   const restrictedToUsers = _.sampleSize(users, 3);
 
@@ -114,7 +115,7 @@ test('when resource is limited to specific users, show number of users', async (
 test('when resource is limited to specific teams, show comma separated list of their names', async () => {
   const teams = createMockTeams(10);
 
-  server.use(rest.get('/api/teams', (req, res, ctx) => res(ctx.json(teams))));
+  server.use(http.get('/api/teams', () => HttpResponse.json(teams)));
 
   const restrictedToTeams = _.sampleSize(teams, 3);
 

app/react/portainer/gitops/GitForm.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
 import { Form, Formik } from 'formik';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
 import { GitCredential } from '@/react/portainer/account/git-credentials/types';
@@ -14,28 +14,25 @@ export default {
   parameters: {
     msw: {
       handlers: [
-        rest.get<Array<GitCredential>, { userId: string }>(
+        http.get<{ userId: string }, Array<GitCredential>>(
           '/api/users/:userId/gitcredentials',
-          (req, res, ctx) =>
-            res(
-              ctx.status(200),
-              ctx.json<Array<GitCredential>>([
-                {
-                  id: 1,
-                  name: 'credential-1',
-                  username: 'username-1',
-                  userId: parseInt(req.params.userId, 10),
-                  creationDate: 0,
-                },
-                {
-                  id: 2,
-                  name: 'credential-2',
-                  username: 'username-2',
-                  userId: parseInt(req.params.userId, 10),
-                  creationDate: 0,
-                },
-              ])
-            )
+          ({ params }) =>
+            HttpResponse.json([
+              {
+                id: 1,
+                name: 'credential-1',
+                username: 'username-1',
+                userId: parseInt(params.userId, 10),
+                creationDate: 0,
+              },
+              {
+                id: 2,
+                name: 'credential-2',
+                username: 'username-2',
+                userId: parseInt(params.userId, 10),
+                creationDate: 0,
+              },
+            ])
         ),
       ],
     },

app/react/portainer/licenses/license.service.test.ts

@@ -1,4 +1,6 @@
-import { server, rest } from '@/setup-tests/server';
+import { http, HttpResponse } from 'msw';
+
+import { server } from '@/setup-tests/server';
 
 import { getLicenses } from './license.service';
 import type { License } from './types';
@@ -9,9 +11,7 @@ describe('getLicenses', () => {
     const thenFn = jest.fn();
 
     const data: License[] = [];
-    server.use(
-      rest.get('/api/licenses', (req, res, ctx) => res(ctx.json(data)))
-    );
+    server.use(http.get('/api/licenses', () => HttpResponse.json(data)));
 
     const promise = getLicenses();
 
@@ -29,8 +29,8 @@ describe('getLicenses', () => {
     const details = 'details';
 
     server.use(
-      rest.get('/api/licenses', (req, res, ctx) =>
-        res(ctx.status(400), ctx.json({ message, details }))
+      http.get('/api/licenses', () =>
+        HttpResponse.json({ message, details }, { status: 400 })
       )
     );