From e1ae0cd8b14a31170c3bc0cc443469ee2126c5b2 Mon Sep 17 00:00:00 2001
From: Alexis Demetriou <alex.demetriouad@gmail.com>
Date: Wed, 21 Aug 2024 17:05:53 +0300
Subject: [PATCH 1/8] Fixed active sidebar menu is highlighted for the correct
 Kafka instance

---
 frontend/src/components/ACLPage/List/List.tsx |  2 +-
 .../src/components/Brokers/Broker/Broker.tsx  |  1 +
 .../Brokers/BrokersList/BrokersList.tsx       |  2 +-
 .../Connect/Details/DetailsPage.tsx           |  1 +
 .../src/components/Connect/List/ListPage.tsx  |  2 +-
 frontend/src/components/Connect/New/New.tsx   |  1 +
 .../ConsumerGroups/Details/Details.tsx        |  1 +
 .../Details/ResetOffsets/ResetOffsets.tsx     |  1 +
 .../src/components/ConsumerGroups/List.tsx    |  2 +-
 frontend/src/components/KsqlDb/KsqlDb.tsx     |  2 +-
 .../Nav/ClusterMenu/ClusterMenu.tsx           | 48 ++++++++-----------
 .../__tests__/ClusterMenu.spec.tsx            |  9 ++--
 frontend/src/components/Nav/Menu/MenuTab.tsx  | 42 ++++++++--------
 .../Nav/Menu/__tests__/MenuTab.spec.tsx       |  2 +-
 frontend/src/components/Nav/Nav.styled.ts     |  9 ++++
 frontend/src/components/Nav/Nav.tsx           | 16 +++++--
 .../components/Schemas/Details/Details.tsx    |  1 +
 frontend/src/components/Schemas/Diff/Diff.tsx |  1 +
 frontend/src/components/Schemas/Edit/Form.tsx |  1 +
 frontend/src/components/Schemas/List/List.tsx |  2 +-
 frontend/src/components/Schemas/New/New.tsx   |  1 +
 .../src/components/Topics/List/ListPage.tsx   |  6 ++-
 frontend/src/components/Topics/New/New.tsx    |  1 +
 .../src/components/Topics/Topic/Topic.tsx     |  1 +
 .../common/PageHeading/PageHeading.styled.ts  | 19 ++++----
 .../common/PageHeading/PageHeading.tsx        | 19 +++++++-
 frontend/src/theme/theme.ts                   |  2 +
 27 files changed, 119 insertions(+), 76 deletions(-)

diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 26155172b..93a8c1e77 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading text="Access Control List">
+      <PageHeading clusterName={clusterName} text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
diff --git a/frontend/src/components/Brokers/Broker/Broker.tsx b/frontend/src/components/Brokers/Broker/Broker.tsx
index bd0056eae..cacbc5ae3 100644
--- a/frontend/src/components/Brokers/Broker/Broker.tsx
+++ b/frontend/src/components/Brokers/Broker/Broker.tsx
@@ -39,6 +39,7 @@ const Broker: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={`Broker ${brokerId}`}
         backTo={clusterBrokersPath(clusterName)}
         backText="Brokers"
diff --git a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
index 3ef59d0b5..ae4500953 100644
--- a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Brokers" />
+      <PageHeading clusterName={clusterName} text="Brokers" />
 
       <BrokersMetrics
         brokerCount={brokerCount}
