From 4650280d3a99d911050e70cb764938503f86ed46 Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Thu, 14 Mar 2024 10:30:27 +0300 Subject: [PATCH 1/4] FE: Split big chunks - Added lazy imports resolves #192 --- frontend/src/components/App.tsx | 11 ++++--- frontend/src/components/Topics/Topics.tsx | 37 ++++++++++++----------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index f3d6d88cd..07804f792 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -8,8 +8,6 @@ import { clusterNewConfigPath, } from 'lib/paths'; import PageLoader from 'components/common/PageLoader/PageLoader'; -import Dashboard from 'components/Dashboard/Dashboard'; -import ClusterPage from 'components/ClusterPage/ClusterPage'; import { ThemeProvider } from 'styled-components'; import { theme, darkTheme } from 'theme/theme'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; @@ -17,16 +15,21 @@ import { showServerError } from 'lib/errorHandling'; import { Toaster } from 'react-hot-toast'; import GlobalCSS from 'components/globalCss'; import * as S from 'components/App.styled'; -import ClusterConfigForm from 'widgets/ClusterConfigForm'; import { ThemeModeContext } from 'components/contexts/ThemeModeContext'; import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal'; import { ConfirmContextProvider } from './contexts/ConfirmContext'; import { GlobalSettingsProvider } from './contexts/GlobalSettingsContext'; -import ErrorPage from './ErrorPage/ErrorPage'; import { UserInfoRolesAccessProvider } from './contexts/UserInfoRolesAccessContext'; import PageContainer from './PageContainer/PageContainer'; +const Dashboard = React.lazy(() => import('components/Dashboard/Dashboard')); +const ClusterPage = React.lazy( + () => import('components/ClusterPage/ClusterPage') +); +const ClusterConfigForm = React.lazy(() => import('widgets/ClusterConfigForm')); +const ErrorPage = React.lazy(() => import('components/ErrorPage/ErrorPage')); + const queryClient = new QueryClient({ defaultOptions: { queries: { diff --git a/frontend/src/components/Topics/Topics.tsx b/frontend/src/components/Topics/Topics.tsx index d6557a858..81e7869c8 100644 --- a/frontend/src/components/Topics/Topics.tsx +++ b/frontend/src/components/Topics/Topics.tsx @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import { Route, Routes } from 'react-router-dom'; +import PageLoader from 'components/common/PageLoader/PageLoader'; import { clusterTopicCopyRelativePath, clusterTopicNewRelativePath, @@ -8,24 +9,26 @@ import { } from 'lib/paths'; import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent'; -import New from './New/New'; -import ListPage from './List/ListPage'; -import Topic from './Topic/Topic'; +const New = React.lazy(() => import('./New/New')); +const ListPage = React.lazy(() => import('./List/ListPage')); +const Topic = React.lazy(() => import('./Topic/Topic')); const Topics: React.FC = () => ( - - } /> - } /> - } /> - - - - } - /> - + }> + + } /> + } /> + } /> + + + + } + /> + + ); export default Topics; From 926735edc56bf68f5e7f4691fc4261696ab9202e Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Fri, 15 Mar 2024 09:31:33 +0300 Subject: [PATCH 2/4] FE: Split big chunks fix tests resolves #192 --- .../components/Topics/__tests__/Topics.spec.tsx | 14 ++++++++++---- frontend/src/components/__tests__/App.spec.tsx | 6 ++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Topics/__tests__/Topics.spec.tsx b/frontend/src/components/Topics/__tests__/Topics.spec.tsx index 0e077445f..9bb0aaaaf 100644 --- a/frontend/src/components/Topics/__tests__/Topics.spec.tsx +++ b/frontend/src/components/Topics/__tests__/Topics.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; import Topics from 'components/Topics/Topics'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { clusterTopicCopyPath, clusterTopicNewPath, @@ -37,12 +37,16 @@ describe('Topics Component', () => { it('should check if the page is Topics List rendered', () => { setUpComponent(clusterTopicsPath(clusterName)); - expect(screen.getByText(listContainer)).toBeInTheDocument(); + waitFor(() => { + expect(screen.getByText(listContainer)).toBeInTheDocument(); + }); }); it('should check if the page is New Topic rendered', () => { setUpComponent(clusterTopicNewPath(clusterName)); - expect(screen.getByText(newCopyContainer)).toBeInTheDocument(); + waitFor(() => { + expect(screen.getByText(newCopyContainer)).toBeInTheDocument(); + }); }); it('should check if the page is Copy Topic rendered', () => { @@ -52,6 +56,8 @@ describe('Topics Component', () => { it('should check if the page is Topic page rendered', () => { setUpComponent(clusterTopicPath(clusterName, topicName)); - expect(screen.getByText(topicContainer)).toBeInTheDocument(); + waitFor(() => { + expect(screen.getByText(topicContainer)).toBeInTheDocument(); + }); }); }); diff --git a/frontend/src/components/__tests__/App.spec.tsx b/frontend/src/components/__tests__/App.spec.tsx index feb41e6a8..279dcb766 100644 --- a/frontend/src/components/__tests__/App.spec.tsx +++ b/frontend/src/components/__tests__/App.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import App from 'components/App'; import { render } from 'lib/testHelpers'; import { useGetUserInfo } from 'lib/hooks/api/roles'; @@ -33,7 +33,9 @@ describe('App', () => { }); it('Renders navigation', async () => { - expect(screen.getByText('Navigation')).toBeInTheDocument(); + waitFor(() => { + expect(screen.getByText('Navigation')).toBeInTheDocument(); + }); }); it('Renders NavBar', async () => { From 4c96d126140b73bdc2480153987669a7853c954d Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Thu, 28 Mar 2024 16:32:14 +0300 Subject: [PATCH 3/4] FE: Split big chunks fix tests resolves #192 --- .../Topics/__tests__/Topics.spec.tsx | 18 ++++++------------ frontend/src/components/__tests__/App.spec.tsx | 4 +--- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/Topics/__tests__/Topics.spec.tsx b/frontend/src/components/Topics/__tests__/Topics.spec.tsx index 9bb0aaaaf..0760b0ee4 100644 --- a/frontend/src/components/Topics/__tests__/Topics.spec.tsx +++ b/frontend/src/components/Topics/__tests__/Topics.spec.tsx @@ -35,18 +35,14 @@ describe('Topics Component', () => { { initialEntries: [path] } ); - it('should check if the page is Topics List rendered', () => { + it('should check if the page is Topics List rendered', async () => { setUpComponent(clusterTopicsPath(clusterName)); - waitFor(() => { - expect(screen.getByText(listContainer)).toBeInTheDocument(); - }); + expect(await screen.findByText(listContainer)).toBeInTheDocument(); }); - it('should check if the page is New Topic rendered', () => { + it('should check if the page is New Topic rendered', async () => { setUpComponent(clusterTopicNewPath(clusterName)); - waitFor(() => { - expect(screen.getByText(newCopyContainer)).toBeInTheDocument(); - }); + expect(await screen.findByText(newCopyContainer)).toBeInTheDocument(); }); it('should check if the page is Copy Topic rendered', () => { @@ -54,10 +50,8 @@ describe('Topics Component', () => { expect(screen.getByText(newCopyContainer)).toBeInTheDocument(); }); - it('should check if the page is Topic page rendered', () => { + it('should check if the page is Topic page rendered', async () => { setUpComponent(clusterTopicPath(clusterName, topicName)); - waitFor(() => { - expect(screen.getByText(topicContainer)).toBeInTheDocument(); - }); + expect(await screen.findByText(topicContainer)).toBeInTheDocument(); }); }); diff --git a/frontend/src/components/__tests__/App.spec.tsx b/frontend/src/components/__tests__/App.spec.tsx index 279dcb766..9e2b8177e 100644 --- a/frontend/src/components/__tests__/App.spec.tsx +++ b/frontend/src/components/__tests__/App.spec.tsx @@ -33,9 +33,7 @@ describe('App', () => { }); it('Renders navigation', async () => { - waitFor(() => { - expect(screen.getByText('Navigation')).toBeInTheDocument(); - }); + expect(await screen.findByText('Navigation')).toBeInTheDocument(); }); it('Renders NavBar', async () => { From 0b81c3369788c92d3567f38b434febcf889d3bef Mon Sep 17 00:00:00 2001 From: Renat Kalimulin Date: Thu, 28 Mar 2024 16:37:30 +0300 Subject: [PATCH 4/4] FE: Split big chunks fix tests resolves #192 --- frontend/src/components/Topics/__tests__/Topics.spec.tsx | 2 +- frontend/src/components/__tests__/App.spec.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Topics/__tests__/Topics.spec.tsx b/frontend/src/components/Topics/__tests__/Topics.spec.tsx index 0760b0ee4..e4bc71942 100644 --- a/frontend/src/components/Topics/__tests__/Topics.spec.tsx +++ b/frontend/src/components/Topics/__tests__/Topics.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, WithRoute } from 'lib/testHelpers'; import Topics from 'components/Topics/Topics'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { clusterTopicCopyPath, clusterTopicNewPath, diff --git a/frontend/src/components/__tests__/App.spec.tsx b/frontend/src/components/__tests__/App.spec.tsx index 9e2b8177e..9a1213dcf 100644 --- a/frontend/src/components/__tests__/App.spec.tsx +++ b/frontend/src/components/__tests__/App.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import App from 'components/App'; import { render } from 'lib/testHelpers'; import { useGetUserInfo } from 'lib/hooks/api/roles';