From 5ed7c9a46e159f1123a226fc76b9a0e268364567 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Fri, 13 Jan 2023 12:01:46 +0530
Subject: [PATCH] feat: react is updated to v18 (#2030)

---
 frontend/package.json                         |  12 +-
 .../src/components/Logs/LogItem/index.tsx     |  35 +++---
 .../src/components/Logs/LogItem/styles.ts     |   4 +
 frontend/src/container/AllError/index.tsx     |  28 +++--
 frontend/src/container/AllError/types.ts      |   9 ++
 .../GeneralSettings/GeneralSettings.tsx       |  26 ++--
 .../src/container/LogsSearchFilter/index.tsx  |   2 +-
 .../LogsSearchFilter/useSearchParser.ts       |  11 +-
 frontend/src/container/MetricsTable/index.tsx | 117 ++++++++++--------
 .../EditMembersDetails/index.tsx              |   9 +-
 .../Panel/PanelBody/Duration/index.tsx        |   2 +-
 frontend/src/index.tsx                        |  37 +++---
 frontend/src/pages/Trace/index.tsx            |   2 +-
 frontend/yarn.lock                            |  72 +++++------
 14 files changed, 201 insertions(+), 165 deletions(-)
 create mode 100644 frontend/src/container/AllError/types.ts

diff --git a/frontend/package.json b/frontend/package.json
index af2bc52a6b..5b68d6060e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -70,8 +70,8 @@
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
 		"mini-css-extract-plugin": "2.4.5",
-		"react": "17.0.0",
-		"react-dom": "17.0.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.3.4",
@@ -132,8 +132,8 @@
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
-		"@types/react": "^17.0.0",
-		"@types/react-dom": "^16.9.9",
+		"@types/react": "18.0.26",
+		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-router-dom": "^5.1.6",
@@ -186,7 +186,7 @@
 		]
 	},
 	"resolutions": {
-		"@types/react": "17.0.0",
-		"@types/react-dom": "17.0.0"
+		"@types/react": "18.0.26",
+		"@types/react-dom": "18.0.10"
 	}
 }
diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/frontend/src/components/Logs/LogItem/index.tsx
index 618248c755..6ff69aa068 100644
--- a/frontend/src/components/Logs/LogItem/index.tsx
+++ b/frontend/src/components/Logs/LogItem/index.tsx
@@ -14,7 +14,7 @@ import { ILogsReducer } from 'types/reducer/logs';
 
 import AddToQueryHOC from '../AddToQueryHOC';
 import CopyClipboardHOC from '../CopyClipboardHOC';
-import { Container, Text, TextContainer } from './styles';
+import { Container, LogContainer, Text, TextContainer } from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -90,27 +90,30 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
 	const handleCopyJSON = (): void => {
 		setCopy(JSON.stringify(logData, null, 2));
 	};
