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