{text}
diff --git a/kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx b/kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx
index 0e7d321946..043e56e429 100644
--- a/kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { StaticRouter } from 'react-router';
+import { StaticRouter } from 'react-router-dom';
import Pagination, {
PaginationProps,
} from 'components/common/Pagination/Pagination';
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
index 446d52e46c..3152e0370a 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
@@ -67,18 +67,20 @@ export const TableRow =
({
const Cell = cell as React.FC> | undefined;
const TdComponent = customTd || Td;
+ const content = Cell ? (
+ |
+ ) : (
+ field && propertyLookup(field, dataItem)
+ );
+
return (
- {Cell ? (
- |
- ) : (
- field && propertyLookup(field, dataItem)
- )}
+ {content as React.ReactNode}
);
})}
diff --git a/kafka-ui-react-app/src/components/common/Tabs/Tabs.tsx b/kafka-ui-react-app/src/components/common/Tabs/Tabs.tsx
index 6572686a69..e77aabbc48 100644
--- a/kafka-ui-react-app/src/components/common/Tabs/Tabs.tsx
+++ b/kafka-ui-react-app/src/components/common/Tabs/Tabs.tsx
@@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
import classNames from 'classnames';
interface TabsProps {
@@ -8,7 +8,7 @@ interface TabsProps {
onChange?(index: number): void;
}
-const Tabs: React.FC = ({
+const Tabs: React.FC> = ({
tabs,
defaultSelectedIndex = 0,
onChange,
diff --git a/kafka-ui-react-app/src/components/common/heading/Heading.styled.tsx b/kafka-ui-react-app/src/components/common/heading/Heading.styled.tsx
index 39aed937f2..661f3b3147 100644
--- a/kafka-ui-react-app/src/components/common/heading/Heading.styled.tsx
+++ b/kafka-ui-react-app/src/components/common/heading/Heading.styled.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -13,7 +13,10 @@ const HeadingBase = styled.h1`
export interface Props {
level?: HeadingLevel;
}
-const Heading: React.FC = ({ level = 1, ...rest }) => {
+const Heading: React.FC> = ({
+ level = 1,
+ ...rest
+}) => {
return ;
};
diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
index 74d0dfddf3..98eb36b56e 100644
--- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
+++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
import { SortOrder, TopicColumnsToSort } from 'generated-sources';
import * as S from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
@@ -12,7 +12,9 @@ export interface TableHeaderCellProps {
handleOrderBy?: (orderBy: TopicColumnsToSort | null) => void;
}
-const TableHeaderCell: React.FC = (props) => {
+const TableHeaderCell: React.FC> = (
+ props
+) => {
const {
title,
previewText,
diff --git a/kafka-ui-react-app/src/index.tsx b/kafka-ui-react-app/src/index.tsx
index 6ac21e92a7..7c28aad221 100644
--- a/kafka-ui-react-app/src/index.tsx
+++ b/kafka-ui-react-app/src/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import * as serviceWorker from 'serviceWorker';
@@ -8,13 +8,16 @@ import { store } from 'redux/store';
import 'theme/index.scss';
import 'lib/constants';
-ReactDOM.render(
+const container =
+ document.getElementById('root') || document.createElement('div');
+const root = createRoot(container);
+
+root.render(
- ,
- document.getElementById('root')
+
);
// If you want your app to work offline and load faster, you can change
diff --git a/kafka-ui-react-app/src/lib/hooks/__tests__/useModal.spec.ts b/kafka-ui-react-app/src/lib/hooks/__tests__/useModal.spec.ts
index b092ca0ef7..85064e4ea8 100644
--- a/kafka-ui-react-app/src/lib/hooks/__tests__/useModal.spec.ts
+++ b/kafka-ui-react-app/src/lib/hooks/__tests__/useModal.spec.ts
@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
import useModal from 'lib/hooks/useModal';
describe('useModal CustomHook', () => {
diff --git a/kafka-ui-react-app/src/lib/hooks/usePagination.ts b/kafka-ui-react-app/src/lib/hooks/usePagination.ts
index 41e3e1b113..6ce0134053 100644
--- a/kafka-ui-react-app/src/lib/hooks/usePagination.ts
+++ b/kafka-ui-react-app/src/lib/hooks/usePagination.ts
@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
const usePagination = () => {
const { search, pathname } = useLocation();
diff --git a/kafka-ui-react-app/src/lib/hooks/useSearch.ts b/kafka-ui-react-app/src/lib/hooks/useSearch.ts
index 141fefba1f..14d8090d15 100644
--- a/kafka-ui-react-app/src/lib/hooks/useSearch.ts
+++ b/kafka-ui-react-app/src/lib/hooks/useSearch.ts
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useHistory, useLocation } from 'react-router-dom';
const SEARCH_QUERY_ARG = 'q';
diff --git a/kafka-ui-react-app/src/lib/testHelpers.tsx b/kafka-ui-react-app/src/lib/testHelpers.tsx
index 65dfde094e..faf3d9cff4 100644
--- a/kafka-ui-react-app/src/lib/testHelpers.tsx
+++ b/kafka-ui-react-app/src/lib/testHelpers.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
@@ -40,7 +40,9 @@ const customRender = (
}: CustomRenderOptions = {}
) => {
// overrides @testing-library/react render.
- const AllTheProviders: React.FC = ({ children }) => {
+ const AllTheProviders: React.FC> = ({
+ children,
+ }) => {
return (