diff --git a/frontend/src/components/Connect/Details/DetailsPage.tsx b/frontend/src/components/Connect/Details/DetailsPage.tsx
index a5175ea8b..1b8dac420 100644
--- a/frontend/src/components/Connect/Details/DetailsPage.tsx
+++ b/frontend/src/components/Connect/Details/DetailsPage.tsx
@@ -24,6 +24,7 @@ const DetailsPage: React.FC = () => {
   return (
     <div>
       <PageHeading
+        clusterName={clusterName}
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
index 5d61ff3c4..0c277523b 100644
--- a/frontend/src/components/Connect/List/ListPage.tsx
+++ b/frontend/src/components/Connect/List/ListPage.tsx
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Connectors">
+      <PageHeading clusterName={clusterName} text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
diff --git a/frontend/src/components/Connect/New/New.tsx b/frontend/src/components/Connect/New/New.tsx
index db1d82e3c..26a45c07e 100644
--- a/frontend/src/components/Connect/New/New.tsx
+++ b/frontend/src/components/Connect/New/New.tsx
@@ -95,6 +95,7 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text="Create new connector"
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/ConsumerGroups/Details/Details.tsx b/frontend/src/components/ConsumerGroups/Details/Details.tsx
index e7f952c8b..b8d206923 100644
--- a/frontend/src/components/ConsumerGroups/Details/Details.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/Details.tsx
@@ -65,6 +65,7 @@ const Details: React.FC = () => {
     <div>
       <div>
         <PageHeading
+          clusterName={clusterName}
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
index 0b5864794..1de88e1f3 100644
--- a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
@@ -38,6 +38,7 @@ const ResetOffsets: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={routerParams.clusterName}
         text={consumerGroupID}
         backTo={clusterConsumerGroupsPath(routerParams.clusterName)}
         backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 683f8b27b..8b697442c 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading text="Consumers" />
+      <PageHeading clusterName={clusterName} text="Consumers" />
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Consumer Group ID" />
       </ControlPanelWrapper>
diff --git a/frontend/src/components/KsqlDb/KsqlDb.tsx b/frontend/src/components/KsqlDb/KsqlDb.tsx
index d105720aa..6876a3685 100644
--- a/frontend/src/components/KsqlDb/KsqlDb.tsx
+++ b/frontend/src/components/KsqlDb/KsqlDb.tsx
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="KSQL DB">
+      <PageHeading clusterName={clusterName} text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index f6062402f..f2623a671 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -1,23 +1,16 @@
-import React, { type FC, useState } from 'react';
+import React, { FC } from 'react';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import * as S from 'components/Nav/Nav.styled';
 import MenuTab from 'components/Nav/Menu/MenuTab';
 import MenuItem from 'components/Nav/Menu/MenuItem';
 import {
   clusterACLPath,
-  clusterAclRelativePath,
-  clusterBrokerRelativePath,
-  clusterBrokersPath,
   clusterConnectorsPath,
-  clusterConnectorsRelativePath,
   clusterConsumerGroupsPath,
-  clusterConsumerGroupsRelativePath,
   clusterKsqlDbPath,
-  clusterKsqlDbRelativePath,
   clusterSchemasPath,
-  clusterSchemasRelativePath,
   clusterTopicsPath,
-  clusterTopicsRelativePath,
+  clusterBrokersPath,
 } from 'lib/paths';
 import { useLocation } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
@@ -27,70 +20,71 @@ interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  singleMode?: boolean;
+  openTab?: string | false;
+  onTabClick: (tabName: string) => void;
 }
 
 const ClusterMenu: FC<ClusterMenuProps> = ({
   name,
   status,
   features,
-  singleMode,
+  openTab,
+  onTabClick,
 }) => {
-  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
-    features?.includes(key);
-  const [isOpen, setIsOpen] = useState(!!singleMode);
   const location = useLocation();
   const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
     `clusterColor-${name}`,
     'transparent'
   );
 
-  const getIsMenuItemActive = (path: string) =>
-    location.pathname.includes(path);
+  const getIsMenuItemActive = (path: string) => location.pathname === path;
+
+  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
+    features?.includes(key);
 
   return (
     <S.ClusterList role="menu" $colorKey={colorKey}>
       <MenuTab
         title={name}
         status={status}
-        isOpen={isOpen}
-        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
         setColorKey={setColorKey}
+        isOpen={openTab === name}
+        onClick={() => onTabClick(name)}
       />
-      {isOpen && (
+      <S.AccordionContent isOpen={openTab === name}>
         <S.List>
           <MenuItem
-            isActive={getIsMenuItemActive(clusterBrokerRelativePath)}
+            isActive={getIsMenuItemActive(clusterBrokersPath(name))}
             to={clusterBrokersPath(name)}
             title="Brokers"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterTopicsRelativePath)}
+            isActive={getIsMenuItemActive(clusterTopicsPath(name))}
             to={clusterTopicsPath(name)}
             title="Topics"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterConsumerGroupsRelativePath)}
+            isActive={getIsMenuItemActive(clusterConsumerGroupsPath(name))}
             to={clusterConsumerGroupsPath(name)}
             title="Consumers"
           />
           {hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterSchemasRelativePath)}
+              isActive={getIsMenuItemActive(clusterSchemasPath(name))}
               to={clusterSchemasPath(name)}
               title="Schema Registry"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterConnectorsRelativePath)}
+              isActive={getIsMenuItemActive(clusterConnectorsPath(name))}
               to={clusterConnectorsPath(name)}
               title="Kafka Connect"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterKsqlDbRelativePath)}
+              isActive={getIsMenuItemActive(clusterKsqlDbPath(name))}
               to={clusterKsqlDbPath(name)}
               title="KSQL DB"
             />
@@ -98,13 +92,13 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
           {(hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
             hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_EDIT)) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterAclRelativePath)}
+              isActive={getIsMenuItemActive(clusterACLPath(name))}
               to={clusterACLPath(name)}
               title="ACL"
             />
           )}
         </S.List>
-      )}
+      </S.AccordionContent>
     </S.ClusterList>
   );
 };
diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index ce0bb9731..e998b820e 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -8,12 +8,15 @@ import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
 describe('ClusterMenu', () => {
-  const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
+  const handleTabClick = jest.fn();
+
+  const setupComponent = (cluster: Cluster, openTab?: string | false) => (
     <ClusterMenu
       name={cluster.name}
       status={cluster.status}
       features={cluster.features}
-      singleMode={singleMode}
+      openTab={openTab}
+      onTabClick={handleTabClick}
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
@@ -59,7 +62,7 @@ describe('ClusterMenu', () => {
     expect(screen.getByTitle('KSQL DB')).toBeInTheDocument();
   });
   it('renders open cluster menu', () => {
-    render(setupComponent(onlineClusterPayload, true), {
+    render(setupComponent(onlineClusterPayload), {
       initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)],
     });
 
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
index 6ee78ae18..725bb2025 100644
--- a/frontend/src/components/Nav/Menu/MenuTab.tsx
+++ b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -9,38 +9,38 @@ export interface MenuTabProps {
   title: string;
   status: ServerStatus;
   isOpen: boolean;
-  toggleClusterMenu: () => void;
+  onClick: () => void;
   setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
   title,
-  toggleClusterMenu,
+  onClick,
   status,
   isOpen,
   setColorKey,
 }) => (
-  <S.MenuItem $variant="secondary" onClick={toggleClusterMenu}>
-    <S.ContentWrapper>
-      <S.StatusIconWrapper>
-        <S.StatusIcon status={status} aria-label="status">
-          <title>{status}</title>
-        </S.StatusIcon>
-      </S.StatusIconWrapper>
+    <S.MenuItem $variant="secondary" onClick={onClick}>
+      <S.ContentWrapper>
+        <S.StatusIconWrapper>
+          <S.StatusIcon status={status} aria-label="status">
+            <title>{status}</title>
+          </S.StatusIcon>
+        </S.StatusIconWrapper>
 
-      <S.Title title={title}>{title}</S.Title>
-    </S.ContentWrapper>
+        <S.Title title={title}>{title}</S.Title>
+      </S.ContentWrapper>
 
-    <S.ActionsWrapper>
-      <S.ColorPickerWrapper>
-        <MenuColorPicker setColorKey={setColorKey} />
-      </S.ColorPickerWrapper>
+      <S.ActionsWrapper>
+        <S.ColorPickerWrapper>
+          <MenuColorPicker setColorKey={setColorKey} />
+        </S.ColorPickerWrapper>
 
-      <S.ChevronWrapper>
-        <S.ChevronIcon $isOpen={isOpen} />
-      </S.ChevronWrapper>
-    </S.ActionsWrapper>
-  </S.MenuItem>
-);
+        <S.ChevronWrapper>
+          <S.ChevronIcon $isOpen={isOpen} />
+        </S.ChevronWrapper>
+      </S.ActionsWrapper>
+    </S.MenuItem>
+  );
 
 export default MenuTab;
diff --git a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
index d8d08a9a8..028798ced 100644
--- a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
+++ b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
@@ -15,7 +15,7 @@ describe('MenuTab component', () => {
       status={ServerStatus.ONLINE}
       isOpen
       title={testClusterName}
-      toggleClusterMenu={toggleClusterMenuMock}
+      onClick={toggleClusterMenuMock}
       {...props}
     />
   );
diff --git a/frontend/src/components/Nav/Nav.styled.ts b/frontend/src/components/Nav/Nav.styled.ts
index 7d25483e7..8bdb52c98 100644
--- a/frontend/src/components/Nav/Nav.styled.ts
+++ b/frontend/src/components/Nav/Nav.styled.ts
@@ -20,3 +20,12 @@ export const ClusterList = styled.ul.attrs<{ $colorKey: ClusterColorKey }>({
   background-color: ${({ theme, $colorKey }) =>
     theme.clusterMenu.backgroundColor[$colorKey]};
 `;
+
+export const AccordionContent = styled.div<{ isOpen: boolean }>`
+  overflow: hidden;
+  max-height: ${({ isOpen }) => (isOpen ? '500px' : '0')};
+  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
+  transition:
+    max-height 0.4s ease-out,
+    opacity 0.3s ease-out;
+`;
diff --git a/frontend/src/components/Nav/Nav.tsx b/frontend/src/components/Nav/Nav.tsx
index 2741b4351..a9bbf45b1 100644
--- a/frontend/src/components/Nav/Nav.tsx
+++ b/frontend/src/components/Nav/Nav.tsx
@@ -1,26 +1,32 @@
+import React, { FC, useState } from 'react';
 import { useClusters } from 'lib/hooks/api/clusters';
-import React, { type FC } from 'react';
 
 import * as S from './Nav.styled';
 import MenuItem from './Menu/MenuItem';
 import ClusterMenu from './ClusterMenu/ClusterMenu';
 
 const Nav: FC = () => {
-  const clusters = useClusters();
+  const [openTab, setOpenTab] = useState<string | false>(false);
+  const { isSuccess, data: clusters } = useClusters();
+
+  const handleTabChange = (tabName: string) => {
+    setOpenTab((prev) => (prev === tabName ? false : tabName));
+  };
 
   return (
     <aside aria-label="Sidebar Menu">
       <S.List>
         <MenuItem variant="primary" to="/" title="Dashboard" />
       </S.List>
-      {clusters.isSuccess &&
-        clusters.data.map((cluster) => (
+      {isSuccess &&
+        clusters.map((cluster) => (
           <ClusterMenu
             key={cluster.name}
             name={cluster.name}
             status={cluster.status}
             features={cluster.features}
-            singleMode={clusters.data.length === 1}
+            openTab={openTab}
+            onTabClick={() => handleTabChange(cluster.name)}
           />
         ))}
     </aside>
diff --git a/frontend/src/components/Schemas/Details/Details.tsx b/frontend/src/components/Schemas/Details/Details.tsx
index 2d0c345d7..e275226c2 100644
--- a/frontend/src/components/Schemas/Details/Details.tsx
+++ b/frontend/src/components/Schemas/Details/Details.tsx
@@ -72,6 +72,7 @@ const Details: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={schema?.subject || ''}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Diff/Diff.tsx b/frontend/src/components/Schemas/Diff/Diff.tsx
index 43e31eddf..9100fa6b0 100644
--- a/frontend/src/components/Schemas/Diff/Diff.tsx
+++ b/frontend/src/components/Schemas/Diff/Diff.tsx
@@ -58,6 +58,7 @@ const Diff: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={`${subject} compare versions`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Edit/Form.tsx b/frontend/src/components/Schemas/Edit/Form.tsx
index 8542732ac..fb3775e80 100644
--- a/frontend/src/components/Schemas/Edit/Form.tsx
+++ b/frontend/src/components/Schemas/Edit/Form.tsx
@@ -95,6 +95,7 @@ const Form: React.FC<FormProps> = ({ schema }) => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text={`${subject} Edit`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
index 5e4daf5f4..084556306 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -60,7 +60,7 @@ const List: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Schema Registry">
+      <PageHeading clusterName={clusterName} text="Schema Registry">
         {!isReadOnly && (
           <>
             <GlobalSchemaSelector />
diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
index 4bfcc4605..3f45b8364 100644
--- a/frontend/src/components/Schemas/New/New.tsx
+++ b/frontend/src/components/Schemas/New/New.tsx
@@ -72,6 +72,7 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
+        clusterName={clusterName}
         text="Create"
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Topics/List/ListPage.tsx b/frontend/src/components/Topics/List/ListPage.tsx
index fc1c9dad6..9645882ba 100644
--- a/frontend/src/components/Topics/List/ListPage.tsx
+++ b/frontend/src/components/Topics/List/ListPage.tsx
@@ -1,11 +1,12 @@
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { clusterTopicNewRelativePath } from 'lib/paths';
+import { ClusterNameRoute, clusterTopicNewRelativePath } from 'lib/paths';
 import { PER_PAGE } from 'lib/constants';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import { ActionButton } from 'components/common/ActionComponent';
 import PageHeading from 'components/common/PageHeading/PageHeading';
+import useAppParams from 'lib/hooks/useAppParams';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import Switch from 'components/common/Switch/Switch';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -15,6 +16,7 @@ import { Action, ResourceType } from 'generated-sources';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
+  const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Set the search params to the url based on the localStorage value
@@ -46,7 +48,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Topics">
+      <PageHeading clusterName={clusterName} text="Topics">
         {!isReadOnly && (
           <ActionButton
             buttonType="primary"
diff --git a/frontend/src/components/Topics/New/New.tsx b/frontend/src/components/Topics/New/New.tsx
index acc63185f..cbeb4f8a0 100644
--- a/frontend/src/components/Topics/New/New.tsx
+++ b/frontend/src/components/Topics/New/New.tsx
@@ -50,6 +50,7 @@ const New: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={search ? 'Copy' : 'Create'}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
index a40bcfc12..b24e1cf82 100644
--- a/frontend/src/components/Topics/Topic/Topic.tsx
+++ b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -68,6 +68,7 @@ const Topic: React.FC = () => {
   return (
     <>
       <PageHeading
+        clusterName={clusterName}
         text={topicName}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/common/PageHeading/PageHeading.styled.ts b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
index 7010429ec..77513688b 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.styled.ts
+++ b/frontend/src/components/common/PageHeading/PageHeading.styled.ts
@@ -6,6 +6,11 @@ export const Breadcrumbs = styled.div`
   align-items: baseline;
 `;
 
+export const ClusterTitle = styled.text`
+  color: ${({ theme }) => theme.pageHeading.backLink.color.disabled};
+  position: relative;
+`;
+
 export const BackLink = styled(NavLink)`
   color: ${({ theme }) => theme.pageHeading.backLink.color.normal};
   position: relative;
@@ -13,16 +18,12 @@ export const BackLink = styled(NavLink)`
   &:hover {
     ${({ theme }) => theme.pageHeading.backLink.color.hover};
   }
+`;
 
-  &::after {
-    content: '';
-    position: absolute;
-    right: -11px;
-    bottom: 2px;
-    border-left: 1px solid ${({ theme }) => theme.pageHeading.dividerColor};
-    height: 20px;
-    transform: rotate(14deg);
-  }
+export const Slash = styled.text`
+  color: ${({ theme }) => theme.pageHeading.backLink.color.disabled};
+  position: relative;
+  margin: 0 8px;
 `;
 
 export const Wrapper = styled.div`
diff --git a/frontend/src/components/common/PageHeading/PageHeading.tsx b/frontend/src/components/common/PageHeading/PageHeading.tsx
index ffbdc1a27..56624254c 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.tsx
+++ b/frontend/src/components/common/PageHeading/PageHeading.tsx
@@ -5,12 +5,14 @@ import * as S from './PageHeading.styled';
 
 interface PageHeadingProps {
   text: string;
+  clusterName?: string;
   backTo?: string;
   backText?: string;
 }
 
 const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   text,
+  clusterName,
   backTo,
   backText,
   children,
@@ -20,8 +22,21 @@ const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   return (
     <S.Wrapper>
       <S.Breadcrumbs>
-        {isBackButtonVisible && <S.BackLink to={backTo}>{backText}</S.BackLink>}
-        <Heading>{text}</Heading>
+        <Heading>
+          {clusterName && (
+            <>
+              <S.ClusterTitle>{clusterName}</S.ClusterTitle>
+              <S.Slash>/</S.Slash>
+            </>
+          )}
+          {isBackButtonVisible && (
+            <>
+              <S.BackLink to={backTo}>{backText}</S.BackLink>
+              <S.Slash>/</S.Slash>
+            </>
+          )}
+          {text}
+        </Heading>
       </S.Breadcrumbs>
       <div>{children}</div>
     </S.Wrapper>
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index d0f6c4067..80882193f 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -435,6 +435,7 @@ export const theme = {
     dividerColor: Colors.neutral[30],
     backLink: {
       color: {
+        disabled: Colors.neutral[50],
         normal: Colors.brand[70],
         hover: Colors.brand[60],
       },
@@ -964,6 +965,7 @@ export const darkTheme: ThemeType = {
     dividerColor: Colors.neutral[50],
     backLink: {
       color: {
+        disabled: Colors.neutral[50],
         normal: Colors.brand[30],
         hover: Colors.brand[15],
       },

From 53de644d18510fab2e154fdf3295272f51427b74 Mon Sep 17 00:00:00 2001
From: Alexis Demetriou <alex.demetriouad@gmail.com>
Date: Thu, 22 Aug 2024 11:35:58 +0300
Subject: [PATCH 2/8] Fixed active full path Kafka instance

---
 frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index f2623a671..1558e41ba 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -37,7 +37,7 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
     'transparent'
   );
 
-  const getIsMenuItemActive = (path: string) => location.pathname === path;
+  const getIsMenuItemActive = (path: string) => location.pathname.includes(path);
 
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);

From 2bac23b8135352c44a1c10e790c8bad865a8c598 Mon Sep 17 00:00:00 2001
From: Alexis Demetriou <alex.demetriouad@gmail.com>
Date: Thu, 22 Aug 2024 11:36:45 +0300
Subject: [PATCH 3/8] Fixed active full path Kafka instance

---
 frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index 1558e41ba..29f12b8cf 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -37,7 +37,8 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
     'transparent'
   );
 
-  const getIsMenuItemActive = (path: string) => location.pathname.includes(path);
+  const getIsMenuItemActive = (path: string) =>
+    location.pathname.includes(path);
 
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);

From 16c8d492b0fcf52f54589019f02c200f0b509d80 Mon Sep 17 00:00:00 2001
From: Alexis Demetriou <alex.demetriouad@gmail.com>
Date: Mon, 16 Sep 2024 13:21:34 +0300
Subject: [PATCH 4/8] Fixed tests errors

---
 .../Connect/List/__tests__/ListPage.spec.tsx         |  4 ++--
 .../Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx   |  7 -------
 frontend/src/components/Nav/__tests__/Nav.spec.tsx   |  4 ++--
 .../src/components/Topics/New/__test__/New.spec.tsx  | 12 ++++++------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx b/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
index 0cbe4dd78..2e19eaa63 100644
--- a/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
+++ b/frontend/src/components/Connect/List/__tests__/ListPage.spec.tsx
@@ -49,7 +49,7 @@ describe('Connectors List Page', () => {
     it('renders header without create button for readonly cluster', async () => {
       await renderComponent({ ...initialValue, isReadOnly: true });
       expect(
-        screen.getByRole('heading', { name: 'Connectors' })
+        screen.getByRole('heading', { name: /local \/ Connectors/ })
       ).toBeInTheDocument();
       expect(
         screen.queryByRole('link', { name: 'Create Connector' })
@@ -59,7 +59,7 @@ describe('Connectors List Page', () => {
     it('renders header with create button for read/write cluster', async () => {
       await renderComponent();
       expect(
-        screen.getByRole('heading', { name: 'Connectors' })
+        screen.getByRole('heading', { name: /local \/ Connectors/ })
       ).toBeInTheDocument();
       expect(
         screen.getByRole('link', { name: 'Create Connector' })
diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index e998b820e..5d536fabe 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import ClusterMenu from 'components/Nav/ClusterMenu/ClusterMenu';
-import userEvent from '@testing-library/user-event';
 import { clusterConnectorsPath } from 'lib/paths';
 import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
@@ -31,8 +30,6 @@ describe('ClusterMenu', () => {
     render(setupComponent(onlineClusterPayload));
     expect(getCluster()).toBeInTheDocument();
 
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(4);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -50,8 +47,6 @@ describe('ClusterMenu', () => {
         ],
       })
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(7);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -80,8 +75,6 @@ describe('ClusterMenu', () => {
       }),
       { initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)] }
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(5);
 
     const kafkaConnect = getKafkaConnect();
diff --git a/frontend/src/components/Nav/__tests__/Nav.spec.tsx b/frontend/src/components/Nav/__tests__/Nav.spec.tsx
index 582c34141..5ce170093 100644
--- a/frontend/src/components/Nav/__tests__/Nav.spec.tsx
+++ b/frontend/src/components/Nav/__tests__/Nav.spec.tsx
@@ -34,8 +34,8 @@ describe('Nav', () => {
 
   it('renders ClusterMenu', () => {
     renderComponent([onlineClusterPayload, offlineClusterPayload]);
-    expect(screen.getAllByRole('menu').length).toEqual(3);
-    expect(getMenuItemsCount()).toEqual(3);
+    expect(screen.getAllByRole('menu').length).toEqual(5);
+    expect(getMenuItemsCount()).toEqual(9);
     expect(getDashboard()).toBeInTheDocument();
     expect(screen.getByText(onlineClusterPayload.name)).toBeInTheDocument();
     expect(screen.getByText(offlineClusterPayload.name)).toBeInTheDocument();
diff --git a/frontend/src/components/Topics/New/__test__/New.spec.tsx b/frontend/src/components/Topics/New/__test__/New.spec.tsx
index 867291e0b..d5ae67744 100644
--- a/frontend/src/components/Topics/New/__test__/New.spec.tsx
+++ b/frontend/src/components/Topics/New/__test__/New.spec.tsx
@@ -42,24 +42,24 @@ describe('New', () => {
     }));
   });
   it('checks header for create new', async () => {
-    await act(() => {
+    await act(async () => {
       renderComponent(clusterTopicNewPath(clusterName));
     });
-    expect(screen.getByRole('heading', { name: 'Create' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /local \/ Topics \/ Create/ })).toBeInTheDocument();
   });
 
   it('checks header for copy', async () => {
-    await act(() => {
+    await act(async () => {
       renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
     });
-    expect(screen.getByRole('heading', { name: 'Copy' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /local \/ Topics \/ Copy/ })).toBeInTheDocument();
   });
   it('validates form', async () => {
     renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
     await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
     await userEvent.tab();
-    await expect(
+    expect(
       screen.getByText('Topic Name is required')
     ).toBeInTheDocument();
     await userEvent.type(
@@ -68,7 +68,7 @@ describe('New', () => {
     );
     await userEvent.clear(screen.getByLabelText('Number of Partitions *'));
     await userEvent.tab();
-    await expect(
+    expect(
       screen.getByText('Number of Partitions is required and must be a number')
     ).toBeInTheDocument();
 

From 57ae0d679bf8e30cf619c6cca4c948ef4059db5d Mon Sep 17 00:00:00 2001
From: Alexis Demetriou <alex.demetriouad@gmail.com>
Date: Mon, 16 Sep 2024 13:35:44 +0300
Subject: [PATCH 5/8] Fixed isuues

---
 .../Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx   |  1 -
 .../src/components/Topics/New/__test__/New.spec.tsx  | 12 +++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index 5d536fabe..2da2202c8 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -19,7 +19,6 @@ describe('ClusterMenu', () => {
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
-  const getMenuItem = () => screen.getByRole('menuitem');
   const getBrokers = () => screen.getByTitle('Brokers');
   const getTopics = () => screen.getByTitle('Brokers');
   const getConsumers = () => screen.getByTitle('Brokers');
diff --git a/frontend/src/components/Topics/New/__test__/New.spec.tsx b/frontend/src/components/Topics/New/__test__/New.spec.tsx
index d5ae67744..2793840fc 100644
--- a/frontend/src/components/Topics/New/__test__/New.spec.tsx
+++ b/frontend/src/components/Topics/New/__test__/New.spec.tsx
@@ -45,23 +45,25 @@ describe('New', () => {
     await act(async () => {
       renderComponent(clusterTopicNewPath(clusterName));
     });
-    expect(screen.getByRole('heading', { name: /local \/ Topics \/ Create/ })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /local \/ Topics \/ Create/ })
+    ).toBeInTheDocument();
   });
 
   it('checks header for copy', async () => {
     await act(async () => {
       renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
     });
-    expect(screen.getByRole('heading', { name: /local \/ Topics \/ Copy/ })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /local \/ Topics \/ Copy/ })
+    ).toBeInTheDocument();
   });
   it('validates form', async () => {
     renderComponent(clusterTopicNewPath(clusterName));
     await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
     await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
     await userEvent.tab();
-    expect(
-      screen.getByText('Topic Name is required')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Topic Name is required')).toBeInTheDocument();
     await userEvent.type(
       screen.getByLabelText('Number of Partitions *'),
       minValue

From 01e23a0d9f067b1ae0caf8b3e7cd55eb5c6d042d Mon Sep 17 00:00:00 2001
From: Renat Kalimulin <pianoparrot93@gmail.com>
Date: Thu, 1 May 2025 21:51:16 +0300
Subject: [PATCH 6/8] remove clusterName from PageHeading props

---
 frontend/src/components/ACLPage/List/List.tsx |  2 +-
 .../src/components/Brokers/Broker/Broker.tsx  |  1 -
 .../Brokers/BrokersList/BrokersList.tsx       |  2 +-
 .../Connect/Details/DetailsPage.tsx           |  1 -
 .../src/components/Connect/List/ListPage.tsx  |  2 +-
 frontend/src/components/Connect/New/New.tsx   |  1 -
 .../ConsumerGroups/Details/Details.tsx        |  1 -
 .../Details/ResetOffsets/ResetOffsets.tsx     |  1 -
 .../src/components/ConsumerGroups/List.tsx    |  2 +-
 frontend/src/components/KsqlDb/KsqlDb.tsx     |  2 +-
 frontend/src/components/Nav/Menu/MenuTab.tsx  | 38 +++++++++----------
 .../components/Schemas/Details/Details.tsx    |  1 -
 frontend/src/components/Schemas/Diff/Diff.tsx |  1 -
 frontend/src/components/Schemas/Edit/Form.tsx |  1 -
 frontend/src/components/Schemas/List/List.tsx |  2 +-
 frontend/src/components/Schemas/New/New.tsx   |  1 -
 .../src/components/Topics/List/ListPage.tsx   |  6 +--
 frontend/src/components/Topics/New/New.tsx    |  1 -
 .../src/components/Topics/Topic/Topic.tsx     |  1 -
 .../common/PageHeading/PageHeading.tsx        |  5 ++-
 20 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 93a8c1e77..26155172b 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading clusterName={clusterName} text="Access Control List">
+      <PageHeading text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
diff --git a/frontend/src/components/Brokers/Broker/Broker.tsx b/frontend/src/components/Brokers/Broker/Broker.tsx
index cacbc5ae3..bd0056eae 100644
--- a/frontend/src/components/Brokers/Broker/Broker.tsx
+++ b/frontend/src/components/Brokers/Broker/Broker.tsx
@@ -39,7 +39,6 @@ const Broker: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={`Broker ${brokerId}`}
         backTo={clusterBrokersPath(clusterName)}
         backText="Brokers"
diff --git a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
index ae4500953..3ef59d0b5 100644
--- a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Brokers" />
+      <PageHeading text="Brokers" />
 
       <BrokersMetrics
         brokerCount={brokerCount}
diff --git a/frontend/src/components/Connect/Details/DetailsPage.tsx b/frontend/src/components/Connect/Details/DetailsPage.tsx
index 1b8dac420..a5175ea8b 100644
--- a/frontend/src/components/Connect/Details/DetailsPage.tsx
+++ b/frontend/src/components/Connect/Details/DetailsPage.tsx
@@ -24,7 +24,6 @@ const DetailsPage: React.FC = () => {
   return (
     <div>
       <PageHeading
-        clusterName={clusterName}
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
index 0c277523b..5d61ff3c4 100644
--- a/frontend/src/components/Connect/List/ListPage.tsx
+++ b/frontend/src/components/Connect/List/ListPage.tsx
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Connectors">
+      <PageHeading text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
diff --git a/frontend/src/components/Connect/New/New.tsx b/frontend/src/components/Connect/New/New.tsx
index 26a45c07e..db1d82e3c 100644
--- a/frontend/src/components/Connect/New/New.tsx
+++ b/frontend/src/components/Connect/New/New.tsx
@@ -95,7 +95,6 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text="Create new connector"
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/ConsumerGroups/Details/Details.tsx b/frontend/src/components/ConsumerGroups/Details/Details.tsx
index b8d206923..e7f952c8b 100644
--- a/frontend/src/components/ConsumerGroups/Details/Details.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/Details.tsx
@@ -65,7 +65,6 @@ const Details: React.FC = () => {
     <div>
       <div>
         <PageHeading
-          clusterName={clusterName}
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
index 1de88e1f3..0b5864794 100644
--- a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
+++ b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
@@ -38,7 +38,6 @@ const ResetOffsets: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={routerParams.clusterName}
         text={consumerGroupID}
         backTo={clusterConsumerGroupsPath(routerParams.clusterName)}
         backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
index 8b697442c..683f8b27b 100644
--- a/frontend/src/components/ConsumerGroups/List.tsx
+++ b/frontend/src/components/ConsumerGroups/List.tsx
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Consumers" />
+      <PageHeading text="Consumers" />
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Consumer Group ID" />
       </ControlPanelWrapper>
diff --git a/frontend/src/components/KsqlDb/KsqlDb.tsx b/frontend/src/components/KsqlDb/KsqlDb.tsx
index 6876a3685..d105720aa 100644
--- a/frontend/src/components/KsqlDb/KsqlDb.tsx
+++ b/frontend/src/components/KsqlDb/KsqlDb.tsx
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="KSQL DB">
+      <PageHeading text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
index 725bb2025..7620bcbfe 100644
--- a/frontend/src/components/Nav/Menu/MenuTab.tsx
+++ b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -20,27 +20,27 @@ const MenuTab: FC<MenuTabProps> = ({
   isOpen,
   setColorKey,
 }) => (
-    <S.MenuItem $variant="secondary" onClick={onClick}>
-      <S.ContentWrapper>
-        <S.StatusIconWrapper>
-          <S.StatusIcon status={status} aria-label="status">
-            <title>{status}</title>
-          </S.StatusIcon>
-        </S.StatusIconWrapper>
+  <S.MenuItem $variant="secondary" onClick={onClick}>
+    <S.ContentWrapper>
+      <S.StatusIconWrapper>
+        <S.StatusIcon status={status} aria-label="status">
+          <title>{status}</title>
+        </S.StatusIcon>
+      </S.StatusIconWrapper>
 
-        <S.Title title={title}>{title}</S.Title>
-      </S.ContentWrapper>
+      <S.Title title={title}>{title}</S.Title>
+    </S.ContentWrapper>
 
-      <S.ActionsWrapper>
-        <S.ColorPickerWrapper>
-          <MenuColorPicker setColorKey={setColorKey} />
-        </S.ColorPickerWrapper>
+    <S.ActionsWrapper>
+      <S.ColorPickerWrapper>
+        <MenuColorPicker setColorKey={setColorKey} />
+      </S.ColorPickerWrapper>
 
-        <S.ChevronWrapper>
-          <S.ChevronIcon $isOpen={isOpen} />
-        </S.ChevronWrapper>
-      </S.ActionsWrapper>
-    </S.MenuItem>
-  );
+      <S.ChevronWrapper>
+        <S.ChevronIcon $isOpen={isOpen} />
+      </S.ChevronWrapper>
+    </S.ActionsWrapper>
+  </S.MenuItem>
+);
 
 export default MenuTab;
diff --git a/frontend/src/components/Schemas/Details/Details.tsx b/frontend/src/components/Schemas/Details/Details.tsx
index e275226c2..2d0c345d7 100644
--- a/frontend/src/components/Schemas/Details/Details.tsx
+++ b/frontend/src/components/Schemas/Details/Details.tsx
@@ -72,7 +72,6 @@ const Details: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={schema?.subject || ''}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Diff/Diff.tsx b/frontend/src/components/Schemas/Diff/Diff.tsx
index 9100fa6b0..43e31eddf 100644
--- a/frontend/src/components/Schemas/Diff/Diff.tsx
+++ b/frontend/src/components/Schemas/Diff/Diff.tsx
@@ -58,7 +58,6 @@ const Diff: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={`${subject} compare versions`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Edit/Form.tsx b/frontend/src/components/Schemas/Edit/Form.tsx
index fb3775e80..8542732ac 100644
--- a/frontend/src/components/Schemas/Edit/Form.tsx
+++ b/frontend/src/components/Schemas/Edit/Form.tsx
@@ -95,7 +95,6 @@ const Form: React.FC<FormProps> = ({ schema }) => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text={`${subject} Edit`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
index 084556306..5e4daf5f4 100644
--- a/frontend/src/components/Schemas/List/List.tsx
+++ b/frontend/src/components/Schemas/List/List.tsx
@@ -60,7 +60,7 @@ const List: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Schema Registry">
+      <PageHeading text="Schema Registry">
         {!isReadOnly && (
           <>
             <GlobalSchemaSelector />
diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
index 3f45b8364..4bfcc4605 100644
--- a/frontend/src/components/Schemas/New/New.tsx
+++ b/frontend/src/components/Schemas/New/New.tsx
@@ -72,7 +72,6 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text="Create"
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Topics/List/ListPage.tsx b/frontend/src/components/Topics/List/ListPage.tsx
index 9645882ba..fc1c9dad6 100644
--- a/frontend/src/components/Topics/List/ListPage.tsx
+++ b/frontend/src/components/Topics/List/ListPage.tsx
@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { ClusterNameRoute, clusterTopicNewRelativePath } from 'lib/paths';
+import { clusterTopicNewRelativePath } from 'lib/paths';
 import { PER_PAGE } from 'lib/constants';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import { ActionButton } from 'components/common/ActionComponent';
 import PageHeading from 'components/common/PageHeading/PageHeading';
-import useAppParams from 'lib/hooks/useAppParams';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import Switch from 'components/common/Switch/Switch';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -16,7 +15,6 @@ import { Action, ResourceType } from 'generated-sources';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
-  const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Set the search params to the url based on the localStorage value
@@ -48,7 +46,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Topics">
+      <PageHeading text="Topics">
         {!isReadOnly && (
           <ActionButton
             buttonType="primary"
diff --git a/frontend/src/components/Topics/New/New.tsx b/frontend/src/components/Topics/New/New.tsx
index cbeb4f8a0..acc63185f 100644
--- a/frontend/src/components/Topics/New/New.tsx
+++ b/frontend/src/components/Topics/New/New.tsx
@@ -50,7 +50,6 @@ const New: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={search ? 'Copy' : 'Create'}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
index b24e1cf82..a40bcfc12 100644
--- a/frontend/src/components/Topics/Topic/Topic.tsx
+++ b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -68,7 +68,6 @@ const Topic: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={topicName}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/common/PageHeading/PageHeading.tsx b/frontend/src/components/common/PageHeading/PageHeading.tsx
index 56624254c..8762e38a3 100644
--- a/frontend/src/components/common/PageHeading/PageHeading.tsx
+++ b/frontend/src/components/common/PageHeading/PageHeading.tsx
@@ -1,23 +1,24 @@
 import React, { PropsWithChildren } from 'react';
 import Heading from 'components/common/heading/Heading.styled';
+import { ClusterGroupParam } from 'lib/paths';
+import useAppParams from 'lib/hooks/useAppParams';
 
 import * as S from './PageHeading.styled';
 
 interface PageHeadingProps {
   text: string;
-  clusterName?: string;
   backTo?: string;
   backText?: string;
 }
 
 const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   text,
-  clusterName,
   backTo,
   backText,
   children,
 }) => {
   const isBackButtonVisible = backTo && backText;
+  const { clusterName } = useAppParams<ClusterGroupParam>();
 
   return (
     <S.Wrapper>

From ed3f758f921673034cd8cf123b9083e3b4474041 Mon Sep 17 00:00:00 2001
From: Renat Kalimulin <pianoparrot93@gmail.com>
Date: Wed, 14 May 2025 09:12:33 +0300
Subject: [PATCH 7/8] fixes after review

---
 frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx | 2 +-
 frontend/src/components/Nav/Nav.tsx                     | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
index 29f12b8cf..ec8aa641a 100644
--- a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -20,7 +20,7 @@ interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  openTab?: string | false;
+  openTab: string | undefined;
   onTabClick: (tabName: string) => void;
 }
 
diff --git a/frontend/src/components/Nav/Nav.tsx b/frontend/src/components/Nav/Nav.tsx
index a9bbf45b1..3c83edd17 100644
--- a/frontend/src/components/Nav/Nav.tsx
+++ b/frontend/src/components/Nav/Nav.tsx
@@ -6,13 +6,9 @@ import MenuItem from './Menu/MenuItem';
 import ClusterMenu from './ClusterMenu/ClusterMenu';
 
 const Nav: FC = () => {
-  const [openTab, setOpenTab] = useState<string | false>(false);
+  const [openTab, setOpenTab] = useState<string>();
   const { isSuccess, data: clusters } = useClusters();
 
-  const handleTabChange = (tabName: string) => {
-    setOpenTab((prev) => (prev === tabName ? false : tabName));
-  };
-
   return (
     <aside aria-label="Sidebar Menu">
       <S.List>
@@ -26,7 +22,7 @@ const Nav: FC = () => {
             status={cluster.status}
             features={cluster.features}
             openTab={openTab}
-            onTabClick={() => handleTabChange(cluster.name)}
+            onTabClick={() => setOpenTab(cluster.name)}
           />
         ))}
     </aside>

From e538f918241eefc4af760fc4dad30f7275ff9196 Mon Sep 17 00:00:00 2001
From: Renat Kalimulin <pianoparrot93@gmail.com>
Date: Mon, 19 May 2025 20:57:49 +0300
Subject: [PATCH 8/8] types fixes

---
 .../components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
index 2da2202c8..c1aaecf30 100644
--- a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
+++ b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -9,7 +9,7 @@ import { onlineClusterPayload } from 'lib/fixtures/clusters';
 describe('ClusterMenu', () => {
   const handleTabClick = jest.fn();
 
-  const setupComponent = (cluster: Cluster, openTab?: string | false) => (
+  const setupComponent = (cluster: Cluster, openTab?: string) => (
     <ClusterMenu
       name={cluster.name}
       status={cluster.status}