changed redirect logic location from Dashboard.tsx to PageContainer.tsx and test cases

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 (
     <>
       <PageHeading text="Dashboard" />

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

@@ -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(<Dashboard />, {
-      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();
-  });
-});

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

@@ -1,9 +1,12 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+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 (
     <>
       <NavBar onBurgerClick={toggle} setDarkMode={setDarkMode} />

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', () => () => <div>Version</div>);
-
+interface DataType {
-describe('Page Container', () => {
+  data: Cluster[] | undefined;
-  beforeEach(() => {
+}
-    (useClusters as jest.Mock).mockImplementation(() => ({
+jest.mock('lib/hooks/api/clusters');
-      isSuccess: false,
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate,
 }));
+describe('Page Container', () => {
+  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(
       <PageContainer setDarkMode={jest.fn()}>
         <div>child</div>
-      </PageContainer>
+      </PageContainer>,
+      {
+        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();
+    });
+  });
 });