Repository: provectus/kafka-ui
Issue: Unify tabs placement
Labels: good first issue
scope/frontend
type/refactoring
status/accepted
hacktoberfest

e.g. connector overview page:
<img width="831" alt="image" src="https://user-images.githubusercontent.com/1494347/180577153-3eaa5d32-9d3a-4c99-b470-81db2759a803.png">
tabs are placed above the panes and the page looks empty and weird. Let's unify **all the views** with this approach:
<img width="671" alt="image" src="https://user-images.githubusercontent.com/1494347/180577197-385faf9c-1500-4fb0-836a-52d87191eed8.png">
broker overview page panes are located below the tabs therefore "overview" tab is no longer required

Issue comments:
Tabs are still on top for topics:
![image](https://user-images.githubusercontent.com/112083452/192267959-a6ef8be9-7886-4d1f-b3c5-bd2a17a08b67.png)

Needs a fix.
@Haarolean considering the comment from Oleg in #2637 , can this considered to WAD for the topics and therefore closed?

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorDetails.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorDetails.java
index a63a1f47c16..82768781d4d 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connector/ConnectorDetails.java
+++ b/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;
     }
 
diff --git a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/qaseIoUtils/QaseExtension.java b/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/qaseIoUtils/QaseExtension.java
index fcc19f31e2d..52c3ff9b908 100644
--- a/kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/qaseIoUtils/QaseExtension.java
+++ b/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)) {
diff --git a/kafka-ui-react-app/src/components/Connect/Details/DetailsPage.tsx b/kafka-ui-react-app/src/components/Connect/Details/DetailsPage.tsx
index 2ec9632b5e0..a5175ea8bfa 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/DetailsPage.tsx
+++ b/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 />}
diff --git a/kafka-ui-react-app/src/components/Connect/Details/__tests__/DetailsPage.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/__tests__/DetailsPage.spec.tsx
index 8971111d4ba..46aa1037bef 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/__tests__/DetailsPage.spec.tsx
+++ b/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));
     });
 


Test patch: