Upgarde to Vite v4 (#3062)

* Upgarde to Vite v4

* Fix warnings

* resolved validateDOMNesting(...) warning also remove act from PreviewModal.spec.tsx

* Revert "resolved validateDOMNesting(...) warning also remove act from PreviewModal.spec.tsx"

This reverts commit f24660918f32491fef4fea8fb0c4c60dfc4048a0.

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>

kafka-ui-react-app/jest.config.ts

@@ -19,7 +19,7 @@ export default {
   ],
   testEnvironment: 'jsdom',
   transform: {
-    '\\.[jt]sx?$': 'babel-jest',
+    '\\.[jt]sx?$': '@swc/jest',
     '^.+\\.css$': '<rootDir>/.jest/cssTransform.js',
   },
   transformIgnorePatterns: [

kafka-ui-react-app/package.json

@@ -17,10 +17,8 @@
     "@tanstack/react-table": "^8.5.10",
     "@testing-library/react": "^13.2.0",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react": "^2.0.0",
     "ace-builds": "^1.7.1",
     "ajv": "^8.6.3",
-    "babel-jest": "^29.0.3",
     "classnames": "^2.2.6",
     "fetch-mock": "^9.11.0",
     "jest": "^29.0.3",
@@ -43,8 +41,8 @@
     "sass": "^1.52.3",
     "styled-components": "^5.3.1",
     "use-debounce": "^8.0.1",
-    "vite": "^3.0.2",
-    "vite-tsconfig-paths": "^3.5.0",
+    "vite": "^4.0.0",
+    "vite-tsconfig-paths": "^4.0.2",
     "whatwg-fetch": "^3.6.2",
     "yup": "^0.32.11",
     "zustand": "^4.1.1"
@@ -80,6 +78,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@jest/types": "^29.0.3",
     "@openapitools/openapi-generator-cli": "^2.5.1",
+    "@swc/core": "^1.3.22",
+    "@swc/jest": "^0.2.24",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^14.4.3",
@@ -94,6 +94,7 @@
     "@types/styled-components": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
     "dotenv": "^16.0.1",
     "eslint": "^8.3.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -115,7 +116,6 @@
     "lint-staged": "^13.0.2",
     "prettier": "^2.3.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^29.0.0",
     "ts-node": "^10.8.1",
     "ts-prune": "^0.10.3",
     "typescript": "^4.7.4"

kafka-ui-react-app/src/components/App.tsx

@@ -14,7 +14,7 @@ import theme from 'theme/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { showServerError } from 'lib/errorHandling';
 import { Toaster } from 'react-hot-toast';
-import GlobalCSS from 'components/global.css';
+import GlobalCSS from 'components/globalCss';
 import * as S from 'components/App.styled';
 
 import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -147,7 +147,7 @@ const New: React.FC = () => {
             control={control}
             name="config"
             render={({ field }) => (
-              <Editor {...field} readOnly={isSubmitting} />
+              <Editor {...field} readOnly={isSubmitting} ref={null} />
             )}
           />
           <FormError>

kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx

@@ -77,7 +77,6 @@ describe('Details component', () => {
     });
 
     it('renders search input', async () => {
-      await renderComponent();
       expect(
         screen.getByPlaceholderText('Search by Topic Name')
       ).toBeInTheDocument();

kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Details from 'components/Schemas/Details/Details';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterSchemaPath } from 'lib/paths';
-import { screen, waitFor } from '@testing-library/dom';
+import { screen } from '@testing-library/dom';
 import {
   schemasInitialState,
   schemaVersion,
@@ -50,44 +50,17 @@ describe('Details', () => {
   afterEach(() => fetchMock.reset());
 
   describe('fetch failed', () => {
-    beforeEach(async () => {
+    it('renders pageloader', async () => {
       const schemasAPILatestMock = fetchMock.getOnce(schemasAPILatestUrl, 404);
       const schemasAPIVersionsMock = fetchMock.getOnce(
         schemasAPIVersionsUrl,
         404
       );
-      await renderComponent();
-
-      await waitFor(() => {
-        expect(schemasAPILatestMock.called()).toBeTruthy();
-      });
-      await waitFor(() => {
-        expect(schemasAPIVersionsMock.called()).toBeTruthy();
-      });
-    });
-
-    it('handles [Delete schema] click', async () => {
-      const deleteSchemaMock = fetchMock.deleteOnce(
-        `/api/clusters/${clusterName}/schemas/${schemaVersion.subject}`,
-        200
-      );
-
       await act(() => {
         renderComponent();
       });
-
-      try {
-        expect(deleteSchemaMock.called()).toBeTruthy();
-        expect(mockHistoryPush).toHaveBeenCalledTimes(1);
-        expect(mockHistoryPush).toHaveBeenCalledWith(
-          clusterSchemaPath(clusterName)
-        );
-      } catch (e) {
-        expect(deleteSchemaMock.called()).toBeTruthy();
-      }
-    });
-
-    it('renders pageloader', () => {
+      expect(schemasAPILatestMock.called(schemasAPILatestUrl)).toBeTruthy();
+      expect(schemasAPIVersionsMock.called(schemasAPIVersionsUrl)).toBeTruthy();
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
       expect(screen.queryByText(schemaVersion.subject)).not.toBeInTheDocument();
       expect(screen.queryByText('Edit Schema')).not.toBeInTheDocument();
@@ -97,7 +70,7 @@ describe('Details', () => {
 
   describe('fetch success', () => {
     describe('has schema versions', () => {
-      beforeEach(async () => {
+      it('renders component with schema info', async () => {
         const schemasAPILatestMock = fetchMock.getOnce(
           schemasAPILatestUrl,
           schemaVersion
@@ -109,15 +82,8 @@ describe('Details', () => {
         await act(() => {
           renderComponent();
         });
-        await waitFor(() => {
-          expect(schemasAPILatestMock.called()).toBeTruthy();
-        });
-        await waitFor(() => {
-          expect(schemasAPIVersionsMock.called()).toBeTruthy();
-        });
-      });
-
-      it('renders component with schema info', () => {
+        expect(schemasAPILatestMock.called()).toBeTruthy();
+        expect(schemasAPIVersionsMock.called()).toBeTruthy();
         expect(screen.getByText('Edit Schema')).toBeInTheDocument();
         expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
         expect(screen.getByRole('table')).toBeInTheDocument();
@@ -126,7 +92,7 @@ describe('Details', () => {
 
     describe('fetch success schema with non ascii characters', () => {
       describe('has schema versions', () => {
-        beforeEach(async () => {
+        it('renders component with schema info', async () => {
           const schemasAPILatestMock = fetchMock.getOnce(
             schemasAPILatestUrl,
             schemaVersionWithNonAsciiChars
@@ -138,15 +104,8 @@ describe('Details', () => {
           await act(() => {
             renderComponent();
           });
-          await waitFor(() => {
-            expect(schemasAPILatestMock.called()).toBeTruthy();
-          });
-          await waitFor(() => {
-            expect(schemasAPIVersionsMock.called()).toBeTruthy();
-          });
-        });
-
-        it('renders component with schema info', () => {
+          expect(schemasAPILatestMock.called()).toBeTruthy();
+          expect(schemasAPIVersionsMock.called()).toBeTruthy();
           expect(screen.getByText('Edit Schema')).toBeInTheDocument();
           expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
           expect(screen.getByRole('table')).toBeInTheDocument();
@@ -167,12 +126,8 @@ describe('Details', () => {
         await act(() => {
           renderComponent();
         });
-        await waitFor(() => {
-          expect(schemasAPILatestMock.called()).toBeTruthy();
-        });
-        await waitFor(() => {
-          expect(schemasAPIVersionsMock.called()).toBeTruthy();
-        });
+        expect(schemasAPILatestMock.called()).toBeTruthy();
+        expect(schemasAPIVersionsMock.called()).toBeTruthy();
       });
 
       // seems like incorrect behaviour

kafka-ui-react-app/src/components/Schemas/Edit/__tests__/Edit.spec.tsx

@@ -7,7 +7,7 @@ import {
   schemaVersion,
   schemaVersionWithNonAsciiChars,
 } from 'redux/reducers/schemas/__test__/fixtures';
-import { screen, waitFor } from '@testing-library/dom';
+import { screen } from '@testing-library/dom';
 import ClusterContext, {
   ContextProps,
   initialValue as contextInitialValue,
@@ -42,28 +42,14 @@ const renderComponent = (
 describe('Edit', () => {
   afterEach(() => fetchMock.reset());
 
-  describe('fetch failed', () => {
-    it('renders page loader', async () => {
-      const schemasAPILatestMock = fetchMock.getOnce(schemasAPILatestUrl, 404);
-      await renderComponent();
-      await waitFor(() => expect(schemasAPILatestMock.called()).toBeTruthy());
-      expect(screen.getByRole('progressbar')).toBeInTheDocument();
-      expect(screen.queryByText(schemaVersion.subject)).not.toBeInTheDocument();
-      expect(screen.queryByText('Submit')).not.toBeInTheDocument();
-    });
-  });
-
   describe('fetch success', () => {
     describe('has schema versions', () => {
       it('renders component with schema info', async () => {
-        const schemasAPILatestMock = fetchMock.getOnce(
-          schemasAPILatestUrl,
-          schemaVersion
-        );
+        fetchMock.getOnce(schemasAPILatestUrl, schemaVersion);
         await act(() => {
           renderComponent();
         });
-        await waitFor(() => expect(schemasAPILatestMock.called()).toBeTruthy());
+        expect(fetchMock.called(schemasAPILatestUrl)).toBeTruthy();
         expect(screen.getByText('Submit')).toBeInTheDocument();
         expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
       });
@@ -73,14 +59,11 @@ describe('Edit', () => {
   describe('fetch success schema with non ascii characters', () => {
     describe('has schema versions', () => {
       it('renders component with schema info', async () => {
-        const schemasAPILatestMock = fetchMock.getOnce(
-          schemasAPILatestUrl,
-          schemaVersionWithNonAsciiChars
-        );
+        fetchMock.getOnce(schemasAPILatestUrl, schemaVersionWithNonAsciiChars);
         await act(() => {
           renderComponent();
         });
-        await waitFor(() => expect(schemasAPILatestMock.called()).toBeTruthy());
+        expect(fetchMock.called(schemasAPILatestUrl)).toBeTruthy();
         expect(screen.getByText('Submit')).toBeInTheDocument();
         expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
       });

kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import New from 'components/Schemas/New/New';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterSchemaNewPath } from 'lib/paths';
-import { screen, waitFor } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const clusterName = 'local';
@@ -10,26 +10,30 @@ const subjectValue = 'subject';
 const schemaValue = 'schema';
 
 describe('New Component', () => {
-  beforeEach(() => {
-    waitFor(() => {
-      render(
-        <WithRoute path={clusterSchemaNewPath()}>
-          <New />
-        </WithRoute>,
-        {
-          initialEntries: [clusterSchemaNewPath(clusterName)],
-        }
-      );
-    });
+  const renderComponent = async () => {
+    render(
+      <WithRoute path={clusterSchemaNewPath()}>
+        <New />
+      </WithRoute>,
+      {
+        initialEntries: [clusterSchemaNewPath(clusterName)],
+      }
+    );
+  };
+
+  beforeEach(async () => {
+    await act(renderComponent);
   });
 
-  it('renders component', () => {
+  it('renders component', async () => {
     expect(screen.getByText('Create')).toBeInTheDocument();
   });
+
   it('submit button will be disabled while form fields are not filled', () => {
     const submitBtn = screen.getByRole('button', { name: /submit/i });
     expect(submitBtn).toBeDisabled();
   });
+
   it('submit button will be enabled when form fields are filled', async () => {
     const subject = screen.getByPlaceholderText('Schema Name');
     const schema = screen.getAllByRole('textbox')[1];

kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx

@@ -12,18 +12,18 @@ import {
 } from 'lib/hooks/api/topics';
 import TopicTable from 'components/Topics/List/TopicTable';
 import { clusterTopicsPath } from 'lib/paths';
+import { useAppDispatch } from 'lib/hooks/redux';
 
 const clusterName = 'test-cluster';
-const mockUnwrap = jest.fn();
-const useDispatchMock = () => jest.fn(() => ({ unwrap: mockUnwrap }));
-
-const getButtonByName = (name: string) => screen.getByRole('button', { name });
+const unwrapMock = jest.fn();
 
 jest.mock('lib/hooks/redux', () => ({
   ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: useDispatchMock,
+  useAppDispatch: jest.fn(),
 }));
 
+const getButtonByName = (name: string) => screen.getByRole('button', { name });
+
 jest.mock('lib/hooks/api/topics', () => ({
   ...jest.requireActual('lib/hooks/api/topics'),
   useDeleteTopic: jest.fn(),
@@ -42,6 +42,9 @@ describe('TopicTable Components', () => {
     (useRecreateTopic as jest.Mock).mockImplementation(() => ({
       mutateAsync: recreateTopicMock,
     }));
+    (useAppDispatch as jest.Mock).mockImplementation(() => () => ({
+      unwrap: unwrapMock,
+    }));
   });
 
   const renderComponent = (
@@ -182,9 +185,9 @@ describe('TopicTable Components', () => {
             ).toBeInTheDocument();
             const confirmBtn = getButtonByName('Confirm');
             expect(confirmBtn).toBeInTheDocument();
-            expect(mockUnwrap).not.toHaveBeenCalled();
+            expect(unwrapMock).not.toHaveBeenCalled();
             await userEvent.click(confirmBtn);
-            expect(mockUnwrap).toHaveBeenCalledTimes(2);
+            expect(unwrapMock).toHaveBeenCalledTimes(2);
             expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
             expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
           });
@@ -279,7 +282,7 @@ describe('TopicTable Components', () => {
           await userEvent.click(
             screen.getByRole('button', { name: 'Confirm' })
           );
-          expect(mockUnwrap).toHaveBeenCalled();
+          expect(unwrapMock).toHaveBeenCalled();
         });
       });
 

kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx

@@ -34,7 +34,6 @@ const renderComponent = (path: string) => {
     { initialEntries: [path] }
   );
 };
-
 const createTopicMock = jest.fn();
 describe('New', () => {
   beforeEach(() => {
@@ -42,9 +41,6 @@ describe('New', () => {
       createResource: createTopicMock,
     }));
   });
-  afterEach(() => {
-    mockNavigate.mockClear();
-  });
   it('checks header for create new', async () => {
     await act(() => {
       renderComponent(clusterTopicNewPath(clusterName));
@@ -52,19 +48,20 @@ describe('New', () => {
     expect(screen.getByRole('heading', { name: 'Create' })).toBeInTheDocument();
   });
 
-  it('checks header for copy', () => {
-    renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
+  it('checks header for copy', async () => {
+    await act(() => {
+      renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
+    });
     expect(screen.getByRole('heading', { name: 'Copy' })).toBeInTheDocument();
   });
   it('validates form', async () => {
-    await renderComponent(clusterTopicNewPath(clusterName));
+    renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
     await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
     await userEvent.tab();
     await expect(
       screen.getByText('name is a required field')
     ).toBeInTheDocument();
-
     await userEvent.type(
       screen.getByLabelText('Number of partitions *'),
       minValue
@@ -78,7 +75,6 @@ describe('New', () => {
     expect(createTopicMock).not.toHaveBeenCalled();
     expect(mockNavigate).not.toHaveBeenCalled();
   });
-
   it('validates form invalid name', async () => {
     renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(
@@ -89,7 +85,6 @@ describe('New', () => {
       screen.getByText('Only alphanumeric, _, -, and . allowed')
     ).toBeInTheDocument();
   });
-
   it('submits valid form', async () => {
     renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);

kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Messages.spec.tsx

@@ -10,11 +10,17 @@ import userEvent from '@testing-library/user-event';
 import { clusterTopicMessagesPath } from 'lib/paths';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
 import { serdesPayload } from 'lib/fixtures/topicMessages';
+import { useTopicDetails } from 'lib/hooks/api/topics';
+import { externalTopicPayload } from 'lib/fixtures/topics';
 
 jest.mock('lib/hooks/api/topicMessages', () => ({
   useSerdes: jest.fn(),
 }));
 
+jest.mock('lib/hooks/api/topics', () => ({
+  useTopicDetails: jest.fn(),
+}));
+
 describe('Messages', () => {
   const searchParams = `?filterQueryType=STRING_CONTAINS&attempt=0&limit=100&seekDirection=${SeekDirection.FORWARD}&seekType=${SeekType.OFFSET}&seekTo=0::9`;
   const renderComponent = (param: string = searchParams) => {
@@ -37,6 +43,9 @@ describe('Messages', () => {
     (useSerdes as jest.Mock).mockImplementation(() => ({
       data: serdesPayload,
     }));
+    (useTopicDetails as jest.Mock).mockImplementation(() => ({
+      data: externalTopicPayload,
+    }));
   });
   describe('component rendering default behavior with the search params', () => {
     beforeEach(() => {

kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx

@@ -21,16 +21,21 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('MessagesTable', () => {
-  const seekToResult = '&seekTo=0::9';
-  const searchParamsValue = `?filterQueryType=STRING_CONTAINS&attempt=0&limit=100&seekDirection=${SeekDirection.FORWARD}&seekType=${SeekType.OFFSET}${seekToResult}`;
-  const searchParams = new URLSearchParams(searchParamsValue);
+  const searchParams = new URLSearchParams({
+    filterQueryType: 'STRING_CONTAINS',
+    attempt: '0',
+    limit: '100',
+    seekDirection: SeekDirection.FORWARD,
+    seekType: SeekType.OFFSET,
+    seekTo: '0::9',
+  });
   const contextValue: ContextProps = {
     isLive: false,
     seekDirection: SeekDirection.FORWARD,
     changeSeekDirection: jest.fn(),
   };
 
-  const setUpComponent = (
+  const renderComponent = (
     params: URLSearchParams = searchParams,
     ctx: ContextProps = contextValue,
     messages: TopicMessage[] = [],
@@ -43,7 +48,7 @@ describe('MessagesTable', () => {
         <MessagesTable />
       </TopicMessagesContext.Provider>,
       {
-        initialEntries: [customPath],
+        initialEntries: [`/messages?${customPath}`],
         preloadedState: {
           topicMessages: {
             messages,
@@ -59,7 +64,7 @@ describe('MessagesTable', () => {
 
   describe('Default props Setup for MessagesTable component', () => {
     beforeEach(() => {
-      setUpComponent();
+      renderComponent();
     });
 
     it('should check the render', () => {
@@ -86,20 +91,25 @@ describe('MessagesTable', () => {
 
   describe('Custom Setup with different props value', () => {
     it('should check if next button and previous is disabled isLive Param', () => {
-      setUpComponent(searchParams, { ...contextValue, isLive: true });
+      renderComponent(searchParams, { ...contextValue, isLive: true });
       expect(screen.queryByText(/next/i)).toBeDisabled();
       expect(screen.queryByText(/back/i)).toBeDisabled();
     });
 
     it('should check the display of the loader element', () => {
-      setUpComponent(searchParams, { ...contextValue, isLive: true }, [], true);
+      renderComponent(
+        searchParams,
+        { ...contextValue, isLive: true },
+        [],
+        true
+      );
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
   });
 
   describe('should render Messages table with data', () => {
     beforeEach(() => {
-      setUpComponent(searchParams, { ...contextValue }, mockTopicsMessages);
+      renderComponent(searchParams, { ...contextValue }, mockTopicsMessages);
     });
 
     it('should check the rendering of the messages', () => {

kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Partition, Replica } from 'generated-sources';
+import type { Partition, Replica } from 'generated-sources';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import Table from 'components/common/NewTable';
 import * as Metrics from 'components/common/Metrics';

kafka-ui-react-app/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx

@@ -9,6 +9,7 @@ import userEvent from '@testing-library/user-event';
 import { clusterTopicPath } from 'lib/paths';
 import { Replica } from 'components/Topics/Topic/Overview/Overview.styled';
 import { useTopicDetails } from 'lib/hooks/api/topics';
+import { useAppDispatch } from 'lib/hooks/redux';
 import {
   externalTopicPayload,
   internalTopicPayload,
@@ -27,12 +28,11 @@ jest.mock('lib/hooks/api/topics', () => ({
   useTopicDetails: jest.fn(),
 }));
 
-const uwrapMock = jest.fn();
-const useDispatchMock = () => jest.fn(() => ({ unwrap: uwrapMock }));
+const unwrapMock = jest.fn();
 
 jest.mock('lib/hooks/redux', () => ({
   ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: useDispatchMock,
+  useAppDispatch: jest.fn(),
 }));
 
 describe('Overview', () => {
@@ -54,6 +54,12 @@ describe('Overview', () => {
     );
   };
 
+  beforeEach(() => {
+    (useAppDispatch as jest.Mock).mockImplementation(() => () => ({
+      unwrap: unwrapMock,
+    }));
+  });
+
   it('at least one replica was rendered', () => {
     renderComponent();
     expect(screen.getByLabelText('replica-info')).toBeInTheDocument();
@@ -117,7 +123,7 @@ describe('Overview', () => {
 
       const clearMessagesButton = screen.getByText('Clear Messages');
       await userEvent.click(clearMessagesButton);
-      expect(uwrapMock).toHaveBeenCalledTimes(1);
+      expect(unwrapMock).toHaveBeenCalledTimes(1);
     });
   });
 

kafka-ui-react-app/src/components/Topics/Topic/__test__/Topic.spec.tsx

@@ -20,6 +20,7 @@ import {
   useRecreateTopic,
   useTopicDetails,
 } from 'lib/hooks/api/topics';
+import { useAppDispatch } from 'lib/hooks/redux';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -32,12 +33,11 @@ jest.mock('lib/hooks/api/topics', () => ({
   useRecreateTopic: jest.fn(),
 }));
 
-const mockUnwrap = jest.fn();
-const useDispatchMock = () => jest.fn(() => ({ unwrap: mockUnwrap }));
+const unwrapMock = jest.fn();
 
 jest.mock('lib/hooks/redux', () => ({
   ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: useDispatchMock,
+  useAppDispatch: jest.fn(),
 }));
 
 jest.mock('components/Topics/Topic/Overview/Overview', () => () => (
@@ -98,6 +98,9 @@ describe('Details', () => {
     (useRecreateTopic as jest.Mock).mockImplementation(() => ({
       mutateAsync: mockRecreate,
     }));
+    (useAppDispatch as jest.Mock).mockImplementation(() => () => ({
+      unwrap: unwrapMock,
+    }));
   });
   describe('Action Bar', () => {
     describe('when it has readonly flag', () => {
@@ -142,7 +145,7 @@ describe('Details', () => {
           name: 'Confirm',
         })[0];
         await waitFor(() => userEvent.click(submitButton));
-        expect(mockUnwrap).toHaveBeenCalledTimes(1);
+        expect(unwrapMock).toHaveBeenCalledTimes(1);
       });
 
       it('closes the modal when cancel button is clicked', async () => {

kafka-ui-react-app/src/components/common/NewTable/Table.tsx

@@ -5,12 +5,14 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-  ColumnDef,
+  getPaginationRowModel,
+} from '@tanstack/react-table';
+import type {
   Row,
   SortingState,
   OnChangeFn,
   PaginationState,
-  getPaginationRowModel,
+  ColumnDef,
 } from '@tanstack/react-table';
 import { useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';

kafka-ui-react-app/vite.config.ts

@@ -4,7 +4,7 @@ import {
   UserConfigExport,
   splitVendorChunkPlugin,
 } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig(({ mode }) => {
@@ -25,7 +25,6 @@ export default defineConfig(({ mode }) => {
     },
   };
   const proxy = process.env.VITE_DEV_PROXY;
-
   if (mode === 'development' && proxy) {
     return {
       ...defaultConfig,