FE: UX: Fix Multiple clusters' menu items selected at once

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/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,18 +20,17 @@ interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  singleMode?: boolean;
+  openTab: string | undefined;
+  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}`,
@@ -48,63 +40,66 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
   const getIsMenuItemActive = (path: string) =>
     location.pathname.includes(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"
             />
           )}
           {(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>
   );
 };

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

@@ -9,18 +9,18 @@ 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.MenuItem $variant="secondary" onClick={onClick}>
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">

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

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;
+`;

frontend/src/components/Nav/Nav.tsx

@@ -1,26 +1,28 @@
+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>();
+  const { isSuccess, data: clusters } = useClusters();
 
   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={() => setOpenTab(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/Topics/New/__test__/New.spec.tsx

@@ -42,33 +42,35 @@ 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(
-      screen.getByText('Topic Name is required')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Topic Name is required')).toBeInTheDocument();
     await userEvent.type(
       screen.getByLabelText('Number of Partitions *'),
       minValue
     );
     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();
 

frontend/src/components/common/PageHeading/PageHeading.styled.ts

@@ -6,23 +6,24 @@ 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;
 
   &: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`