diff --git a/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx b/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx index 7eab4c1d2f..5af2beda6e 100644 --- a/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import PageHeading from 'components/common/PageHeading/PageHeading'; import * as Metrics from 'components/common/Metrics'; import { Tag } from 'components/common/Tag/Tag.styled'; @@ -11,7 +11,6 @@ import useBoolean from 'lib/hooks/useBoolean'; import { Button } from 'components/common/Button/Button'; import { clusterNewConfigPath } from 'lib/paths'; import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext'; -import { useNavigate } from 'react-router-dom'; import * as S from './Dashboard.styled'; import ClusterName from './ClusterName'; @@ -21,7 +20,6 @@ const Dashboard: React.FC = () => { const clusters = useClusters(); const { value: showOfflineOnly, toggle } = useBoolean(false); const appInfo = React.useContext(GlobalSettingsContext); - const navigate = useNavigate(); const config = React.useMemo(() => { const clusterList = clusters.data || []; const offlineClusters = clusterList.filter( @@ -56,12 +54,6 @@ const Dashboard: React.FC = () => { return initialColumns; }, []); - useEffect(() => { - if (appInfo.hasDynamicConfig && !clusters.data) { - navigate(clusterNewConfigPath); - } - }, [clusters, appInfo.hasDynamicConfig]); - return ( <> diff --git a/kafka-ui-react-app/src/components/Dashboard/__test__/Dashboard.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/__test__/Dashboard.spec.tsx deleted file mode 100644 index e9141e980e..0000000000 --- a/kafka-ui-react-app/src/components/Dashboard/__test__/Dashboard.spec.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { useClusters } from 'lib/hooks/api/clusters'; -import Dashboard from 'components/Dashboard/Dashboard'; -import { Cluster, ServerStatus } from 'generated-sources'; -import { render } from 'lib/testHelpers'; - -interface DataType { - data: Cluster[] | undefined; -} -jest.mock('lib/hooks/api/clusters'); -const mockedNavigate = jest.fn(); -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useNavigate: () => mockedNavigate, -})); -describe('Dashboard component', () => { - const renderComponent = (hasDynamicConfig: boolean, data: DataType) => { - const useClustersMock = useClusters as jest.Mock; - useClustersMock.mockReturnValue(data); - render(, { - globalSettings: { hasDynamicConfig }, - }); - }; - it('redirects to new cluster configuration page if there are no clusters and dynamic config is enabled', async () => { - await renderComponent(true, { data: undefined }); - - expect(mockedNavigate).toHaveBeenCalled(); - }); - - it('should not navigate to new cluster config page when there are clusters', async () => { - await renderComponent(true, { - data: [{ name: 'Cluster 1', status: ServerStatus.ONLINE }], - }); - - expect(mockedNavigate).not.toHaveBeenCalled(); - }); - - it('should not navigate to new cluster config page when there are no clusters and hasDynamicConfig is false', async () => { - await renderComponent(false, { - data: [], - }); - - expect(mockedNavigate).not.toHaveBeenCalled(); - }); -}); diff --git a/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx b/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx index a5697e89ab..39d8fac8aa 100644 --- a/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx +++ b/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx @@ -1,9 +1,12 @@ -import React, { PropsWithChildren } from 'react'; -import { useLocation } from 'react-router-dom'; +import React, { PropsWithChildren, useEffect } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; import NavBar from 'components/NavBar/NavBar'; import * as S from 'components/PageContainer/PageContainer.styled'; import Nav from 'components/Nav/Nav'; import useBoolean from 'lib/hooks/useBoolean'; +import { clusterNewConfigPath } from 'lib/paths'; +import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext'; +import { useClusters } from 'lib/hooks/api/clusters'; const PageContainer: React.FC< PropsWithChildren<{ setDarkMode: (value: boolean) => void }> @@ -13,12 +16,20 @@ const PageContainer: React.FC< toggle, setFalse: closeSidebar, } = useBoolean(false); + const clusters = useClusters(); + const appInfo = React.useContext(GlobalSettingsContext); const location = useLocation(); + const navigate = useNavigate(); React.useEffect(() => { closeSidebar(); }, [location, closeSidebar]); + useEffect(() => { + if (appInfo.hasDynamicConfig && !clusters.data?.length) { + navigate(clusterNewConfigPath); + } + }, [clusters.data, appInfo.hasDynamicConfig]); return ( <> diff --git a/kafka-ui-react-app/src/components/PageContainer/__tests__/PageContainer.spec.tsx b/kafka-ui-react-app/src/components/PageContainer/__tests__/PageContainer.spec.tsx index 25f8fe0a2a..d6156d5c3d 100644 --- a/kafka-ui-react-app/src/components/PageContainer/__tests__/PageContainer.spec.tsx +++ b/kafka-ui-react-app/src/components/PageContainer/__tests__/PageContainer.spec.tsx @@ -4,21 +4,24 @@ import userEvent from '@testing-library/user-event'; import { render } from 'lib/testHelpers'; import PageContainer from 'components/PageContainer/PageContainer'; import { useClusters } from 'lib/hooks/api/clusters'; +import { Cluster, ServerStatus } from 'generated-sources'; const burgerButtonOptions = { name: 'burger' }; -jest.mock('lib/hooks/api/clusters', () => ({ - ...jest.requireActual('lib/hooks/api/roles'), - useClusters: jest.fn(), -})); - jest.mock('components/Version/Version', () => () =>
Version
); - +interface DataType { + data: Cluster[] | undefined; +} +jest.mock('lib/hooks/api/clusters'); +const mockedNavigate = jest.fn(); +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockedNavigate, +})); describe('Page Container', () => { - beforeEach(() => { - (useClusters as jest.Mock).mockImplementation(() => ({ - isSuccess: false, - })); + const renderComponent = (hasDynamicConfig: boolean, data: DataType) => { + const useClustersMock = useClusters as jest.Mock; + useClustersMock.mockReturnValue(data); Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(() => ({ @@ -26,15 +29,18 @@ describe('Page Container', () => { addListener: jest.fn(), })), }); - render(
child
-
+ , + { + globalSettings: { hasDynamicConfig }, + } ); - }); + }; it('handle burger click correctly', async () => { + renderComponent(false, { data: undefined }); const burger = within(screen.getByLabelText('Page Header')).getByRole( 'button', burgerButtonOptions @@ -49,6 +55,31 @@ describe('Page Container', () => { }); it('render the inner container', async () => { + renderComponent(false, { data: undefined }); expect(screen.getByText('child')).toBeInTheDocument(); }); + + describe('Redirect to the Wizard page', () => { + it('redirects to new cluster configuration page if there are no clusters and dynamic config is enabled', async () => { + await renderComponent(true, { data: undefined }); + + expect(mockedNavigate).toHaveBeenCalled(); + }); + + it('should not navigate to new cluster config page when there are clusters', async () => { + await renderComponent(true, { + data: [{ name: 'Cluster 1', status: ServerStatus.ONLINE }], + }); + + expect(mockedNavigate).not.toHaveBeenCalled(); + }); + + it('should not navigate to new cluster config page when there are no clusters and hasDynamicConfig is false', async () => { + await renderComponent(false, { + data: [], + }); + + expect(mockedNavigate).not.toHaveBeenCalled(); + }); + }); });