fix: upgraded msw to latest and all jest packages to latest

frontend/jest.config.ts

@@ -24,12 +24,12 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color|api)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color|api|uuid)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
-	testEnvironment: 'jest-environment-jsdom',
+	testEnvironment: 'jest-fixed-jsdom',
 	testEnvironmentOptions: {
 		'jest-playwright': {
 			browsers: ['chromium', 'firefox', 'webkit'],

frontend/package.json

@@ -57,7 +57,7 @@
 		"antd-table-saveas-excel": "2.2.1",
 		"axios": "1.7.7",
 		"babel-eslint": "^10.1.0",
-		"babel-jest": "^29.6.4",
+		"babel-jest": "29.7.0",
 		"babel-loader": "9.1.3",
 		"babel-plugin-named-asset-import": "^0.3.7",
 		"babel-preset-minify": "^0.5.1",
@@ -85,7 +85,7 @@
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
-		"jest": "^27.5.1",
+		"jest": "29.7.0",
 		"js-base64": "^3.7.2",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
@@ -130,7 +130,7 @@
 		"timestamp-nano": "^1.0.0",
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
-		"typescript": "^4.0.5",
+		"typescript": "5.8.2",
 		"uplot": "1.6.31",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
@@ -161,7 +161,7 @@
 		"@commitlint/cli": "^16.3.0",
 		"@commitlint/config-conventional": "^16.2.4",
 		"@faker-js/faker": "9.3.0",
-		"@jest/globals": "^27.5.1",
+		"@jest/globals": "29.7.0",
 		"@playwright/test": "^1.22.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
@@ -172,7 +172,7 @@
 		"@types/dompurify": "^2.4.0",
 		"@types/event-source-polyfill": "^1.0.0",
 		"@types/fontfaceobserver": "2.1.0",
-		"@types/jest": "^27.5.1",
+		"@types/jest": "29.5.14",
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
@@ -206,7 +206,7 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-config-standard": "^16.0.3",
 		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-jest": "^26.9.0",
+		"eslint-plugin-jest": "26.9.0",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-prettier": "^4.0.0",
@@ -218,9 +218,11 @@
 		"husky": "^7.0.4",
 		"image-webpack-loader": "8.1.0",
 		"is-ci": "^3.0.1",
+		"jest-environment-jsdom": "29.7.0",
+		"jest-fixed-jsdom": "0.0.9",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
-		"msw": "1.3.2",
+		"msw": "2.7.3",
 		"npm-run-all": "latest",
 		"portfinder-sync": "^0.0.2",
 		"postcss": "8.4.38",
@@ -233,7 +235,7 @@
 		"redux-mock-store": "1.5.4",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
-		"ts-jest": "^27.1.5",
+		"ts-jest": "29.2.6",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "5.0.1",
 		"webpack-bundle-analyzer": "^4.5.0",

frontend/src/components/Graph/styles.ts

@@ -1,7 +1,7 @@
 import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
 
-export const LegendsContainer = styled.div`
+export const LegendsContainer = styled.div<{ id?: string }>`
 	height: 10%;
 
 	* {

frontend/src/components/Logs/ListLogView/styles.ts

@@ -6,10 +6,13 @@ import { getActiveLogBackground } from 'utils/logs';
 
 interface LogTextProps {
 	linesPerRow?: number;
+	dangerouslySetInnerHTML?: { __html: string };
+	className?: string;
 }
 
 interface LogContainerProps {
 	fontSize: FontSize;
+	children?: React.ReactNode;
 }
 
 export const Container = styled(Card)<{

frontend/src/components/Logs/RawLogView/types.ts

@@ -19,4 +19,6 @@ export interface RawLogContentProps {
 	$isActiveLog?: boolean;
 	$isDarkMode?: boolean;
 	$isTextOverflowEllipsisDisabled?: boolean;
+	className?: string;
+	dangerouslySetInnerHTML?: { __html: string };
 }

frontend/src/components/Logs/TableView/styles.ts

@@ -6,6 +6,7 @@ interface TableBodyContentProps {
 	linesPerRow: number;
 	fontSize: FontSize;
 	isDarkMode?: boolean;
+	dangerouslySetInnerHTML?: { __html: string };
 }
 
 export const TableBodyContent = styled.div<TableBodyContentProps>`

frontend/src/components/ResizeTable/styles.ts

@@ -1,6 +1,16 @@
 import styled from 'styled-components';
 
-export const SpanStyle = styled.span`
+interface SpanStyleProps {
+	className: string;
+	onClick?: (e: any) => void;
+	children?: React.ReactNode;
+}
+interface DragSpanStyleProps {
+	className: string;
+	children?: React.ReactNode;
+}
+
+export const SpanStyle = styled.span<SpanStyleProps>`
 	position: absolute;
 	right: -0.313rem;
 	bottom: 0;
@@ -10,7 +20,7 @@ export const SpanStyle = styled.span`
 	cursor: col-resize;
 `;
 
-export const DragSpanStyle = styled.span`
+export const DragSpanStyle = styled.span<DragSpanStyleProps>`
 	display: flex;
 	margin: -1rem;
 	padding: 1rem;

frontend/src/components/Spinner/styles.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 
 interface Props {
 	height: CSSProperties['height'];
+	style?: CSSProperties;
+	children?: React.ReactNode;
 }
 
 export const SpinerStyle = styled.div<Props>`

frontend/src/container/APIKeys/APIKeys.test.tsx

@@ -3,18 +3,24 @@ import {
 	getAPIKeysResponse,
 } from 'mocks-server/__mockdata__/apiKeys';
 import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import APIKeys from './APIKeys';
 
 const apiKeysURL = 'http://localhost/api/v1/pats';
+const contentType = 'application/json';
 
 describe('APIKeys component', () => {
 	beforeEach(() => {
 		server.use(
-			rest.get(apiKeysURL, (req, res, ctx) =>
-				res(ctx.status(200), ctx.json(getAPIKeysResponse)),
+			http.get(apiKeysURL, () =>
+				HttpResponse.json(getAPIKeysResponse, {
+					status: 200,
+					headers: {
+						'Content-Type': contentType,
+					},
+				}),
 			),
 		);
 
@@ -34,8 +40,13 @@ describe('APIKeys component', () => {
 
 	it('render list of Access Tokens', async () => {
 		server.use(
-			rest.get(apiKeysURL, (req, res, ctx) =>
-				res(ctx.status(200), ctx.json(getAPIKeysResponse)),
+			http.get(apiKeysURL, () =>
+				HttpResponse.json(getAPIKeysResponse, {
+					status: 200,
+					headers: {
+						'Content-Type': `application/json`,
+					},
+				}),
 			),
 		);
 
@@ -74,8 +85,13 @@ describe('APIKeys component', () => {
 
 	it('creates a new key on form submission', async () => {
 		server.use(
-			rest.post(apiKeysURL, (req, res, ctx) =>
-				res(ctx.status(200), ctx.json(createAPIKeyResponse)),
+			http.post(apiKeysURL, async () =>
+				HttpResponse.json(createAPIKeyResponse, {
+					status: 200,
+					headers: {
+						'Content-Type': 'application/json',
+					},
+				}),
 			),
 		);
 

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -14,7 +14,7 @@ import {
 	slackTitleDefaultValue,
 } from 'mocks-server/__mockdata__/alerts';
 import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import { testLabelInputAndHelpValue } from './testUtils';
@@ -124,16 +124,19 @@ describe('Create Alert Channel', () => {
 		});
 		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
 			server.use(
-				rest.post('http://localhost/api/v1/testChannel', (req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
+				http.post('http://localhost/api/v1/testChannel', () =>
+					HttpResponse.json(
+						{
 							status: 'success',
 							data: 'test alert sent',
-						}),
+						},
+						{
+							status: 200,
+						},
 					),
 				),
 			);
+
 			const testButton = screen.getByRole('button', {
 				name: 'button_test_channel',
 			});

frontend/src/container/GridTableComponent/index.tsx

@@ -23,7 +23,12 @@ import {
 	TableData,
 } from './utils';
 
-const ButtonWrapper = styled.div`
+interface ButtonWrapperProps {
+	className?: string;
+	children?: React.ReactNode;
+}
+
+const ButtonWrapper = styled.div<ButtonWrapperProps>`
 	position: absolute;
 	right: 0;
 	top: 50%;

frontend/src/container/GridValueComponent/styles.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 interface Props {
 	isDashboardPage: boolean;
+	children?: React.ReactNode;
 }
 
 export const ValueContainer = styled.div`

frontend/src/container/LogsContextList/styles.ts

@@ -2,7 +2,12 @@ import { Color } from '@signozhq/design-tokens';
 import { Typography } from 'antd';
 import styled from 'styled-components';
 
-export const ListContainer = styled.div<{ $isDarkMode: boolean }>`
+interface ListContainerProps {
+	$isDarkMode: boolean;
+	children?: React.ReactNode;
+}
+
+export const ListContainer = styled.div<ListContainerProps>`
 	position: relative;
 	height: 21rem;
 	overflow: hidden;

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -9,9 +9,15 @@ interface TableHeaderCellStyledProps {
 	$isDarkMode: boolean;
 	$isLogIndicator?: boolean;
 	fontSize?: FontSize;
+	children?: React.ReactNode;
 }
 
-export const TableStyled = styled.table`
+interface TableStyledProps {
+	children?: React.ReactNode;
+	style?: React.CSSProperties;
+}
+
+export const TableStyled = styled.table<TableStyledProps>`
 	width: 100%;
 `;
 
@@ -38,6 +44,7 @@ export const TableRowStyled = styled.tr<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
 	$logType: string;
+	children?: React.ReactNode;
 }>`
 	td {
 		${({ $isActiveLog, $isDarkMode, $logType }): string =>

frontend/src/container/LogsExplorerList/styles.ts

@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
-export const InfinityWrapperStyled = styled.div`
+interface InfinityWrapperStyledProps {
+	children?: React.ReactNode;
+}
+
+export const InfinityWrapperStyled = styled.div<InfinityWrapperStyledProps>`
 	flex: 1;
 	height: 40rem !important;
 	display: flex;

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -2,7 +2,7 @@ import ROUTES from 'constants/routes';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { logsQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
 import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { fireEvent, render, RenderResult } from 'tests/test-utils';
@@ -21,8 +21,10 @@ jest.mock('react-router-dom', () => ({
 
 const lodsQueryServerRequest = (): void =>
 	server.use(
-		rest.post(queryRangeURL, (req, res, ctx) =>
-			res(ctx.status(200), ctx.json(logsQueryRangeSuccessResponse)),
+		http.post(queryRangeURL, () =>
+			HttpResponse.json(logsQueryRangeSuccessResponse, {
+				status: 200,
+			}),
 		),
 	);
 

frontend/src/container/NewDashboard/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -1,6 +1,6 @@
 import { getNonIntegrationDashboardById } from 'mocks-server/__mockdata__/dashboards';
 import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { MemoryRouter, useLocation } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -72,8 +72,10 @@ describe('Dashboard landing page actions header tests', () => {
 		};
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 		server.use(
-			rest.get('http://localhost/api/v1/dashboards/4', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(getNonIntegrationDashboardById)),
+			http.get('http://localhost/api/v1/dashboards/4', () =>
+				HttpResponse.json(getNonIntegrationDashboardById, {
+					status: 200,
+				}),
 			),
 		);
 		const { getByTestId } = render(

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/styles.ts

@@ -6,6 +6,11 @@ export const VariableItemRow = styled(Row)`
 	margin-bottom: 1rem;
 `;
 
-export const LabelContainer = styled.div`
+interface LabelContainerProps {
+	style?: React.CSSProperties;
+	children?: React.ReactNode;
+}
+
+export const LabelContainer = styled.div<LabelContainerProps>`
 	width: 200px;
 `;

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 interface Props {
 	isDarkMode: boolean;
+	children?: React.ReactNode;
 }
 export const StyledLabel = styled.div<Props>`
 	padding: 0 0.6875rem;