Unify tabs placement (#2637)

* Unify tabs placement

* moved topic page pane

* change

* remove topic pane change

* fix ConnectorsTests

Co-authored-by: Oleg Shur <workshur@gmail.com>
Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorDetails.java

@@ -22,7 +22,6 @@ public class ConnectorDetails {
     public ConnectorDetails waitUntilScreenReady() {
         $(By.xpath("//a[text() ='Tasks']")).shouldBe(Condition.visible);
         $(By.xpath("//a[text() ='Config']")).shouldBe(Condition.visible);
-        $(By.xpath("//a[text() ='Overview']")).shouldBe(Condition.visible);
         return this;
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/qaseIoUtils/QaseExtension.java

@@ -37,7 +37,6 @@ public class QaseExtension implements TestExecutionListener {
     private static final String QASE_PROJECT = "KAFKAUI";
     private static final String QASE_ENABLE = "true";
 
-
     static {
         String qaseApiToken = System.getProperty("QASEIO_API_TOKEN");
         if (qaseApiToken == null || StringUtils.isEmpty(qaseApiToken)) {

kafka-ui-react-app/src/components/Connect/Details/DetailsPage.tsx

@@ -5,8 +5,6 @@ import {
   clusterConnectConnectorConfigPath,
   clusterConnectConnectorConfigRelativePath,
   clusterConnectConnectorPath,
-  clusterConnectConnectorTasksPath,
-  clusterConnectConnectorTasksRelativePath,
   clusterConnectorsPath,
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
@@ -32,6 +30,7 @@ const DetailsPage: React.FC = () => {
       >
         <Actions />
       </PageHeading>
+      <Overview />
       <Navbar role="navigation">
         <NavLink
           to={clusterConnectConnectorPath(
@@ -41,16 +40,6 @@ const DetailsPage: React.FC = () => {
           )}
           className={({ isActive }) => (isActive ? 'is-active' : '')}
           end
-        >
-          Overview
-        </NavLink>
-        <NavLink
-          to={clusterConnectConnectorTasksPath(
-            clusterName,
-            connectName,
-            connectorName
-          )}
-          className={({ isActive }) => (isActive ? 'is-active' : '')}
         >
           Tasks
         </NavLink>
@@ -67,11 +56,7 @@ const DetailsPage: React.FC = () => {
       </Navbar>
       <Suspense fallback={<PageLoader />}>
         <Routes>
-          <Route index element={<Overview />} />
-          <Route
-            path={clusterConnectConnectorTasksRelativePath}
-            element={<Tasks />}
-          />
+          <Route index element={<Tasks />} />
           <Route
             path={clusterConnectConnectorConfigRelativePath}
             element={<Config />}

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

@@ -3,14 +3,13 @@ import { render, WithRoute } from 'lib/testHelpers';
 import {
   clusterConnectConnectorConfigPath,
   clusterConnectConnectorPath,
-  clusterConnectConnectorTasksPath,
   getNonExactPath,
 } from 'lib/paths';
 import { screen } from '@testing-library/dom';
 import DetailsPage from 'components/Connect/Details/DetailsPage';
 
 const DetailsCompText = {
-  overview: 'Overview Page',
+  overview: 'Overview Pane',
   tasks: 'Tasks Page',
   config: 'Config Page',
   actions: 'Actions',
@@ -55,19 +54,14 @@ describe('Details Page', () => {
     expect(screen.getByText(DetailsCompText.actions));
   });
 
-  describe('Router component tests', () => {
-    it('should test if overview is rendering', () => {
-      renderComponent();
-      expect(screen.getByText(DetailsCompText.overview));
-    });
+  it('renders overview pane', () => {
+    renderComponent();
+    expect(screen.getByText(DetailsCompText.overview));
+  });
 
+  describe('Router component tests', () => {
     it('should test if tasks is rendering', () => {
-      const path = clusterConnectConnectorTasksPath(
-        clusterName,
-        connectName,
-        connectorName
-      );
-      renderComponent(path);
+      renderComponent();
       expect(screen.getByText(DetailsCompText.tasks));
     });