FE: Navigation to brokers page from dashboard (#1350)

Co-authored-by: Leshe4ka <[email protected]>

Author: Leshe4ka

frontend/src/components/Dashboard/ClusterTableActionsCell.tsx

@@ -18,12 +18,17 @@ const ClusterTableActionsCell: React.FC<Props> = ({ row }) => {
     );
   }, [data]);
 
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
     <ActionCanButton
       buttonType="secondary"
       buttonSize="S"
       to={clusterConfigPath(name)}
       canDoAction={hasPermissions}
+      onClick={handleClick}
     >
       Configure
     </ActionCanButton>

frontend/src/components/Dashboard/Dashboard.tsx

@@ -5,21 +5,23 @@ import { Tag } from 'components/common/Tag/Tag.styled';
 import Switch from 'components/common/Switch/Switch';
 import { useClusters } from 'lib/hooks/api/clusters';
 import { Cluster, ResourceType, ServerStatus } from 'generated-sources';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, Row } from '@tanstack/react-table';
 import Table, { SizeCell } from 'components/common/NewTable';
 import useBoolean from 'lib/hooks/useBoolean';
-import { clusterNewConfigPath } from 'lib/paths';
+import { clusterBrokersPath, clusterNewConfigPath } from 'lib/paths';
 import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
 import { ActionCanButton } from 'components/common/ActionComponent';
 import { useGetUserInfo } from 'lib/hooks/api/roles';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import { useNavigate } from 'react-router-dom';
 
 import * as S from './Dashboard.styled';
 import ClusterName from './ClusterName';
 import ClusterTableActionsCell from './ClusterTableActionsCell';
 
 const Dashboard: React.FC = () => {
   const { data } = useGetUserInfo();
+  const navigate = useNavigate();
   const clusters = useClusters();
   const { value: showOfflineOnly, toggle } = useBoolean(false);
   const appInfo = React.useContext(GlobalSettingsContext);
@@ -92,6 +94,10 @@ const Dashboard: React.FC = () => {
 
   const columnSizingPersister = useLocalStoragePersister('KafkaConnect');
 
+  const onRowClick = (row: Row<Cluster>) => {
+    navigate(clusterBrokersPath(row.original.name));
+  };
+
   return (
     <>
       <PageHeading text="Dashboard" />
@@ -128,6 +134,7 @@ const Dashboard: React.FC = () => {
         )}
       </S.Toolbar>
       <Table
+        onRowClick={onRowClick}
         columns={columns}
         data={config?.list}
         enableSorting

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

@@ -28,7 +28,6 @@ describe('ClusterMenu', () => {
   const getKafkaConnect = () => screen.getByTitle('Kafka Connect');
   const getCluster = () => screen.getByText(onlineClusterPayload.name);
 
-  // Хелпер для клика по шеврону - ищем SVG с шевроном
   const clickChevron = async () => {
     const chevronSvg = document.querySelector('svg[viewBox="0 0 10 6"]');
     if (chevronSvg) {