navigation to brokers page through cluster menu

Author: Leshe4ka

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

@@ -14,7 +14,7 @@ import {
   clusterTopicsPath,
   kafkaConnectPath,
 } from 'lib/paths';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 import { ClusterColorKey } from 'theme/theme';
 import useScrollIntoView from 'lib/hooks/useScrollIntoView';
@@ -34,8 +34,10 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
 }) => {
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);
+
   const [isOpen, setIsOpen] = useState(!!opened);
   const location = useLocation();
+  const navigate = useNavigate();
   const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
     `clusterColor-${name}`,
     'transparent'
@@ -47,13 +49,25 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
 
   const { ref } = useScrollIntoView<HTMLUListElement>(opened);
 
+  const handleClusterNameClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    navigate(clusterBrokersPath(name));
+  };
+
+  const handleToggleMenu = () => {
+    setIsOpen((prev) => !prev);
+  };
+
   return (
     <S.ClusterList role="menu" $colorKey={colorKey} ref={ref}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
-        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        toggleClusterMenu={handleToggleMenu}
+        onClusterNameClick={handleClusterNameClick}
         setColorKey={setColorKey}
         isActive={opened}
       />

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

@@ -10,43 +10,55 @@ export interface MenuTabProps {
   status: ServerStatus;
   isOpen: boolean;
   toggleClusterMenu: () => void;
+  onClusterNameClick: () => void;
   setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
   isActive?: boolean;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
   title,
   toggleClusterMenu,
+  onClusterNameClick,
   status,
   isOpen,
   setColorKey,
   isActive = false,
-}) => (
-  <S.MenuItem
-    $variant="primary"
-    onClick={toggleClusterMenu}
-    $isActive={isActive}
-  >
-    <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.ActionsWrapper>
-      <S.ColorPickerWrapper>
-        <MenuColorPicker setColorKey={setColorKey} />
-      </S.ColorPickerWrapper>
-
-      <S.ChevronWrapper>
-        <S.ChevronIcon $isOpen={isOpen} />
-      </S.ChevronWrapper>
-    </S.ActionsWrapper>
-  </S.MenuItem>
-);
+}) => {
+  const handleNameClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClusterNameClick();
+  };
+
+  const handleChevronClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleClusterMenu();
+  };
+
+  return (
+    <S.MenuItem $variant="primary" $isActive={isActive}>
+      <S.ContentWrapper onClick={handleNameClick} style={{ cursor: 'pointer' }}>
+        <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.ActionsWrapper>
+        <S.ColorPickerWrapper>
+          <MenuColorPicker setColorKey={setColorKey} />
+        </S.ColorPickerWrapper>
+
+        <S.ChevronClickArea onClick={handleChevronClick}>
+          <S.ChevronWrapper>
+            <S.ChevronIcon $isOpen={isOpen} />
+          </S.ChevronWrapper>
+        </S.ChevronClickArea>
+      </S.ActionsWrapper>
+    </S.MenuItem>
+  );
+};
 
 export default MenuTab;

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

@@ -50,6 +50,7 @@ export const ContentWrapper = styled.div`
   display: flex;
   align-items: center;
   column-gap: 4px;
+  width: 100%;
 `;
 
 export const Title = styled.div`
@@ -85,6 +86,16 @@ export const StatusIcon = styled.circle.attrs({
   `;
 });
 
+export const ChevronClickArea = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  border-radius: 4px;
+`;
+
 export const ChevronWrapper = styled.svg.attrs({
   viewBox: '0 0 10 6',
   xmlns: 'http://www.w3.org/2000/svg',