feat: react is updated to v18 (#2030)

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": "18.2.0",
-		"react-dom": "17.0.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": "18.0.26",
-		"@types/react-dom": "^16.9.9",
+		"@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": "18.0.26",
-		"@types/react-dom": "17.0.0"
+		"@types/react-dom": "18.0.10"
 	}
 }

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,12 +90,14 @@ 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' }}>
+					<LogContainer>
+						<>
 							<LogGeneralField
 								fieldKey="log"
 								fieldValue={flattenLogData.body as never}
@@ -110,7 +112,8 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
 								fieldKey="timestamp"
 								fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
 							/>
-					</div>
+						</>
+					</LogContainer>
 					{'}'}
 				</div>
 				<div>

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;
+`;

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(
+	const onExceptionTypeFilter: ColumnType<Exception>['onFilter'] = useCallback(
-		(value, record: Exception): boolean => {
+		(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;

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'];
+}

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -590,8 +590,9 @@ function GeneralSettings({
 	});
 
 	return (
-		<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
+		<>
 			{Element}
+			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 				<ErrorTextContainer>
 					<TextToolTip
 						{...{
@@ -604,6 +605,7 @@ function GeneralSettings({
 
 				<Row justify="start">{renderConfig}</Row>
 			</Col>
+		</>
 	);
 }
 

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,

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;
+	updateParsedQuery: (arg0: ILogQLParsedQueryItem[]) => void;
-	updateQueryString: (arg0: unknown) => 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,

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(
+	const FilterIcon: ColumnType<DataProps>['filterIcon'] = useCallback(
-		({ filtered }) => (
+		(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,20 +76,10 @@ function Metrics(): JSX.Element {
 		[],
 	);
 
-	if (
-		services.length === 0 &&
-		loading === false &&
-		!skipOnboarding &&
-		error === true
-	) {
-		return <SkipBoardModal onContinueClick={onContinueClick} />;
-	}
-
 	type DataIndex = keyof ServicesList;
 
-	const getColumnSearchProps = (
+	const getColumnSearchProps = useCallback(
-		dataIndex: DataIndex,
+		(dataIndex: DataIndex): ColumnType<DataProps> => ({
-	): ColumnType<DataProps> => ({
 			filterDropdown,
 			filterIcon: FilterIcon,
 			onFilter: (value: string | number | boolean, record: DataProps): boolean =>
@@ -99,9 +92,12 @@ function Metrics(): JSX.Element {
 					<Name>{text}</Name>
 				</Link>
 			),
-	});
+		}),
+		[filterDropdown, FilterIcon, search],
+	);
 
-	const columns: ColumnsType<DataProps> = [
+	const columns: ColumnsType<DataProps> = useMemo(
+		() => [
 			{
 				title: 'Application',
 				dataIndex: 'serviceName',
@@ -130,7 +126,18 @@ function Metrics(): JSX.Element {
 				sorter: (a: DataProps, b: DataProps): number => a.callRate - b.callRate,
 				render: (value: number): string => value.toFixed(2),
 			},
-	];
+		],
+		[getColumnSearchProps],
+	);
+
+	if (
+		services.length === 0 &&
+		loading === false &&
+		!skipOnboarding &&
+		error === true
+	) {
+		return <SkipBoardModal onContinueClick={onContinueClick} />;
+	}
 
 	return (
 		<Container>

frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx

@@ -51,9 +51,12 @@ function EditMembersDetails({
 		}
 	}, [state.error, state.value, t]);
 
-	const onPasswordChangeHandler = useCallback((event) => {
+	const onPasswordChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+		(event) => {
 			setPasswordLink(event.target.value);
-	}, []);
+		},
+		[],
+	);
 
 	const onGeneratePasswordHandler = async (): Promise<void> => {
 		try {

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 />;
 		}

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,7 +23,12 @@ const queryClient = new QueryClient({
 	},
 });
 
-ReactDOM.render(
+const container = document.getElementById('root');
+
+if (container) {
+	const root = createRoot(container);
+
+	root.render(
 		<ThemeProvider>
 			<QueryClientProvider client={queryClient}>
 				<Provider store={store}>
@@ -36,5 +41,5 @@ ReactDOM.render(
 				)}
 			</QueryClientProvider>
 		</ThemeProvider>,
-	document.querySelector('#root'),
+	);
-);
+}

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();

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":
+"@types/react-dom@18.0.10", "@types/react-dom@>=16.9.0":
-  version "17.0.0"
+  version "18.0.10"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
-  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
+  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":
+"@types/react@*", "@types/react@18.0.26", "@types/react@>=16.9.0":
-  version "17.0.0"
+  version "18.0.26"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
-  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
-  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==
   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"