From 9182efc57af94f1986e03c708cd1ab742fe87af1 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:37:55 +0100
Subject: [PATCH] Fix MSW and storybook setup (#2976)

* Fix MSW and storybook setup

* Fix

* Fix

* Fixes

* Fix

* Fix

* Fix
---
 .../twenty-front/.storybook/preview-head.html |   7 +-
 packages/twenty-front/.storybook/preview.ts   |  19 +-
 packages/twenty-front/package.json            |   4 +-
 .../twenty-front/public/mockServiceWorker.js  | 172 +++++++-------
 .../twenty-front/src/testing/graphqlMocks.ts  | 127 +++++------
 yarn.lock                                     | 211 +++++++++---------
 6 files changed, 260 insertions(+), 280 deletions(-)

diff --git a/packages/twenty-front/.storybook/preview-head.html b/packages/twenty-front/.storybook/preview-head.html
index 06bfbae2f7..732858d597 100644
--- a/packages/twenty-front/.storybook/preview-head.html
+++ b/packages/twenty-front/.storybook/preview-head.html
@@ -1,12 +1,9 @@
 <link
-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
-rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+  rel="stylesheet"
 />
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
-<!-- <script>
-  window.global = window;
-</script> -->
 
 <style type="text/css">
 body {
diff --git a/packages/twenty-front/.storybook/preview.ts b/packages/twenty-front/.storybook/preview.ts
index a799792241..d78360387f 100644
--- a/packages/twenty-front/.storybook/preview.ts
+++ b/packages/twenty-front/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
 import { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-import { initialize, mswLoader } from 'msw-storybook-addon';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
@@ -9,7 +9,20 @@ import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
 import 'react-loading-skeleton/dist/skeleton.css';
 
-initialize({ onUnhandledRequest: 'bypass' });
+initialize({
+  onUnhandledRequest: async (request: Request) => {
+    const fileExtensionsToIgnore = /\.(ts|tsx|js|jsx|svg|css|png)(\?v=[a-zA-Z0-9]+)?/;
+
+    if (fileExtensionsToIgnore.test(request.url)) {
+      return;
+    }
+
+    const requestBody = await request.json();
+    console.warn(`Unhandled ${request.method} request to ${request.url} 
+      with payload ${JSON.stringify(requestBody)}\n
+      This request should be mocked with MSW`);
+  },
+});
 
 const preview: Preview = {
   decorators: [
@@ -22,6 +35,7 @@ const preview: Preview = {
       Provider: ThemeProvider,
     }),
     RootDecorator,
+    mswDecorator,
   ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -39,7 +53,6 @@ const preview: Preview = {
     cookie: {
       tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
     },
-    loaders: [mswLoader],
   },
 };
 
diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
index 9479243546..2c3e1098a3 100644
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@@ -145,8 +145,8 @@
     "http-server": "^14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
+    "msw": "^2.0.11",
+    "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "prettier": "^3.1.0",
     "storybook": "^7.6.3",
     "storybook-addon-cookie": "^3.1.0",
diff --git a/packages/twenty-front/public/mockServiceWorker.js b/packages/twenty-front/public/mockServiceWorker.js
index 51d85eeebf..e369128ec0 100644
--- a/packages/twenty-front/public/mockServiceWorker.js
+++ b/packages/twenty-front/public/mockServiceWorker.js
@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.2).
+ * Mock Service Worker (2.0.11).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
 self.addEventListener('install', function () {
@@ -86,12 +87,6 @@ self.addEventListener('message', async function (event) {
 
 self.addEventListener('fetch', function (event) {
   const { request } = event
-  const accept = request.headers.get('accept') || ''
-
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {
@@ -112,29 +107,8 @@ self.addEventListener('fetch', function (event) {
   }
 
   // Generate unique request ID.
-  const requestId = Math.random().toString(16).slice(2)
-
-  event.respondWith(
-    handleRequest(event, requestId).catch((error) => {
-      if (error.name === 'NetworkError') {
-        console.warn(
-          '[MSW] Successfully emulated a network error for the "%s %s" request.',
-          request.method,
-          request.url,
-        )
-        return
-      }
-
-      // At this point, any exception indicates an issue with the original request/response.
-      console.error(
-        `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-        request.method,
-        request.url,
-        `${error.name}: ${error.message}`,
-      )
-    }),
-  )
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
 })
 
 async function handleRequest(event, requestId) {
@@ -146,21 +120,24 @@ async function handleRequest(event, requestId) {
   // this message will pend indefinitely.
   if (client && activeClientIds.has(client.id)) {
     ;(async function () {
-      const clonedResponse = response.clone()
-      sendToClient(client, {
-        type: 'RESPONSE',
-        payload: {
-          requestId,
-          type: clonedResponse.type,
-          ok: clonedResponse.ok,
-          status: clonedResponse.status,
-          statusText: clonedResponse.statusText,
-          body:
-            clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: Object.fromEntries(clonedResponse.headers.entries()),
-          redirected: clonedResponse.redirected,
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
         },
-      })
+        [responseClone.body],
+      )
     })()
   }
 
@@ -196,20 +173,20 @@ async function resolveMainClient(event) {
 
 async function getResponse(event, client, requestId) {
   const { request } = event
-  const clonedRequest = request.clone()
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
 
   function passthrough() {
-    // Clone the request because it might've been already used
-    // (i.e. its body has been read and sent to the client).
-    const headers = Object.fromEntries(clonedRequest.headers.entries())
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-    // Remove MSW-specific request headers so the bypassed requests
-    // comply with the server's CORS preflight check.
-    // Operate with the headers as an object because request "Headers"
-    // are immutable.
-    delete headers['x-msw-bypass']
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
-    return fetch(clonedRequest, { headers })
+    return fetch(requestClone, { headers })
   }
 
   // Bypass mocking when the client is not active.
@@ -227,31 +204,36 @@ async function getResponse(event, client, requestId) {
 
   // Bypass requests with the explicit bypass header.
   // Such requests can be issued by "ctx.fetch()".
-  if (request.headers.get('x-msw-bypass') === 'true') {
+  const mswIntention = request.headers.get('x-msw-intention')
+  if (['bypass', 'passthrough'].includes(mswIntention)) {
     return passthrough()
   }
 
   // Notify the client that a request has been intercepted.
-  const clientMessage = await sendToClient(client, {
-    type: 'REQUEST',
-    payload: {
-      id: requestId,
-      url: request.url,
-      method: request.method,
-      headers: Object.fromEntries(request.headers.entries()),
-      cache: request.cache,
-      mode: request.mode,
-      credentials: request.credentials,
-      destination: request.destination,
-      integrity: request.integrity,
-      redirect: request.redirect,
-      referrer: request.referrer,
-      referrerPolicy: request.referrerPolicy,
-      body: await request.text(),
-      bodyUsed: request.bodyUsed,
-      keepalive: request.keepalive,
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
     },
-  })
+    [requestBuffer],
+  )
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
@@ -261,21 +243,12 @@ async function getResponse(event, client, requestId) {
     case 'MOCK_NOT_FOUND': {
       return passthrough()
     }
-
-    case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.data
-      const networkError = new Error(message)
-      networkError.name = name
-
-      // Rejecting a "respondWith" promise emulates a network error.
-      throw networkError
-    }
   }
 
   return passthrough()
 }
 
-function sendToClient(client, message) {
+function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
     const channel = new MessageChannel()
 
@@ -287,17 +260,28 @@ function sendToClient(client, message) {
       resolve(event.data)
     }
 
-    client.postMessage(message, [channel.port2])
-  })
-}
-
-function sleep(timeMs) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, timeMs)
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
   })
 }
 
 async function respondWithMock(response) {
-  await sleep(response.delay)
-  return new Response(response.body, response)
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
 }
diff --git a/packages/twenty-front/src/testing/graphqlMocks.ts b/packages/twenty-front/src/testing/graphqlMocks.ts
index b75bc30401..efdbc8c27f 100644
--- a/packages/twenty-front/src/testing/graphqlMocks.ts
+++ b/packages/twenty-front/src/testing/graphqlMocks.ts
@@ -1,16 +1,14 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { graphql } from 'msw';
+import { graphql, HttpResponse } from 'msw';
 
 import { CREATE_EVENT } from '@/analytics/graphql/queries/createEvent';
 import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
 import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
-import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { mockedActivities } from '~/testing/mock-data/activities';
 
 import { mockedCompaniesData } from './mock-data/companies';
 import { mockedObjectMetadataItems } from './mock-data/metadata';
 import { mockedPeopleData } from './mock-data/people';
-import { mockedUsersData } from './mock-data/users';
 import { mockedViewFieldsData } from './mock-data/view-fields';
 import { mockedViewsData } from './mock-data/views';
 
@@ -20,53 +18,52 @@ const metadataGraphql = graphql.link(
 
 export const graphqlMocks = {
   handlers: [
-    graphql.query(getOperationName(GET_CURRENT_USER) ?? '', (req, res, ctx) => {
-      return res(
-        ctx.data({
-          currentUser: mockedUsersData[0],
-        }),
-      );
-    }),
-    graphql.mutation(getOperationName(CREATE_EVENT) ?? '', (req, res, ctx) => {
-      return res(
-        ctx.data({
+    // graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+    //   return HttpResponse.json({
+    //     data: {
+    //       currentUser: mockedUsersData[0],
+    //     },
+    //   });
+    // }),
+    graphql.mutation(getOperationName(CREATE_EVENT) ?? '', () => {
+      return HttpResponse.json({
+        data: {
           createEvent: { success: 1, __typename: 'Event' },
-        }),
-      );
+        },
+      });
     }),
-    graphql.query(
-      getOperationName(GET_CLIENT_CONFIG) ?? '',
-      (req, res, ctx) => {
-        return res(
-          ctx.data({
-            clientConfig: {
-              signInPrefilled: true,
-              dataModelSettingsEnabled: true,
-              developersSettingsEnabled: true,
-              debugMode: false,
-              authProviders: { google: true, password: true, magicLink: false },
-              telemetry: { enabled: false, anonymizationEnabled: true },
-              support: {
-                supportDriver: 'front',
-                supportFrontChatId: null,
-              },
+    graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
+      return HttpResponse.json({
+        data: {
+          clientConfig: {
+            signInPrefilled: true,
+            dataModelSettingsEnabled: true,
+            developersSettingsEnabled: true,
+            debugMode: false,
+            authProviders: { google: true, password: true, magicLink: false },
+            telemetry: { enabled: false, anonymizationEnabled: true },
+            support: {
+              supportDriver: 'front',
+              supportFrontChatId: null,
             },
-          }),
-        );
-      },
-    ),
+          },
+        },
+      });
+    }),
     metadataGraphql.query(
       getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
-      (req, res, ctx) => {
-        return res(ctx.data({ objects: mockedObjectMetadataItems }));
+      () => {
+        return HttpResponse.json({
+          data: { objects: mockedObjectMetadataItems },
+        });
       },
     ),
-    graphql.query('FindManyViews', (req, res, ctx) => {
-      const objectMetadataId = req.variables.filter.objectMetadataId.eq;
-      const viewType = req.variables.filter.type.eq;
+    graphql.query('FindManyViews', ({ variables }) => {
+      const objectMetadataId = variables.filter.objectMetadataId.eq;
+      const viewType = variables.filter.type.eq;
 
-      return res(
-        ctx.data({
+      return HttpResponse.json({
+        data: {
           views: {
             edges: mockedViewsData
               .filter(
@@ -85,14 +82,14 @@ export const graphqlMocks = {
               endCursor: null,
             },
           },
-        }),
-      );
+        },
+      });
     }),
-    graphql.query('FindManyViewFields', (req, res, ctx) => {
-      const viewId = req.variables.filter.view.eq;
+    graphql.query('FindManyViewFields', ({ variables }) => {
+      const viewId = variables.filter.view.eq;
 
-      return res(
-        ctx.data({
+      return HttpResponse.json({
+        data: {
           viewFields: {
             edges: mockedViewFieldsData
               .filter((viewField) => viewField.viewId === viewId)
@@ -107,12 +104,12 @@ export const graphqlMocks = {
               endCursor: null,
             },
           },
-        }),
-      );
+        },
+      });
     }),
-    graphql.query('FindManyCompanies', (req, res, ctx) => {
-      return res(
-        ctx.data({
+    graphql.query('FindManyCompanies', () => {
+      return HttpResponse.json({
+        data: {
           companies: {
             edges: mockedCompaniesData.map((company) => ({
               node: company,
@@ -125,12 +122,12 @@ export const graphqlMocks = {
               endCursor: null,
             },
           },
-        }),
-      );
+        },
+      });
     }),
-    graphql.query('FindManyPeople', (req, res, ctx) => {
-      return res(
-        ctx.data({
+    graphql.query('FindManyPeople', () => {
+      return HttpResponse.json({
+        data: {
           people: {
             edges: mockedPeopleData.map((person) => ({
               node: person,
@@ -143,12 +140,12 @@ export const graphqlMocks = {
               endCursor: null,
             },
           },
-        }),
-      );
+        },
+      });
     }),
-    graphql.query('FindManyActivities', (req, res, ctx) => {
-      return res(
-        ctx.data({
+    graphql.query('FindManyActivities', () => {
+      return HttpResponse.json({
+        data: {
           activities: {
             edges: mockedActivities.map((activities) => ({
               node: activities,
@@ -161,8 +158,8 @@ export const graphqlMocks = {
               endCursor: null,
             },
           },
-        }),
-      );
+        },
+      });
     }),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index 86047ebd0d..a28726ac0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3113,6 +3113,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bundled-es-modules/cookie@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@bundled-es-modules/cookie@npm:2.0.0"
+  dependencies:
+    cookie: "npm:^0.5.0"
+  checksum: 0655dd331b35d7b5b6dd2301c3bcfb7233018c0e3235a40ced1d53f00463ab92dc01f0091f153812867bc0ef0f8e0a157a30acb16e8d7ef149702bf8db9fe7a6
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/js-levenshtein@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@bundled-es-modules/js-levenshtein@npm:2.0.1"
+  dependencies:
+    js-levenshtein: "npm:^1.1.6"
+  checksum: 9c9a794a8f1412fe9f285a20aa38b91933ab1879e905be29acc4898932f245d20819e0fad04012d743eabb24ed153533a0deb1f9b46816aafe426db18042a9ae
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/statuses@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@bundled-es-modules/statuses@npm:1.0.1"
+  dependencies:
+    statuses: "npm:^2.0.1"
+  checksum: c1a8ede3efa8da61ccda4b98e773582a9733edfbeeee569d4630785f8e018766202edb190a754a3ec7a7f6bd738e857829affc2fdb676b6dab4db1bb44e62785
+  languageName: node
+  linkType: hard
+
 "@chakra-ui/accordion@npm:^2.3.0":
   version: 2.3.1
   resolution: "@chakra-ui/accordion@npm:2.3.1"
@@ -6703,29 +6730,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mswjs/cookies@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "@mswjs/cookies@npm:0.2.2"
-  dependencies:
-    "@types/set-cookie-parser": "npm:^2.4.0"
-    set-cookie-parser: "npm:^2.4.6"
-  checksum: f950062538d431674d581309cf19884fc4d3f57e2a276164cac0c9a3250071d42464ba7825d13be14c703ca5a912d62a62626f4a068d8f36d1629dbb63bde740
+"@mswjs/cookies@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@mswjs/cookies@npm:1.1.0"
+  checksum: c8442b77f4d4f72c63a29049bbd33e7f9d85517471c09e1a1a71f424e5261feee5311b096d42d4447a51f199017b2227feb2b5dd77da83b733917560ace58940
   languageName: node
   linkType: hard
 
-"@mswjs/interceptors@npm:^0.17.10":
-  version: 0.17.10
-  resolution: "@mswjs/interceptors@npm:0.17.10"
+"@mswjs/interceptors@npm:^0.25.13":
+  version: 0.25.13
+  resolution: "@mswjs/interceptors@npm:0.25.13"
   dependencies:
-    "@open-draft/until": "npm:^1.0.3"
-    "@types/debug": "npm:^4.1.7"
-    "@xmldom/xmldom": "npm:^0.8.3"
-    debug: "npm:^4.3.3"
-    headers-polyfill: "npm:3.2.5"
+    "@open-draft/deferred-promise": "npm:^2.2.0"
+    "@open-draft/logger": "npm:^0.3.0"
+    "@open-draft/until": "npm:^2.0.0"
+    is-node-process: "npm:^1.2.0"
     outvariant: "npm:^1.2.1"
-    strict-event-emitter: "npm:^0.2.4"
-    web-encoding: "npm:^1.1.5"
-  checksum: 0343a93711b60c321c40733d6bf2720a736d8e0730f5d0d9916ee4a24abfcfca4a83d1e4b2e21c3affef4fc61f04588104be002fbc8258dc4b0d202c384ade33
+    strict-event-emitter: "npm:^0.5.1"
+  checksum: b08ae12f32e4c85c656dad06e96133020dd2388b111184a9c4313de6855c56d7f85b9e57bb0cf0a313253a0a7c37f29257c1c37bcf1b6bb9e99decf0726c80ea
   languageName: node
   linkType: hard
 
@@ -7296,17 +7318,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@open-draft/deferred-promise@npm:^2.1.0":
+"@open-draft/deferred-promise@npm:^2.1.0, @open-draft/deferred-promise@npm:^2.2.0":
   version: 2.2.0
   resolution: "@open-draft/deferred-promise@npm:2.2.0"
   checksum: eafc1b1d0fc8edb5e1c753c5e0f3293410b40dde2f92688211a54806d4136887051f39b98c1950370be258483deac9dfd17cf8b96557553765198ef2547e4549
   languageName: node
   linkType: hard
 
-"@open-draft/until@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@open-draft/until@npm:1.0.3"
-  checksum: f88bcd774b55359d14a4fa80f7bfe7d9d6d26a5995e94e823e43b211656daae3663e983f0a996937da286d22f6f5da2087b661845302f236ba27f8529dcd14fb
+"@open-draft/logger@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@open-draft/logger@npm:0.3.0"
+  dependencies:
+    is-node-process: "npm:^1.2.0"
+    outvariant: "npm:^1.4.0"
+  checksum: 90010647b22e9693c16258f4f9adb034824d1771d3baa313057b9a37797f571181005bc50415a934eaf7c891d90ff71dcd7a9d5048b0b6bb438f31bef2c7c5c1
+  languageName: node
+  linkType: hard
+
+"@open-draft/until@npm:^2.0.0, @open-draft/until@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@open-draft/until@npm:2.1.0"
+  checksum: 61d3f99718dd86bb393fee2d7a785f961dcaf12f2055f0c693b27f4d0cd5f7a03d498a6d9289773b117590d794a43cd129366fd8e99222e4832f67b1653d54cf
   languageName: node
   linkType: hard
 
@@ -11542,7 +11574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/debug@npm:^4.0.0, @types/debug@npm:^4.1.7":
+"@types/debug@npm:^4.0.0":
   version: 4.1.12
   resolution: "@types/debug@npm:4.1.12"
   dependencies:
@@ -12474,15 +12506,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/set-cookie-parser@npm:^2.4.0":
-  version: 2.4.7
-  resolution: "@types/set-cookie-parser@npm:2.4.7"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 3c4b5168fe2e8f1f70e39de718fab79bf5386dcb3217b16936d732b985af2372eb0670190c0c5c9c3e68ace34dd6e52e9664439cec06354c278601f659c396ff
-  languageName: node
-  linkType: hard
-
 "@types/sockjs@npm:^0.3.33":
   version: 0.3.36
   resolution: "@types/sockjs@npm:0.3.36"
@@ -12499,6 +12522,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/statuses@npm:^2.0.1":
+  version: 2.0.4
+  resolution: "@types/statuses@npm:2.0.4"
+  checksum: 9e5efd048a7088ab8ca0e0eca87f160ce0afc11fd06a85e130823e12290497c9b0a3a045a8df264b90237a4e92a79b0de9ed1fd6b497ac90c87e58fed7312755
+  languageName: node
+  linkType: hard
+
 "@types/superagent@npm:*":
   version: 4.1.24
   resolution: "@types/superagent@npm:4.1.24"
@@ -13211,13 +13241,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@xmldom/xmldom@npm:^0.8.3":
-  version: 0.8.10
-  resolution: "@xmldom/xmldom@npm:0.8.10"
-  checksum: c7647c442502720182b0d65b17d45d2d95317c1c8c497626fe524bda79b4fb768a9aa4fae2da919f308e7abcff7d67c058b102a9d641097e9a57f0b80187851f
-  languageName: node
-  linkType: hard
-
 "@xstate/fsm@npm:1.4.0":
   version: 1.4.0
   resolution: "@xstate/fsm@npm:1.4.0"
@@ -13298,13 +13321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@zxing/text-encoding@npm:0.9.0":
-  version: 0.9.0
-  resolution: "@zxing/text-encoding@npm:0.9.0"
-  checksum: d15bff181d46c2ab709e7242801a8d40408aa8c19b44462e5f60e766bf59105b44957914ab6baab60d10d466a5e965f21fe890c67dfdb7d5c7f940df457b4d0d
-  languageName: node
-  linkType: hard
-
 "abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
@@ -16804,20 +16820,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie@npm:0.5.0":
+"cookie@npm:0.5.0, cookie@npm:^0.5.0":
   version: 0.5.0
   resolution: "cookie@npm:0.5.0"
   checksum: c01ca3ef8d7b8187bae434434582288681273b5a9ed27521d4d7f9f7928fe0c920df0decd9f9d3bbd2d14ac432b8c8cf42b98b3bdd5bfe0e6edddeebebe8b61d
   languageName: node
   linkType: hard
 
-"cookie@npm:^0.4.2":
-  version: 0.4.2
-  resolution: "cookie@npm:0.4.2"
-  checksum: beab41fbd7c20175e3a2799ba948c1dcc71ef69f23fe14eeeff59fc09f50c517b0f77098db87dbb4c55da802f9d86ee86cdc1cd3efd87760341551838d53fca2
-  languageName: node
-  linkType: hard
-
 "cookiejar@npm:^2.1.4":
   version: 2.1.4
   resolution: "cookiejar@npm:2.1.4"
@@ -19258,7 +19267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"events@npm:^3.2.0, events@npm:^3.3.0":
+"events@npm:^3.2.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
   checksum: d6b6f2adbccbcda74ddbab52ed07db727ef52e31a61ed26db9feb7dc62af7fc8e060defa65e5f8af9449b86b52cc1a1f6a79f2eafcf4e62add2b7a1fa4a432f6
@@ -21527,10 +21536,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"headers-polyfill@npm:3.2.5":
-  version: 3.2.5
-  resolution: "headers-polyfill@npm:3.2.5"
-  checksum: 10202f4ebfaecd6aa31305f29664f876ac01d9174a3fb8fcc5a0df3eaf9c1767fb0d6cf6f961484f2bfd2101b6768090976f146bd88aeedd07af4e741cb2dcb7
+"headers-polyfill@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "headers-polyfill@npm:4.0.2"
+  checksum: 865736fa62028e2368f528a4d0fa0fc0f9cb44570a5acb79e38fc0b860b5a9bccdbf84553bb38b03d44e2aa85078256d70011cb731308aeea49f7bbafa3d66b0
   languageName: node
   linkType: hard
 
@@ -27067,48 +27076,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"msw-storybook-addon@npm:^1.10.0":
-  version: 1.10.0
-  resolution: "msw-storybook-addon@npm:1.10.0"
+"msw-storybook-addon@npm:2.0.0--canary.122.b3ed3b1.0":
+  version: 2.0.0--canary.122.b3ed3b1.0
+  resolution: "msw-storybook-addon@npm:2.0.0--canary.122.b3ed3b1.0"
   dependencies:
     is-node-process: "npm:^1.0.1"
   peerDependencies:
-    msw: ">=0.35.0 <2.0.0"
-  checksum: bf86a043cfdfd2af0ea7212679ea9f4a0a653799011b57f65fcb36fb5213fb91109ff172b89ffa00aa5083bb55890ef2d2c7fea91f6a0016234d469c67bc50b3
+    msw: ^2.0.0
+  checksum: b7652cf5e0ec712082594f9fb587d4dd351a417102792f3525fd6a5bef9688db1810dbe31981a642a5d29a46df6348498c0f9fa2906d97c9f1b3fda0d13131a3
   languageName: node
   linkType: hard
 
-"msw@npm:1.3.2":
-  version: 1.3.2
-  resolution: "msw@npm:1.3.2"
+"msw@npm:^2.0.11":
+  version: 2.0.11
+  resolution: "msw@npm:2.0.11"
   dependencies:
-    "@mswjs/cookies": "npm:^0.2.2"
-    "@mswjs/interceptors": "npm:^0.17.10"
-    "@open-draft/until": "npm:^1.0.3"
+    "@bundled-es-modules/cookie": "npm:^2.0.0"
+    "@bundled-es-modules/js-levenshtein": "npm:^2.0.1"
+    "@bundled-es-modules/statuses": "npm:^1.0.1"
+    "@mswjs/cookies": "npm:^1.1.0"
+    "@mswjs/interceptors": "npm:^0.25.13"
+    "@open-draft/until": "npm:^2.1.0"
     "@types/cookie": "npm:^0.4.1"
     "@types/js-levenshtein": "npm:^1.1.1"
-    chalk: "npm:^4.1.1"
+    "@types/statuses": "npm:^2.0.1"
+    chalk: "npm:^4.1.2"
     chokidar: "npm:^3.4.2"
-    cookie: "npm:^0.4.2"
     graphql: "npm:^16.8.1"
-    headers-polyfill: "npm:3.2.5"
+    headers-polyfill: "npm:^4.0.1"
     inquirer: "npm:^8.2.0"
     is-node-process: "npm:^1.2.0"
     js-levenshtein: "npm:^1.1.6"
-    node-fetch: "npm:^2.6.7"
     outvariant: "npm:^1.4.0"
     path-to-regexp: "npm:^6.2.0"
-    strict-event-emitter: "npm:^0.4.3"
+    strict-event-emitter: "npm:^0.5.0"
     type-fest: "npm:^2.19.0"
     yargs: "npm:^17.3.1"
   peerDependencies:
-    typescript: ">= 4.4.x <= 5.2.x"
+    typescript: ">= 4.7.x <= 5.2.x"
   peerDependenciesMeta:
     typescript:
       optional: true
   bin:
     msw: cli/index.js
-  checksum: c644d8e80b12b15c7b366aa6e0b39442f3ffd3b94824171e562066d8535c720fd824d84986d738a427720e59228660c11991bf724e4dd9face00b0b0f2af8f0d
+  checksum: 29e272c1c11e706fc59436f8f0f08d85faad055d54d88e3d43b421913f4614950ee25481296d48de835dcbe36f65a76e554f7217b37065419d7f3f3a42cad271
   languageName: node
   linkType: hard
 
@@ -31932,13 +31943,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-cookie-parser@npm:^2.4.6":
-  version: 2.6.0
-  resolution: "set-cookie-parser@npm:2.6.0"
-  checksum: 739da029f0e56806a103fcd5501d9c475e19e77bd8274192d7ae5c374ae714a82bba9a7ac00b0330a18227c5644b08df9e442240527be578f5a6030f9bb2bb80
-  languageName: node
-  linkType: hard
-
 "set-function-length@npm:^1.1.1":
   version: 1.1.1
   resolution: "set-function-length@npm:1.1.1"
@@ -32578,7 +32582,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:2.0.1":
+"statuses@npm:2.0.1, statuses@npm:^2.0.1":
   version: 2.0.1
   resolution: "statuses@npm:2.0.1"
   checksum: 34378b207a1620a24804ce8b5d230fea0c279f00b18a7209646d5d47e419d1cc23e7cbf33a25a1e51ac38973dc2ac2e1e9c647a8e481ef365f77668d72becfd0
@@ -32698,15 +32702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strict-event-emitter@npm:^0.2.4":
-  version: 0.2.8
-  resolution: "strict-event-emitter@npm:0.2.8"
-  dependencies:
-    events: "npm:^3.3.0"
-  checksum: 6891e19fea4f0289e4da2fe7050d85906eaca7f774aa38fe674f0e58fdece1b63b868614fa23974c4cb862aa99358caa987523b705fdfff4639231c62e384394
-  languageName: node
-  linkType: hard
-
 "strict-event-emitter@npm:^0.4.3":
   version: 0.4.6
   resolution: "strict-event-emitter@npm:0.4.6"
@@ -32714,6 +32709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strict-event-emitter@npm:^0.5.0, strict-event-emitter@npm:^0.5.1":
+  version: 0.5.1
+  resolution: "strict-event-emitter@npm:0.5.1"
+  checksum: f5228a6e6b6393c57f52f62e673cfe3be3294b35d6f7842fc24b172ae0a6e6c209fa83241d0e433fc267c503bc2f4ffdbe41a9990ff8ffd5ac425ec0489417f7
+  languageName: node
+  linkType: hard
+
 "string-env-interpolation@npm:1.0.1, string-env-interpolation@npm:^1.0.1":
   version: 1.0.1
   resolution: "string-env-interpolation@npm:1.0.1"
@@ -34038,8 +34040,8 @@ __metadata:
     lodash.kebabcase: "npm:^4.1.1"
     lodash.snakecase: "npm:^4.1.1"
     luxon: "npm:^3.3.0"
-    msw: "npm:1.3.2"
-    msw-storybook-addon: "npm:^1.10.0"
+    msw: "npm:^2.0.11"
+    msw-storybook-addon: "npm:2.0.0--canary.122.b3ed3b1.0"
     prettier: "npm:^3.1.0"
     react: "npm:^18.2.0"
     react-data-grid: "npm:7.0.0-beta.13"
@@ -35139,7 +35141,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.12.3, util@npm:^0.12.4, util@npm:^0.12.5":
+"util@npm:^0.12.4, util@npm:^0.12.5":
   version: 0.12.5
   resolution: "util@npm:0.12.5"
   dependencies:
@@ -35518,19 +35520,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"web-encoding@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "web-encoding@npm:1.1.5"
-  dependencies:
-    "@zxing/text-encoding": "npm:0.9.0"
-    util: "npm:^0.12.3"
-  dependenciesMeta:
-    "@zxing/text-encoding":
-      optional: true
-  checksum: 59d5413338ec0894c690006f5d8508b0c88cae1d8c78606c3f326e351c672196461ed808b849fe08d0900fa56a61fcacb9ff576499068d2ead0a7bc04afa7d34
-  languageName: node
-  linkType: hard
-
 "web-namespaces@npm:^2.0.0":
   version: 2.0.1
   resolution: "web-namespaces@npm:2.0.1"