Fixed active sidebar menu is highlighted for the correct Kafka instance #324

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"

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"

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}

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"

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={

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' })

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"

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"

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"

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>

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"

frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx

@@ -1,103 +1,98 @@
-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';
 
 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 getIsMenuItemActive = (path: string) =>
     location.pathname.includes(path);
 
+  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
+    features?.includes(key);
+
   return (
     <ul role="menu">
       <MenuTab
         title={name}
         status={status}
-        isOpen={isOpen}
-        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        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"
             />
           )}
           {(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>
     </ul>
   );
 };

frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx

@@ -2,22 +2,23 @@ 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';
 
 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');
-  const getMenuItem = () => screen.getByRole('menuitem');
   const getBrokers = () => screen.getByTitle('Brokers');
   const getTopics = () => screen.getByTitle('Brokers');
   const getConsumers = () => screen.getByTitle('Brokers');
@@ -28,8 +29,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();
@@ -47,8 +46,6 @@ describe('ClusterMenu', () => {
         ],
       })
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(7);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -59,7 +56,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)],
     });
 
@@ -77,8 +74,6 @@ describe('ClusterMenu', () => {
       }),
       { initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)] }
     );
-    expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
     expect(getMenuItems().length).toEqual(5);
 
     const kafkaConnect = getKafkaConnect();

frontend/src/components/Nav/Menu/MenuTab.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { FC } from 'react';
 import { ServerStatus } from 'generated-sources';
 
 import * as S from './styled';
@@ -7,16 +7,11 @@ export interface MenuTabProps {
   title: string;
   status: ServerStatus;
   isOpen: boolean;
-  toggleClusterMenu: () => void;
+  onClick: () => void;
 }
 
-const MenuTab: FC<MenuTabProps> = ({
-  title,
-  toggleClusterMenu,
-  status,
-  isOpen,
-}) => (
-  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
+const MenuTab: FC<MenuTabProps> = ({ title, status, isOpen, onClick }) => (
+  <S.MenuItem $variant="primary" onClick={onClick}>
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">

frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx

@@ -14,7 +14,7 @@ describe('MenuTab component', () => {
       status={ServerStatus.ONLINE}
       isOpen
       title={testClusterName}
-      toggleClusterMenu={toggleClusterMenuMock}
+      onClick={toggleClusterMenuMock}
       {...props}
     />
   );

frontend/src/components/Nav/Nav.styled.ts

@@ -11,3 +11,12 @@ export const List = styled.ul.attrs({ role: 'menu' })`
     margin-bottom: 2px;
   }
 `;
+
+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;
+`;

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>

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

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)}