+
 	return (
 		<Container>
-			<div style={{ maxWidth: '100%' }}>
+			<div>
 				<div>
 					{'{'}
-					<div style={{ marginLeft: '0.5rem' }}>
-						<LogGeneralField
-							fieldKey="log"
-							fieldValue={flattenLogData.body as never}
-						/>
-						{flattenLogData.stream && (
+					<LogContainer>
+						<>
 							<LogGeneralField
-								fieldKey="stream"
-								fieldValue={flattenLogData.stream as never}
+								fieldKey="log"
+								fieldValue={flattenLogData.body as never}
 							/>
-						)}
-						<LogGeneralField
-							fieldKey="timestamp"
-							fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
-						/>
-					</div>
+							{flattenLogData.stream && (
+								<LogGeneralField
+									fieldKey="stream"
+									fieldValue={flattenLogData.stream as never}
+								/>
+							)}
+							<LogGeneralField
+								fieldKey="timestamp"
+								fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
+							/>
+						</>
+					</LogContainer>
 					{'}'}
 				</div>
 				<div>
diff --git a/frontend/src/components/Logs/LogItem/styles.ts b/frontend/src/components/Logs/LogItem/styles.ts
index 9d884272c3..ff913cae9c 100644
--- a/frontend/src/components/Logs/LogItem/styles.ts
+++ b/frontend/src/components/Logs/LogItem/styles.ts
@@ -29,3 +29,7 @@ export const TextContainer = styled.div`
 	overflow: hidden;
 	width: 100%;
 `;
+
+export const LogContainer = styled.div`
+	margin-left: 0.5rem;
+`;
diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx
index e7f2e64bcc..afb7517ae3 100644
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -10,7 +10,8 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
-import { ColumnType } from 'antd/es/table';
+import { ColumnType, TablePaginationConfig } from 'antd/es/table';
+import { FilterValue, SorterResult } from 'antd/es/table/interface';
 import { ColumnsType } from 'antd/lib/table';
 import { FilterConfirmProps } from 'antd/lib/table/interface';
 import getAll from 'api/errors/getAll';
@@ -30,6 +31,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
 	getDefaultFilterValue,
@@ -176,7 +178,13 @@ function AllErrors(): JSX.Element {
 	);
 
 	const filterDropdownWrapper = useCallback(
-		({ setSelectedKeys, selectedKeys, confirm, placeholder, filterKey }) => {
+		({
+			setSelectedKeys,
+			selectedKeys,
+			confirm,
+			placeholder,
+			filterKey,
+		}: FilterDropdownExtendsProps) => {
 			return (
 				<Card size="small">
 					<Space align="start" direction="vertical">
@@ -192,11 +200,11 @@ function AllErrors(): JSX.Element {
 								getUpdatedServiceName,
 								getUpdatedExceptionType,
 							)}
-							onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)}
+							onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
 						/>
 						<Button
 							type="primary"
-							onClick={handleSearch(confirm, selectedKeys[0], filterKey)}
+							onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
 							icon={<SearchOutlined />}
 							size="small"
 						>
@@ -209,8 +217,8 @@ function AllErrors(): JSX.Element {
 		[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
 	);
 
-	const onExceptionTypeFilter = useCallback(
-		(value, record: Exception): boolean => {
+	const onExceptionTypeFilter: ColumnType<Exception>['onFilter'] = useCallback(
+		(value: unknown, record: Exception): boolean => {
 			if (record.exceptionType && typeof value === 'string') {
 				return record.exceptionType.toLowerCase().includes(value.toLowerCase());
 			}
@@ -220,7 +228,7 @@ function AllErrors(): JSX.Element {
 	);
 
 	const onApplicationTypeFilter = useCallback(
-		(value, record: Exception): boolean => {
+		(value: unknown, record: Exception): boolean => {
 			if (record.serviceName && typeof value === 'string') {
 				return record.serviceName.toLowerCase().includes(value.toLowerCase());
 			}
@@ -343,7 +351,11 @@ function AllErrors(): JSX.Element {
 	];
 
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
-		(paginations, filters, sorter) => {
+		(
+			paginations: TablePaginationConfig,
+			filters: Record<string, FilterValue | null>,
+			sorter: SorterResult<Exception>[] | SorterResult<Exception>,
+		) => {
 			if (!Array.isArray(sorter)) {
 				const { pageSize = 0, current = 0 } = paginations;
 				const { columnKey = '', order } = sorter;
diff --git a/frontend/src/container/AllError/types.ts b/frontend/src/container/AllError/types.ts
new file mode 100644
index 0000000000..81ce367a89
--- /dev/null
+++ b/frontend/src/container/AllError/types.ts
@@ -0,0 +1,9 @@
+import { FilterDropdownProps } from 'antd/es/table/interface';
+
+export interface FilterDropdownExtendsProps {
+	placeholder: string;
+	filterKey: string;
+	confirm: FilterDropdownProps['confirm'];
+	setSelectedKeys: FilterDropdownProps['setSelectedKeys'];
+	selectedKeys: FilterDropdownProps['selectedKeys'];
+}
diff --git a/frontend/src/container/GeneralSettings/GeneralSettings.tsx b/frontend/src/container/GeneralSettings/GeneralSettings.tsx
index 9a43193d60..5a7f0504bb 100644
--- a/frontend/src/container/GeneralSettings/GeneralSettings.tsx
+++ b/frontend/src/container/GeneralSettings/GeneralSettings.tsx
@@ -590,20 +590,22 @@ function GeneralSettings({
 	});
 
 	return (
-		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
+		<>
 			{Element}
-			<ErrorTextContainer>
-				<TextToolTip
-					{...{
-						text: `More details on how to set retention period`,
-						url: 'https://signoz.io/docs/userguide/retention-period/',
-					}}
-				/>
-				{errorText && <ErrorText>{errorText}</ErrorText>}
-			</ErrorTextContainer>
+			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
+				<ErrorTextContainer>
+					<TextToolTip
+						{...{
+							text: `More details on how to set retention period`,
+							url: 'https://signoz.io/docs/userguide/retention-period/',
+						}}
+					/>
+					{errorText && <ErrorText>{errorText}</ErrorText>}
+				</ErrorTextContainer>
 
-			<Row justify="start">{renderConfig}</Row>
-		</Col>
+				<Row justify="start">{renderConfig}</Row>
+			</Col>
+		</>
 	);
 }
 
diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx
index 5f2c6d482d..0857414da2 100644
--- a/frontend/src/container/LogsSearchFilter/index.tsx
+++ b/frontend/src/container/LogsSearchFilter/index.tsx
@@ -68,7 +68,7 @@ function SearchFilter({
 	);
 
 	const handleSearch = useCallback(
-		(customQuery) => {
+		(customQuery: string) => {
 			if (liveTail === 'PLAYING') {
 				dispatch({
 					type: TOGGLE_LIVE_TAIL,
diff --git a/frontend/src/container/LogsSearchFilter/useSearchParser.ts b/frontend/src/container/LogsSearchFilter/useSearchParser.ts
index 588f37cf9e..7a49d2e93d 100644
--- a/frontend/src/container/LogsSearchFilter/useSearchParser.ts
+++ b/frontend/src/container/LogsSearchFilter/useSearchParser.ts
@@ -1,6 +1,7 @@
 import history from 'lib/history';
 import { parseQuery, reverseParser } from 'lib/logql';
-import { isEqual } from 'lodash-es';
+import { ILogQLParsedQueryItem } from 'lib/logql/types';
+import isEqual from 'lodash-es/isEqual';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -13,8 +14,8 @@ import { ILogsReducer } from 'types/reducer/logs';
 export function useSearchParser(): {
 	queryString: string;
 	parsedQuery: unknown;
-	updateParsedQuery: (arg0: unknown) => void;
-	updateQueryString: (arg0: unknown) => void;
+	updateParsedQuery: (arg0: ILogQLParsedQueryItem[]) => void;
+	updateQueryString: (arg0: string) => void;
 } {
 	const dispatch = useDispatch();
 	const {
@@ -22,7 +23,7 @@ export function useSearchParser(): {
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
 
 	const updateQueryString = useCallback(
-		(updatedQueryString) => {
+		(updatedQueryString: string) => {
 			history.replace({
 				pathname: history.location.pathname,
 				search: updatedQueryString ? `?q=${updatedQueryString}` : '',
@@ -48,7 +49,7 @@ export function useSearchParser(): {
 	}, [queryString, updateQueryString]);
 
 	const updateParsedQuery = useCallback(
-		(updatedParsedPayload) => {
+		(updatedParsedPayload: ILogQLParsedQueryItem[]) => {
 			dispatch({
 				type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
 				payload: updatedParsedPayload,
diff --git a/frontend/src/container/MetricsTable/index.tsx b/frontend/src/container/MetricsTable/index.tsx
index 3042e94d1a..e45edad4b2 100644
--- a/frontend/src/container/MetricsTable/index.tsx
+++ b/frontend/src/container/MetricsTable/index.tsx
@@ -2,12 +2,15 @@ import { blue } from '@ant-design/colors';
 import { SearchOutlined } from '@ant-design/icons';
 import { Button, Card, Input, Space, Table } from 'antd';
 import type { ColumnsType, ColumnType } from 'antd/es/table';
-import type { FilterConfirmProps } from 'antd/es/table/interface';
+import type {
+	FilterConfirmProps,
+	FilterDropdownProps,
+} from 'antd/es/table/interface';
 import localStorageGet from 'api/browser/localstorage/get';
 import localStorageSet from 'api/browser/localstorage/set';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -35,8 +38,8 @@ function Metrics(): JSX.Element {
 		confirm();
 	};
 
-	const FilterIcon = useCallback(
-		({ filtered }) => (
+	const FilterIcon: ColumnType<DataProps>['filterIcon'] = useCallback(
+		(filtered: boolean) => (
 			<SearchOutlined
 				style={{
 					color: filtered ? blue[6] : undefined,
@@ -47,7 +50,7 @@ function Metrics(): JSX.Element {
 	);
 
 	const filterDropdown = useCallback(
-		({ setSelectedKeys, selectedKeys, confirm }) => (
+		({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
 			<Card size="small">
 				<Space align="start" direction="vertical">
 					<Input
@@ -73,6 +76,60 @@ function Metrics(): JSX.Element {
 		[],
 	);
 
+	type DataIndex = keyof ServicesList;
+
+	const getColumnSearchProps = useCallback(
+		(dataIndex: DataIndex): ColumnType<DataProps> => ({
+			filterDropdown,
+			filterIcon: FilterIcon,
+			onFilter: (value: string | number | boolean, record: DataProps): boolean =>
+				record[dataIndex]
+					.toString()
+					.toLowerCase()
+					.includes(value.toString().toLowerCase()),
+			render: (text: string): JSX.Element => (
+				<Link to={`${ROUTES.APPLICATION}/${text}${search}`}>
+					<Name>{text}</Name>
+				</Link>
+			),
+		}),
+		[filterDropdown, FilterIcon, search],
+	);
+
+	const columns: ColumnsType<DataProps> = useMemo(
+		() => [
+			{
+				title: 'Application',
+				dataIndex: 'serviceName',
+				key: 'serviceName',
+				...getColumnSearchProps('serviceName'),
+			},
+			{
+				title: 'P99 latency (in ms)',
+				dataIndex: 'p99',
+				key: 'p99',
+				defaultSortOrder: 'descend',
+				sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99,
+				render: (value: number): string => (value / 1000000).toFixed(2),
+			},
+			{
+				title: 'Error Rate (% of total)',
+				dataIndex: 'errorRate',
+				key: 'errorRate',
+				sorter: (a: DataProps, b: DataProps): number => a.errorRate - b.errorRate,
+				render: (value: number): string => value.toFixed(2),
+			},
+			{
+				title: 'Operations Per Second',
+				dataIndex: 'callRate',
+				key: 'callRate',
+				sorter: (a: DataProps, b: DataProps): number => a.callRate - b.callRate,
+				render: (value: number): string => value.toFixed(2),
+			},
+		],
+		[getColumnSearchProps],
+	);
+
 	if (
 		services.length === 0 &&
 		loading === false &&
@@ -82,56 +139,6 @@ function Metrics(): JSX.Element {
 		return <SkipBoardModal onContinueClick={onContinueClick} />;
 	}
 
-	type DataIndex = keyof ServicesList;
-
-	const getColumnSearchProps = (
-		dataIndex: DataIndex,
-	): ColumnType<DataProps> => ({
-		filterDropdown,
-		filterIcon: FilterIcon,
-		onFilter: (value: string | number | boolean, record: DataProps): boolean =>
-			record[dataIndex]
-				.toString()
-				.toLowerCase()
-				.includes(value.toString().toLowerCase()),
-		render: (text: string): JSX.Element => (
-			<Link to={`${ROUTES.APPLICATION}/${text}${search}`}>
-				<Name>{text}</Name>
-			</Link>
-		),
-	});
-
-	const columns: ColumnsType<DataProps> = [
-		{
-			title: 'Application',
-			dataIndex: 'serviceName',
-			key: 'serviceName',
-			...getColumnSearchProps('serviceName'),
-		},
-		{
-			title: 'P99 latency (in ms)',
-			dataIndex: 'p99',
-			key: 'p99',
-			defaultSortOrder: 'descend',
-			sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99,
-			render: (value: number): string => (value / 1000000).toFixed(2),
-		},
-		{
-			title: 'Error Rate (% of total)',
-			dataIndex: 'errorRate',
-			key: 'errorRate',
-			sorter: (a: DataProps, b: DataProps): number => a.errorRate - b.errorRate,
-			render: (value: number): string => value.toFixed(2),
-		},
-		{
-			title: 'Operations Per Second',
-			dataIndex: 'callRate',
-			key: 'callRate',
-			sorter: (a: DataProps, b: DataProps): number => a.callRate - b.callRate,
-			render: (value: number): string => value.toFixed(2),
-		},
-	];
-
 	return (
 		<Container>
 			<Table
diff --git a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx
index 9b3dfcfde2..17ce040488 100644
--- a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx
+++ b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx
@@ -51,9 +51,12 @@ function EditMembersDetails({
 		}
 	}, [state.error, state.value, t]);
 
-	const onPasswordChangeHandler = useCallback((event) => {
-		setPasswordLink(event.target.value);
-	}, []);
+	const onPasswordChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+		(event) => {
+			setPasswordLink(event.target.value);
+		},
+		[],
+	);
 
 	const onGeneratePasswordHandler = async (): Promise<void> => {
 		try {
diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
index 81bd6e7faa..bec1e5260e 100644
--- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
+++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
@@ -171,7 +171,7 @@ function Duration(): JSX.Element {
 		updatedUrl(min, max);
 	};
 
-	const TipComponent = useCallback((value) => {
+	const TipComponent = useCallback((value: undefined | number) => {
 		if (value === undefined) {
 			return <div />;
 		}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index ad3147a0e6..bb535fd528 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,7 +4,7 @@ import './ReactI18';
 import AppRoutes from 'AppRoutes';
 import { ThemeProvider } from 'hooks/useDarkMode';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { Provider } from 'react-redux';
@@ -23,18 +23,23 @@ const queryClient = new QueryClient({
 	},
 });
 
-ReactDOM.render(
-	<ThemeProvider>
-		<QueryClientProvider client={queryClient}>
-			<Provider store={store}>
-				<React.StrictMode>
-					<AppRoutes />
-				</React.StrictMode>
-			</Provider>
-			{process.env.NODE_ENV === 'development' && (
-				<ReactQueryDevtools initialIsOpen />
-			)}
-		</QueryClientProvider>
-	</ThemeProvider>,
-	document.querySelector('#root'),
-);
+const container = document.getElementById('root');
+
+if (container) {
+	const root = createRoot(container);
+
+	root.render(
+		<ThemeProvider>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<React.StrictMode>
+						<AppRoutes />
+					</React.StrictMode>
+				</Provider>
+				{process.env.NODE_ENV === 'development' && (
+					<ReactQueryDevtools initialIsOpen />
+				)}
+			</QueryClientProvider>
+		</ThemeProvider>,
+	);
+}
diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx
index ed3d234436..7702377479 100644
--- a/frontend/src/pages/Trace/index.tsx
+++ b/frontend/src/pages/Trace/index.tsx
@@ -109,7 +109,7 @@ function Trace({
 		};
 	}, [dispatch]);
 
-	const onClickHandler = useCallback(
+	const onClickHandler: React.MouseEventHandler<HTMLElement> = useCallback(
 		(e) => {
 			e.preventDefault();
 			e.stopPropagation();
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8c5603db26..887c6a6a98 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2510,20 +2510,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@17.0.0", "@types/react-dom@>=16.9.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
-  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
+"@types/react-dom@18.0.10", "@types/react-dom@>=16.9.0":
+  version "18.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
+  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^16.9.9":
-  version "16.9.17"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.17.tgz#29100cbcc422d7b7dba7de24bb906de56680dd34"
-  integrity sha512-qSRyxEsrm5btPXnowDOs5jSkgT8ldAA0j6Qp+otHUh+xHzy3sXmgNfyhucZjAjkgpdAUw9rJe0QRtX/l+yaS4g==
-  dependencies:
-    "@types/react" "^16"
-
 "@types/react-grid-layout@^1.1.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/react-grid-layout/-/react-grid-layout-1.3.2.tgz#9f195666a018a5ae2b773887e3b552cb4378d67f"
@@ -2565,18 +2558,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.0", "@types/react@>=16.9.0", "@types/react@^16":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
-  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17.0.0":
-  version "17.0.52"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
-  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
+"@types/react@*", "@types/react@18.0.26", "@types/react@>=16.9.0":
+  version "18.0.26"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -11031,15 +11016,6 @@ rc-virtual-list@^3.2.0, rc-virtual-list@^3.4.8:
     rc-resize-observer "^1.0.0"
     rc-util "^5.15.0"
 
-react-dom@17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.0.tgz#f8266e4d9861584553ccbd186d596a1c7dd8dcb4"
-  integrity sha512-OGnFbxCjI2TMAZYMVxi4hqheJiN8rCEVVrL7XIGzCB6beNc4Am8M47HtkvxODZw9QgjmAPKpLba9FTu4fC1byA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.0"
-
 react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -11049,6 +11025,14 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-draggable@^4.0.0, react-draggable@^4.0.3:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
@@ -11263,14 +11247,6 @@ react-vis@^1.11.7:
     prop-types "^15.5.8"
     react-motion "^0.5.2"
 
-react@17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.0.tgz#ad96d5fa1a33bb9b06d0cc52672f7992d84aa662"
-  integrity sha512-rG9bqS3LMuetoSUKHN8G3fMNuQOePKDThK6+2yXFWtoeTDLVNh/QCaxT+Jr+rNf4lwNXpx+atdn3Aa0oi8/6eQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -11279,6 +11255,13 @@ react@17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -11726,7 +11709,7 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.0, scheduler@^0.20.2:
+scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
   integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
@@ -11734,6 +11717,13 @@ scheduler@^0.20.0, scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^2.6.5, schema-utils@^2.7.0, schema-utils@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"